?
Solved

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

Posted on 2012-03-21
7
Medium Priority
?
313 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

 

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 2000 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

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

771 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