• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 727
  • Last Modified:

Jquery dive hide-show problem

Hello,
I am new to jquery and is trying the following code

HTML
=====

<a class="toggle" href="#">Statement</a>
<div id="progressBar" >
    <p> Loading ... </p>
</div>    
<div id="taxStatement" >
    <p>Hi</p>
</div>

Javascript
=========
$(document).ready(function(){
    progressBar.hide();
    taxStatement.show();
   
}
);

But it is not hiding progressBar div and it supposed to show taxStatement div.

Thanks!


0
dojjol
Asked:
dojjol
4 Solutions
 
JESiiCommented:
You have to start out with style="display:none" hard-coded on the element you want to show/hide, otherwise it doesn't work.
0
 
leakim971PluritechnicianCommented:
You need to use : $("#idOfTheControl").hide()
$(document).ready(function(){
    $("#progressBar").hide();
    $("#taxStatement").show(); // please note it is not hidden in your current page... should be <div id="taxStatement" style="display:none" >
});

Open in new window

0
 
dojjolAuthor Commented:
Thanks but if I modify the ready function to

$(document).ready(function(){
    $("#progressBar").show();
    $("#taxStatement").hide();
    for(var i=0 ; i<1000; i++)
        {
            $("#taxStatement").html("<p>"+i+"</p>")
        }
           $("#progressBar").hide();
        $("#taxStatement").show();
}
);

it directly prints taxStatement div instead of first displaying progressBar div and then taxStatement div
0
 
leakim971PluritechnicianCommented:
Replace all your code by :

setTimeout('$("#progressBar").show();$("#taxStatement").hide();', 3000);

Open in new window


Please wait three seconds
0
 
mickey159Commented:
To dojjol:
This is because the javascript engine is too fast that the for loop you created used less than a second to finish.So the progressBar don't even have the chance to load.

The code should be like this:
I changed the show() and hide() to fadeIn() and fadeOut() to have more visual effects.
Hope you don't mind.
Please don't change fadeIn() and fadeOut() with show()and hide() or it may not work.

Good luck!
$(document).ready(function(){
    $("#progressBar").show();
    $("#taxStatement").hide();
    for(var i=0 ; i<1000; i++)
        {
        $("#taxStatement").html("<p>"+i+"</p>")
        }
        $("#progressBar").delay(2000).fadeOut(500);
        $('#taxStatement').delay(2500).fadeIn(500);
}
);


//full code for testing
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#progressBar").show();
    $("#taxStatement").hide();
    for(var i=0 ; i<1000; i++)
        {
        $("#taxStatement").html("<p>"+i+"</p>")
        }
        $("#progressBar").delay(2000).fadeOut(500);
        $('#taxStatement').delay(2500).fadeIn(500);
}
);
</script>
</head>
<body>
<div id="progressBar">
    <p> Loading ... </p>
</div>    
<div id="taxStatement">
    <p>Hi</p>
</div>
</body>
</html>

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now