com web/php: Adding a back-to-top button: include/header.inc js/common.js js/ext/jquery.ui.totop.js styles/site.css styles/theme.css

Commit: b0517fbe2ff25be0db9d45d1bfc036afd4f374fe Author: Paul Dragoonis <dragoonis@gmail.com> Thu, 4 Jul 2013 13:32:04 +0100 Parents: 7e2acd4094bcf3f2cbe855ff7a1ec7bda3694834 Branches: master Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=b0517fbe2ff25be0db9d45d1bfc036afd4f374fe Log: Adding a back-to-top button Changed paths: M include/header.inc M js/common.js A js/ext/jquery.ui.totop.js M styles/site.css M styles/theme.css Diff: diff --git a/include/header.inc b/include/header.inc index 0b9cca4..4b9297b 100644 --- a/include/header.inc +++ b/include/header.inc @@ -74,6 +74,7 @@ if (isset($shortname) && $shortname) { document.write('<script type="text/javascript" src="<?php echo $STATIC_ROOT ?>js/ext/jquery-ui-1.8.7.min.js"><' + '/script>'); } </script> + <script type="text/javascript" src="<?php echo $STATIC_ROOT ?>js/ext/jquery.ui.totop.js"></script> <script type="text/javascript" src="<?php echo $STATIC_ROOT ?>js/common.js<?php echo $v?>"></script> <script type="text/javascript" src="<?php echo $STATIC_ROOT ?>js/usernotes.js"></script> <?php if (!empty($_SERVER["BASE_HREF"])): ?> diff --git a/js/common.js b/js/common.js index 610655f..0531cf8 100644 --- a/js/common.js +++ b/js/common.js @@ -268,6 +268,9 @@ $(document).ready(function() { $this.remove(); } }); + + $().UItoTop({ easingType: 'easeOutQuart' }); + }); /** diff --git a/js/ext/jquery.ui.totop.js b/js/ext/jquery.ui.totop.js new file mode 100644 index 0000000..c238c9f --- /dev/null +++ b/js/ext/jquery.ui.totop.js @@ -0,0 +1,58 @@ +/* +|-------------------------------------------------------------------------- +| UItoTop jQuery Plugin 1.1 +| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/ +|-------------------------------------------------------------------------- +*/ + +(function($){ + $.fn.UItoTop = function(options) { + + var defaults = { + text: 'To Top', + min: 200, + inDelay:600, + outDelay:400, + containerID: 'toTop', + containerHoverID: 'toTopHover', + scrollSpeed: 1200, + easingType: 'linear' + }; + + var settings = $..extend(defaults, options); + var containerIDhash = '#' + settings..containerID; + var containerHoverIDHash = '#'+settings.containerHoverID; + + $('body').append('<a href="#" id="'+settings..containerID+'" onclick="return false;">'+settings.text+'</a>'); + $(containerIDhash).hide().click(function(){ + $('html, body').animate({scrollTop:0}, settings.scrollSpeed, settings.easingType); + $('#'+settings.containerHoverID, this).stop().animate({'opacity': 0 }, settings.inDelay, settings.easingType); + return false; + }) + .prepend('<span id="'+settings.containerHoverID+'"></span>') + .hover(function() { + $(containerHoverIDHash, this).stop().animate({ + 'opacity': 1 + }, 600, 'linear'); + }, function() { + $(containerHoverIDHash, this).stop().animate({ + 'opacity': 0 + }, 700, 'linear'); + }); + + $(window).scroll(function() { + var sd = $(window).scrollTop(); + if(typeof document.body.style.maxHeight === "undefined") { + $(containerIDhash).css({ + 'position': 'absolute', + 'top': $(window).scrollTop() + $(window).height() - 50 + }); + } + if ( sd > settings.min ) + $(containerIDhash).fadeIn(settings.inDelay); + else + $(containerIDhash).fadeOut(settings.outDelay); + }); + +}; +})(jQuery); \ No newline at end of file diff --git a/styles/site.css b/styles/site.css index 2d2bdda..6155899 100644 --- a/styles/site.css +++ b/styles/site.css @@ -1217,6 +1217,7 @@ div.soft-deprecation-notice blockquote.sidebar { color: #99C; } + /* * vim: noet */ diff --git a/styles/theme.css b/styles/theme.css index cf074f6..7354d10 100755 --- a/styles/theme.css +++ b/styles/theme.css @@ -1038,3 +1038,31 @@ em, strong { font-style: italic; color: #333; } + + + +#toTop { + display:none; + text-decoration:none; + position:fixed; + bottom:12px; + right:50px; + overflow:hidden; + width:43px; + height:43px; + border:none; + z-index:100; + text-indent:-999px; + background:url(../images/to-top.png) no-repeat; + opacity:0.5; +} + +#toTopHover { + display:block; + overflow:hidden; + float:left; +} + +#toTop:active,#toTop:focus { + outline:none; +} \ No newline at end of file