SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,018
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)

    scroll() conundrum

    Hey there,

    I've created a function that I use to center browsers when the content (generally artistic flash sites) is too wide but I've run into a wierd IE problem.

    I use a simple process to determine how much to scroll and then use scroll() to adjust the scroll at page load and resize.

    The process is as follows:


    1. Get the width of the browser window
    2. Get the width of the flash movie
    3. myscroll = (flash_movie_width - browser_width)/2
    4. scroll(myscroll, 0);
    Once translated to a javascript function Internet Explorer will not recognize or apply the value of "myscroll".

    I rewrote the function to print the value to the screen and applied the number for different screen sizes and it worked just fine in IE so I know that my calculations are right. I have also tried to use eval(), parseInt without any effect.

    Here's my function
    Code:
       function centerpage(flashwidth){
        
        	//opera Netscape 6 Netscape 4x Mozilla 
        	if (window.innerWidth || window.innerHeight)
        	{ 
        		//width of my window
        		docwidth = window.innerWidth;
        		myscroll = parseInt((flashwidth-docwidth)/2);
        
        		if(myscroll<=0){myscroll=0;}
        
        	} 
        
        	//IE Mozilla 
        	if (document.body.clientWidth || document.body.clientHeight)
        	{ 
        		//width of my window
        		docwidth = document.body.clientWidth;
        		myscroll = parseInt((flashwidth-docwidth)/2);
        
        		if(myscroll<=0){myscroll=0;}
        
        	} 
        
        	scroll(myscroll,0);
        
        }
    Use it by adding the following in the body tag of your page:
    onload="centerpage(some_number);"

    It works in Firefox, Netscape, Opera, Linux, Mac, PC but... IE has a bit of a problem with it. Any thoughts?

    Thanks,
    Andrew
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development

  2. #2
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tested it using IE6 PC on the following test page and it worked for me.

    Code:
    <html>
    <head>
    <script language="JavaScript">
       function centerpage(flashwidth){
        
        	//opera Netscape 6 Netscape 4x Mozilla 
        	if (window.innerWidth || window.innerHeight)
        	{ 
        		//width of my window
        		docwidth = window.innerWidth;
        		myscroll = parseInt((flashwidth-docwidth)/2);
        
        		if(myscroll<=0){myscroll=0;}
        
        	} 
        
        	//IE Mozilla 
        	if (document.body.clientWidth || document.body.clientHeight)
        	{ 
        		//width of my window
        		docwidth = document.body.clientWidth;
        		myscroll = parseInt((flashwidth-docwidth)/2);
        
        		if(myscroll<=0){myscroll=0;}
        
        	} 
        
        	scroll(myscroll,0);
        
        }
    </script>
    </head>
    <body>
    <div style="background-color: red; width: 800px; height: 500px;" onclick="centerpage(800);"></div>
    </body>
    </html>

  3. #3
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,018
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hey Jim,
    Thanks for looking at that.

    I gave your test a run and it does indeed work but... The function doesn't run on page load or resize. It also doesn't run as a hyperlink:
    <a href="javascript:centerpage(1250);">center page</a>

    It apears that IE is the only one that doesn't run it and I'm baffled.
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development

  4. #4
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Weird, again this works for me (IE version is 6.0.2800.1106):
    Code:
    <html>
    <head>
    <script language="JavaScript">
       function centerpage(flashwidth){
        
        	//opera Netscape 6 Netscape 4x Mozilla 
        	if (window.innerWidth || window.innerHeight)
        	{ 
        		//width of my window
        		docwidth = window.innerWidth;
        		myscroll = parseInt((flashwidth-docwidth)/2);
        
        		if(myscroll<=0){myscroll=0;}
        
        	} 
        
        	//IE Mozilla 
        	if (document.body.clientWidth || document.body.clientHeight)
        	{ 
        		//width of my window
        		docwidth = document.body.clientWidth;
        		myscroll = parseInt((flashwidth-docwidth)/2);
        
        		if(myscroll<=0){myscroll=0;}
        
        	} 
        
        	scroll(myscroll,0);
        
        }
    </script>
    </head>
    <body onload="centerpage(800);" onresize="centerpage(800);">
    <div style="background-color: red; width: 800px; height: 500px;" onclick="centerpage(800);"></div>
    <a href="javascript:centerpage(800);">center page</a>
    </body>
    </html>

  5. #5
    SitePoint Wizard bronze trophy
    Join Date
    Oct 2001
    Location
    Vancouver BC Canada
    Posts
    2,018
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Thanks again Jim,

    I finally figured it out and wouldn't have done it without your examples.

    It's the XHTML doctype that buggered it up in IE

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    Once I removed that it works just fine so.... I suppose this will be an HTML 4 only function unless anyone knows how to circumvent that. Again, this is an IE only issue.

    Thanks again,
    Andrew
    Last edited by awasson; Feb 5, 2005 at 17:52.
    Andrew Wasson | www.lunadesign.org
    Principal / Internet Development


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
  •