SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    698
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Persistant Div Size Change

    Guys,

    Are you able to give me any pointers on how to do this? I have two divs, one with the ID 'leftcol' and the other 'bodydiv'. I have found some code on DynamicDrive.com to resize and hide the leftcol div but I want bodydiv to expand to fill the space. Both are absolute divs though, and leftcol is simply "left: 210px;" and "width:auto;".

    The dynamic drive script is persistent so if I hide the menu it is still hidden on the next page. I need to do something similar. Say for example that I call it toggle(elementId), I need to hide leftcol and set "left: 0px;" for bodydiv, but next time show leftcol (can use the existing animation function for that) and set left back to 210px for leftcol. As I say, it must persist on each machine.

    Any help?

    Thanks guys

  2. #2
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    698
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Anybody? Please

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    use the functions from this page about handling cookies.
    http://www.quirksmode.org/js/cookies.html

    When the left col is hidden or unhidden, create a cookie called "leftcol" with the value of "show" or "hide"

    That way, when you load the page you can check the value of the cookie. If it's set to "hide" then you know you need to hide the column as a part of loading the page.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    698
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    OK, so I've done this:

    Code JavaScript:
    function toggle() {
        var x     = readCookie('acopendivids')
        var    el    = document.getElementById('bodydiv')
        if (x == "leftcol") {
            el.style.left = "210px";
        } else {
            el.style.left = "0px";
        }
    }

    Basically, the code that I've used for the 'leftcol' to hide/show seems to set a cookie called "acopendivids" which is empty if the column is hidden, and the ID of the element if it is visible. So, if it finds this name then the right hand element moves over.

    Great, it works for most things, but the odd page is still adjusted over to the right still, as if the menu was there. I have no idea why. If I go on the page and show the menu, then hide it again, then it shows as it should, but then when I leave the page and come back, this page will show incorrectly again. I can't work out why

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Begin diagnosing by showing the cookie value before you read the cookie, and before and after you change it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Guru
    Join Date
    Nov 2004
    Location
    England
    Posts
    698
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I found the problem... the onload JS is also putting the cursor in the first available input, but if there is no input on the page the JS is stopping and not continuing to hide the left hand column. Moving this putfocus part to the bottom of that function fixes it. Thanks


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
  •