Results 1 to 7 of 7

Thread: help with resizing element please

  1. #1
    Join Date
    Dec 2005
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default help with resizing element please

    Hello,
    I am new to this forum and am very new to using javascript. (Translation: I really don't know what I'm doing)
    I have this snippet of code that I have modified and simplified that will resize a page element to fill the available space regardless of the user's resolution. It seems to me it should be possible to combine width and height rather that calling up 'mydiv' twice, but anything I've tried causes an error. And I've written the same code twice since there is quite a difference between what is needed for Firefox and IE and used conditional comments to hide the code for IE from FF. Could this be done using if, else somehow? What I have here seems to work okay, just not sure if it's "right" or if it could be done more effeciently, and would appreciate any suggestions/help from someone that actually knows JS.
    Thanks, Bill

    <script type="text/javascript"> // controls size in Firefox
    document['mydiv'].style.width=screen.width+144
    document['mydiv'].style.height=screen.height+45
    </script>
    <!--[if IE]>
    <script type="text/javascript"> // controls size in IE
    document['mydiv].style.width=screen.width+5
    document['mydiv'].style.height=screen.height+40
    </script>
    <![endif]-->

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Using the screen size is unreliable if the page is loaded in a window that doesn't take up the entire screen. Just setting the element's width to 100% will make it as wide as the window as long as nothing else whose inner dimensions are narrower is containing it. This part can be hard coded into the HTML:

    <div style="width:100%;"></div>

    However, a division's default width is 100%, so even this is not necessary. The height is another issue, generally a division will expand vertically to contain whatever is inside it, as long as nothing with a specific height is containing it. If this isn't good enough, say - you want a border for the entire page or something, use the body tag. In fact, a division that takes up the entire window is the body, why not use it?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2005
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Unfortunatley I have to resort to JS. What I've done is increase the size of an MSN chatroom screen by inserting it's url in an object tag and modified it with the above code. The MSN screen itself is quite small with a lot of wasted space around it so expanding it gets rid of the wasted space, and since it renders quite differently in Firefox I need the two codes. My 1st attempt was setting height and width in the CSS but if I set the height as a percentage to stretch the chatscreen to fill the window at 800X600, then it's too long at 1024x768 and higher. Can that code be modified to something along these lines:

    if IE
    document['mydiv].style.width=screen.width+5 & height=screen.height+40
    else
    document['mydiv'].style.width=screen.width+144 & height=screen.height+45


    That's what I've been trying to do but I don't know enough about JS to know if it can be done like that, or how to write it properly.
    Thanks, Bill

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I still want to get you off of using 'screen' dimensions to resize a division for the reasons already noted. I'd also like to get you off of wanting your code to look real simple. 'Works' is better than 'looks good'. In doing so, I think I will answer your other question of how to distinguish which browser is being used. The consensus in these forums, which I tend to agree with, is that browser testing is less desirable than object testing. Since browsers are always changing, to test for them is complicated and potentially requires that your code be updated for each new version. Testing for browsers also requires that many, many browsers be tested for if you want your code to work with more than just two of them.

    Consider that most browsers will return an accurate value for:

    window.innerHeight

    and:

    window.innerWidth

    And that these values reflect the space available in the user's window, not his screen. Those (generally IE browsers) that do not return any value/don't recognize those as objects will return accurate values for either:

    document.documentElement.clientWidth/Height

    or:

    document.body.clientWidth/Height

    depending upon wether there is a DOCTYPE involved or not, which can also be tested for. So, if you must resize to available dimensions, here is a good way to do it:

    Code:
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function iecompattest(){
    return (document.compatMode && document.compatMode.indexOf("CSS")!=-1)? document.documentElement : document.body
    }
    function resizeDiv(id){
    if ((document.getElementById||document.all)&&(window.innerWidth||iecompattest().clientWidth)){
    var el=document.all? document.all[id].style : document.getElementById(id).style
    el.width=el.height=0
    el.position='absolute'
    el.left=el.top=0
    el.width=window.innerWidth? window.innerWidth+'px' : iecompattest().clientWidth+'px'
    el.height=window.innerHeight? window.innerHeight+'px' : iecompattest().clientHeight+'px'
    }
    }
    </script>
    </head>
    <body>
    <div id="myDiv" style="background-color:red;">hi</div>
    <script type="text/javascript">
    resizeDiv('myDiv');
    onresize=function(){resizeDiv('myDiv');}
    </script>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2005
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That code works great in the example you posted. Unfortunately I'm dealing with MSN here and they have their own way of doing things. Proper code and MSN is a contradiction of terms. As soon as I put in the link to the chatroom it goes haywire. There's something in their code that overrides yours and messes it up. Any values inserted for FF cause it to disappear completely and any value inserted for IE cause it to expand ridiculously large. So I'm still stuck with the original code. I tried a few other things before posting here and so far that's the only thing that works. Can it be written as width plus height?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Well, I'd like to see a demo of your page using screen the way that you have it in your first post in this thread. In tests here, even when corrected for the missing single quote (') in this line:

    document['mydiv].style.width=screen.width+5

    It did nothing with a division with both its name and id set to 'mydiv'. If enhanced to do what it appears to be trying to do, it could look like so:

    Code:
    <script type="text/javascript"> // controls size in most modern browsers
    if (document.getElementById){
    var obj=document.getElementById('myDiv').style
    obj.width=screen.width+144+'px',obj.height=screen.height+45+'px'
    }
    </script>
    <!--[if IE]>
    <script type="text/javascript"> // controls size in modern IE
    if (document.getElementById){
    obj.width=screen.width+5+'px',obj.height=screen.height+40+'px'
    }
    </script>
    <![endif]-->
    Then it works with a division with the id of 'myDiv' but, as I expected when I originally saw your code, the size of the division becomes (as the code dictates) larger than the screen size.

    The bottom line here though is, if whatever code you had was working, it certainly needn't be changed.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Dec 2005
    Posts
    39
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks again for all your help John, with this and media player in the other thread. I do appreciate it.
    I don't understand why that code I first posted works in one situation and not in another. I've tried it in another situation, and like your test, it did nothing. And I do need to stretch the div larger then the screen to compensate for wasted space. Your advice has not fallen on deaf ears either. The code you posted that detects object support and sizes the content according to the window would be ideal, and works for everything I've tried except the chatscreen. I haven't given up on it yet but for now I do have something that works, and when I have more time I'm going to play with it a bit more.

    Bill

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
  •