Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Prevent Page Position Change When Content Is Expanded

    Code is triggered on the following page when mouse position leaves a profile link while logged in: http://www.veinsfetiche.com/forums/

    Code:
    <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?
    Last edited by DonFetiche; 08-21-2010 at 01:17 AM.


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •