The Up/Down buttons

[just.b.jealous]

* Notes : Support provided, but shouldn't be needed. Works on all versions of vB, including older releases.


Description:
Ever get sick of scrolling back to the top of a page? Ever get sick of scrolling to the bottom of the page to get to the link that scrolls back to the top for you? Then this Mod is for you!
With one simple template edit the mod will place 2 stationary arrows at the bottom right-hand corner of all pagess. One arrow to go up, one arrow to go down. The arrows are anchored to your browser window itself, not the web page. Arrows do not move, or glide.



http://img101.imageshack.us/img101/2819/arrowsp.png


Installation:

Steps

* Upload the arrows images to (FORUM/images/buttons/).

* admincp >> Styles & Templates >> Style Manager >> Theme >> Edit Templates.

* "header" template - Add the following code (after editing "yoursite.com") to the end of the template:


<!-- Begin Template Mod -- The Up/Down buttons -->
<script type="text/javascript">
function create_up() {
if(document.body){
var up = document.createElement('span');
up.innerHTML = "<img src='http://yoursite.com/images/buttons/Arrow-Up.png' width='32px' height='32px' />";
var upsty = "opacity:0.7;position:fixed;text-align:right;right:42px;bottom:0px;z-index:50000;";
up.style.cssText = upsty;
up.addEventListener('mouseover', function(){ up.style.opacity = 1; }, false);
up.addEventListener('mouseout', function(){ up.style.opacity = 0.5; }, false);
up.addEventListener('click', function(){ window.scrollTo(0,0); }, false);
document.body.appendChild(up);
}
};
if(self==top) create_up();
function create_down() {
if(document.body){
var down = document.createElement('span');
down.innerHTML = "<img src='http://yoursite.com/images/buttons/Arrow-Down.png' width='32px' height='32px' />";
var dosty = "opacity:0.7;position:fixed;text-align:right;right:0px;bottom:0px;z-index:50000;";
down.style.cssText = dosty;
down.addEventListener('mouseover', function(){ down.style.opacity = 1; }, false);
down.addEventListener('mouseout', function(){ down.style.opacity = 0.5; }, false);
down.addEventListener('click', function(){ window.scrollTo(0, document.body.scrollHeight); }, false);
document.body.appendChild(down);
}
};
if(self==top) create_down();
</script>
<!-- End Template Mod -- The Up/Down buttons -->

Save and you're finished!


Rather use words instead of pictures?
http://img12.imageshack.us/img12/5894/updownt.jpg


<!-- Begin Template Mod -- The Up/Down buttons -->
<script type="text/javascript">
// Begin Up code.
function create_up() {
if(document.body){
var up = document.createElement('span');
up.innerHTML = "Up";
var upsty = "opacity:0.7;position:fixed;text-align:right;right:42px;bottom:0px;z-index:50000;";
upsty+="border: 2px solid;-moz-border-top-colors: ThreeDLightShadow ThreeDHighlight;-moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;-moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;-moz-border-left-colors: ThreeDLightShadow ThreeDHighlight;padding: 3px;color: MenuText;background-color: Menu;font-size:9pt;font-family:arial,sans-serif;cursor:pointer;";
up.style.cssText = upsty;
up.addEventListener('mouseover', function(){ up.style.opacity = 1; }, false);
up.addEventListener('mouseout', function(){ up.style.opacity = 0.5; }, false);
up.addEventListener('click', function(){ window.scrollTo(0,0); }, false);
document.body.appendChild(up);
}
};
if(self==top) create_up();
// End Up code.
//
// Begin Down code.
function create_down() {
if(document.body){
var down = document.createElement('span');
down.innerHTML = "Down";
var dosty = "opacity:0.7;position:fixed;text-align:right;right:0px;bottom:0px;z-index:50000;";
dosty+="border: 2px solid;-moz-border-top-colors: ThreeDLightShadow ThreeDHighlight;-moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;-moz-border-bottom-colors: ThreeDDarkShadow ThreeDShadow;-moz-border-left-colors: ThreeDLightShadow ThreeDHighlight;padding: 3px;color: MenuText;background-color: Menu;font-size:9pt;font-family:arial,sans-serif;cursor:pointer;";
down.style.cssText = dosty;
down.addEventListener('mouseover', function(){ down.style.opacity = 1; }, false);
down.addEventListener('mouseout', function(){ down.style.opacity = 0.5; }, false);
down.addEventListener('click', function(){ window.scrollTo(0, document.body.scrollHeight); }, false);
document.body.appendChild(down);
}
};
if(self==top) create_down();
// End Down code.
</script>
<!-- End Template Mod -- The Up/Down buttons -->
Save and you're finished!

If your forum uses some kind of toolbar that sits at the bottom of pages, ex. Wibiya toolbar, you'll need to edit the following part of the code to suit your needs..

var c = "opacity:0.7;position:fixed;text-align:right;right:0px;bottom:0px;z-index:50000;";

Usually changing it to something around 25px will do well...


http://img41.imageshack.us/img41/2572/arrowupu.pnghttp://img13.imageshack.us/img13/2614/arrowdowng.png

[ttran]

Nice, Thanks :)

[giorgino]

Any screenshot or demo site? :)

[Special Pages]

^ Yeah that's what I want too.

[Manoel J?nior]

Screenshot please

[just.b.jealous]

Nice, Thanks :)

You're welcome and I'm glad someone found it useful.


Any screenshot or demo site? :)
^ Yeah that's what I want too.
Screenshot please

Added a screen shot to the first post.

[doctorsexy]

Very nice..thanks

[COL NIL SATIS]

