The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Add "Up / Down" buttons

View previous topic View next topic 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 :
- http://i42.servimg.com/u/f42/09/02/12/09/sort_u10.png
- http://i42.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




Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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