SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot blackman890's Avatar
    Join Date
    Feb 2005
    Location
    Iceland
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Problem with Javascript scrollHeight and content being hidden

    Hi there.

    Currently I am encountering a slight problem with my javascript snippet, here's the code:

    Code:
    <script type="text/javascript"> 
    	
    	version=0
    	if (navigator.appVersion.indexOf("MSIE")!=-1){
    	temp=navigator.appVersion.split("MSIE")
    	version=parseFloat(temp[1])
    	}
    	
    	if (version>=7 || version==0) //NON IE browser will return 0
    	{
    		var myWidth = 0, myHeight = 0;
    		if( typeof( window.innerWidth ) == 'number' ) {
    			//Non-IE
    			myWidth = window.innerWidth;
    		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    			//IE 6+ in 'standards compliant mode'
    			myWidth = document.documentElement.clientWidth;
    		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    			//IE 4 compatible
    			myWidth = document.body.clientWidth;
    		}
    		myHeight = document.body.scrollHeight;
    		var i=0
    		for (i=0;i<=50;i++)
    		{
    			document.write('<img class="snow" style="left:' + Math.round((myWidth - 60)*Math.random()) + 'px; top:' + Math.round((myHeight - 35)*Math.random()) + 'px;" src="web/images/snowflake.png">');
    		}
    		for (i=0;i<=100;i++)
    		{
    			document.write('<img class="snow" style="left:' + Math.round((myWidth - 60)*Math.random()) + 'px; top:' + Math.round((myHeight - 35)*Math.random()) + 'px;" width="23" height="26" src="web/images/snowflake.png">');
    		}
    		for (i=0;i<=150;i++)
    		{
    			document.write('<img class="snow" style=" left:' + Math.round((myWidth - 60)*Math.random()) + 'px; top:' + Math.round((myHeight - 35)*Math.random()) + 'px; " width="15" height="18" src="web/images/snowflake.png">');
    		}
    	}
    	
    </script>
    The problem I am encountering is that on some sites, like http://kisildalur.is/?p=2&id=808 there is an extra space below the content while on other sites http://kisildalur.is/?p=1&id=8 there are none. This slight change of height is something beyond my understanding of this problem and I would like for a slight help to fix it.


    P.S.
    I know the code is brutal but it works


    EDIT:
    After some investigation I have found out that the problem might be due to the text in the information table being hidden once the document loads. This however might not occur before my script runs and therefore when my script runs, the whole text in the information table is pushing the content down.

    Does anyone have any suggestion on how to work around this?
    Last edited by blackman890; Dec 3, 2008 at 08:35.
    Jonatan Nilsson
    Iceland
    C# Programmer - XML & DirectX (y = hx + c)

  2. #2
    SitePoint Zealot blackman890's Avatar
    Join Date
    Feb 2005
    Location
    Iceland
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It was as I thought.

    The code was running before Tooltip.js but it's Tooltip.js that is hiding the text. When the code ran before it, the text inside the information table was not hidden and pushing the website content down.

    All I had to do was to change this code into a function and register with the following method:

    Code:
    if (window.addEventListener) {
        window.addEventListener('load', functionName, false);
    } else if (window.attachEvent) {
        window.attachEvent('onload', functionName);
    }
    That was all I needed to do
    Jonatan Nilsson
    Iceland
    C# Programmer - XML & DirectX (y = hx + c)


Bookmarks

Posting Permissions

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