I have managed to get a div containing an image to move down the screen and right by a number of pixels. What I would really like is for this div to move all the way down the screen, no matter what size the screen is so that it rests on the bottom. Can anyone give me any pointers?
Here is a js/jquery function that I use to ensure a left menu is does not go off screen. Similar logic may help you.
function keepMenuLeft(){ var div_width = $("li.hovering div").width();
var screen_width = $(window).width();
var offset = $("li.hovering div").offset();
var left = 0;
if (offset.left + div_width > screen_width) {
left = (offset.left + div_width) - screen_width;
left = 0 -left - 30; //extra 30 (px) account for padding and margins
left = left + "px";
$("li.hovering div.mega_menu").css('left',left);
$("li.hovering div.mega_menu").css('position','relative');
}
}
You should be able to get the screen height using $(window).height(); and then determine your divs height using $(“some_divs_id”).height. Then you just have to calcultat screen height - div width to give you the point to position the top of your div using css. Use the example above for some reference.
Thanks Steve, but regret to say these aren’t my images, I am just the web designer - and priveleged to be so when I can work with photographs like these