SitePoint Sponsor

User Tag List

Results 1 to 17 of 17
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Location
    Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hiding (X)HTML while transforming it with JS

    If I have some XHTML that I want to transform into something else through JS (say I have a list of links to images and I want to transform it into a fancy JS-based slide-show), and I do this by calling some JS code in window.onload (in an external .js file).

    The page starts loading, then the list is displayed, then once the whole page has been loaded the JS is processed, and the list is then turned into the fancy JS slide-show. The problem is, it's not very nice to *first* see the list, and then see it disappear and be substituted by something else by the JS. What would be the best way to hide the list?

    I don't want to hide it with CSS because it should be visible for non JS but CSS capable agents. I came up with:

    Code:
    <ul id='foo'>
    <script>
    document.getElementById('foo').style.display = "none";
    </script>
    ... the rest of the list follows
    But I hate that script block. Any ideas?

    If my explanation is confusing, I can post an example.

  2. #2
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    how about
    Code:
    <div>
        <script>initiateMenu();</script>
        <noscript>
            <ul><li>Non-JavaScript version</li></ul>
        </noscript>
    </div>

  3. #3
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Chances are your script is going to use styles or classes that the plain html does't need.

    If you load the script from a src in the document head,
    you can document.write a <link> to another stylesheet at the end of the script, which will be loaded after the script element, before the document itself.

    Remember to put document.close() in the onload function, or firefox will keep the document loading... graphic.

  4. #4
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mrhoo View Post
    Chances are your script is going to use styles or classes that the plain html does't need.
    True, but what is the damage of that? 1kb of extra code for people browsing without JavaScript on? CSS files are cached and only loaded once. If the user decides to switch on JavaScript he will already have the CSS loaded.

  5. #5
    SitePoint Guru
    Join Date
    Apr 2006
    Posts
    802
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, but the stylesheet can set dense's div to be hidden when his page opens,while not affecting users without javascript.

  6. #6
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, that was the point with the script and noscript tags. No need to hide it.

  7. #7
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Location
    Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks everyone for the suggestions. Sorry it took me a while to answer, it's what happens when one lives in Australia.

    Quote Originally Posted by Pepejeria View Post
    how about
    Code:
    <div>
        <script>initiateMenu();</script>
        <noscript>
            <ul><li>Non-JavaScript version</li></ul>
        </noscript>
    </div>
    The problem here is that I'd need to duplicate the data, in the noscript and in the external .js. I tried to access the noscript via JS, but it's weird: it has only one childNode, which is the text inside the noscript element, with < and > replaced by their respective entities. It still is a possibility, and instead of processing using DOM methods, use good old string parsing. It worked with IE and FF, but then I tried it with Opera, and it wouldn't allow me to access the content of the noscript element. Which makes me think it might also present problems in other browsers (I don't have a Mac, so I can't try).

    Otherwise this would be a very nice option. I wouldn't even need the script element, I could just add a class or id to the noscript element and then process it from the external JS. Anyone knows if this is a viable solution? Maybe I did something wrong, and it can be used with Opera as well.

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Location
    Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mrhoo View Post
    Chances are your script is going to use styles or classes that the plain html does't need.

    If you load the script from a src in the document head,
    you can document.write a <link> to another stylesheet at the end of the script, which will be loaded after the script element, before the document itself.

    Remember to put document.close() in the onload function, or firefox will keep the document loading... graphic.
    I have to try this one, it sounds good!

    Quote Originally Posted by kyberfabrikken View Post
    I've had a look at it (and Dean Edwards posts), and it's a bit complex for me, I'll have to re-read it until I understand it completely. But it seems to me that this would be a solution when images are involved. But since it still waits for all the document to be loaded, wouldn't the XHTML still be visible before the JS starts, or did I understand it wrongly?

    Anyway, thanks for the link, even if it doesn't solve this particular problem, it's something I am definitely going to look into soon.

  10. #10
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dense13 View Post
    But it seems to me that this would be a solution when images are involved. But since it still waits for all the document to be loaded, wouldn't the XHTML still be visible before the JS starts, or did I understand it wrongly?
    The thing is, that if you connect some javascript to the window's onload event, it won't trigger until all auxiliaries have been loaded (css and images), but the document is rendered even before this happens. Thus there is a time-gap from the initial HTML is rendered and until your script is activated. Using the code, I linked to above, the javascript is triggered as soon as the document has been loaded, so your script will execute before the document is rendered the first time.

  11. #11
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, having a script tag in the body tags means that it will execute immediately. There will be no need to wait for the window.onload.

  12. #12
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    Well, having a script tag in the body tags means that it will execute immediately. There will be no need to wait for the window.onload.
    Yes, true. But if you need to access the DOM, you may get weird results, because the document isn't fully loaded.

  13. #13
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    We have developed widgets at work that we build with JavaScript (its an intranet). Those are added to the DOM while the page loads. Each of the script tags outputting the widget has an id. With that id you know where to (accessing the script tags parent node) insert the widget. These widgets are built using the DOM.

    This approach works fine and there is no need to wait for window.onload.

  14. #14
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Location
    Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kyberfabrikken View Post
    The thing is, that if you connect some javascript to the window's onload event, it won't trigger until all auxiliaries have been loaded (css and images), but the document is rendered even before this happens. Thus there is a time-gap from the initial HTML is rendered and until your script is activated. Using the code, I linked to above, the javascript is triggered as soon as the document has been loaded, so your script will execute before the document is rendered the first time.
    Ok, I thought it would render first, execute the JS then and load css and imgs later.

    A drawback of this method is that the CSS won't be loaded when the JS executes, is that right? In some cases that might make the JS have unexpected effects (if it relies on an external CSS to accomplish whatever it's doing).

  15. #15
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dense13 View Post
    In some cases that might make the JS have unexpected effects (if it relies on an external CSS to accomplish whatever it's doing).
    Yes

    Quote Originally Posted by Pepejeria View Post
    This approach works fine and there is no need to wait for window.onload.
    IE sometimes has trouble with this approach.

  16. #16
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by kyberfabrikken View Post
    IE sometimes has trouble with this approach.
    Works fine for us. If can show you a working example if you want.

  17. #17
    SitePoint Enthusiast
    Join Date
    Aug 2002
    Location
    Australia
    Posts
    56
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by mrhoo View Post
    If you load the script from a src in the document head, you can document.write a <link> to another stylesheet at the end of the script, which will be loaded after the script element, before the document itself.

    Remember to put document.close() in the onload function, or firefox will keep the document loading... graphic.
    That worked perfectly, thanks heaps! And it keeps my XHTML clean of JS, which is a big plus.


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
  •