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

[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]

Originally Posted by ttran

Nice, Thanks

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

Added a screen shot to the first post.

[doctorsexy]

Very nice..thanks

[COL NIL SATIS]

Sweet

[just.b.jealous]

Originally Posted by doctorsexy

Very nice..thanks

No probs, you're welcome.

[RobbieZ]

Can this be changed or added : Scroll to Bottom ?