[jQuery] Better way of initializing a show() or hide() state
Now that I finding myself doing the following in a few areas, I don't
quite like it for a finalization of the code.
Basically, for the most part, a good bit of my jQuery usage is to add
dynamic toggling of current views already established in various pages
in our package.
In some cases, I want the page to start with views not showing, and
others I want the views showing, and yet in others, I want some views
with common elements having maying the first element showing and the
rest hidden, etc.
I guess the beauty of jQuery is that you mark up pages with little to
no changes. But in some cases, you also have to modify the pages. I
am trying to avoid modifying pages.
Anyway, to illustrate one example, I have one page with the
following:
$(document).ready(function(){
//----------------------------------------------------------
// - Click title row to toggle the remaing table rows.
//----------------------------------------------------------
var $f = $(".divTitle");
//$f.next("div").hide();
$f.click(function() {
var $i = $(this).next("div:first").toggle();
if ($i.is(":hidden")) {
$("img:first",this).attr("src","images/closed.gif");
} else {
$("img:first",this).attr("src","images/open.gif");
}
});
$f.click();
//----------------------------------------------------------
});
This handles existing html that has a patten like so:
<H3>FAQ<H3>
<p class="divTitle">
<img src="images/open.gif"/> FAQ #1?
<div>
blah, blah.....
</div>
<p class="divTitle">
<img src="images/open.gif"/> FAQ #2
<div>
blah, blah.....
</div>
etc....
Note: in the above, it is done so that in a non-JS browser (JS
disabled), the items will be "open" as it is shown now without jQuery
implemented into this particular page.
The issue is that is that the initial display is not snappy when the
connection is over the wire. It also depends on the browser.
I guess I want to get a discussion of different ideas of how to make
it snappy, i.e, so that there no flipping of views.
Traditionally, in graphical or display UI, one trick is to hide the
whole thing until it is done and then turn it on. That didn't seem to
work with the browser.
It sounds that I really need to use CSS more here if I want the
browser to render this display with little dynamic changes?
Is this a scenario where a "element.ready()" idea is appropiate? so
that its initial programmatic state can be establishing before the
rendering takes place?
Of course, if this gets too complicated, I will probably just end up
modifying the pages with appropiate style initial classes. But jQuery
never stops to surprise me with what it can do, so if you have any
tips or suggestions here, I would love to here them.
TIA
--
HLS