SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A flash of content hidden with javascript

    I am trying to use js to hide a group of fieldsets in a form. The fieldsets targetted do get hidden, but only after a slight delay during page load when all the fieldsets are shown momentarily. Is this avoidable?


    The URL is: http://www.viadesign.co.uk/WillJun25/choose.php

    Many thanks

    PS I have just noticed that this behaviour is not present on Mac Safari, only on Mac Firefox
    Last edited by belinBill; Jun 28, 2007 at 05:13.

  2. #2
    SitePoint Enthusiast
    Join Date
    Aug 2006
    Posts
    49
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    I'm assuming you're waiting for the onload event to fire before the script runs(which after checking your page, you are)... so you need to run the script before the onload event fires.

    OnLoad only fires when images/scripts etc. have finished downloading...

    So in your script would look like (no window.onload):

    function hideAllBarOne() {

    var fieldsets = document.getElementsByTagName('fieldset');

    for(var i = 1; i < fieldsets.length; i += 1) {

    fieldsets[i].className = 'hide';
    }
    }

    var timer = setInterval(function () {
    if (document.body) {
    clearInterval(timer);
    hideAllBarOne();
    }
    },10);

    I haven't got a Mac to test... let me know how it fairs.

    Cheers,
    WF

  3. #3
    SitePoint Member
    Join Date
    Jun 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many thanks for your help, it's much appreciated. I haven't tried your solution yet on my Mac, but I have discovered that the existing script works with a flash of 'hiiden' content on Windows XP too. So it's ok on Mac Safari and Win XP but a problem on Mac Firefox. I will try your solution asap and let you know. Thanks again

  4. #4
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There's another option you might try, which definitely takes effect before anything is displayed. You can hide it in the CSS style sheet. Then all your script has to do is reveal them (typically by grabbing the id and resetting the CSS). If you want the page laid out as if the field set doesn't exist use the "display" selector. If you want the page laid out with the field sets in place, just invisible use the "visibility" selector.

    e.g.

    [code]
    #itemIWantToHide {
    display:none;
    }

    [code]
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.

  5. #5
    SitePoint Guru Chroniclemaster1's Avatar
    Join Date
    Jun 2007
    Location
    San Diego, CA
    Posts
    784
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's what I get for quick positing...

    I meant of course

    Code:
    #itemIWantToHide {
    display:none;
    }
    then your script just has to change the display to block (and back if you want to turn them off again).
    Whatever you can do or dream you can, begin it.
    Boldness has genius, power and magic in it. Begin it now.

    Chroniclemaster1, Founder of Earth Chronicle
    A Growing History of our Planet, by our Planet, for our Planet.


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
  •