Add "Up / Down" buttons

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

Ange Tuteur: Forumaster; Posts : 13246
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

Post n°1

Add "Up / Down" buttons

by Ange Tuteur 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 09615172706

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="https://i42.servimg.com/u/f42/09/02/12/09/sort_u10.png" alt="Go to top" /></a> <a href="#bottom"><img src="https://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