Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
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
?
333 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:Gurvinder Pal Singh
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:Gurvinder Pal Singh
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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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:
Gurvinder Pal Singh 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

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Suggested Courses

580 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