Solved

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

Posted on 2012-03-21
7
304 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

863 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

20 Experts available now in Live!

Get 1:1 Help Now