Attempting to "hide" a div using jquery but div displays fora split second and then disappears

I am working on an accordian side navigation jquery piece and I am
unable to get it to operate exactly how I want.

The menu was originally designed by Roshan Bhattarai and can be viewed
at http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

The original design does not degrade well since the div containing the
drop down menu information is set to display:none using CSS- but
another forum poster suggested that the css selector be removed and
the hiding function be set in the jquery.

This is the code that was added to perform this function:

$("div.menu_body").hide();

The code works to some extent, however the div does appear on the page
for a split second on refresh or on page load and then diseappears.

I am thinking I either did something wrong, am missing something, or
could put that bit of code somewhere else in the script for the div to
truly be hidden until the visible header is clicked.

The whole point of adding this code is so the accordian menu degrades
gracefully- if there is another way for the entire menu to be viewable
with javascript turned off, please detail the steps.

I have downloaded the newest version of jquery.

Here is the entire script for the menu.

<script type="text/javascript" language="javascript" src="/javascript/
jquery.js"></script>
<script type="text/javascript">
<!--//---------------------------------+
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// --------------------------------->
$(document).ready(function()
{$("div.menu_body").hide();
//slides the element with class "menu_body" when paragraph with class
"menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).nex t
("div.menu_body").slideToggle(300).siblings("div.m enu_body").slideUp
("slow");
$(this).siblings().css({backgroundImage:"url(left. png)"});
});
//slides the element with class "menu_body" when mouse is over the
paragraph
$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(down.png)"}).nex t
("div.menu_body").slideDown(500).siblings("div.men u_body").slideUp
("slow");
$(this).siblings().css({backgroundImage:"url(left. png)"});
});
});
</script>

The site is on a private server behind a firewall so I cannot share
the site but I can provide as much information as possible to solve
this issue.

An example of that preload or "flashing" upon refresh of the page with
this type of code is viewable on this website:
http://docs.jquery.com/Effects/hide - If you view the demo where it
stated "Click to hide me too" and continue to watch that line will
refreshing the page, you will see the hidden information for a split
second and then it will hide. I am wondering and trying to find a way
to prevent that flash of hidden information to be viewable at all.

The only way I see to do so and degrade well would be to delegate hiding the
hidden elements when your JavaScript loads, though before the load event is
triggered all the content will show.

Michel Belleville


2009/11/4 Newbie <hjohnson (AT) geolearning (DOT) com>

I am working on an accordian side navigation jquery piece and I am
unable to get it to operate exactly how I want.

The menu was originally designed by Roshan Bhattarai and can be viewed
at http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

The original design does not degrade well since the div containing the
drop down menu information is set to display:none using CSS- but
another forum poster suggested that the css selector be removed and
the hiding function be set in the jquery.

This is the code that was added to perform this function:

$("div.menu_body").hide();

The code works to some extent, however the div does appear on the page
for a split second on refresh or on page load and then diseappears.

I am thinking I either did something wrong, am missing something, or
could put that bit of code somewhere else in the script for the div to
truly be hidden until the visible header is clicked.

The whole point of adding this code is so the accordian menu degrades
gracefully- if there is another way for the entire menu to be viewable
with javascript turned off, please detail the steps.

I have downloaded the newest version of jquery.

Here is the entire script for the menu.

script type="text/javascript" language="javascript" src="/javascript/
jquery.js"></script
script type="text/javascript"
!--//---------------------------------+
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// ---------------------------------
$(document).ready(function()
{$("div.menu_body").hide();
//slides the element with class "menu_body" when paragraph with
class
"menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).nex t
("div.menu_body").slideToggle(300).siblings("div.m enu_body").slideUp
("slow");
$(this).siblings().css({backgroundImage:"url(left. png)"});
});
//slides the element with class "menu_body" when mouse is over the
paragraph
$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(down.png)"}).nex t
("div.menu_body").slideDown(500).siblings("div.men u_body").slideUp
("slow");
$(this).siblings().css({backgroundImage:"url(left. png)"});
});
});
/script

The site is on a private server behind a firewall so I cannot share
the site but I can provide as much information as possible to solve
this issue.

An example of that preload or "flashing" upon refresh of the page with
this type of code is viewable on this website:
http://docs.jquery.com/Effects/hide - If you view the demo where it
stated "Click to hide me too" and continue to watch that line will
refreshing the page, you will see the hidden information for a split
second and then it will hide. I am wondering and trying to find a way
to prevent that flash of hidden information to be viewable at all.

See

http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

<http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content>-
Richard

On Wed, Nov 4, 2009 at 10:21 AM, Newbie <hjohnson (AT) geolearning (DOT) com> wrote:

I am working on an accordian side navigation jquery piece and I am
unable to get it to operate exactly how I want.

The menu was originally designed by Roshan Bhattarai and can be viewed
at http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

The original design does not degrade well since the div containing the
drop down menu information is set to display:none using CSS- but
another forum poster suggested that the css selector be removed and
the hiding function be set in the jquery.

This is the code that was added to perform this function:

$("div.menu_body").hide();

The code works to some extent, however the div does appear on the page
for a split second on refresh or on page load and then diseappears.

I am thinking I either did something wrong, am missing something, or
could put that bit of code somewhere else in the script for the div to
truly be hidden until the visible header is clicked.

The whole point of adding this code is so the accordian menu degrades
gracefully- if there is another way for the entire menu to be viewable
with javascript turned off, please detail the steps.

I have downloaded the newest version of jquery.

Here is the entire script for the menu.

