SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    toggling breaking page

    Hi,

    I have a toggle script in my page, its job is to lead an advanced search when someone click on the link.

    The problem is, when loading the site,in the very first moment, it will appear without being clicked, but it disappears immediately when page finished loading up.

    I need that toggle stop flashing at the preliminary loading stage. How can i do that ?

  2. #2
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only way to avoid that nasty flash of hidden content is to specify it in CSS - you shouldn't actually add it in the stylesheet though. - since that will be available even when JS is not.

    Try this: (creates a new <style> element in the <head>)

    Code html4strict:
    ....
    </head>
    ...
    <body>
    <script type="text/javascript">
    (function(){
        var style = document.createElement('style'),
            styles = '#hiddenThing {display:none;}';
        style.type = "text/css";
        style.styleSheet && (style.styleSheet.cssText = styles) || style.appendChild(document.createTextNode(styles));
        document.getElementsByTagName('head')[0].appendChild(style);
    })();
    </script>
    ...
    </body>
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  3. #3
    SitePoint Guru
    Join Date
    Sep 2008
    Location
    Dubai
    Posts
    971
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JimmyP View Post

    Try this: (creates a new <style> element in the <head>)

    Code html4strict:
    ....
    </head>
    ...
    <body>
    <script type="text/javascript">
    (function(){
        var style = document.createElement('style'),
            styles = '#hiddenThing {display:none;}';
        style.type = "text/css";
        style.styleSheet && (style.styleSheet.cssText = styles) || style.appendChild(document.createTextNode(styles));
        document.getElementsByTagName('head')[0].appendChild(style);
    })();
    </script>
    ...
    </body>
    What should i put in the <style> element in the <head> ?

  4. #4
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Has the element you want to hide got an ID?

    If it does then simply add it in on this line:

    Code JavaScript:
    styles = '#hiddenThing {display:none;}'; // Replace "hiddenThing" with your ID
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)


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
  •