hi again,
the problem is if you've got a own script or a jQuery Plugin you could set it in your Template....but what happens if you wanna switch the template or use this technic easy on a other WB installation....
this way you could use it on every installation and with ervery template you use....
1. Step the
script pack from here2. put it in your media folder under
/plugins/scrolltotop/ (create this new folders for your jquery plugins)
if you have autors or some users you don't should see this scripts or have the chance to delet it - use the homefolder options...for such people
you could put this via FTP into your /include/ folder, too but look on the pathes in the droplet that they are correct...
3. the droplet
Dropletname: [[scrolltotop]]Code:<?php //ignore this line
/********************************************
* Scroll to Top jQuery Plugin from http://www.ph-creative.com/
* @autor Martin Freudenreich (mr-fan) 30-12-09
*
* @param where=head or body to setup where you wanna load the js files //default </head>
*
* Load the jquery.scroll.pack.js from a spezific folder (Template or Media)
* Load the needed settings for a first use (JS and CSS)
*
*/
$scroll_js = "<!--Scroll to Top Plugin-->\n";
$scroll_css = "<!--Scroll to Top CSS-->\n";
//set to </head> or </body> to load the jQueryscripts where you want
$places = array ("head", "body");
if (!isset($where)) $where= $places[0];
else $where = in_array($where, $places) ? $where : $places[0];
$where = "</".$where.">";
//Scroll to Top JS
$scroll_js .= "<script src='".WB_URL."/media/plugins/scrolltotop/jquery.easing.js' type='text/javascript'></script>\n";
$scroll_js .= "<script src='".WB_URL."/media/plugins/scrolltotop/jquery.scroll.pack.js' type='text/javascript'></script>\n";
$scroll_js .= "<script type='text/javascript'>\n";
$scroll_js .= "$(function() {\n";
$scroll_js .= "$('#toTop').scrollToTop({speed:1000,ease:'easeOutCirc',start:700});\n";
$scroll_js .= "});\n";
$scroll_js .= "</script>\n";
//Scroll to Top CSS
$scroll_css .= "<style type='text/css'>\n";
$scroll_css .= "#top {display:none;}\n";
$scroll_css .= "#toTop { width:85px;\n";
$scroll_css .= "background:#f1f1f1;\n";
$scroll_css .= "border:1px solid #ccc;\n";
$scroll_css .= "text-align:center;\n";
$scroll_css .= "padding:3px;\n";
$scroll_css .= "position:fixed;\n";
$scroll_css .= "bottom:10px;\n";
$scroll_css .= "right:10px;\n";
$scroll_css .= "cursor:pointer;\n";
$scroll_css .= "color:#666;\n";
$scroll_css .= "text-decoration:none; }\n";
$scroll_css .= "</style>\n";
//Scroll to Top Anchor
$wb_page_data = str_replace("<body>","<body>\n<div id='totop'><a name='totop'></a></div>", $wb_page_data );
//Scroll to Top Link
$scroll_link = "<a href='#totop' id='toTop'>^ Nach oben!</a>\n";
//insert the CSS to your page output - always to the head section!
$wb_page_data = str_replace("</head>",$scroll_css."</head>", $wb_page_data );
//insert the JS to your page output
$wb_page_data = str_replace($where,$scroll_js.$where, $wb_page_data );
//insert the Link on the Place where the Droplet is called
return $scroll_link;
//output
return true;
Usage of this Droplet:just copy it in your page_footer under backend/options/page-footer!!
it setup all the things that are needed
-the anchor after the body-tag
-the link for the backtotop function
-the needed scripts/css
you could use a picture instead of the text, too - just add an img tag to the link in the droplet....with the right path to the image
there is a
German Tutorial for this Topic that exact explains the code itself how to use a Droplet to get a jquery plugin running right....
have fun
martin
