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

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 528
  • 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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

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