Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Oct 2008
    Posts
    48
    Thanks
    10
    Thanked 0 Times in 0 Posts

    script a licious slider update with effect scrollto

    Hi all,

    I have an Unordered List inside a DIV
    and each list item has a nested div.
    The Unordered List has a working Scriptalicious slider and mouse-wheel scroll - Yaaaaay!

    Here's the fun part...
    I want to create a button that when clicked, it jumps to a specified list item.

    The code below works but the slider doesn't update with it - *sadface =[
    and also the whole page scrolls as well as the div, i only want that div to scroll if possible....
    Code:
    <div><a href="#anchor">anchor</a></div>
    This, I think is the code meant to be used, or at least I would like to use
    Code:
    <a href="#" onclick="Effect.ScrollTo('id_of_element'); return false;">Click me to scroll to the ID</a>
    But I cant manage to implement it.... Please help
    And here is my code so far
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html>
        <head>
            <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
            <title>Use a Slider as a Scrollbar Demo</title>
     <script src="../pages/js/prototype.js" type="text/javascript"></script>
     <script src="../pages/js/scriptaculous.js" type="text/javascript"></script>
     <script src="../pages/js/slide.js" type="text/javascript"></script>
    
    
    
            <style type="text/css" media="screen" >
                 ul {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    border: none;
                    }
    
                /* scrollable div area */
                #table_scripts {
                    display: block;
                    position: absolute;
                    left:263px;
                    top:147px;
                    width:926px;
                    height:785px;
                    padding: 0px;
                    border-top: 0;
                    border-left: 0;
                    overflow: hidden;
                    white-space: nowrap;
                     z-index: 4;
                }
                
                /* wrap to make sure that image area is clickable */
                #wrap3 {
                    position: absolute;
                    left:1189px;
                    top:147px;
                    width: 20px;
                    height: 785px;
                    background: transparent url(../images/vert_track.png) no-repeat bottom left;
                    z-index: 8;
                }
                
                /* vertical track */
                #track3 {
                    position: absolute;
                    width: 20px;
                    height: 785px;
                }
                
                /* vertical track handle */
                #handle3 {
                    width: 29px;
                    height: 29px;
                }
                
    
                
    #script_weld a{
        display: block;
        background: url(../images/script_b_weld.png) no-repeat top right;
        width:862px;
        height:34px;
    }
    #script_weld a:hover{
        background-position:bottom left;
    }
    #script_sharpen a{
        display: block;
        background: url(../images/script_b_weld.png) no-repeat top right;
        width:862px;
        height:34px;
    
    }
    #script_sharpen a:hover{
        background-position:bottom left;
    }
            </style>
    
        </head>
        <body>
            <div>
            <div id="table_scripts">
                <ul>
                    <br>
                    <li><div id="script_weld"><a href="index.php?page=002"></a></div></li>
                    <br>
                    <li><div id="script_sharpen"><a href="index.php?page=003"></a></div></li>
    
    
    
    ........lots of list elements....
    
    
    
                </ul>
                <div id="jump"><a href="#script_sharpen">beeeeeee</a></div>
                <div id="jump"><a href="#script_weld">pooooooo</a></div>
    </div>
    </div>        
            <div id="wrap3">
                <div id="track3">
                    <div id="handle3"><img src="../images/slider.png" alt="" /></div>
                </div>
            </div>
    
    
            <script type="text/javascript" language="javascript">
            // <![CDATA[
                         
                                     
                // vertical slider control
                var slider3 = new Control.Slider('handle3', 'track3', {
                    axis: 'vertical',
                    range: $R(0,40),
    
                    onSlide: function(v) { scrollVertical(v, $('table_scripts'), slider3);  },
                    onChange: function(v) { scrollVertical(v, $('table_scripts'), slider3); }
                    
                });
                
    
                
                // scroll the element vertically based on its width and the slider maximum value
                function scrollVertical(value, element, slider) {
                    element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight));
                }
    
                
    
                // disable vertical scrolling if text doesn't overflow the div
                if ($('table_scripts').scrollHeight <= $('table_scripts').offsetHeight) {
                    slider3.setDisabled();
                    $('wrap3').hide();
                }
                
    
                
                
    
                
                // mouse wheel code from http://adomas.org/javascript-mouse-wheel/
                function handle3(delta) {
                    slider3.setValueBy(-delta);
                }
    
                /** Event handler for mouse wheel event. */
                function wheel(event){
                    var delta = 0;
                    if (!event) /* For IE. */
                        event = window.event;
                    if (event.wheelDelta) { /* IE/Opera. */
                        delta = event.wheelDelta/120;
                        /** In Opera 9, delta differs in sign as compared to IE. */
                        if (window.opera)
                            delta = -delta;
                    } else if (event.detail) { /** Mozilla case. */
                        /** In Mozilla, sign of delta is different than in IE.
                        * Also, delta is multiple of 3.
                        */
                        delta = -event.detail/3;
                    }
            
                    /** If delta is nonzero, handle it.
                    * Basically, delta is now positive if wheel was scrolled up,
                    * and negative, if wheel was scrolled down.
                    */
                    if (delta)
                        handle3(delta);
            
                    /** Prevent default actions caused by mouse wheel.
                    * That might be ugly, but we handle scrolls somehow
                    * anyway, so don't bother here..
                    */
                    if (event.preventDefault)
                        event.preventDefault();
                    
                    event.returnValue = false;
                }
    
                // mozilla
                Event.observe('table_scripts', 'DOMMouseScroll', wheel);
                
                // IE/Opera
                Event.observe('table_scripts', 'mousewheel', wheel);
    
    
            // ]]>
            </script>
        
    
        </body>
    </html>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,858
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Are you trying to make something at http://www.dynamicdrive.com/dynamici...markscroll.htm
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Oct 2008
    Posts
    48
    Thanks
    10
    Thanked 0 Times in 0 Posts
    Yes that is what I am trying to do.
    Unfortunately it doesn't work with my existing page.
    perhaps is is looking a the whole document rather than just inside
    Code:
    <div id="table_scroller">
    how do I refer to that div using this
    Code:
    <a href="javascript:bookmarkscroll.scrollTo('sectionb')">Scroll to Section B</a>
    or this
    Code:
    <a href="#about">
    or this
    the scriptalicious code from http://wiki.github.com/madrobby/scri...effectscrollto
    Code:
    <a href="#" onclick="Effect.ScrollTo('sectionb'); return false;">Click me to scroll to sectionb</a>
    would it be this
    Code:
    <a href="#" onclick="document.getElementById('table_scroller').Effect.ScrollTo('sectionb'); return false;">Click me to scroll to sectionb</a>
    I think the above code is working, except that it scrolls not only the div but the whole page as well, I need to stop that and also make the custom slider update to where it scrolled to....
    Last edited by Bambam007; 05-26-2009 at 02:33 AM.

  • #4
    New Coder
    Join Date
    Oct 2008
    Posts
    48
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Update

    I think that this part of the script...

    Code:
      <script type="text/javascript" language="javascript">
            // <![CDATA[
                         
                                     
                // vertical slider control
                var slider3 = new Control.Slider('handle3', 'track3', {
                    axis: 'vertical',
                    range: $R(0,40),
    
                    onSlide: function(v) { scrollVertical(v, $('table_scripts'), slider3);  },
                    onChange: function(v) { scrollVertical(v, $('table_scripts'), slider3); }
                    
                });
                
    
                
                // scroll the element vertically based on its width and the slider maximum value
                function scrollVertical(value, element, slider) {
                    element.scrollTop = Math.round(value/slider.maximum*(element.scrollHeight-element.offsetHeight));
                }
    
                
    
                // disable vertical scrolling if text doesn't overflow the div
                if ($('table_scripts').scrollHeight <= $('table_scripts').offsetHeight) {
                    slider3.setDisabled();
                    $('wrap3').hide();
                }
                
    
                
                
    
                
                // mouse wheel code from http://adomas.org/javascript-mouse-wheel/
                function handle3(delta) {
                    slider3.setValueBy(-delta);
                }
    
                /** Event handler for mouse wheel event. */
                function wheel(event){
                    var delta = 0;
                    if (!event) /* For IE. */
                        event = window.event;
                    if (event.wheelDelta) { /* IE/Opera. */
                        delta = event.wheelDelta/120;
                        /** In Opera 9, delta differs in sign as compared to IE. */
                        if (window.opera)
                            delta = -delta;
                    } else if (event.detail) { /** Mozilla case. */
                        /** In Mozilla, sign of delta is different than in IE.
                        * Also, delta is multiple of 3.
                        */
                        delta = -event.detail/3;
                    }
            
                    /** If delta is nonzero, handle it.
                    * Basically, delta is now positive if wheel was scrolled up,
                    * and negative, if wheel was scrolled down.
                    */
                    if (delta)
                        handle3(delta);
            
                    /** Prevent default actions caused by mouse wheel.
                    * That might be ugly, but we handle scrolls somehow
                    * anyway, so don't bother here..
                    */
                    if (event.preventDefault)
                        event.preventDefault();
                    
                    event.returnValue = false;
                }
    
                // mozilla
                Event.observe('table_scripts', 'DOMMouseScroll', wheel);
                
                // IE/Opera
                Event.observe('table_scripts', 'mousewheel', wheel);
    
    
            // ]]>
            </script>
    needs to be able to watch the div and update accordingly... somehow

    i have added this to the end of the script as well...
    from tobie langel - it controls the anchor instead...
    Code:
               // autoscroll 
                Event.observe('table_scripts', 'load', function() {
                  $$('a[href^=#]:not([href=#])').each(function(element) {
                    element.observe('click', function(event) {
                      new Effect.ScrollTo(this.hash.substr(1));
                      Event.stop(event);
                    }.bindAsEventListener(element))
      })
    })
    Perhaps i could add something to this part to make it update the slider????
    like in mousewheel event

    Code:
    slider3.setValueBy(-delta)

  • #5
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    scrollto will act on the page, not the div. in theory if your div were in an iframe or something it would only affect that. that being said, it sounds like you found a better piece of code for scrolling... which is what i was going to say to do.


    can i see the page you have up now? you're probably going to need to call one of the slider functions explicitly... not through the api's main function.


  •  

    Posting Permissions

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