SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make javascript work 'immediately' instead of waiting for 'onload'?

    I'v got this element that I would like to hide when javascript is disabled. It contains the links for a javascript styleswitcher, no use showing them if javascript isn't working.

    So I put display:none in the CSS and put this as the last thing in the head of the page:
    Code:
    <script type="text/javascript">
    function showStyleMenu() {
    	document.getElementById("styleswitcher-menu").style.display = "block" ;
    }
    window.onload = function(){showStyleMenu();}
    </script>
    Problem? No problem! It works fine except that it only kicks in after the page has loaded. Since this element fits in between other elements this makes things kind of jumpy. So I thought, why not just call the function immediately, like this:
    Code:
    <script type="text/javascript">
    function showStyleMenu() {
    	document.getElementById("styleswitcher-menu").style.display = "block" ;
    }
    showStyleMenu();
    </script>
    Problem? Yes! Doesn't work . The element never shows!

    Please help.

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  2. #2
    SitePoint Evangelist Mr. Brownstone's Avatar
    Join Date
    May 2002
    Location
    Relative
    Posts
    452
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try inserting the code into the <body> of the document, immediately after your style-switcher tags.
    Of course, that's just my opinion. I could be wrong.

  3. #3
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You really should keep using the OnLoad trigger, since thats the only time you can be sure the element you target actually exists. If you run it straight away, no matter where you put it in the document, it will always have the possibility that the actual HTML element wasnt created yet, hence cannot be shown.

    How about dynamically writing the styleswitcher-menu object into the HTML when javascript is enabled? You can do that inline (i.e, place the javascript on the spot you need it) and just let it output the needed HTML code. This will always get executed, and will work in the second way you posted as well, thus, as fast as possible.

    Not very tidy? Definately.....but it works

  4. #4
    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 suggestions. Here's another...
    Code:
    <html>
    <head>
    <style type='text/css'>
    .styleSwitcher {
      display:none;
    }
    </style>
    <script type='text/javascript'>
    document.write('<'+'style>.styleSwitcher{display:block;}<'+'/style>');
    </script>
    </head>
    <body>
    <div class='styleSwitcher'>
    ...
    </div>
    </body>
    </html>

  5. #5
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for all the suggestions guys!

    I've tried them and they all work, which is nice.

    I can see where I went wrong now. I was trying to manipulate something that (at loading time) doesn't exist yet. Makes sense really.

    I went for Mike's solution. It seems the most elegant to me. Keeps the script tags in the head where they belong.

    Just one small question Mike. Why break up the '<'+'style>' tags like that? I'm guessing that otherwise the browser might interpret them as actual 'real' <style> tags, ignoring that they are inside <script> tags and always apply the styles. But like I said, I'm guessing.

    Thanks again for your help guys!

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  6. #6
    SitePoint Zealot tss68nl's Avatar
    Join Date
    Nov 2002
    Location
    Netherlands
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Trying to output a <style> tag at once in a javascript, will break up your <script> block...hence people split them up in two pieces. Try to do it at once and admire the faults resulting

  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)
    Yes, you're both right


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
  •