script type="text/javascript" language="javascript" src="/javascript/
jquery.js"></script
script type="text/javascript"
!--//---------------------------------+
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// ---------------------------------
$(document).ready(function()
{$("div.menu_body").hide();
//slides the element with class "menu_body" when paragraph with
class
"menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).nex t
("div.menu_body").slideToggle(300).siblings("div.m enu_body").slideUp
("slow");
$(this).siblings().css({backgroundImage:"url(left. png)"});
});
//slides the element with class "menu_body" when mouse is over the
paragraph
$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(down.png)"}).nex t
("div.menu_body").slideDown(500).siblings("div.men u_body").slideUp
("slow");
$(this).siblings().css({backgroundImage:"url(left. png)"});
});
});
/script

The site is on a private server behind a firewall so I cannot share
the site but I can provide as much information as possible to solve
this issue.

An example of that preload or "flashing" upon refresh of the page with
this type of code is viewable on this website:
http://docs.jquery.com/Effects/hide - If you view the demo where it
stated "Click to hide me too" and continue to watch that line will
refreshing the page, you will see the hidden information for a split
second and then it will hide. I am wondering and trying to find a way
to prevent that flash of hidden information to be viewable at all.

Good trick, will reuse, thanks ^^

Michel Belleville


2009/11/4 Richard D. Worth <rdworth (AT) gmail (DOT) com>

See


http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content>-
Richard


On Wed, Nov 4, 2009 at 10:21 AM, Newbie <hjohnson (AT) geolearning (DOT) com> wrote:

I am working on an accordian side navigation jquery piece and I am
unable to get it to operate exactly how I want.

The menu was originally designed by Roshan Bhattarai and can be viewed
at http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

The original design does not degrade well since the div containing the
drop down menu information is set to display:none using CSS- but
another forum poster suggested that the css selector be removed and
the hiding function be set in the jquery.

This is the code that was added to perform this function:

$("div.menu_body").hide();

The code works to some extent, however the div does appear on the page
for a split second on refresh or on page load and then diseappears.

I am thinking I either did something wrong, am missing something, or
could put that bit of code somewhere else in the script for the div to
truly be hidden until the visible header is clicked.

The whole point of adding this code is so the accordian menu degrades
gracefully- if there is another way for the entire menu to be viewable
with javascript turned off, please detail the steps.

I have downloaded the newest version of jquery.

Here is the entire script for the menu.

script type="text/javascript" language="javascript" src="/javascript/
jquery.js"></script
script type="text/javascript"
!--//---------------------------------+
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// ---------------------------------
$(document).ready(function()
{$("div.menu_body").hide();
//slides the element with class "menu_body" when paragraph with
class
"menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).nex t
("div.menu_body").slideToggle(300).siblings("div.m enu_body").slideUp
("slow");
$(this).siblings().css({backgroundImage:"url(left. png)"});
});
//slides the element with class "menu_body" when mouse is over the
paragraph
$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(down.png)"}).nex t
("div.menu_body").slideDown(500).siblings("div.men u_body").slideUp
("slow");
$(this).siblings().css({backgroundImage:"url(left. png)"});
});
});
/script

The site is on a private server behind a firewall so I cannot share
the site but I can provide as much information as possible to solve
this issue.

An example of that preload or "flashing" upon refresh of the page with
this type of code is viewable on this website:
http://docs.jquery.com/Effects/hide - If you view the demo where it
stated "Click to hide me too" and continue to watch that line will
refreshing the page, you will see the hidden information for a split
second and then it will hide. I am wondering and trying to find a way
to prevent that flash of hidden information to be viewable at all.

This should help you
http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content

Newbie wrote:

I am working on an accordian side navigation jquery piece and I am
unable to get it to operate exactly how I want.

The menu was originally designed by Roshan Bhattarai and can be viewed
at http://roshanbh.com.np/2008/06/accordion-menu-using-jquery.html

The original design does not degrade well since the div containing the
drop down menu information is set to display:none using CSS- but
another forum poster suggested that the css selector be removed and
the hiding function be set in the jquery.

This is the code that was added to perform this function:

$("div.menu_body").hide();

The code works to some extent, however the div does appear on the page
for a split second on refresh or on page load and then diseappears.

I am thinking I either did something wrong, am missing something, or
could put that bit of code somewhere else in the script for the div to
truly be hidden until the visible header is clicked.

The whole point of adding this code is so the accordian menu degrades
gracefully- if there is another way for the entire menu to be viewable
with javascript turned off, please detail the steps.

I have downloaded the newest version of jquery.

Here is the entire script for the menu.

script type="text/javascript" language="javascript" src="/javascript/
jquery.js"></script
script type="text/javascript"
!--//---------------------------------+
// Developed by Roshan Bhattarai
// Visit http://roshanbh.com.np for this script and more.
// This notice MUST stay intact for legal use
// ---------------------------------
$(document).ready(function()
{$("div.menu_body").hide();
//slides the element with class "menu_body" when paragraph with class
"menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{
$(this).css({backgroundImage:"url(down.png)"}).nex t
("div.menu_body").slideToggle(300).siblings("div.m enu_body").slideUp
("slow");
$(this).siblings().css({backgroundImage:"url(left. png)"});
});
//slides the element with class "menu_body" when mouse is over the
paragraph
$("#secondpane p.menu_head").mouseover(function()
{
$(this).css({backgroundImage:"url(down.png)"}).nex t
("div.menu_body").slideDown(500).siblings("div.men u_body").slideUp
("slow");
$(this).siblings().css({backgroundImage:"url(left. png)"});
});
});
/script

The site is on a private server behind a firewall so I cannot share
the site but I can provide as much information as possible to solve
this issue.

An example of that preload or "flashing" upon refresh of the page with
this type of code is viewable on this website:
http://docs.jquery.com/Effects/hide - If you view the demo where it
stated "Click to hide me too" and continue to watch that line will
refreshing the page, you will see the hidden information for a split
second and then it will hide. I am wondering and trying to find a way
to prevent that flash of hidden information to be viewable at all.