Javascript Layers Positioning Detect Page Scroll, Box Border Scrollbars Overflow

»»» shrink text ««« ««« enlarge text »»»

OBJECTIVE: position any html object on a page accordingly to mouse coordinates as returned by any event of your choice: place correctly taking into account possible document scroll offsets too, and clicks within layers that have scrollable overflow too.  
Do the above detecting also whether the edges of the layer to be positioned overflow the boundaries of a layer within which you have clicked (called the host layer), and automatically reposition the client layer so that its edges do not trespass those of the host: in this regard, allow a stricter implementation namely that not only the host boundaries should not be trespassed, but that, if the host layer has scrollbars and borders, also these latter features should not be trespassed by the edges of the client layer.

function detectOverflow(e/*||null*/, hostObj, clientObj, clientOriginalY/*||0*/, clientOriginalX/*||0*/, strictBoundaries, andReposition){//2.0.0.0
if(e){clientOriginalY=e.pageY; clientOriginalX=e.pageX;}; if(typeof event != 'undefined'){clientOriginalY=event.clientY+document.body.scrollTop; clientOriginalX=event.clientX+document.body.scrollLeft;}
if(window['getComputedStyle']){
	if(getComputedStyle(hostObj, null).getPropertyValue('display')){hostObj.style.display='block';/*or wrong computing*/};
	if(getComputedStyle(clientObj, null).getPropertyValue('display')){clientObj.style.display='block';/*or wrong computing*/};
}
else{
	if(hostObj.currentStyle['display']){hostObj.style.display='block';/*or wrong computing*/};
	if(clientObj.currentStyle['display']){clientObj.style.display='block';/*or wrong computing*/};
}
var clientVerticalPos=clientOriginalY+clientObj.offsetHeight, clientHorizontalPos=clientOriginalX+clientObj.offsetWidth;
var hostVerticalPos=hostObj.offsetTop+hostObj.offsetHeight, hostHorizontalPos=hostObj.offsetLeft+hostObj.offsetWidth;
var toReturn= (strictBoundaries)?[
/******* A C C O U N T  F O R  H O S T  B O U N D A R I E S (border, scrollbars): *******/
/*** V E R T I C A L W I S E: ***/
	/*topwise overflow*/(clientOriginalY>=hostObj.offsetTop && clientOriginalY<hostObj.offsetTop+parseInt((window['getComputedStyle'])?getComputedStyle(hostObj, null).getPropertyValue('border-top-width'):hostObj.currentStyle['border-top-width']))?
	hostObj.offsetTop+parseInt((window['getComputedStyle'])?getComputedStyle(hostObj, null).getPropertyValue('border-top-width'):hostObj.currentStyle['border-top-width'])
	:
	/*bottomwise overflow*/(clientOriginalY+clientObj.clientHeight>hostObj.offsetTop+hostObj.clientHeight+parseInt((window['getComputedStyle'])?getComputedStyle(hostObj, null).getPropertyValue('border-bottom-width'):hostObj.currentStyle['border-bottom-width']))?
	clientOriginalY+((hostVerticalPos-(hostObj.offsetHeight-hostObj.clientHeight)) - clientVerticalPos + parseInt((window['getComputedStyle'])?getComputedStyle(hostObj, null).getPropertyValue('border-bottom-width'):hostObj.currentStyle['border-bottom-width']))
	:
	/*no verticalwise overflow*/clientOriginalY
/*** H O R I Z O N T A L W I S E: ***/
,
	/*leftwise overflow*/(clientOriginalX>=hostObj.offsetLeft && clientOriginalX<hostObj.offsetLeft+parseInt((window['getComputedStyle'])?getComputedStyle(hostObj, null).getPropertyValue('border-left-width'):hostObj.currentStyle['border-left-width']))?
	hostObj.offsetLeft+parseInt((window['getComputedStyle'])?getComputedStyle(hostObj, null).getPropertyValue('border-left-width'):hostObj.currentStyle['border-left-width'])
	:
	/*rightwise overflow*/(clientOriginalX+clientObj.clientWidth>=hostObj.offsetLeft+hostObj.clientWidth+parseInt((window['getComputedStyle'])?getComputedStyle(hostObj, null).getPropertyValue('border-right-width'):hostObj.currentStyle['border-right-width']))?
	clientOriginalX+((hostHorizontalPos-(hostObj.offsetWidth-hostObj.clientWidth)) - clientHorizontalPos + parseInt((window['getComputedStyle'])?getComputedStyle(hostObj, null).getPropertyValue('border-right-width'):hostObj.currentStyle['border-right-width']))
	:
	/*no horizontalwise overflow*/clientOriginalX
]
/******* D O  N O T  A C C O U N T  F O R  H O S T  B O U N D A R I E S: *******/
:
[
(hostVerticalPos - clientVerticalPos)<0 ? /*verticalwise overflow*/clientOriginalY+(hostVerticalPos - clientVerticalPos) : /*no verticalwise overflow*/clientOriginalY
,
(hostHorizontalPos - clientHorizontalPos)<0 ? /*horizontalwise overflow*/clientOriginalX+(hostHorizontalPos - clientHorizontalPos) : /*no horizontalwise overflow*/clientOriginalX
];
if(andReposition){clientObj.style.display='block'; clientObj.style.top=toReturn[0]+'px'; clientObj.style.left=toReturn[1]+'px';};
return toReturn;
/*keep this comment to reuse freely
http://www.fullposter.com/?1*/}

