WebsiteBaker Community Forum
WebsiteBaker Support (2.8.x) => jQuery => Topic started by: mr-fan on January 21, 2010, 11:33:10 PM
-
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 here (http://www.websitebakers.de/tutorials/topics/jquery-meets-droplets---ein-jquery-plugin-als-droplet-nutzen.php#droplet)
2. 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!!
(http://www.websitebakers.de/media/autoren/mr-fan/nutzung-droplets-gross.jpg)
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 :wink:
there is a German Tutorial for this Topic (http://www.websitebakers.de/tutorials/topics/jquery-meets-droplets---ein-jquery-plugin-als-droplet-nutzen.php) that exact explains the code itself how to use a Droplet to get a jquery plugin running right....
have fun
martin
-
This script does not seem to like multi lingual sites?
-
Be carefull with setting <style > between body tags. It's not allowed and will be deleted by the new recoded droplet engine. Set it to extern css and included it with jquery insert.js. This plugin set the css within the head
Dietmar
-
Be carefull with setting <style > between body tags. It's not allowed and will be deleted by the new recoded droplet engine. Set it to extern css and included it with jquery insert.js. This plugin set the css within the head
Dietmar
hi dietmar..... :?
if you read the droplet code...you see that no CSS <style> is loaded between body tags.....equal witch setting is taken for the JS or jquery scripts....
//insert the CSS to your page output - always to the head section!
$wb_page_data = str_replace("</head>",$scroll_css."</head>", $wb_page_data );
@oeh: mulitlang sites.....hmm there are several ways for such sites to build.....maybe it depends on the footer usage
-> try to use the droplet direktly in your template
->check the paths of the scripts (firebug)
if it doesn't works again - please set E reporting on...to see whats wrong
regards martin
(@oeh: offtopic...for the portable in NO im too buisy the next weeks...and i think about porting the page to the official wb page...so there is no much effort at this time - just for short info)
-
Hi,
//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";
And what is this?
Dietmar
-
..... :? don't know what you mean...i think you didn't tryd it and don't see how it works....and i always thinked that devs see the code and know exactly what it does while running... :wink:
ok slowly:
1. i define my vars like $scroll_css and $scroll_js for CSS and JS files needed
2. i load them EXACT where i need it.....like (please have a deeper look....i've added german comments ...i thought i've commented it very well but...)
<?php //color your live
//Scroll to Top Anker setze ich per wb_page_data exakt nach </body> also an den anfang der seite!!
$wb_page_data = str_replace("<body>","<body>\n<div id='top'><a name='top'></a></div>", $wb_page_data );
//Scroll to Top Link kommt fix per CSS positioniert!
$scroll_link = "<a href='#top' id='toTop'>^ Nach Oben</a>\n";
//CSS wird immer im Head geladen egal wo ich das JS lade!!!
$wb_page_data = str_replace("</head>",$scroll_css."</head>", $wb_page_data );
//JS kommt dort hin wo ich will per einfachem ?parameter....im droplet wie schon einige mal _UND_ im tutorial ausführlich beschrieben....
$wb_page_data = str_replace($where,$scroll_js.$where, $wb_page_data );
//insert the Link ---ist ja klar der muss auch ausgegeben werden
return $scroll_link;
//startet das ganze spektakel....fertig
return true;
hope it's clear now - all that is in german exact described....i know you have your way with a additionsl entry in the template with a additional template file and so on but simple plugins work with this droplet techique fine...but i know also that this nobody interested.... :wink:
regards martin
-
Hi,
//Scroll to Top CSS
$scroll_css .= "<style type='text/css'>\n";
$scroll_css .= "#top {display:none;}\n";
.....
And what is this?
Dietmar
:-D
SCNR.
-
Hallo Martin,
habe verstanden. Kannst du dann bitte das Droplet mit der neuen Enginge testen und dann berichten.
Dietmar
[gelöscht durch Administrator]
-
@oeh: mulitlang sites.....hmm there are several ways for such sites to build.....maybe it depends on the footer usage
-> try to use the droplet direktly in your template
->check the paths of the scripts (firebug)
if it doesn't works again - please set E reporting on...to see whats wrong
regards martin
I'll try to put it in the index file.
I've used the WB docu way, when creating the multi lang site.
Also I'll try out firebug.
Edit:
Well. Tried potting [[scrolltotop]] in the index file in the footer @ the </p></div> tag.
Al so I tried out the firebug. But, still just as wise. Does not work. ?
[quote autho=mr-fan link=topic=16834.msg115009#msg115009 date=1267700473]
(@oeh: offtopic...for the portable in NO im too buisy the next weeks...and i think about porting the page to the official wb page...so there is no much effort at this time - just for short info)
[/quote]
Thanks, when ewer you are ready. Doing the WB help pages+++ translations.
As well as my own pages.
-
i've fixed some issues with the anchors...simple wrong names.... :roll: :roll:
try changed code above!
https://forum.WebsiteBaker.org/index.php/topic,16834.msg110466.html#msg110466
@dietmar: works with actual droplet engie, too.... :wink:
regards martin
-
tks for testing the new droplet engine
Dietmar
-
@oeh: have you loaded jQuery!!?? this is required for a jQuery plugin....?
regards martin
@oeh: mulitlang sites.....hmm there are several ways for such sites to build.....maybe it depends on the footer usage
-> try to use the droplet direktly in your template
->check the paths of the scripts (firebug)
if it doesn't works again - please set E reporting on...to see whats wrong
regards martin
I'll try to put it in the index file.
I've used the WB docu way, when creating the multi lang site.
Also I'll try out firebug.
-
@oeh: have you loaded jQuery!!?? this is required for a jQuery plugin....?
regards martin
It seems that the jQuery plugin is loaded, as the [[Lightbox]] droplet works like a charm.
Have set the error reporting to E_ALL&E_STRICT and no errors are generated.
-
oh somebody use such kind of droplets.... :-)
ok can you send me a link to your page?
what WB version you use with this droplets...and what kind of jQuery 1.3.2 or 1.4.1 (iv'e tested this two versions)
how you call jQuery files....with droplet or with the official way with register_modfiles.. .?
regards martin
-
oh somebody use such kind of droplets.... :-)
Testing testing :wink:
ok can you send me a link to your page?
@PM
what WB version you use with this droplets...and what kind of jQuery 1.3.2 or 1.4.1 (iv'e tested this two versions)
Hmm, 1.3.2 it seems
how you call jQuery files....with droplet or with the official way with register_modfiles.. .?
So far, Droplets.