Miscellaneous Hacks - The Up/Down buttons

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






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?

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

[just.b.jealous]

Originally Posted by RobbieZ

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

Thanks

Updated 1st post with instructions,..

[RobbieZ]

Originally Posted by just.b.jealous

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]

Originally Posted by 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:

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

[victorvu]

Originally Posted by just.b.jealous

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]

Originally Posted by just.b.jealous

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]

Originally Posted by RobbieZ

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]

Originally Posted by victorvu

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

PHP Code:

<!-- 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/