Add "Up / Down" buttons

Go down

Tutorial 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.


Add "Up / Down" buttons 09615172706Create 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 Add "Up / Down" buttons Submit10

Add "Up / Down" buttons 09615172706Position 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 Add "Up / Down" buttons Submit10 and it's ready to use ! Very Happy



Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13223
Reputation : 2961
Language : EN, JA, FR
Location : Macungie, PA

https://sethclydesdale.github.io/

Back to top Go down

Back to top


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