Remove colors  
INPUTS:

1. first input ought to be invoked either as the word event or passed as null or boolean false: this argument if passed represents the coordinates of the mouse upn the event that has called the function.  
   In case this argument is skipped, the fourth and fifth arguments are mandatory.
2. The host layer as an already grabbed Dom object (such as via getElementById).
3. The client layer as an already grabbed Dom object (such as via getElementById).
4. A number representing the current top position of the client layer. If you pass the first argument to the function, any value assigned here would be ignored. It is up to you to always pass such argument with a parseInt() applied to it, for good safety measure.
5. A number representing the current left position of the client layer. If you pass the first argument to the function, any value assigned here would be ignored. It is up to you to always pass such argument with a parseInt() applied to it, for good safety measure.
6. Either boolean true or false. If true, the strict boundaries mode will be applied (that is, the client layer's edges must not trespass the host's scrollbars and borders too, if any.  
   This argument could have to be passed as false if the host is the whole document or the body.
7. Optional: if passed as true, it will also reposition the client layer.

RETURNS: an array of two numbers, the top and left positions (as numbers) resulting from the computations.  
 
Caveats: both the host and client layer are automatically set to visible (display:block) to ensure browsers won't meet problems calculating the correct offsets.  
 
Example of use, providing much html to make a scrollable page:

<h3>Scroll, find the red layer and click on it.</h3>
<div id="client" style="display:none; position:absolute;z-index:10;width:30px; height:30px; background-color:#0000ff;"></div>
The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog

<div id="host" style="position:absolute; top:900px; left:30px;overflow:auto; width:150px; height:100px;background-color:#ff0000; padding:20px; margin:25px; border:#000000 20px double;">
The quick brown fox<br />jumpsssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog</div>

<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog<br />The quick brown fox<br />jumps over<br />the lazy dog



<script>
//place your function here, then:

/*on a layer*/
document.getElementById('host').onmouseup=function(event){
detectOverflow(event, document.getElementById('host'), document.getElementById('client'), 0, 0, true, true);
}

/*or, but comment out above: on page:
document.onmouseup=function(event){
detectOverflow(event, document.documentElement, document.getElementById('client'), 0, 0, true, true);
}
*/
</script>

Remove colors

Visitors: 9,793
Overall visits to all the topics: 4,962,604
Daily average (Calculated from the website subscription day): 2,060.03 Optional sorting commands:
Normal order: click here
Order by amount of visits: click here
Order by category: Programming Javascript
Current order: by category: Psychology Other categories available for this author (Limited data report: 100):
Advice: Martial Arts and Self Defense(4), Books(236), Critical Reviews and Essays(4), Dictionaries(1), Emergency Care(4), Epistles Letters and Advice(5), Fantasy Epics and Fables(1), History and Documents(5), Humor and Jokes(2), Methematics(2), Music and Lyrics(6), News Digests and Press Reviews(1), Novels Poetry and Stories(3), Philosophy Reviews(7), Poetry(1), Programming(4), Programming Ajax(2), Programming Javascript(82), Programming Php(52), Psychology(1), Quotes(1), Religion Esoterica and Spirituality(12), Scientifical Reviews(4), Self Improvement(1), Sport Activities and Apparels(2), Tarots(1) Showing topics: 1, 10
Available total: 448 View only a list of the snippets by this author: click here.
Other topics available for this author: click on any title below to view the complete item: