...

View Full Version : Prevent Page Position Change When Content Is Expanded



DonFetiche
08-20-2010, 05:31 PM
Code is triggered on the following page when mouse position leaves a profile link while logged in: http://www.veinsfetiche.com/forums/


<script type="text/javascript">
// <![CDATA[

// show the popup
function show_popup(UserID) {
if(http_getuser) {

//get user data and show popup
sendRequest(UserID);
}
}

// hide the popup
function close_popup() {
document.getElementById('popup').style.display='none';
}

// Make the request
function createRequestObject() {
if(window.XMLHttpRequest){
ro = new XMLHttpRequest();
} else if(window.ActiveXObject) {
ro = new ActiveXObject("Msxml2.XMLHTTP");
if(!ro) {
ro = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return ro;
}

//Create Request Variables
var http_getuser = createRequestObject();

//Send Request for user info
function sendRequest(UserID) {
var userinfo_url = '{AJAX_USERINFO_PATH}';
http_getuser.open('get', userinfo_url.replace('USERID', UserID));
http_getuser.onreadystatechange = handleResponse;
http_getuser.send(null);
}

// fill in the response
function handleResponse() {
if(http_getuser.readyState == 4 ){
var xmlDoc = http_getuser.responseXML;
if(xmlDoc.hasChildNodes()) {
document.getElementById('ajax_username').innerHTML = xmlDoc.getElementsByTagName('username')[0].firstChild.nodeValue;
document.getElementById('ajax_registert').innerHTML = xmlDoc.getElementsByTagName('regdate')[0].firstChild.nodeValue;
document.getElementById('ajax_posts').innerHTML = xmlDoc.getElementsByTagName('posts')[0].firstChild.nodeValue;
document.getElementById('ajax_website').innerHTML = xmlDoc.getElementsByTagName('website')[0].firstChild.nodeValue;
document.getElementById('ajax_from').innerHTML = xmlDoc.getElementsByTagName('from')[0].firstChild.nodeValue;
document.getElementById('ajax_last_visit').innerHTML = xmlDoc.getElementsByTagName('lastvisit')[0].firstChild.nodeValue;
document.getElementById('ajax_rank').innerHTML = xmlDoc.getElementsByTagName('rank')[0].firstChild.nodeValue;
document.getElementById('ajax_avatar').innerHTML = xmlDoc.getElementsByTagName('avatar')[0].firstChild.nodeValue; //document.getElementById('ajax_add').innerHTML = xmlDoc.getElementsByTagName('add')[0].firstChild.nodeValue;

//Apply style which makes profile info visible
document.getElementById('popup').style.display='block';

//Get height of popup
var getRefById = function() {return null;};

if(document.getElementById) {
getRefById = function(i) {return document.getElementById(i);};
} else if(document.all) {
getRefById = function(i) {return document.all[i] || null;};
}

var d = getRefById('popup'), h = '0px', o;

if(d) {
if((o = document.defaultView) && o.getComputedStyle) {
h = o.getComputedStyle(d, null).height;
} else if('number' == typeof d.offsetHeight) {
h = d.offsetHeight + 'px';
}
}
// 'h' should now contain the height of 'myDiv', or 0px
//alert(h);
//make room for popup
document.getElementById('test').style.height= h;
}
}
}

// set popup to mouse possition
function set_div_to_mouse(e) {
//Make x and y cord vars
var docX, docY;
//get page info
if(e) {
if(typeof(e.pageX) == 'number') { docX = e.pageX; docY = e.pageY;}
else {docX = e.clientX; docY = e.clientY;}
//vert
} else {
e = window.event;
docX = e.clientX; docY = e.clientY;
if(document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
docX += document.documentElement.scrollLeft; docY += document.documentElement.scrollTop;
}
else if(document.body && (document.body.scrollTop || document.body.scrollLeft)) {
docX += document.body.scrollLeft; docY += document.body.scrollTop;
}
}
//hor
if (docX > document.body.offsetWidth - 400) {
document.getElementById('popup').style.left = (docX - 350) + "px";
} else {
document.getElementById('popup').style.left = (docX - 5) + "px";
}
document.getElementById('popup').style.top = (docY + 30) + "px";
}
//document.onmousemove = set_div_to_mouse;
// ]]>

</script>

<div id="test">
<div class="forabg" id="popup" style="width: 90%;">
<div class="inner">
<span class="corners-top"><span></span></span>
<ul class="topiclist fullwidth">
<li class="header"><dl><dt>{L_READ_PROFILE}</dt></dl></li>
</ul>
<ul class="topiclist forums">
<li><dl>
<dd style="width:100%">
<table> <tr> <td><div id="ajax_avatar"></div></td> <td><strong>{L_USERNAME}:</strong> <span id="ajax_username"></span><br /> <strong>{L_TOTAL_POSTS}:</strong> <span id="ajax_posts"></span><br /> <strong>{L_SORT_RANK}:</strong> <span id="ajax_rank"></span><br /> <strong>{L_JOINED}:</strong> <span id="ajax_registert"></span><br /> <strong>{L_LAST_VISIT}:</strong> <span id="ajax_last_visit"></span><br /> <strong>{L_LOCATION}:</strong> <span id="ajax_from"></span><br /> <strong>{L_WEBSITE}:</strong> <span id="ajax_website"></span><br/> <span id="ajax_add"></span> </tr> </table>
<br/ style="clear: both;">
</dd>
</dl></li>
</ul>
<span class="corners-bottom"><span></span></span>
</div>
</div>
</div>

When my code hits line 80, the height of a div tag is increased to make room for expanding content, so that the new content does not overlap already existing content. When the div tag's height increases, this increases the overall page height. When the page height increases, then the scroll bar stays in the same place, but the page position changes in the browser. Is there anyway to prevent the viewer's position from changing when room is made for the expanding content?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum