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

Amanda K.
Fantastic resource and explanation. Thanks so very much!
Amanda K. at 05:06PM, 2011/04/04.
Jake the Jolly
horizontal?
Jake the Jolly at 07:04PM, 2011/11/14.
mubarak
hi, I've put the above code within a table tag. The scroll is not working in IE7.All other browers will support it.How can i solve this probelm ?
mubarak at 11:33AM, 2011/11/29.
Bradley Corner
Is there a way to set a background image? I set up a a tag in my site.css of #mycrawler { background-image: url(../Images/red-background.png); background-repeat: no-repeat;}and it shows up in preview mode (dreamwweaver) but when I go live it disappears and the background color shows through.
Bradley Corner at 01:59PM, 2012/03/20.
Greg
Your comment in code for HEAD section does not match your correct comments on control of scroller speed in your Step 2: " higher value = faster scrolling""General speed variable (Lower = slower)" - from code in HEAD section.thanks for script!
Greg at 12:21PM, 2012/08/12.
Dan B
Very impressed and a big help.Thank you.
Dan B at 10:10PM, 2013/01/08.
Pedro
Absolutely great!Thanks!
Pedro at 02:20PM, 2013/09/23.
suryakant
dsdsfasfsafsa
suryakant at 09:32AM, 2014/10/15.

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