khanahk Posted August 23, 2012 Report Posted August 23, 2012 Hello, After a bit of tweaking I was able to figure it out. It's quite fun. Here's a basic script for a sidebar that rolls out onto the webpage when the user loads the page. Enjoy. Make sure jQuery is loaded to jquery.js in the same directory (or edit the <script> tag appropriately) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript"> function scrollIn() { $('.sidebar').animate( { opacity: 1, right: '+=300', }, 1500, function(){} ); } </script> <title>Scroll in</title> <style type="text/css"> body { overflow-x: hidden; //disable horizontal scroll } .sidebar { position: absolute; right: -300px; top: 40px; text-align: left; background-color: #BBB; border-style: solid; border-color: #FF0000; border-width: 2px 0px 2px 2px; border-top-left-radius: 10px; border-bottom-left-radius: 10px; padding: 10px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 16px; color: #000; opacity: 0; width: 200px; } </style> </head> <body onload="scrollIn()"> <div class="sidebar"> Greetings friends <br /> How goes it? <br /> I would like this to scroll in from the right.. </div> </body> </html>
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now