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

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

[RobbieZ]

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

Thanks

[victorvu]

Originally Posted by RobbieZ

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]

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

Same for me, desinstalled

[Digital Jedi]

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

Originally Posted by notas_25

Same for me, desinstalled

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

[Dragaon]

Originally Posted by Digital Jedi

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]

Originally Posted by Dragaon

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]

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

Originally Posted by notas_25

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.