Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: [DHTML] Modular Scroller (Scrollable content script III)

  1. #1
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default [DHTML] Modular Scroller (Scrollable content script III)

    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):
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Nice, but still uses browser detection, one of the biggest failings (in my opinion) of the original. Perhaps you could eliminate that?
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Code:
    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

  5. #5
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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.

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    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?

  10. #10
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    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.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •