[DHTML] Modular Scroller (Scrollable content script III)

[jscheuer1]

1) CODE TITLE: Modular Scroller (Scrollable content script III)

2) AUTHOR NAME/NOTES: jscheuer1

3) DESCRIPTION:

Very loosely based upon Scrollable content script II, this is a modular version allowing for multiple scrollers on a single page and a few added features. Not a truly OO script but, acts like one and has some advantages in ease of configuration for the novice over a fully OO script.

Each scroller individually configurable for width, height, border (width, style and color), side or bottom controls.

Individual Content may be styled in-line. Or styles may be added in the head (see third textarea, bottom of demo page) making use of assigned class name and id. A mixture of the two can be used.

The id configured for each scroller is assigned to the content division as an id and as a class name to its container division. The table containing the scroller's controls has this class name also. This allows for access to virtually all the scroller's elements for styling purposes. None of the Demo stylesheet styles are required.

Features a polling function to retrieve content text to the scroller bodies should it disappear due to text resizing.

4) URL TO CODE: http://home.comcast.net/~jscheuer1/side/index_side.htm

or, ATTACHED BELOW (see #3 in guidelines below):

[Twey]

Nice, but still uses browser detection, one of the biggest failings (in my opinion) of the original. Perhaps you could eliminate that?

[jscheuer1]

How do you mean still uses browser detection? I realize I do rely upon a variable that looks like it might be browser detection:

var iens6=document.all||document.getElementById

However, it is merely object detection. I'm (essentially) kicking out all browsers that do not support either document.getElementById, document.all, or both. Maybe I am missing something else?

If you are referring to the style, that is completely optional, the scrollers are truly cross browser in their default form.

BTW, what do you think about the @media hack for Opera? That one's not likely to last but, is currently quite workable.

[Twey]

Oh! You're right, sorry. I was deceived by appearances.

You mean using media queries? I think it is dangerous to use this as a hack, as, as you say, all browsers will probably implement it soon enough. Also, WebKit also supports them already.

[ddadmin]

This looks nice! I'll test it out more closely this week, and if I find any problems, post them here. But somehow I think you've got all the important angles covered already. If so, I'll add this script to DD then.

It looks like the next few scripts added to DD will be from this forum.

[jscheuer1]

Thanks again, one never knows for sure but I did try to put it through its paces and have it on good authority that the basic script works in the most recent Opera, Safari, IE, and FF full release versions. The example styles for the 1st scroller also work in all these browsers but, in Safari, the effect is not as seamless looking as it is in the others.

[jscheuer1]

Hold on for a little bit as regards this script. I've decided to go with a container table for the side control scrollers. It makes alignment of the controls to the scroller a breeze across browsers, none of that kludgey css if borders are involved. I want to document the changes and will upload a new demo page with them soon.

[jscheuer1]

OK, I've updated it to a new demo file with additional documentation:

http://home.comcast.net/~jscheuer1/s...side_table.htm

In addition to using a containing table to make the side controls uniform across browsers, I've added styling hooks for the images as well as making their filenames configurable for each scroller. One interesting effect of the not quite OO code method used is that any variable set in one scroller will carry through to the next if omitted from it. This allows you to set only one base configuration for all scrollers on a page if desired, with each subsequent scroller requiring only a unique id.

[ddadmin]

Ok, I'm testing out this script more closely before adding it to DD. With regards to the use of tables for the side controls, in IE, I noticed without a doctype declared, the first demo's control becomes too narrow. I'm tempted to take a stab at going with a DIV instead, and perhaps try and streamline the code some more (the source could appear a little daunting to newbies). Would you mind if I tried and modified the script before posting it?

[Twey]

I noticed without a doctype declared, the first demo's control becomes too narrow.

That's not really a problem -- every X?HTML document should have a DOCTYPE.