Jump to content

Recommended Posts

Posted

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>

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...