The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Add "Up / Down" buttons

2 posters

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

Go down

Tutorial Add "Up / Down" buttons

Post 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 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="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 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




This tutorial was written by Ea of the French Support, it has been translated to English by Ange Tuteur.
Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13244
Reputation : 2990
Language : English & 日本語
Location : Pennsylvania

View user profile https://fmdesign.forumotion.com

Obscure likes this post

Back to top Go down

Tutorial Re: Add "Up / Down" buttons

Post by skouliki February 11th 2020, 8:24 am

This code was updated to fit in with the new HTTPS address

updated 11.02.2020 by skouliki
skouliki
skouliki
Manager
Manager

Female Posts : 12343
Reputation : 1519
Language : English,Greek
Location : Greece

View user profile http://iconskouliki.forumgreek.com

Back to top Go down

Back to top

- Similar topics

The forum of the forums :: About Forumotion ::   :: Tips & Tricks

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