The Up/Down buttons

The Up/Down buttons

Mod Version: 2.00, by just.b.jealous

vB Version: 4.x.x	Rating: (6 votes - 4.83 average)	Installs: 25
Released: 09 Jun 2011	Last Update: Never	Downloads: 0
Not Supported Template Edits Re-usable Code

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

HTML Code:

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

HTML Code:

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

Code:

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

Download

No files for download.

vBulletin LTS