Author Topic: Scroll to Top jQuery Droplet (Read 27223 times)

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

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:

Code: [Select]

<?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=&#39;".WB_URL."/media/plugins/scrolltotop/jquery.easing.js&#39; type=&#39;text/javascript&#39;></script>\n";
$scroll_js .= "<script src=&#39;".WB_URL."/media/plugins/scrolltotop/jquery.scroll.pack.js&#39; type=&#39;text/javascript&#39;></script>\n";
$scroll_js .= "<script type=&#39;text/javascript&#39;>\n";
$scroll_js .= "$(function() {\n";
$scroll_js .= "$(&#39;#toTop&#39;).scrollToTop({speed:1000,ease:&#39;easeOutCirc&#39;,start:700});\n";
$scroll_js .= "});\n";
$scroll_js .= "</script>\n";

//Scroll to Top CSS
$scroll_css .= "<style type=&#39;text/css&#39;>\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=&#39;totop&#39;><a name=&#39;totop&#39;></a></div>", $wb_page_data );

//Scroll to Top Link
$scroll_link = "<a href=&#39;#totop&#39; id=&#39;toTop&#39;>^ 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

oeh · « **Reply #1 on:** March 04, 2010, 05:23:04 AM »

This script does not seem to like multi lingual sites?

Luisehahne · « **Reply #2 on:** March 04, 2010, 08:18:34 AM »

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

mr-fan · « **Reply #3 on:** March 04, 2010, 12:01:13 PM »

Quote from: Luisehahne on March 04, 2010, 08:18:34 AM

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....

Code: [Select]

//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)

Luisehahne · « **Reply #4 on:** March 04, 2010, 02:21:39 PM »

Hi,

Code: [Select]

//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

mr-fan · « **Reply #5 on:** March 04, 2010, 06:58:10 PM »

.....

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...

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...)

Code: [Select]

<?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=&#39;top&#39;><a name=&#39;top&#39;></a></div>", $wb_page_data );

//Scroll to Top Link kommt fix per CSS positioniert!
$scroll_link = "<a href=&#39;#top&#39; id=&#39;toTop&#39;>^ 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....

regards martin

Stefek · « **Reply #6 on:** March 04, 2010, 07:05:20 PM »

Quote from: Luisehahne on March 04, 2010, 02:21:39 PM

Hi,

Code: [Select]
//Scroll to Top CSS $scroll_css .= "<style type='text/css'>\n"; $scroll_css .= "#top {display:none;}\n"; .....
And what is this?

Dietmar

SCNR.

Luisehahne · « **Reply #7 on:** March 04, 2010, 08:06:14 PM »

Hallo Martin,

habe verstanden. Kannst du dann bitte das Droplet mit der neuen Enginge testen und dann berichten.

Dietmar

[gelöscht durch Administrator]

oeh · « **Reply #8 on:** March 04, 2010, 10:09:30 PM »

Quote from: mr-fan on March 04, 2010, 12:01:13 PM

@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.

mr-fan · « **Reply #9 on:** March 05, 2010, 11:11:52 AM »

i've fixed some issues with the anchors...simple wrong names....

try changed code above!
https://forum.WebsiteBaker.org/index.php/topic,16834.msg110466.html#msg110466

@dietmar: works with actual droplet engie, too....

regards martin

Luisehahne · « **Reply #10 on:** March 05, 2010, 12:43:47 PM »

tks for testing the new droplet engine

Dietmar

mr-fan · « **Reply #11 on:** March 05, 2010, 02:04:17 PM »

@oeh: have you loaded jQuery!!?? this is required for a jQuery plugin....?

regards martin

Quote from: oeh on March 04, 2010, 10:09:30 PM

Quote from: mr-fan on March 04, 2010, 12:01:13 PM

@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 · « **Reply #12 on:** March 05, 2010, 05:24:59 PM »

Quote from: mr-fan on March 05, 2010, 02:04:17 PM

@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.

mr-fan · « **Reply #13 on:** March 05, 2010, 08:27:19 PM »

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

oeh · « **Reply #14 on:** March 05, 2010, 09:15:31 PM »

Quote

oh somebody use such kind of droplets....

Testing testing

Quote

ok can you send me a link to your page?

@PM

Quote

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

Quote

how you call jQuery files....with droplet or with the official way with register_modfiles.. .?

So far, Droplets.

News

Support WebsiteBaker

Your donations will help to:

You can donate by clicking on the button below.

Author Topic: Scroll to Top jQuery Droplet (Read 27223 times)

mr-fan

Scroll to Top jQuery Droplet

oeh

Re: Scroll to Top jQuery Droplet

Luisehahne

Re: Scroll to Top jQuery Droplet

mr-fan

Re: Scroll to Top jQuery Droplet

Luisehahne

Re: Scroll to Top jQuery Droplet

mr-fan

Re: Scroll to Top jQuery Droplet

Stefek

Re: Scroll to Top jQuery Droplet

Luisehahne

Re: Scroll to Top jQuery Droplet

oeh

Re: Scroll to Top jQuery Droplet

mr-fan

Re: Scroll to Top jQuery Droplet

Luisehahne

Re: Scroll to Top jQuery Droplet

mr-fan

Re: Scroll to Top jQuery Droplet

oeh

Re: Scroll to Top jQuery Droplet

mr-fan

Re: Scroll to Top jQuery Droplet

oeh

Re: Scroll to Top jQuery Droplet