Strict Standards: Declaration of action_plugin_dlcount::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/www/wiki/lib/plugins/dlcount/action.php on line 14

Strict Standards: Declaration of action_plugin_indexmenu::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/www/wiki/lib/plugins/indexmenu/action.php on line 169

Strict Standards: Declaration of action_plugin_ipban::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/www/wiki/lib/plugins/ipban/action.php on line 67

Strict Standards: Declaration of action_plugin_loglog::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/www/wiki/lib/plugins/loglog/action.php on line 82

Strict Standards: Declaration of action_plugin_navi::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/www/wiki/lib/plugins/navi/action.php on line 46

Strict Standards: Declaration of action_plugin_uparrow::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/www/wiki/lib/plugins/uparrow/action.php on line 69

Strict Standards: Declaration of action_plugin_userspagecreate::register() should be compatible with DokuWiki_Action_Plugin::register($controller) in /home/www/wiki/lib/plugins/userspagecreate/action.php on line 97

Strict Standards: Declaration of cache_instructions::retrieveCache() should be compatible with cache::retrieveCache($clean = true) in /home/www/wiki/inc/cache.php on line 289

Warning: Cannot modify header information - headers already sent by (output started at /home/www/wiki/lib/plugins/dlcount/action.php:14) in /home/www/wiki/inc/auth.php on line 312

Strict Standards: Only variables should be passed by reference in /home/www/wiki/doku.php on line 71

Warning: Cannot modify header information - headers already sent by (output started at /home/www/wiki/lib/plugins/dlcount/action.php:14) in /home/www/wiki/inc/actions.php on line 154
To Top Link [phpwcms-HowTo:wiki]

Strict Standards: Declaration of syntax_plugin_code::render() should be compatible with DokuWiki_Syntax_Plugin::render($format, &$renderer, $data) in /home/www/wiki/lib/plugins/code/syntax.php on line 41

Strict Standards: Declaration of syntax_plugin_tip::render() should be compatible with DokuWiki_Syntax_Plugin::render($format, &$renderer, $data) in /home/www/wiki/lib/plugins/tip/syntax.php on line 38

To Top Link

A Toplink button appears autom. on the side (fade in/out) when approximately 2/3 of the page length is reached by scrolling.

The “hard” jump to the top is replaced by a “smooth scrolling”. The user then sees that the page scrolls to the top.


Idea: David Walsh jQuery topLink Plugin
implemented by: Matt Varone http://www.mattvarone.com/
Example: UItoTop jQuery dynamic scroll-to-Top plugin



Docu: –
Forum: –

Author: Matt Varone
wiki-Author: K.Heermann (flip-flop) http://planmatrix.de) 27.07.2011
CMS Version: >= 1.4.7 (r4xx)
Version: V1.0

Tag: –

filename:

  • template/lib/jquery/plugin/jquery.ui.totop.js
  • template/lib/jquery/plugin/jquery.ui.head.totop.js
  • template/img/jquery/ui.totop.png
  • template/inc_css/specific/jquery/ui.totop.css

Folder: template/lib/jquery/plugin/

Condition:/config/phpwcms/conf.inc.php

  • $phpwcms['allow_cntPHP_rt'] = 1;
  • JS turned on in browser


Description:

The JS code, the CSS file and the button image is stored in the directories listed above.

  • In the template please select at JS Library: jQuery 1.3 or 1.4.
  • In the HTML header of the template the CSS file is loaded with
    <link rel="stylesheet" type="text/css" href="template/inc_css/specific/jquery/ui.totop.css" />
  • In the template in “MAIN” initialize the JS-Plugins at some point.
    <!-- JS: easing.min -->
    <!-- JS: ui.totop -->
    <!-- JS: ui.totop.head -->
  • The image for the button is placed in “template/img/jquery/ui.totop.png”.


Template:



JS-Code

File template/lib/jquery/plugin/jquery.ui.totop.js

jquery.ui.totop.js

/*
|--------------------------------------------------------------------------
| 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+'">'+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);


File template/lib/jquery/plugin/jquery.ui.totop.head.js

This JS snippet is normally entered directly into the HEAD section of the site.
To comply with the right correct script sequence this script will be outsourced as a plugin.
This plugin can be loaded in the correct order (see above in the text: JS plugins initialize).

jquery.ui.totop.head.js

/*
|--------------------------------------------------------------------------
| UItoTop jQuery Plugin 1.1
| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
|--------------------------------------------------------------------------
The head snipped
*/
    $(document).ready(function() {
        /*
        var defaults = {
            containerID: 'moccaUItoTop', // fading element id
            containerHoverClass: 'moccaUIhover', // fading element hover class
            scrollSpeed: 1200,
            easingType: 'linear'
        };
        */
 
        $().UItoTop({ easingType: 'easeOutQuart' });
 
    });


CSS

File template/inc_css/specific/jquery/ui.totop.css

ui.totop.css

/*
|--------------------------------------------------------------------------
| UItoTop jQuery Plugin 1.1
| http://www.mattvarone.com/web-design/uitotop-jquery-plugin/
|--------------------------------------------------------------------------
*/
 
#toTop {
    display:none;
    text-decoration:none;
    position:fixed;
    bottom:10px;
    right:10px;
    overflow:hidden;
    width:51px;
    height:51px;
    border:none;
    text-indent:-999px;
    background:url(../../../img/jquery/ui.totop.png) no-repeat left top;
}
 
#toTopHover {
    background:url(../../../img/jquery/ui.totop.png) no-repeat left -51px;
    width:51px;
    height:51px;
    display:block;
    overflow:hidden;
    float:left;
    opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0);
}
 
#toTop:active, #toTop:focus {
    outline:none;
}


Download

jquery_totop.zip (41.27 KiB, 93 downloads)


english/other-enhancements/jquery/to-top-link.txt · Last modified: 2011/07/27 09:46 by Knut Heermann (flip-flop)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0

Strict Standards: Only variables should be passed by reference in /home/www/wiki/doku.php on line 79