Hiding (X)HTML while transforming it with JS

[dense13]

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:

<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.

[Pepejeria]

how about

<div>
    <script>initiateMenu();</script>
    <noscript>
        <ul><li>Non-JavaScript version</li></ul>
    </noscript>
</div>

[mrhoo]

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.

[Pepejeria]

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.

[mrhoo]

Yes, but the stylesheet can set dense's div to be hidden when his page opens,while not affecting users without javascript.

[Pepejeria]

Well, that was the point with the script and noscript tags. No need to hide it.

[kyberfabrikken]

Try this:
http://webreflection.blogspot.com/20...-solution.html

[dense13]

Thanks everyone for the suggestions. Sorry it took me a while to answer, it's what happens when one lives in Australia.

how about

<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.

[dense13]

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!

Try this:
http://webreflection.blogspot.com/20...-solution.html

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.

[kyberfabrikken]

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.

[Pepejeria]

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.

[kyberfabrikken]

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.

[Pepejeria]

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.

[dense13]

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).

[kyberfabrikken]

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

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

IE sometimes has trouble with this approach.

[Pepejeria]

IE sometimes has trouble with this approach.

Works fine for us. If can show you a working example if you want.

[dense13]

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.