JavaScript Scrollers

Featuring: Various Scrollers - SlideShow/Flip Chart Version
Credit: Dynamic Drive

Dynamic Drive has delivered a scroller that is easy to setup and code but it is not a smooth scroller - but rather more a slideshow displayer or flip chart tool. However it is very simple to setup. The scroller uses <div id="dropcontentsubject"> to position the subject header and then a series of <div class="dropcontent" id="dropmsg1"> containers with the individual messages. Note how class=dropcontent has been defined at the top <style> header. It is here you can make this any size and formatted however desired. But the name of each dropcontent div must be of the id="dropmsgn" where n must start at zero and continue incrementing by 1 in that order.So the layout will look like this:

<div id="dropcontentsubject"></div>
<div id="dropmsg0" class="dropcontent">Perhaps an <img> tag</div>
<div id="dropmsg1" class="dropcontent">Some other HTML</div>
<div id="dropmsg2" class="dropcontent">Continuing on.. </div>
         .....
< div id="dropmsg99" class="dropcontent"> Last slide of 100</div>

In HTML editors this quickly gets of out whack because all of these divs but one are being made invisible in the JavaScript code; but not in the editor. Also this scroller lacks any controllers to stop or reverse the direction of the scrolling. However we have added a bit of coding that allows users to click on the subject of each topic and that will cause the scroller to advance to the next div/slide.The coding is simple:
1)to the subject div, <div id='dropcontentsubject>add an onClick event;
2)this looks like onClick="clearTimeout(timerid);expandone();"
Note at the top of the page, the <script> code enableSubject=1 should be set. Finally, neither IE or v
But it is exceedingly easy to setup and accepts any valid HTML content within the slide <div id="dropcontent"> borders. However, users will have to be careful to make sure that contents fit within the predeclared size of the <div id="dropcontent"> container which is defied in the <style> block at the top of the file. Note the example of our last slide in the JavaScript explanatory slideshow immediately below - its content runs out and off the end of the slide; but because we removed the class=dropcontent styling, it has room to overflow and the browsers do push all the rest of the content down.

JavaScript was originally developed by Netscape to add interactivity and control for web pages.It now runs primarily on the client side lacking strong database and file i/o since it must run in a secured access environ of a browser. Java is syntactically similar to JavaScript but Java is more powerful, more complex, and a lot harder to master. It belongs in the same league as C, C++, and other more enterprise level languages. Java programs need to be compiled to run, while JavaScripts do not. But there are few IDEs for JavaScript that provide Design and Debug capabilities like Borlands JBuilder and other language tools. DHTML is a combination of technologies- JavaScript, CSS, DOM, and HTML. Through them a new level of interactivity is possible for the end user experience. This is the primary scripting driver of the Web Interface. The standard edition is ECMAScript 4 corresponding The Web Interface's premier scripting language is JavaScript. VBScript, JScript and the whole slew of .NET languages work in Internet Explorer; but since Microsoft discontinued development of IE those coders are at risk of not having a particularly inspiring or popular vehicle for their insipidly slow and recalcitrant development work.As you can see I am just being wordy to make this as long as possible to see how the two browsers handle this div with no class so to speak..nudge nudge wink wink no what I mean ???

So users of the Dynamic Drive SlideShow will have to get used to some fairly simple operating conditions. First, to put content next to the slideshow will require the use of table, other <div> or <iframe> html coding as we have done in this case (used a table). But even in this situation developers will have to be careful not to exceed the length of the first dropcontent <div> when inserting side by side text. With these provisos the Dynamic Drive Slidshow tool is so easy to use that developers will find it easy to slot into their Web pages - particularly space limited ones. For example - an image show made up of a series of divs:

<div id="dropmsg1" class="dropcontent"><a href="#"><img src=pic1.gif></a></div>
<div id="dropmsg2" class="dropcontent"><a href="#"><img src=pic2.gif></a></div>
<div id="dropmsg3" class="dropcontent"><a href="#"><img src=pic3.gif></a></div>

This would allow a slideshow of pictures to also be buttons for where to go on say a travel website. The possibilities are pleasantly endless.