jquery slideToggle

Forum Moderators: open

Message Too Old, No Replies

jquery slideToggle

andrewsmd

6:29 pm on Jan 18, 2011 (gmt 0)

I have a div that I hide and show using jqeury. The issue I am having is that in ie when you load the page, the div shows up for a few seconds until the whole page loads. It works fine in FF. Do you know of any way to hide it so the user nevers sees it at all until they do the proper action to show it? Here is the div

<div class="inner" id="myDiv">
html here
</div>

Here is the js I run to hide it.
$(document).ready(function() {
$("#myDiv").hide();
});

I should mention that I'm running this in dotnetnuke so this JS is added in the skin. Any ideas?

JAB Creations

6:46 pm on Jan 18, 2011 (gmt 0)

Seriously, I hereby bannish jQuery from the forums!

Just use the className and stop using a 70KB devastation to change a simple class...

- John

document.getElementById('myDiv').className='inner hidden';
document.getElementById('myDiv').className='inner not_hidden';

Fotiman

7:06 pm on Jan 18, 2011 (gmt 0)

I'm not going to get into the debate of whether jQuery is appropriate or not (there's nothing to indicate from the original post that jQuery is only being used for this one purpose).

If your document is loading other scripts, etc., then there may be a delay while it loads those resources before the load event fires. There are a few options.

You could place the script to hide the div immediately after it appears in the source (ie - as soon as that element has been added to the DOM):


<div id="myDiv">...</div>
<script>
$("#myDiv").hide();
</script>

However, I don't recommend this approach as you're placing scripts in with your content. Yuck!

Instead, I would do something like this:


<html class="no-js">
<head>
<script>
var html = document.documentElement;
html.className=html.className.replace(/\bno-js\b/,"")+" js";
</script>

Then in your CSS:


#myDiv {
  display: none;
}
.no-js #myDiv {
  display: block;
}

In other words, your <html> element has a class attached to it which gets updated very early on in the <head> with the minimal script required. Then the rest of your scripts can be placed at the end of the document.

andrewsmd

7:07 pm on Jan 18, 2011 (gmt 0)

Well I use slideToggle and fade in to give it some nice effects. I'm not aware how to accomplish that with regular css. Adding that still gives me the same problem. That 70K file assists me with a lot of other things too.

andrewsmd

7:15 pm on Jan 18, 2011 (gmt 0)

There's nothing in the original post because I only posted the relevant code. I will check out your answer. Thanks,

andrewsmd

4:36 pm on Mar 4, 2011 (gmt 0)

Can I ask you a question on this? I don't understand why you put the class no-js in your html tag? I can't do that either. This is in a pre built cms system and I don't have control over the html tag.

Fotiman

5:42 pm on Mar 4, 2011 (gmt 0)

I wasn't aware of that limitation when I suggested it. If you don't have access to the CMS template files to modify the html tag, then you could still use this sort of approach which will add the "js" class. For example:


var html = document.documentElement;
html.className=html.className.replace(/\bno-js\b/,"")+" js";

That code will result in the equivalent of:

<html class=" js">

So then in your CSS we just have to sort of reverse the logic:


#myDiv {
 display: block;
}
.js #myDiv {
 display: none;
}

In other words, those elements will have display: block by default, but when JavaScript is enabled, the html element will have the "js" class, so the second rule will over ride the first and the elements will have display: none instead. Make sense?
:)

andrewsmd

6:46 pm on Mar 4, 2011 (gmt 0)

That did work! Thank you. So the jquery then in turn overrides the .js myDiv to show the div correct? I'm not quite following on how we get the display: none back to the display block.

Fotiman

6:57 pm on Mar 4, 2011 (gmt 0)

Right, the jQuery code will end up setting inline styles on the element to show/hide, which overrides the style defined in a stylesheet. So then when you do:

$("#myDiv").hide();
or
$("#myDiv").show();

jQuery will be doing something along the lines of:
getElementById('myDiv').style.display='none'
or
getElementById('myDiv').style.display='block'