- Menu scripts
- Window scripts
- Calendar scripts
- Gallery scripts
- Form widgets
- Tab view scripts
- Table widgets
- Drag and drop
- Folder trees
- AJAX scripts
- Content Effects
- Misc scripts
- Chess widgets
- DHTML Suite
Download scrolling content script
Put this into your <HEAD> section
Put this into your <BODY> section
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 -->
<p>This is the content of my first scrolling box.</P>
<!-- 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.
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:
border:1px solid #000;
- #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.
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:
To the bottom of your page