[DEV] JQuery Top Down 0.0.9

[FranckTH]

Open styles/prosilver/template/overall_header.html

Find :

Code: Select all

$('#nav_down').click(
		function (e) {
			$('html, body').animate({scrollTop: $elem.height()}, 800);
		}
	);
        // clicking the "up" button will make the page scroll to the top of the page
	$('#nav_up').click(

Replace with :

Code: Select all

$('#nav_down').mouseover(
		function (e) {
			$('html, body').animate({scrollTop: $elem.height()}, 800);
		}
	);
        // clicking the "up" button will make the page scroll to the top of the page
	$('#nav_up').mouseover(

[FranckTH]

Sorry, zip file updated with mouseover included

[sysz]

For you who just wants the jquery to work on the up arrow in viewtopic,skip the editing of the functions.php and acp_board.php, and in overall_header.html skip these two codes

Code: Select all

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/scroll-startstop.events.jquery.js"></script>

Code: Select all

<!-- IF S_ENABLE_TOPDOWN -->
<div style="display:none;" class="nav_up" id="nav_up" title="{L_BACK_TO_TOP}"></div>
<div style="display:none;" class="nav_down" id="nav_down" title="{L_BACK_TO_DOWN}"></div>
	<script type="text/javascript">
			$(function() {
	// the element inside of which we want to scroll
        var $elem = $('#wrap');

        // show the buttons
	$('#nav_up').fadeIn('slow');
	$('#nav_down').fadeIn('slow');  

        // whenever we scroll fade out both buttons
	$(window).bind('scrollstart', function(){
		$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
	});
        // ... and whenever we stop scrolling fade in both buttons
	$(window).bind('scrollstop', function(){
		$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
	});

        // clicking the "down" button will make the page scroll to the $elem's height
	$('#nav_down').mouseover(
		function (e) {
			$('html, body').animate({scrollTop: $elem.height()}, 800);
		}
	);
        // clicking the "up" button will make the page scroll to the top of the page
	$('#nav_up').mouseover(
		function (e) {
			$('html, body').animate({scrollTop: '0px'}, 800);
		}
	);
 });
        </script>
<!-- ENDIF -->

If you want to change from auto scroll up when moving your mouse pointer on the up icon simply change in viewtopic_body.html this code

Code: Select all

$('a[href=#wrap]').mouseclick(function(){

to

Code: Select all

$('a[href=#wrap]').click(function(){

Then simply remove

Code: Select all

@import url("scroll.css");

from stylesheet.css, remove the arrow images you uploaded and also remove the scroll-startstop.events.jquery file from the template folder since you wont need it any more.
-----------------------

To do this on subsilver2 simply add jquery.min in the template folder in subsilver2.
Open overall_header.html and search for

Code: Select all

<script type="text/javascript" src="{ROOT_PATH}mchat/jquery_cookie_mini.js"></script>

under that add

Code: Select all

<script type="text/javascript" src="{T_SUPER_TEMPLATE_PATH}/jquery.min.js"></script>

Then open viewtopic_body.html and before

Code: Select all

<!-- INCLUDE overall_footer.html -->

add

Code: Select all

<script type="text/javascript">
$(document).ready(function() {
   
    $('a[href=#wrapheader]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });

});
</script>