SitePoint Sponsor

User Tag List

Page 2 of 2 FirstFirst 12
Results 26 to 34 of 34
  1. #26
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Instead of passing h or v it can be a part of the up/down/left/right part.
    We can assign speed and direction based on the appropriate inputs.

    There are two options, one to have separate horizontal and scrolling functions, or to combine them into one. They are going to be separate functions in this example, so that the text-based decisions are maintained in the one function.

    This is a good time to bring the speed and delay parts together too, so that they are managed from the one location.

    Code JavaScript:
    var scrolling;
    function startScroll(id, dir) {
      var speed = 3;
      var delay = 20;
      if (dir == 'up' || dir == 'left') {
        speed = -speed;
      }
      if (dir == 'up' || dir == 'down') {
        verticalScroll(id, speed, delay);
      }
      if (dir == 'left' || dir == 'right') {
        horizontalScroll(id, speed, delay);
      }
    }
    function verticalScroll(id, speed, delay) {
      var el = document.getElementById(id);
      el.scrollTop += speed;
      scrolling = setTimeout("verticalScroll('" + id + "', " + speed + ")", delay);
    }
    function horizontalScroll(id, speed, delay) {
      var el = document.getElementById(id);
      el.scrollLeft += speed;
      scrolling = setTimeout("horizontalScroll('" + id + "', " + speed + ")", delay);
    }
    function stopScroll() {
      clearTimeout(scrolling);
    }
    Last edited by paul_wilkins; Dec 16, 2007 at 18:13.

  2. #27
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you.
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  3. #28
    Learning...
    Join Date
    Jan 2003
    Posts
    781
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In start scroll function, line #2, make dir == 'left'. One = is missing.

    Thanks
    The beauty of life is not dependent on how happy you are,
    but on how happy others can be because of you...

  4. #29
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    =tahirjadoon: Thank you for catching that. Testing wasn't performed on that update due to lack of time.

    The code has now been updated with the correction.
    Last edited by paul_wilkins; Dec 16, 2007 at 19:07.

  5. #30
    SitePoint Addict
    Join Date
    Dec 2001
    Posts
    395
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pmw57 Thank you so much for all of your hard work in developing this code. I am glad to see other people are looking at it and hopefully will use it as well. Cant thank you enough!!!

  6. #31
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    You're welcome Rockwilda. If people want support for multiple scrolling, that can easily be done too.

    Change the initial scrolling variable to an array

    Code JavaScript:
    var scrolling = [];

    And then you can call the scrolling function with an index number.

    Code HTML4Strict:
    <input type="image" src="pathtoimage/up-button.gif" onmouseover="startScroll('nav', 'up', 1)" onmouseout="stopScroll(1)" />

    Now you just need to modify the functions to accept that number and use it instead.

    Code JavaScript:
    function startScroll(id, dir, index) {
      var speed = 3;
      var delay = 20;
      if (dir == 'up' || dir == 'left') {
        speed = -speed;
      }
      if (dir == 'up' || dir == 'down') {
        verticalScroll(id, speed, delay, index);
      }
      if (dir == 'left' || dir == 'right') {
        horizontalScroll(id, speed, delay, index);
      }
    }
    function verticalScroll(id, speed, delay, index) {
      var el = document.getElementById(id);
      el.scrollTop += speed;
      scrolling[index] = setTimeout("verticalScroll('" + id + "', " + speed + ")", delay);
    }
    function horizontalScroll(id, speed, delay, index) {
      var el = document.getElementById(id);
      el.scrollLeft += speed;
      scrolling[index] = setTimeout("horizontalScroll('" + id + "', " + speed + ")", delay);
    }
    function stopScroll(index) {
      clearTimeout(scrolling[index]);
    }

    Now you can have multiple scrolling areas scrolling in different directions.

    Depending on how you call the functions, they can all be doing it simultaneously too.
    The horrors that are possible with this are endless.

  7. #32
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up wicked

    wow, wow, wow!!

    exactly what i have been looking for, and the answer is already existing in this threat no more need to start new threats at sitepoint me seems

    but respect again for that really nice and clear/clean javascript code above, even me who doesn't usually use this understand everything.

    keep it up peoples!
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  8. #33
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    I have been working on several improvements, but before that, I've been making good use of a DOM library from Dustin Diaz to add and remove elements with javascript.

    I've taken this and added to it where wanted. I'm particularly pleased about both the ability to add elements to different destinations (before, top, bottom, after) and the nested object literals, that allow you to do Dom.attr.get(name)

    Code Javascript:
    // The following is inspired from [url]http://www.dustindiaz.com/add-remove-elements-reprise/[/url]
    var Dom = {
        get: function (el) {
            if (typeof el === 'string') {
                return document.getElementById(el);
            } else {
                return el;
            }
        },
        add: function (el, dest) {
            el = this.get(el);
            dest = this.get(dest);
            position = arguments[2] || 'bottom';
            switch(position) {
            case 'before':
                dest.parentNode.insertBefore(el, dest);
                break;
            case 'top':
                dest.insertBefore(el, dest.firstChild);
                break;
            case 'bottom':
                dest.appendChild(el);
                break;
            case 'after':
                if (dest.nextSibling) {
                    dest.parentNode.insertBefore(el, dest.nextSibling);
                } else {
                    dest.parentNode.appendChild(el);
                }
                break;
            default:
                dest.appendChild(el);
                break;
            }
        },
        remove: function (el) {
            el = this.get(el);
            el.parentNode.removeChild(el);
        },
        create: function (tag) {
            var el = document.createElement(tag);
            forEach(arguments, function (arg, index) {
                if (index > 0) {
                    Dom.attr.set(el, arg);
                }
            });
            return el;
        }
    };
    Dom.attr = {
        parent: Dom,
        get: function (el, name) {
            el = this.parent.get(el);
            return el.getAttribute(name);
        },
        set: function (el, attr) {
            el = this.parent.get(el);
            var name, value;
            for (name in attr) if (attr.hasOwnProperty(name)) {
                value = attr[name];
                el.setAttribute(name, value);
            }
        }
    };
    Dom.style = {
        parent: Dom,
        get: function (el, name) {
            el = this.parent.get(el);
            return el.style[name];
        },
        set: function (el, attr) {
            el = this.parent.get(el);
            var name, value;
            for (name in attr) if (attr.hasOwnProperty(name)) {
                value = attr[name];
                el.style[name] = value;
            }
        }
    };
    var Event = {
        add: function () {
            if (window.addEventListener) {
                return function (el, type, fn) {
                    Dom.get(el).addEventListener(type, fn, false);
                };
            } else if (window.attachEvent) {
                return function (el, type, fn) {
                    var f = function () {
                        fn.call(Dom.get(el), window.event);
                    };
                    Dom.get(el).attachEvent('on' + type, f);
                };
            }
        }()
    };

    What does this mean? I'll finish tidying up the updated autoscroll function and reveal it soon.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #34
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Here is a demo page for the new autoscroll navigation, which has gone through many improvements.

    The list starts off as a normal list, with no other markup necessary. The script takes care of the rest. This means the list can still be used should there be no javascript.

    Code HTML4Strict:
    <div class="navvert">
        <h3>With javascript and images</h3>
        <ul id="nav-vert-images">
            <li><a href="page.html">Link 1</a></li>
            <li><a href="page.html">Link 2</a></li>
            <li><a href="page.html">Link 3</a></li>
            <li><a href="page.html">Link 4</a></li>
            <!-- and more list items -->
        </ul>
    </div>

    The navvert class is just to help make it look pretty, but an important part for accessibility is to set the overflow to auto.

    Code CSS:
    .navvert ul {
        list-style-type: none;
        width: 4em;
        height: 10em;
        /* ... */
        overflow: auto;
    }

    This way the list will still work should there be no javascript. When the script successfully adds images or buttons to the list, it changes the overflow style of the list to hidden.

    The script automatically adds images or buttons around the list, so that they won't get in the way should there be no scripting. They're given a class name, like up-scroll, so you can style them as you like.

    Instead of using global variables as the previous ones did, they are now attached to the list and the buttons so that multiple autoscroll areas can be easily accommodated on the same page.

    To further keep things tidy, a default namespace is used. You can easily have the script use your own namespace by modifying a couple of lines at the top. If you don't wish to do that it will use a default one called nameSpace.

    Buttons as well as images can now be used, and object literals are used to specify the different options. There are default speed and delay settings, but they can be easily adjusted, along with the placement of the images or buttons.

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

    The simplest set of options is where you provide just the list id itself, where the script will use buttons and autodetect from the list dimensions whereabouts to place the buttons.

    Code Javascript:
    nameSpace.autoscroll.add('nav-horiz-buttons');

    So check out the autoscroll navigation demo page, examine the script, and provide feedback on further improvements that might be possible.

    Here's the script itself.

    Code Javascript:
    // The following script requires handlers for Dom and Event functions
    if (!nameSpace) {
        var nameSpace = {};
    }
    nameSpace.autoscroll = {
        // default values
        speed: 3,
        delay: 20,
        // this.autoscroll.add(id[, optional arguments])
        // optional arguments:
        //    Speed and Delay
        //    {speed: pixels}, {delay: milliseconds}
        //    Images: provide a location and an image path for images
        //    Buttons: direction autodetected if not provided
        //    However, to prevent possible misunderstandings, you can provide an empty string for buttons
    	// Sample use
        //    autoscroll using images
    	//    nameSpace.autoscroll.add('nav-vert-images', {up: 'images/scroll-up.gif'}, {down: 'images/scroll-down.gif'});
    	//    autoscroll using buttons and custom speed
    	//    nameSpace.autoscroll.add('nav-vert-buttons', {speed: 3}, {up: ''}, {down: ''});
    	//    autoscroll with custom delay
    	//    nameSpace.autoscroll.add('nav-horiz-images', {delay: 20}, {left: 'images/scroll-left.gif'}, {right: 'images/scroll-right.gif'});
    	//    autoscroll with auto-detection
    	//    nameSpace.autoscroll.add('nav-horiz-buttons');
        add: function(id) {
            var self, el;
            var i, arg, name;
            self = this;
            el = Dom.get(id);
            // process optional arguments
            for (i = 1; i < arguments.length; i++) {
                arg = arguments[i];
                for (name in arg) if (arg.hasOwnProperty(name)) {
                    if (name === 'speed' || name === 'delay') {
                        el[name] = arg[name];
                    }
                    if (name === 'up' || name === 'down' || name === 'left' || name === 'right') {
                        el[name] = this.initButton(name, arg[name], el);
                    }
                }
            }
            if (!el.up && !el.down && !el.left && !el.right) {
                // no direction parameters, so presume movement along longer dimensions
                if (el.scrollWidth < el.scrollHeight) {
                    this.add(id, {up: ''}, {down: ''});
                } else {
                    this.add(id, {left: ''}, {right: ''});
                }
            } else {
                // Hide scrollbars
                Dom.style.set(el, {overflow: 'hidden'});
                // assign scrolling properties
                el.speed = el.speed || this.speed;
                el.delay = el.delay || this.delay;
                el.scroll = this.scroll;
                el.stop = this.stop;
            }
        },
        initButton: function (dir, value, target) {
            var info, position;
            // Add information about button as an object to the list
            info = {};
            // allow for images or buttons
            info.type = (value > '') ? 'image' : 'button';
            if (info.type === 'image') {
                info.img = value;
            }
            position = {up: 'before', down: 'after', left: 'before', right: 'after'};
            info.position = position[dir];
            if (dir === 'left' && info.type === 'button') {
                // special case so that a horizontal list has both buttons below it
                info.position = 'after';
            }
            // create button
            var button = this.createButton(dir, info.type, info.img, target);
            Dom.add(button, target, info.position);
            return info;
        },
        createButton: function (dir, type, img, target) {
            var button, span, value;
            if (type === 'image') {
                button = Dom.create('img');
                Dom.attr.set(button, {src: img});
            } else if (type === 'button') {
                button = Dom.create('input');
                Dom.attr.set(button, {type: 'button'});
                // use title case for button
                value = dir.substring(0, 1).toUpperCase() + dir.substring(1, dir.length);
                Dom.attr.set(button, {value: value});
                span = Dom.create('span');
                span.appendChild(button);
                button = span;
            }
            Dom.attr.set(button, {'class': dir + '-scroll'});
            // add event capturing
            Event.add(button, 'mouseover', function () {
                target.direction = dir;
                target.increment = target.speed * (dir === 'up' || dir === 'left') ? -1 : 1;
                target.scroll(target);
            });
            Event.add(button, 'mouseout', function () {
                target.stop(target);
            });
            return button;
        },
        scroll: function (id) {
            var el = Dom.get(id);
            var dir = el.direction;
            if (dir === 'up' || dir === 'down') {
                el.scrollTop += el.speed * el.increment;
            } else if (dir === 'left' || dir === 'right') {
                el.scrollLeft += el.speed * el.increment;
            }
            el.timer = setTimeout(function () {
                el.scroll(id);
            }, this.delay);
        },
        stop: function (id) {
            clearTimeout(Dom.get(id).timer);
        }
    };
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •