PDA

View Full Version : [DHTML] Modular Scroller (Scrollable content script III)



jscheuer1
08-08-2006, 06:27 AM
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
08-08-2006, 09:47 AM
Nice, but still uses browser detection, one of the biggest failings (in my opinion) of the original. Perhaps you could eliminate that?

jscheuer1
08-08-2006, 03:20 PM
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
08-08-2006, 11:23 PM
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
08-09-2006, 05:05 AM
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
08-09-2006, 06:24 AM
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
08-09-2006, 10:45 AM
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
08-10-2006, 04:49 AM
OK, I've updated it to a new demo file with additional documentation:

http://home.comcast.net/~jscheuer1/side/index_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
08-17-2006, 08:12 PM
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
08-17-2006, 09:04 PM
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.

ddadmin
08-17-2006, 09:20 PM
That's not really a problem -- every X?HTML document should have a DOCTYPE.

Ah ideally yes, but we all know how many people out there don't even know what a doctype is, the same for their web pages.

Twey
08-17-2006, 09:56 PM
Then perhaps you should make a note of it in the script instructions?

jscheuer1
08-17-2006, 11:34 PM
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?

I've modified plenty of your work to good result (I hope). So, feel free to work with it. However, the DOCTYPE question is really moot. The first scroller is highly styled. The styles given are examples only. The default script will work without any styles or DOCTYPE, and if you want to use the first scroller's styles without a DOCTYPE, you only need to adjust the styles to suit.

In light of that (I was unaware of the situation), it would probably be a good idea to present the first example last, if at all, on the official DD demo page.

The problem with using divisions as I did in the 'beta' version is that, unless something better than what I had can be worked out, it will cause even more variation in the appearance of styled scrollers with side mounted controls - by DOCTYPE as well as by browser used.

If simplicity for the user is the goal, I'd be more inclined to make both the side and the bottom mounted control versions have their outer containing element be a table.