CODEWITHSUNDEEP
javascriptjqueryhtml
Joe Bobby
Joe Bobby

Reputation: 2811

Toggle instead of Just Appearing?

I'm using the code below to display a notice at the top but it just appears out of nowhere. I would like it to scroll down similar to a toggle while pushing down all the content in the div below it down.

Heres the Javascript

<script>

window.onload = function() {
    setTimeout(function() {
        document.getElementById('top').style.display = 'block';
    }, 10000);
}

</script>

html:

<div id="top">
    <p>content here</p>
</div>

Upvotes: 0

Views: 43

Answers (2)

Chris Cherry
Chris Cherry

Reputation: 28554

You have this question tagged with jQuery, and there is a straight forward jQuery function for this, so here is that version:

$(function(){
  setTimeout(function(){
    $('#top').slideDown();
  }, 10000);
});

http://api.jquery.com/slideDown/

If you want to do this in plain javascript I would recommend using CSS3 transitions, instead of modifying attributes like display or attempting to perform the animation manually.

An example of this method using CSS3 and max-height, can be found here: http://davidwalsh.name/css-slide

You would then use javascript to add and remove classes to toggle the desired state, the animation would be performed for you by the CSS3 transitions.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Use .slideDown() instead of changing the display property to block

window.onload = function () {
    setTimeout(function () {
        $('#top').slideDown()
    }, 10000);
}

Upvotes: 1

Related Questions