SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy IE freezes when I set the height of a div

    Hi,

    I was using a piece of javascript function that I found online(unfortunately, I lost the source of this function), which basically provides the screen size. I added a few more lines to use that function so that when the user change the window size, the content div resizes as well.(didn't want the user to scroll down or sideways). Everything works except when I resize the height, IE freezes. Here's the function I am using:
    Code:
    function resize()
    {
    	var contentHolder = document.getElementById('content') ;
    	
    	var availW ;
    	var availH ;
    	
    	if(document.all)
    	{
          availW = document.body.clientWidth;
          availH = document.body.clientHeight;
    	}
       	else
       	{
    		availW = innerWidth;
    	    availH = innerHeight;
       	}
       	
    	contentHolder.style.width = availW - 35 + "px" ;
      	//contentHolder.style.height = availH - 250 + "px" ;
    
    }
    The last commented line works fine in firefox and opera, which is supposed to resize the div so that all the contents are within the browser window and the user doesn't have any scrollbar. But as I mentioned, it's not working in IE. IE resizes the width properly. Any idea why IE is having trouble resizing the height? Please let me know if you think there's a better way of doing this. Thanks
    With Regards
    Pman
    http://www.pmansLab.com

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try this. What does the alert say?

    Code:
    function resize()
    {
        var contentHolder = document.getElementById('content') ;
    
        var availW ;
        var availH ;
    
        if(document.all)
        {
          availW = document.body.clientWidth;
          availH = document.body.clientHeight;
        }
        else
        {
            availW = innerWidth;
            availH = innerHeight;
        }
    
        alert('availW: ' + availW + '\navailH: ' + availH);
        //contentHolder.style.width = availW - 35 + "px" ;
        //contentHolder.style.height = availH - 250 + "px" ;
    }
    For reference: xClientWidth()

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb

    Thanks a lot for your reply. I tried the alert as you mentioned and here's what I got. My screen resolution is 1024x768.

    In firefox the alert shows the following:
    availW: 1024
    availH: 584

    and in IE, I get the following alert 5 times
    availW: 1015
    availH: 622

    But, Looks like IE has more surprizes left. Keeping the alert line in there, I uncommented those two lines that is supposed to resize the div. Now, IE goes in an infinite loop and keep showing me that alert. Only this time, the height is keep increasing by 1px. Not only that, if the value that is being subtracted from availH, which resizes the height, is anything less than 167, then it goes into that infinite loop again. But if I change that value to 167 or higher, than IE doesn't freeze anymore. It resizes the height but, it still shows that alert at least 7/8 times. I recorded the following output for value 167:

    availW: 1015
    availH: 622


    availW: 1015
    availH: 622


    availW: 1007
    availH: 624


    availW: 1003
    availH: 626


    availW: 1003
    availH: 628


    availW: 1015
    availH: 624


    availW: 1007
    availH: 626


    availW: 1003
    availH: 628


    availW: 1003
    availH: 630


    availW: 1003
    availH: 632


    availW: 1003
    availH: 632


    availW: 1003
    availH: 632
    With Regards
    Pman
    http://www.pmansLab.com

  4. #4
    SitePoint Aficionado JVLB's Avatar
    Join Date
    Jan 2002
    Location
    N 44 56.537' W 123 3.683'
    Posts
    1,127
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With current versions of IE you need to use document.body.parentNode.clientHeight and document.body.parentNode.clientWidth. Virtually all newer browsers will work with these properties, as well.

    Remember, in some browsers for the height of the body.parentNode to fill the window, if the content doesn't extend to fill the area, you'll need to specify a CSS rule html,body{height:100%;}.

  5. #5
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi parvez,

    I asked you to try the alert because you said there was an error and I wondered if there was an invalid value for width or height. As far as the changing clientHeight, that is because the body gets taller to accomodate the resized div. Perhaps it would help if we saw the whole page.

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    Quote Originally Posted by MikeFoster
    Hi parvez,

    I asked you to try the alert because you said there was an error and I wondered if there was an invalid value for width or height. As far as the changing clientHeight, that is because the body gets taller to accomodate the resized div. Perhaps it would help if we saw the whole page.
    Hi Mike,

    Thanks for your reply. I was actually trying to make a map of ttc using google map api. anyways... here's the url: http://pmanslab.com/projects/ttcMap/demo/ttcMap.php ; it looks perfect and works perfectly in firefox. I got rid of some stuff from the top of the map and added some contents on the left of the map. So, now, IE has another problem, IE resizes the map when it loads, but it doesn't when the window is resized. I believe it has something to do with the sidebar that I added on the left. Since I removed some contents from the top, now the value that needs to be subtracted from the availH needs to be 100 or more for IE. In case you need to see the modified function, here it is:

    Code:
    function resizeMap()
    {
    	var mapHolder = document.getElementById('mapHolder') ;
    	var sidebar = document.getElementById('sidebar') ;
    	
    	var availW ;
    	var availH ;
    	
    	if(document.all)
    	{
    		availW = document.body.clientWidth;
    		availH = document.body.clientHeight;
    		mapHolder.style.height = availH - 100 + "px" ;
    		sidebar.style.height = availH - 100 + "px" ;
    	}
       	else
       	{
    		availW = innerWidth;
    	    availH = innerHeight;
    		mapHolder.style.height = availH - 70 + "px" ;
    		sidebar.style.height = availH - 70 + "px" ;
       	}
       	//alert('availW: ' + availW + '\navailH: ' + availH);
      	mapHolder.style.width = availW - 350 + "px" ;
      /*alert("done") ;*/
    
    }
    IE is giving me another problem , but that is pure CSS issue, i think. Just look at the sidebar in Firefox and then take a look at it in IE. IE won't display the background color and the border. If you ever had this kind of odd problems or happen to know a quick fix, please let me know. Thanks for your time.
    With Regards
    Pman
    http://www.pmansLab.com

  7. #7
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Good work, it's going to be a nice app!

    Your task is made much easier by the fact that this is a JS-only page - there is no downgrade mode for the page layout. Therefore I suggest that you do not use CSS floats for layout.

    Have a look at the following demo. Feel free to ask any questions about it.

    JS-Only Layout Demo

    In the demo I am using the X library for core DHTML functions. The X library is not a requirement for this demo, you can use anyone's library or make direct DOM calls.

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Hi Mike,

    Thanks a lot for all the help. Finally, I fixed it. That's a very good example that you provided. Although, I didn't use your X library, I think I will be using it for other projects. I found this article written by Mark at http://www.howtocreate.co.uk/tutoria.../browserwindow . The solution that he showed worked. I think, your xClientHeight function is similar to this one except that you are detecting the browser, whereas Mark is doing an object detection (correct me if i'm wrong).

    Anyways... so far everything is working. I checked it on IE 6, FF 1.5 and Opera 9 ( that's all the browsers I got). Haven't uploaded to the server yet. Oh yea... I fixed that css bug for IE also. I just had to add this rule (position: relative ; ) to the parent element. Just because of this IE couldn't display the background color and the borders. Anyways... thanks for all the help. Appreciate it.

    p.s: You have an excellent library. I specially liked that drag and drop function. Wanted to create one myself but didn't have time...
    With Regards
    Pman
    http://www.pmansLab.com

  9. #9
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks parvez,

    Yes, howtocreate.co.uk is an excellent site!

    xClientWidth/xClientHeight have been around for a long time. They still work even for NN4 . The only browser-sniff I still have in them is for Opera 6 and below. I first detect Opera by checking for the 'window.opera' object.

    In Opera (above v6) window.innerHeight and window.innerWidth include the scrollbar size. Also, for Opera you can't use document.documentElement because that will get you the entire size of the page. My functions use document.body for Opera.

    My functions check the value of document.compatMode because there were some early Gecko versions in which document.documentElement existed even when the browser was in quirks mode. Possibly I don't need this check any more.

    I have to admit that I have not yet started testing IE7 nor the very latest Gecko. I'll begin these tests soon.

    For your application, in which window scrollbars are not allowed, using innerWidth/innerHeight should work just fine.

    Btw... I couldn't help but take that demo and show how the page could be made very accessible via fall-back to a CSS layout: Js layout with fall-back to CSS layout

    Have a great day!
    Mike

  10. #10
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just want to clarify that I was not bad mouthing Mark's function. In fact he clearly states on that page that his function does not account for window scrollbars. I think Mark's work is excellent


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
  •