Download scrolling content script

Demo

Put this into your <HEAD> section

Put this into your <BODY> section

Configuration

Step 1: Write scrolling content

The boxes are created by use of plain HTML. Put a code like this where you want the box to appear:

<!-- Start of first scrolling box -->
<div id="scrollingContainer">
  <div>
    <p>This is the content of my first scrolling box.</P>
  </div>
</div>
<script type="text/javascript">
initSlidingContent('scrollingContainer',3);
</script>
<!-- End code for first scrolling box -->

Note that you have two <DIV> tags. The first on got an ID("scrollingContainer"). This ID is sent to initSlidingContent function right below the HTML code.

You put your scrolling content inside the second <DIV>, i.e. where <p>This is the content of my first scrolling box.</P> is in the code above.

Step 2: Call Javascript function

Ther was a call to a javascript function in the code above.

<script type="text/javascript">
initSlidingContent('scrollingContainer',3);
</script>

This "initSlidingContent" function applies scrolling features to your box. The function takes two arguments. The first one is as allready mentioned, the ID of the first <DIV>. The second one is an integer which specifies how fast content should scroll. Higher value = faster scrolling.

Step 3: Box layout

We use CSS to control box layout, i.e. width, height, colors, borders etc. This is an example of how I have done that for the first box in the demo:

#scrollingContainer{
  width:170px;  
  height:250px;  
  
  border:1px solid #000;  
  background-color: #E2EBED;  

  padding:2px;  
  float:left;  
  margin-right:10px;  
  font-size:0.9em;

}

  • #scrollingContainer = ID of box. Matches the ID defined for the <DIV> tag.
  • width:170px; = Width of box
  • height:250px; = Height of box
  • border:1px solid #000; = 1 pixel black solid border
  • background-color: #E2EBED; = Light blue background color
  • padding:2px; = Space between the border and the text inside.
  • float:left; = Other text floats around the box. The box is positioned to the left. Other text will wrap around it.
  • margin-right:10px; = 10 pixel space at the right of the box.

When you have more than one box on a page

If you have more than one box on your page, repeat this recipe, but use a different ID for your box(example: "mySecondScrolllingBox" instead of "scrollingContainer"). Use this name both on your new <DIV> tag, function call and CSS code. For more help, look how it is done in my demo.

Javascript variable

There is an additional Javascript variable you can use to control scrolling speed. You will find it in the <HEAD> section:

var slideTimeBetweenSteps = 30;

The value of this variable affects all your boxes. The lower the value is, the faster your content will scroll.

Important! When putting scrolling div inside a <TD>

If you're putting the scrolling div inside a table cell, call the initSlideContent() function at the end of your script instead of right below the div. I.e: Move:
<script type="text/javascript">
initSlidingContent('scrollingContainer',3);
</script>

To the bottom of your page

Comments

No one has commented this - be first!

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2024 dhtmlgoodies.com