Add "Up / Down" buttons

Go down

Add "Up / Down" buttons

Post by Ange Tuteur on June 16th 2014, 11:38 am

Add "Up / Down" buttons


This tutorial will allow you to add two buttons which return you to the top or bottom of the page on all pages of your forum.


Create the JavaScript

Administration Panel > Modules > JavaScript codes management

Choose "Create a new JavaScript", give it a title, and tick "in all the pages".

Add the following code :
Code:
$(function(){$("body").append('<div class="updownbutton"><a href="#top"><img src="http://i42.servimg.com/u/f42/09/02/12/09/sort_u10.png" alt="Go to top" /></a> <a href="#bottom"><img src="http://i42.servimg.com/u/f42/09/02/12/09/sort_d10.png" alt="Go to bottom" /></a></div>')});

If you wish, replace the following images with the URL of your own images :
- https://i.servimg.com/u/f42/09/02/12/09/sort_u10.png
- https://i.servimg.com/u/f42/09/02/12/09/sort_d10.png
When finished click

Position the buttons via CSS

Administration Panel > Display > Colors > CSS Stylesheet

Add the following code :
Code:
.updownbutton {
  position:fixed;
  bottom:40px;
  right:10px; /* replace right with left to display the buttons on the left */
  z-index:100;
}

If you want the buttons to remain transparent and light up on hover, add the following code after the one above :
Code:
.updownbutton img {
  filter:alpha(opacity=50);
        -khtml-opacity:0.5;
          -moz-opacity:0.5;
               opacity:0.5;
}
.updownbutton img:hover {
  filter:alpha(opacity=100);
           -khtml-opacity:1;
             -moz-opacity:1;
                  opacity:1;
}

When finished click and it's ready to use ! Very Happy



avatar
Ange Tuteur
Forumaster

Male Posts : 13202
Reputation : 2918
Language : EN, JA, FR
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum