I need to get the window height and width of the browser using ATK4, the lightweight php framework with jquery
The javascript to get this would be
$(window).height();
$(window).width();
As agiletoolkit integrates with jquery, i think it should be possible to get it with something like
$height=$p->js()->univ()->_selectorWindow()->height();
but this doesnt work, instead when i pass the $height variable to be used, in the HTML source i get the following .
'height':$(window).univ().height(),'width':$(window).univ().width()
and it doesnt display the element at all
I want to be able to call jqplot to set the width of a graph to the full width of the users browser on a particular page. To do this, i need to pass a parameter which is width:NNN where NNN is the number of pixels wide. As far as i know, jqplot doesnt support a parameter as a percentage so i cant say width:100%. Also, if i set a div on the page and add the graph, it also ignores the size of the div and creates a small graph 400 x 300 pixels only.
I created a plugin to use jqplot from atk4 but this is one of the issues I still need to resolve. I can pass a height and width as parameters without issue but i want it to default to the full screen size if no parameters are specified.
Can anyone suggest the right syntax for getting these values ? TIA.
what you should understand is that "$p->js()->_selectorWindow()->height();" will actually be translated to "$(window).height();" -- but you can get width of window ONLY at client side.
so, if you want to get height of the window in your code, you can do that only by using ajax request, where actual heigh is sent back from the frontend.
please, rephrase your question so that it's clear what you need height for so I can suggest best way of doing that.
example of how to get backend and frontend interlinked:
paste this in page/test.php and open up http://example/test to see in action
class page_test extends Page {
function init(){
parent::init();
$b=$this->add("Button");
$b->set("Get Width");
$b->js("click")->univ()->ajaxec($this->api->getDestinationURL(), array("width" => $this->js(true)->_selectorWindow()->width()));
$v=$this->add("View_HtmlElement")->setElement("div")->set("Click button to get width of the window");
if ($w = $_POST["width"]){
$v->js(null, $v->js()->html("Width: " . $w))->univ()->alert("Width: " . $w)->execute();
}
}
}
Related
For a project I need to load a pdf file onto a div. On clicking a button a canvas will be opened where the user will draw his signature and then on clicking the add button present in the canvas, the user should be able to place the canvas signature as an image on to the pdf. At last on clicking the final button the image should get merged onto the pdf.
I did the above task in the following way:
Converted pdf into series of images using GhostScript.
Loaded the converted images onto a div.
On clicking the button a canvas will be opened and the user will sign in it and on clicking the add button present in the canvas, the user will be able to place the image onto the image of pages loaded in the div.
I obtain the page Id which is the page number and the signature image placed coordinate using e.clientX and e.clientY.
Then I pass all those 3 values to a php script which uses fpdf and fpdi to merge the image onto the pdf.
I'm not able to place the image properly because e.clientX and e.clientY makes use of pixel as units where as fpdf uses mm as units. I'm trying to sort out that.
Is there any other way to do this in a simpler way. i.e., directly loading the pdf onto the div and merging the signature instead of what I've explained above.
You may try Firefox's PDF.js, which you can make use of, in your project. A sample code would be:
PDFJS.getDocument('helloworld.pdf').then(function(pdf) {
// Using promise to fetch the page
pdf.getPage(1).then(function(page) {
var scale = 1.5;
var viewport = page.getViewport(scale);
//
// Prepare canvas using PDF page dimensions
//
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
//
// Render PDF page into canvas context
//
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
There are Javascript-Libraries like Mozillas pdf.js that render PDF-Files directly in the browser into a canvas. That might be a possibility to circumvent the image-rendering process. But as far as I know those libraries have problems with CMYK-PDFs. Therefore the safe way would be to do the image rendering.
As for embedding the signature into the pdf I can't see any other way then the one described by you. The aforementioned libraries all are only displaying the PDF-file so they can not write into the PDF.
Hope that helps
You can look at Applidok PDF service, which allow to have signature area, so that form user will have the chance to either upload signature image, or to draw it on a canvas, so that it get merged on his custom PDF document generated at end.
An example is online at http://pipnee.com/P398D433C .
I'm having issues with adsense on responsive design. One solution I found is to not load them at all if window size is not big enough. So I thought I would create a separate php file with advertisement code, container etc... and than include it on a page. However, I can't figure out how to only include this file if, lets say, window width is 720px or above, else don't include this file.
Perhaps, javascript can be used some way, not sure how it will work with all the dom and php includes though.
You can try something like:
<script language=javascript>
if (screen.width >= 720 )
$('#place_holder_div').load('file_from_server.php');
</script>
Here #place_holder_div is a div in your html file. The syntax is Jquery but of course you can use plain javascript if you wish. The code looks at the screen width and if greater than 720 pixels, loads the php file file_from_server.php (which will contain your ad) into the placeholder div.
The only way to know what the window or screen size of a client is, is by using JavaScript.
window.innerHeight; // Available height of the browser for the document
window.innerWidth; // Available width of the browser for the document
window.outerHeight; // Browser height
window.outerWidth; // Browser width
window.screen.height; // Screen height
window.screen.width; // Screen width
After inspecting these, you could do a HTTP request for the relevant file. It is, however, probably not the best solution since the user can actually change any size mentioned above at any given time.
I read about Masonry and after failing to get image appending to work was advised to switch to the successor Isotope. I was trying to improve or create variations on an album cover gallery, something I've done once or twice before using the same PHP classes.
I can get the basic functionality to work, but a button to click to add more images has always failed to work. I keep reading jQuery documentation and I've tried various JavaScript debuggers but I always end up with no images being added to my gallery when I click.
Trial and error is definitely required to get the best looking layout.
The biggest album cover seems to be 500 pixels with the smallest found in APIs was 75, choosing the right column width helps. I'm currently using 75 but 50 might have worked better. I just want to get adding images to work and be done with this little experiment.
I wanted to try something similar to this technique of appending more images to the bottom. I want to append more album covers which I fetch from various APIs (Amazon Product API, Last.fm, iTunes) using PHP. All the album covers come from APIs and I use PHP to find the URLs given the album title and artist. My code is running: http://www.muschamp.ca/Muskie/cdCoverGalleryV4.php
I've changed the CSS rule many times, now I just have the default CSS suggested by the Isotope author.
PHP Code that loops and produces 10 divs with one image per div
$myAlbumCollection->randomMember();
$count = 0;
print('<div id="container">');
while ( $count < 10 )
{
// Check that current album is in Amazon
$buyLink = $myAlbumCollection->currentAlbumAmazonProductURL();
$imageURL = $myAlbumCollection->currentAlbumRandomImageURL();
if ( (strcmp($buyLink, '#') != 0) && (strcmp($imageURL, myInfo::MISSING_COVER_URL) != 0))
{
$count++;
print('<div class="item">');
print('<a href="' . $buyLink . '">');
print('<img src="' . $imageURL . '" />');
print('</a>');
print('</div>');
}
$myAlbumCollection->goToNextAlbum(); // This could loop forever if it doesn't find enough album covers, but in reality will timeout
}
print('</div>');
And lastly here is the javascript, the final problem is in here somewhere:
<script>
$(function(){
var $container = $('#container');
$('#insert a').click(function(){
var $newEls = $.get('./moreAlbumCovers.php');
$container.isotope( 'insert', $newEls );
return false;
});
$container.isotope({
itemSelector: '.item',
masonry: {
columnWidth: 75
}
});
});
</script>
The link gets called when clicked, I've stepped through it. The PHP produces DIVs As and IMG tags. I really am not sure what I'm doing wrong and repeated readings of the documentation isn't solving it. I've never really been a JavaScript guy. I'm not even a PHP guy, it seems right but repeated efforts to make it go have failed despite generous assistance and offering a bounty.
Thanks for the help.
Try adjusting the columnWidh value and width of item. Masonry aligns element with best fit column first layout. It works on mathematical equations. So a perfect, brick wall fitting is only hypothetical ideal case. It takes me a few tries on firebug and other tools to get the masonry working with ideally fitted layout. The key is to get the value of columnWidth and width, gutter etc in such a way that it solves the logic equations in good values.
:: EDIT ::
I found a link saved in my pockets page, of which i totally forgot about. It is a great tutorial. So i came back to give it here. Recommended to everyone who have trouble getting started with this plugin.
http://www.netmagazine.com/tutorials/get-started-jquery-masonry
Masonry isn't a very descriptive name for it. In fact it's an optimizing problem. It's something that is called np problem because there is too many permutations to check. Especially the masonry jquery plugin is a 1d bin-packing solver and it's arrange the bricks in vertical columns. Css by default arrange the bricks in horizontal order. In other words it's a depth-first sort of an adjacent tree model.
Update: Try adding masonry to your dummy div and delete everthing else:
$('#dummy').load('./moreAlbumCovers.php').masonry("reload");
I think you overthink it. The variable is empty because you assign it to a dom object. It's most likely become also an object and not usefull.
It's relly well explained here Jquery Masonry Seamless Responsive Image Grid + I would try to do exactly the same with isotope http://isotope.metafizzy.co/
edit:
I think isoptope and masonry just sorting out 1 dimensional bin packing, and what you are maybe looking after is 2 dimensional bin packing
like this http://codeincomplete.com/posts/2011/5/7/bin_packing/example/ (check complex case it fits all boxes perfectly )
and lib for that https://github.com/jakesgordon/bin-packing/
To get the more brick wall like effect you don't set an item width using CSS. This wasn't crystal clear given the instructions here. But a lot of testing seems to indicate that just specifying a columnWidth and then letting the browser and javascript do it's best gets closer to the performance I'm looking for. Will have to tweak and eventually try appending...
I am constructing a lighbox gallery, currently experimenting with FancyBox (http://fancybox.net) and ColorBox (http://colorpowered.com/colorbox).
By default you have to include a link to the large version of the image so that the Lightbox can display it. However, I am wanting to have the image link URLs pointing to a script rather than directly to the image file. So for example, instead of:
<a href="mysite/images/myimage.jpg">
I want to do:
<a href="mysite/photos/view/abc123">
The above URL points to a function:
public function actionPhotos($view)
{
$photo=Photo::model()->find('name=:name', array(':name'=>$view));
if(!empty($photo))
{
$user=$photo->user;
$this->renderPartial('_photo', array('user'=>$user, 'photo'=>$photo, true));
}
}
At some point in the future the function will also update the view count of the image.
Now this approach is working to an extent - most images load up but some do not load up (the lightbox gets displayed in a malformed state). I think the reason for this is because it is not processing the function quick enough. For example when I click the "next" button it needs to go to the URL, process the function and retreive/output the response.
Does anybody know how I can get this working properly?
I added "width" and "height" attributes on my image tags and it works fine now.
I have a form on my main page (main.html) with the target set to an iframe on that page. The action of the frame on the main page is a php file.
So, the php file displays in the iframe basically.
Now, I have this script in the php file to get height of content:
var x = document.body.scrollHeight;
window.parent.document.getelementbyid("iframe001").style.height=x;
If I alert x, the scrollheight is there, so x IS the scrollheight definetely. That part works.
But, I cant set that value to the height of the iframe (iframe001).
Any ideas why I cant do this? And how to do it?
Thanks
getelementbyid should be getElementById
also this answer might help you dynamic iframe height depending on PHP content?