• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 545
  • Last Modified:

URGENT NEED TO SLIDE IN DIV WITH JQUERY JAVASCRIPT

I need to slide in a block of text when a static html page is loaded.

It is an attention getter.

All I need is when the page loads I have a div

<DIV>THIS IS THE TEXT I WANT TO SLIDE IN FROM THE RIGHT </DIV>
0
ToString1
Asked:
ToString1
  • 3
  • 2
  • 2
  • +1
4 Solutions
 
kadabaCommented:
you mean this way..

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
  div { margin: 0px; width: 100px; height: 80px; background: green; border: 1px solid black; position: relative; }
</style>

  <script>
  $(document).ready(function() {
    
	$("#slideRite").show("slide", { direction: "right" }, 1000);
	$("#slideLeft").show("slide", { direction: "left" }, 1000);
	
  });
  </script>
</head>
<body style="font-size:62.5%;">
<div id="slideRite" style="display:none;">THIS IS THE TEXT I WANT TO SLIDE IN FROM THE RIGHT </DIV>
<br>
<div id="slideLeft" style="display:none;">THIS IS THE TEXT I WANT TO SLIDE IN FROM THE LEFT </DIV>
</body>
</html>

Open in new window

0
 
abhimail2002Commented:
This is what you are looking for:

http://api.jquery.com/slideToggle/

It has some good examples on how to use it.
0
 
ToString1Author Commented:
Thanks guys

Yes I think this is what I need

abhimail2002 I need this only to be called once onload without clicking
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
ToString1Author Commented:
Yes guys

So I want when the webpage loades I just want a block of text to slide in from the right
0
 
kadabaCommented:
You have it in the code I posted sometime back i.e div with id slideRite and the function to go along with it. Thats it.
0
 
shariatiCommented:
Hi check my HTML code in the attachment.
to see the scroll bar add some data in the HTML body . then you can see the beautiful jQuery Scroll for your Div .
I have named the div :"message_box"



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
   <style media="all" type="text/css">
      html, body {
		 font-family:Arial, Helvetica, sans-serif; 
      }
      
      #message_box { 
       position: absolute; 
       top: 0; left: 100%;
	   margin-left:-120px;
       z-index: 10; 
	   background:#ffc;
	   padding:5px;
       border:1px solid #CCCCCC;
       text-align:center; 
       font-weight:bold; 
       width:100px;
      }
      
   </style>
   <script type="text/javascript" 
        src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
 //Loading jQuery From Google
  google.load("jquery", "1.4.2");
 
  google.setOnLoadCallback(function() {
	//scroll the message box to the top offset of browser's scrool bar
	$(window).scroll(function()
	{
  		$('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});  
	});  });
</script>

 </script>
<title>Example of Floating Message box using jQuery</title></head>
<body>
 <div id="message_box">The floating message goes here</div>
   
</body>


</html>

Open in new window

0
 
ToString1Author Commented:
hi thanks shariati:  but I copied but get no animation

0
 
shariatiCommented:
I know .. add text to the body .. for example add this

<pre>
test
test
test
.
.
.
test
</pre>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

  • 3
  • 2
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now