SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unobtrusive Javascript Help

    First post here on SitePoint. Any help is greatly appreciated.

    I'm trying to create a horizontal scrolling div with JS when a button is pressed. I found a script online, but I know it's not the best way to implement things (Unobtrusive). I'm not really well versed in JS so I'm curious if there is a way to take the existing script and tweak it to be acceptable. It'll work OK as it is, but I really want to make sure it is coded properly to standards. Please see code below:

    THE JS:
    scrollStep=1

    timerLeft=""
    timerRight=""

    function toLeft(id){
    document.getElementById(id).scrollLeft=0
    }

    function scrollDivLeft(id){
    clearTimeout(timerRight)
    document.getElementById(id).scrollLeft+=scrollStep
    timerRight=setTimeout("scrollDivLeft('"+id+"')",10)
    }

    function scrollDivRight(id){
    clearTimeout(timerLeft)
    document.getElementById(id).scrollLeft-=scrollStep
    timerLeft=setTimeout("scrollDivRight('"+id+"')",10)
    }

    function toRight(id){
    document.getElementById(id).scrollLeft=document.getElementById(id).scrollWidth
    }

    function stopMe(){
    clearTimeout(timerRight)
    clearTimeout(timerLeft)
    }

    THE HTML:
    <span class="scrollNav">
    <a href="#null" onclick="toLeft('container')"> first</a> |
    <a href="#null" onmouseover="scrollDivLeft('container')" onmouseout="stopMe()">scroll left</a> |
    <a href="#null" onmouseover="scrollDivRight('container')" onmouseout="stopMe()">scroll right</a> |
    <a href="#null" onclick="toRight('container')">last </a>
    </span>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the link - it helped... a little.

    I tried to recreate one of the horizontal scrolling divs with the source code provided, but I'm getting a JS error.

    Here is the link, am I missing something?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Yes, Dom is not defined. Some of the more common javascript tasks have been offloaded to http://www.rootshell.be/~pmw57/forum/js/common.js

    About halfway down are the Dom helpers. They allow me to replace this

    Code javascript:
    if (typeof button === 'string') {
        button = document.getElementById(button);
    }
    if (typeof target === 'string') {
        target = document.getElementById(target);
    }
    position = info.position || 'bottom';
    switch (position) {
    case 'before':
    	target.parentNode.insertBefore(button, target);
    	break;
    case 'top':
    	target.insertBefore(button, target.firstChild);
    	break;
    case 'bottom':
    	target.appendChild(button);
    	break;
    case 'after':
    	if (target.nextSibling) {
    		target.parentNode.insertBefore(button, target.nextSibling);
    	} else {
    		target.parentNode.appendChild(button);
    	}
    	break;
    default:
    	target.appendChild(button);
    	break;
    }

    with this

    Code javascript:
    Dom.add(button, target, info.position);
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry - like I said I'm not really well versed in JS at all. I tried to use their common.js, but I'm getting another error. I've uploaded my newest files so you can see again. Any ideas?

    Link

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    There are two problems.

    1. Near the bottom are trying to create multiple autoscroll containers.
    Because your page has only one autoscroll container, you only need the one line to create it.

    Code javascript:
    // autoscroll with custom delay
    nameSpace.autoscroll.add('nav-horiz-images', {delay: 30}, {left: 'images/scroll-left.gif'}, {right: 'images/scroll-right.gif'});

    If you don't want to customise the delay speed, you can not specify a delay value and accept the default of 20 milliseconds

    Code javascript:
    // autoscroll with custom delay
    nameSpace.autoscroll.add('nav-horiz-images', {left: 'images/scroll-left.gif'}, {right: 'images/scroll-right.gif'});

    2. The second problem is that you have placed images for the arrows inline with the content. Consider what happens when there is no javascript - those arrows will be entirely useless. This is why the script itself adds the arrows for you.

    Get rid of the arrow images in the content.

    Your test will work well after dealing with those two issues.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks a lot for your patience and help. Makes my first experience here on SitePoint a good one!

  8. #8
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm going to resurrect this post as I have another question. In the code, the unordered list of links uses and ID which is referenced in the bottom of the page:

    Code:
    <script type="text/javascript">
    
    // autoscroll using images
    
    nameSpace.autoscroll.add('nav-horiz-images', {delay: 40}, {left: 'images/scroll-left.gif'}, {right: 'images/scroll-right.gif'});
    
    </script>

    If I want to use a class for multiple instances of this scroller on the page, can I simply change it to CLASS, or will I need to do anything extra?

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Currently the script is designed to work only with id references. In the weekend I may have the opportunity to have a look at including the ability to use classes.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Also, any idea why the arrow images don't float in IE7? It seems like IE ignores their styles, I've tried everything - even adding !important.

  11. #11
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, solved my own problem. For some reason IE7 doesn't like the classes on the arrow images. I changed some code to make it an ID instead and that worked...


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
  •