Results 1 to 10 of 10

Thread: Up and down button need help.

  1. #1
    Join Date
    Oct 2013
    Posts
    169
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default Up and down button need help.

    I've got two great codes I use on my forum for a simple to top and to bottom of the page scrollers when they are clicked one goes in the header the other in the footer:

    Code:
    <div style="text-align: right;position:relative;z-index:100; margin-bottom:-40px;">
    <ul class="controls">
    <a class="adjusttobottom" onclick ="scroll(0,document.body.scrollHeight);"><img src="http://www.jr-richscooterdoc.com/Vbanlogo/DownPRO2.png" border="0" alt=" photo tobottom.png"/></a>
    </ul>
    </div>


    Code:
    <div style="text-align: right;">
    <ul class="controls">
    <a class="adjustBackToTop" onclick="scroll(0,0);"><img src="http://www.jr-richscooterdoc.com/Vbanlogo/UPpro3.png" border="0" alt=" photo UPpro3.png "/></a></li>
    </ul>
    </div>
    I use a image for the button and they can be seen here:

    http://www.thescooterprofessor.proboards.com/

    I've been asked by several members if the buttons can be made to scroll with the page when you are using the normal scroll bar on your browser where you could click on them at any point? Of course I'm sure I would have to move then to the right farther but that's not problem with relative alignment.

    Thanks

  2. #2
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,880
    Thanks
    49
    Thanked 265 Times in 257 Posts
    Blog Entries
    56

    Default

    Use position: fixed instead of position: relative. Of course, you will have to use certain values for top and / or right too.

  3. #3
    Join Date
    Oct 2013
    Posts
    169
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Can you explain this? I put in fixed as you said and it does do what I want but when I used fixed instead of relative the button now goes all the way to the left of the page? It's like the alignment of right is totally gone.

    I do fine tune the top and can tweak the right too in my style sheet but no mater how I change the pixels of "right" it has no effect?

  4. #4
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,880
    Thanks
    49
    Thanked 265 Times in 257 Posts
    Blog Entries
    56

    Default

    For instance:
    position: fixed; right: 10px; top: 10px
    for the top button. Just a wild guess. What does that do on your page?

  5. #5
    Join Date
    Oct 2013
    Posts
    169
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Sorry for my late reply been sick with the bug but you guessed right and instead of putting that directly into the header and footer code I just added it to the style sheet area like this:


    Code:
    .adjusttobottom {
    position: fixed;
    top: 400px;
    left: 8px;
    }
    Did a similar one for the Back to top button, results here and you can see each button scroll with the page but when clicked on they go where they need to.

    http://itistheride.boards.net/

    Now I've got a question? Want to know if this kind of button can be done with a html template code? Or even a javascript code?

    http://scooterrebels.proboards.com/

    See the single button? When you scroll about middle ways down the page the arrow will change direction to "Up" and when clicked will go back to the top. Same if you are scrolling down, the arrow stays "down" so far down the page and when clicked will go to the bottom of the page. Neat!

  6. #6
    Join Date
    Oct 2013
    Posts
    169
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    I think I just found a code that does this but not exactly sure how to put it all together?

    http://stackoverflow.com/questions/1...tates-from-png

  7. #7
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,880
    Thanks
    49
    Thanked 265 Times in 257 Posts
    Blog Entries
    56

    Default

    Try to experiment with the following script and adapt it to your page:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Scroll Check</title>

    <script>
    function getDocHeight() {
    var D = document;
    return Math.max(
    D.body.scrollHeight, D.documentElement.scrollHeight,
    D.body.offsetHeight, D.documentElement.offsetHeight,
    D.body.clientHeight, D.documentElement.clientHeight
    );
    }

    window.onscroll = function()
    {
    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
    if(scrollTop >= getDocHeight()/2)
    {document.getElementById('scrollerbutton').src="http://www.itistheride.com/Rbanlogo/up1.png"}
    else
    {document.getElementById('scrollerbutton').src="http://www.itistheride.com/Rbanlogo/down1.png"}
    }

    </script>

    </head>

    <body>
    <div style="position: absolute; height: 320%; background: red; ">&nbsp;</div>
    <img id="scrollerbutton" alt="" src="http://www.itistheride.com/Rbanlogo/down1.png" style="position: fixed; right: 1px; top: 50%">
    </body>
    </html>

  8. #8
    Join Date
    Oct 2013
    Posts
    169
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    OK we are getting there and the arrow changes direction and such but will not go up or down? In other words it won't "click" to change direction? Also I double checked this but it's causing the red vertical line on the left?

    Tried it on my test forum:

    http://scootproftest.freeforums.net/


    Ok I got rid of the red line in fact didn't need the part of the code of the background, my forum background is controlled by the theme manager so I removed it:

    Code:
    background: red;
    OK just like you said I'm playing with it and I have to remove the HTML and BODY tags because they are in my forum script by default so adding them stopped the vendor ad they have on the forum to stop, again look at the test forum. This is what I have in the header right now and if I can get it to click up and down I'll have it, except may need to adjust it in or out on the side?

    Code:
    <script>
     function getDocHeight() {
     var D = document;
     return Math.max(
     D.body.scrollHeight, D.documentElement.scrollHeight,
     D.body.offsetHeight, D.documentElement.offsetHeight,
     D.body.clientHeight, D.documentElement.clientHeight
     );
     }
    
     window.onscroll = function()
     {
     var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
     if(scrollTop >= getDocHeight()/2)
     {document.getElementById('scrollerbutton').src="http://www.itistheride.com/Rbanlogo/up1.png"}
     else
     {document.getElementById('scrollerbutton').src="http://www.itistheride.com/Rbanlogo/down1.png"}
     }
    
     </script>
    
     
    
     
     <div style="position: absolute; height: 320%; ">&nbsp;</div>
     <img id="scrollerbutton" alt="" src="http://www.itistheride.com/Rbanlogo/down1.png" style="position: fixed; right: 1px; top: 50%">

    Shouldn't there be a "on click" part in the code?
    Last edited by JRR; 02-09-2014 at 02:57 PM.

  9. #9
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,880
    Thanks
    49
    Thanked 265 Times in 257 Posts
    Blog Entries
    56

    Default

    The very long red vertical line was only there to force a vertical scrollbar. Of course you don't need that line.
    And of course you need a click event. Just do what you did before. It means that you need this:
    <img id="scrollerbutton" alt="" src="http://www.itistheride.com/Rbanlogo/down1.png" style="position: fixed; right: 1px; top: 50%" onclick="if(this.src=='http://www.itistheride.com/Rbanlogo/down1.png'){scroll(0,document.body.scrollHeight);} else scroll(0,0)">

  10. #10
    Join Date
    Oct 2013
    Posts
    169
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default

    Works like a charm! Thanks


    http://scootproftest.freeforums.net/
    Last edited by JRR; 02-09-2014 at 06:33 PM.

Similar Threads

  1. Resolved gallery not scrolling on button hold, only moves on button release
    By Mark Ellis in forum JavaScript
    Replies: 0
    Last Post: 10-13-2013, 11:56 AM
  2. Replies: 2
    Last Post: 03-05-2013, 10:52 PM
  3. Step carousel nav button issue (nav button doesn`t fade out)
    By mesua in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 08-22-2012, 05:52 PM
  4. Place Play Button outside image and reflect button status...
    By elmstreet in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 02-02-2010, 10:14 PM
  5. Replies: 3
    Last Post: 01-12-2009, 09:53 PM

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
  •