Solved

How to get this div to slide after page loads and not on a mouse click?

Posted on 2012-03-21
7
300 Views
Last Modified: 2012-08-14
Calling JQuery geniuses:

How do do you this please where the sliding div automatically animates when the page has finished loading?

I know that this is the essential part:

$(document).ready(function() {
  $('#slidebottom button').click(function() {
    $(this).next().slideToggle();
  });

Open in new window


Thank you in advance.


The page with CSS and divs.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.slide {
  position: relative;
  overflow: hidden;
  height: 120px;
  width: 350px;
  margin: 1em 0;
  background-color: #ffc;
  border: 1px solid #999;
}
.slide .inner {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 338px;
	height: 36px;
	padding: 6px;
	background-color: #9CF;
	color: #333;
}

.slide button {
  margin: .7em 0 0 .7em;
}
.js #slidebottom .inner { 
  display: none;
}
</style>    
<script type="text/javascript">
  document.documentElement.className = 'js';
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {
  $('#slidebottom button').click(function() {
    $(this).next().slideToggle();
  });


  
});

</script>



</head>

<body>
  <div id="slidebottom" class="slide">
    <button>slide it</button>
    <div class="inner">Slide from bottom</div>
  </div>


</body>
</html>

Open in new window

$(document).ready(function() {
  $('#slidebottom button').click(function() {
    $(this).next().slideToggle();
  });

Open in new window

0
Comment
Question by:colonelblue
  • 4
  • 3
7 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37750934
$(document).ready(function() {
   setTimeout(function(){
      $('#slidebottom button').next().slideToggle();
   }, 1500);
  });
0
 

Author Comment

by:colonelblue
ID: 37751083
Hello gurvinder372.

Just one question please.
It works brilliantly  but when I remove the button ( I want the div to be just content ) it doesn't slide anymore.
How do I get your code to work wihout the button.

Thank you so very much.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 37751174
in that case, you need to give an id to that sliding content. Since, currently  you are traversing to that div via that button only.

If you cannot give id to that sliding div, then hide the button
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

Author Comment

by:colonelblue
ID: 37753645
Hello gurvinder372.

I'm not sure how to do that correctly.
I can't seem to get it to work by removing the button.
I am not much of a coder, but I am trying.

This is what I tried.

<style type="text/css">
.slide {
  position: relative;
  overflow: hidden;
  height: 120px;
  width: 350px;
  margin: 1em 0;
  background-color: #ffc;
  border: 1px solid #999;
}
.slide .inner {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 338px;
      height: 36px;
      padding: 6px;
      background-color: #9CF;
      color: #333;
}

.slide button {
  margin: .7em 0 0 .7em;
}
.js #slidebottom .inner {
  display: none;
}
#content1 {
      font-family: Tahoma, Geneva, sans-serif;
      font-size: 10px;
}
</style>    
<script type="text/javascript">
  document.documentElement.className = 'js';
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function() {
   setTimeout(function(){
      $('#content1').next().slideToggle();
   }, 1500);
  });

</script>



</head>

<body>
  <div id="content1" class="slide">
   Hello
    <div class="inner">Slide from bottom</div>
  </div>



</head>

<body>
  <div id="content1" class="slide">
   Hello
    <div class="inner">Slide from bottom</div>
  </div>
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 500 total points
ID: 37753674
make it

$(document).ready(function() {
   setTimeout(function(){
      $('#content1').slideToggle();
   }, 1500);
  });
0
 

Author Comment

by:colonelblue
ID: 37753871
:) Would you believe it. IT works but instead of the div sliding open, it starts open and closes. I feel so dumb.
0
 

Author Comment

by:colonelblue
ID: 37753927
I figured it out thanks to you!!

Thank you so much.
0

Featured Post

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now