want to reload when user resizes - IE gets into a loop

Discussion in 'JavaScript' started by maxelcat, May 11, 2007.

0
  1. #1
    Dear All

    I have been working on a design using javascript, css and html. Its not complex. I have a left and right column of 200px widths. I set a wrapper to 95% and then use some javascript to work out what the width of the middle column should be and set it.

    It all works fine. I added a little bit of code into the body tag so that if the user resizes their browser then the page reloads. This works fine in Opera and FF. However, in IE7 it appears to get into some sort of loop.

    ANy ideas please.

    You can see the offending page at

    www.maxelcat.co.uk/tests/test_index.html

    I would really appreciate any help with this

    thanks

    Edward

    here's what I have in the html

    
<body onResize="window.location.href = window.location.href;">
    Code (markup):
    and here's the javascript (stripped down)


    
window.onload=liveWidth;

function liveWidth() {
	
	var liveWidth = document.body.clientWidth;
	
	var wrapperWidth=document.getElementById("wrapper").offsetWidth;
	var centerWidth = wrapperWidth-(200+200+20+3);
	document.getElementById("center_col").style.width=centerWidth+"px";
	
}
    Code (markup):
     
    maxelcat, May 11, 2007 IP
  2. Aztral

    Aztral Well-Known Member

    Messages:
    344
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    125
    #2
    This could be the problem. ^

    I think you want OnResize="liveWidth();" What is happening in your code is like this

    currentpage = window.location.href; //Cool..you got current page
    window.location.href = currentpage;//Oh Oh! Changing the current page..effectively reloading it...which in turn calls OnResize which....... I'm surprized this works in any browser actually

    i do something similiar on my site.

    there is a way to do this without using javascript, but it doesn't work 100% of the time. So stick with javascript resizing :)
     
    Aztral, May 17, 2007 IP
  3. maxelcat

    maxelcat Member

    Messages:
    5
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    36
    #3
    Thanks for the reply

    Yes I see what you mean - there's the loop!

    Got it to work now!

    Interesting what you say about using javascript. Was advised that best not to use Javascript because some people have it turned off. What I am discivering is that Web developemtn is far, far from being an exact science - its all compromise. I find that very frustrating really!

    I have been playing with the alistpart "Holy Grail" version using css. Actually got it working, with padding in IE6,7,FF, NS,Opera. Don't know about Mac - don't care either!!! Had to use some ugly extra divs but sometimes elegance is an luxury.

    thanks for your post - appreciate it

    Edward
     
    maxelcat, May 17, 2007 IP
  4. Aztral

    Aztral Well-Known Member

    Messages:
    344
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    125
    #4
    Glad to help :)
    It is true some people have js turned off (don't know the numbers), but at one point I had a totally fluid layout without using js and it worked...mostly.
    It was at those times when it didn't exactly look quite right that prompted me to stick with js for resizing stuff (i had js way working first, then wanted to try an economize).

    Anyway, gratz!
     
    Aztral, May 17, 2007 IP
  5. Aztral

    Aztral Well-Known Member

    Messages:
    344
    Likes Received:
    15
    Best Answers:
    0
    Trophy Points:
    125
    #5
    Actually, I finally have some javascriptless html/css that seems to be working. I'm glad you posted your question cause it got me working on this again :) Anyway, this code should do what you want. You can remove background stuff if needed and change heights. also change 170px to 200px for your case :)

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Banner Fluid</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    html,body{margin:0px;padding:0}
    body{font: 76% arial,sans-serif}

    div#main{ width:100%; height:300px; background-color:#00CCFF;}


    div#container{ width:80%; margin:0;}
    div#wrapper{float:left;width:100%;height:100px;}
    div#content{margin: 0 170px 0 170px; height:100px;}

    div#navigation{float:left;width:170px;margin-left:-100%; height:100px;}
    div#extra{float:left; width:170px;margin-left:-170px; height:100px;}

    .banner
    {
    background-image: url(/images/logo.png);
    }

    .topleft
    {
    background-repeat:no-repeat;
    background-position: 0px 0px;
    }

    .topcenter
    {
    background-repeat:repeat-x;
    background-position: 0px -100px;
    }

    .topright
    {
    background-repeat:no-repeat;
    background-position: -0px -200px;
    }

    </style>
    </head>
    <body>
    <div id="main" align="center">
    <div id="container" align="left">
    <div id="wrapper">
    <div id="content" class="topcenter banner"></div>
    </div>
    <div id="navigation" class="topleft banner"> </div>
    <div id="extra" class="topright banner"> </div>
    </div>
    </div>
    </body>
    </html>
     
    Aztral, May 18, 2007 IP