Sweet

[just.b.jealous]

Very nice..thanks

No probs, you're welcome.

[RobbieZ]

Can this be changed or added : Scroll to Bottom ?

[just.b.jealous]

Can this be changed or added : Scroll to Bottom ?

Yup, updated it to have both buttons,..

1 button to go Up.
1 button to go Down.

If you only need one of the buttons- just edit the coding where I've marked everything accordingly. Basically just remove the half of the code you do not want. If you're only using 1- you'll have to adjust the settings for "right:?px" and "bottom:0px".

[RobbieZ]

Woohoo Installed :D

[RobbieZ]

Is there anyway to call to an image instead of the 'boxed' up and down buttons?

Thanks

[victorvu]

Is there anyway to call to an image instead of the 'boxed' up and down buttons?

Thanks

I am thinking the same thing, such as arrow icon up and arrow icon down.

Cheers,

Victor:up:

[Dragaon]

Sorry to be the 1st negative report here.
Installed on 4.1.5 pl1 and nothing shows up, no buttons and no errors. zip.

I tried it on various styles as well as the default vb one.

[notas_25]

Sorry to be the 1st negative report here.
Installed on 4.1.5 pl1 and nothing shows up, no buttons and no errors. zip.

I tried it on various styles as well as the default vb one.

Same for me, desinstalled

[Digital Jedi]

Sorry to be the 1st negative report here.
Installed on 4.1.5 pl1 and nothing shows up, no buttons and no errors. zip.

I tried it on various styles as well as the default vb one.

Same for me, desinstalled

Try adding the code the end of your headinclude template instead.

[Dragaon]

Try adding the code the end of your headinclude template instead.

Thanks, was worth a shot but same result. Nothing showing up. using FF and VB 415

[Digital Jedi]

Thanks, was worth a shot but same result. Nothing showing up. using FF and VB 415
I know some JavaScript functions I've added to my templates wouldn't work because of the order it was in with other JavaScript codes. Other times there was an incompatibility with them and other functions. You might try moving things around or testing out on a default style with your plugins deactivated.

[just.b.jealous]

Sorry to be the 1st negative report here.
Installed on 4.1.5 pl1 and nothing shows up, no buttons and no errors. zip.

I tried it on various styles as well as the default vb one.

Same for me, desinstalled

Try adding it to the bottom of 1 of these templates:
header, headinclude, footer, navbar (might work).

Any template that is called on every page should theoretically work without problems.

[just.b.jealous]

Is there anyway to call to an image instead of the 'boxed' up and down buttons?

Thanks

Updated 1st post with instructions,..

[RobbieZ]

Updated 1st post with instructions,..

Thanks very much, I was using '^' and 'V' lololol

[victorvu]

Thank you for the mod. It is great one.

I installed it and got nothing shows up on my site.

It may have the conflict!

Thanks.

Victor:up:

[just.b.jealous]

Thank you for the mod. It is great one.

I installed it and got nothing shows up on my site.

It may have the conflict!

Thanks.

Victor:up:

Try adding it to the bottom of 1 of these:
header, headinclude, footer, or maybe even navbar..

[victorvu]

Try adding it to the bottom of 1 of these:
header, headinclude, footer, or maybe even navbar..

Thanks for the info.

I tried them all with no arrows! Where did they go?

Victor:up:

[RobbieZ]

Try adding it to the bottom of 1 of these:
header, headinclude, footer, or maybe even navbar..

Im getting load lag on my images, its only seconds, will try other templates to see if it speeds up!

[just.b.jealous]

Im getting load lag on my images, its only seconds, will try other templates to see if it speeds up!


Try and see if this helps- In the coding, where it's:

http://yoursite.com/images/up.png

change it to:

./images/up.png

[just.b.jealous]

Thanks for the info.

I tried them all with no arrows! Where did they go?

Victor:up:

Try adding it to the top of the template, instead of the bottom. There really shouldn't be any conflicts no matter the mods installed or the difference between vBulletins that people use. The coding is more or less, browser specific- not VB specific. If your browser accepts JavaScript (which all do- unless you've turned it off), then this code should work fine and without errors.

[justicechick]

If you have a bar at the bottom you can also make the buttons appear at the top by using the following. I have cometchat at the bottom so I had to alter the code to make it works..

<!-- Begin Template Mod -- The Up/Down buttons -->
if(self==top) create_up();
// End Up code.
//
// Begin Down code.
function create_down() {
if(document.body){
var down = document.createElement('span');
down.innerHTML = "Down";
var dosty = "opacity:0.7;position:fixed;text-align:right;right:0px;top:0px;z-index:50000;";
dosty+="border: 2px solid;-moz-border-top-colors: ThreeDLightShadow ThreeDHighlight;-moz-border-right-colors: ThreeDDarkShadow ThreeDShadow;-moz-border-top-colors: ThreeDDarkShadow ThreeDShadow;-moz-border-left-colors: ThreeDLightShadow ThreeDHighlight;padding: 3px;color: MenuText;background-color: Menu;font-size:9pt;font-family:arial,sans-serif;cursor:pointer;";
down.style.cssText = dosty;
down.addEventListener('mouseover', function(){ down.style.opacity = 1; }, false);
down.addEventListener('mouseout', function(){ down.style.opacity = 0.5; }, false);
down.addEventListener('click', function(){ window.scrollTo(0, document.body.scrollHeight); }, false);
document.body.appendChild(down);
}
};
if(self==top) create_down();
// End Down code.
</script>
<!-- End Template Mod -- The Up/Down buttons -->

You can see the results here http://www.theflirtingretreat.com/