Well, this topic might sound easy but when I and my colleague searched in the net for one of the scenario under this topic,we could not find an easy solution to it.
Now let me describe the scenario:
Consider the image at the right side. Here the first rectangle is the screen. And your webpage size is lesser than the screen. That is it occupies half of the screen. There are spaces on both left and right side of the webpage size. In simpler words, if the screen size is 1024*768, the webpage width is only 862.
Also consider there are 4 menus in the webpage namely A,B,C and D as given in picture.And each menu has its own drop-down menus. This drop-down menus expand and collapse on mouse over and mouse out respectively.
Here the main menu A,B,C and D and drop-down are seperate div.And the div position for the drop-down menu is absolute.
Like in the figure, the last menu's drop-down list goes out of the webpage size limit thus occupying some space in the screen width. To make it come inside the webpage size,we tried a lot of stuffs which didnt work. Finally we came to the below conclusion.
First thing is that we can position the div element to the corresponding place. But when the menus are dynamic we have to find out another solution but with respect to positioning the div.
There is an property in div called div.style.right which has value 0 and 1. 0 means the style of the div becomes right aligned.
Now if we give this, the div will be right aligned to for all the menus. But what we want to achieve is not that rather only for the menu D.
There is another property in html called offset,right? Remember? Wont this be useful to achieve our purpose? Yes, ofcourse it will. Now lets c how we need to use this.
Offset has certain property associated.
offsetParent - is the screen size
offsetWidth - gives the width of the specified object
offsetLeft - Retrieves the left edge of the specified object
offsetRight can be calculated by the sum of left and width
Now,what we need to check is if the div goes beyond right side of the screen, we have to make it to align to right.
var screenRight = div.offsetParent.offsetWidth;
var divRight = div.offsetLeft + div.offsetWidth;
if(divRight > screenRight)
div.style.right =0;
This 3 lines will make the drop-down align to the right of the webpage(i.e. div).
Now this solves the problem.
