"nach oben " Pfeil einfügen

Schakatak · 31.03.2010, 11:33

Hallo

Ich würde auf meiner Seite gern den "nach oben" Pfeil einfügen wollen.

Und zwar den, der auf folgender Seite unten rechts dargestellt wird, wenn man runterscrollt.

Ist dieses Unterfangen leicht zu bewerkstelligen?

Ihre neue Fahrschul-Website

LG Schakatak

***voodoo36*** · 31.03.2010, 12:48

Der nach oben Pfeil erscheint in der rechten unteren Ecke, wenn die Seite nach unten gescrollt wird.

navigation.ccml

Code:

<script type="text/javascript"  src="<cc:print value="&myjq.url">"></script>
<script type="text/javascript" src="<cc:print value="&myscroll.url">"></script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function () {
$(window).scroll(function() {
if($(window).scrollTop() > 10)
$('#scrolltotop').fadeIn(2000);
else
$('#scrolltotop').fadeOut(2000);
});

});

//]]> 
</script>

</head>
<body>  
<div id="scrolltotop" onclick="return scrollToTop();" style="display: none;"><cc:printpicture xhtml="1" obj="pic.top"></div>

gobal.ccml

Code:

<cc:picture obj="pic.top" dst="pic_top.gif" src="pic_top.gif">
  
<cc:asset src="jquery.js" dst="jq.js" obj="myjq">
<cc:asset src="scroll.js" dst="scroll.js" obj="myscroll">

style_design.css

Code:

#scrolltotop {
position: fixed; 
bottom: 10px; 
right: 10px;
cursor: pointer; 
z-index: 1000;
}

benötige Dateien

jquery.js

pic_top.gif [1 KB]

scroll.js [ KB]

Schakatak · 31.03.2010, 17:40

Vielen Dank Voodoo

Ich finde es schön, dass du hier den Code gebracht hast. Nur leider weiß ich nicht, wie ich ihn einbinde.

Ich kann ihn in der entsprechenden Datei einfügen, wüsste aber gerne, an welcher Stelle ich das tun muss.

Setze bitte nicht allzuviel Fachwissen bei mir voraus.

Aber bis jetzt haben wir ja alle meine Probleme gelöst, dann werden wir das auch schaffen.

Ich sehe gerade, dass es in der global ccml die Namen der Dateien gibt. Diese Namen löschen und den Code dort einfügen?

LG Schakatak

Schakatak · 03.04.2010, 09:38

Hi Voodoo.

Auch wenn ich mir die Codes länger anschaue und mir Gedanken mache, wie du das so meinen könntest, komme ich hier nicht weiter.

Wo genau muss ich den Code einbinden?
Muss ich im Code etwas ändern?

Bräuchte leichte weitere Unterstützung.

Frohe Ostern ;-)

LG Schakatak

Schakatak · 06.04.2010, 16:22

Update

Hallo Forum

Leider habe ich die Sache mit dem "nach oben" Pfeil nicht lösenb können.

Auch als ich die Pfade angepasst habe, funktionierte es NICHT.

Beim Hochladen meiner Website mittels W2D klagte das Programm sein Leid und meinte:

Ich kann die drei Dateien (jquery.js, scroll.js und pic.jpg)nicht öffnen.

Zum Glück konnte ich wieder alles rückgängig machen.

Ich hoffe nochmals auf eine Lösung, wie jetzt was zu machen ist. Ansonsten muss ich mein Vorhaben abbrechen, da ich echt Schiss habe, mir alles kaputt zu machen.

navigation.ccml

Code:
<script type="text/javascript" src="<cc:print value="hier die URL zur jquery.js">"></script>
<script type="text/javascript" src="<cc:print value="hier die URL zu scroll.js">"></script>
<script type="text/javascript">
//<![CDATA[

$(document).ready(function () {
$(window).scroll(function() {
if($(window).scrollTop() > 10)
$('#scrolltotop').fadeIn(2000);
else
$('#scrolltotop').fadeOut(2000);
});

});

//]]>
</script>

</head>
<body>
<div id="scrolltotop" onclick="return scrollToTop();" style="display: none;"><cc:printp

Bei der Navigation.ccml habe ich die roten Felder angepasst. Den oberen Teil des Codes vor head und den unteren Teil unter body eingefügt.

gobal.ccml

Code:
<cc:picture obj="pic.top" dst="pic_top.gif" src="pic_top.gif">

<cc:asset src="jquery.js" dst="jq.js" obj="myjq">
<cc:asset src="scroll.js" dst="scroll.js" obj="myscroll">

Bei der Global.ccml hatte ich alles so belassen.

style_design.css
Code:
#scrolltotop {
position: fixed;
bottom: 10px;
right: 10px;
cursor: pointer;
z-index: 1000;
}

Bei der style_design.css hatte ich auch alles so belassen.

Die drei benötigten Dateien habe ich mittels eines Editors unter dem jeweiligen Namen abgespeicht und auf meinen Webspace geladen.

LG Schakatak

Schakatak · 12.04.2010, 11:06

Hallo

And dieser Stelle ein Lob an Voodoo 36, der mir den Lösungsweg meines kleinen "Pfeil nach oben" per EMail aufgezeigt hat. Jetzt funktioniert alles einwandfrei.

In der navigation.ccml hatten ich ein <body> zu viel. Einfach gelöscht.

Die drei angehängten Dateien jquery.js, scroll.js und pic_top.gif kommen bei W2D in den Ordner des jeweiligen Designs.

Vielen Dank nochmals für die Geduld.

Lieben Gruß Schakatak

PS : Dieses Problem gelöst. DEr Thread darf geschlossen werden.

***voodoo36*** · 12.04.2010, 14:22

Ja, danke kein Problem.

***voodoo36*** · 11.07.2010, 15:03

Zur Info:
Mit diesem Einbau (Pfeil nach oben Icon) kann es mit anderen Scripten zu Problemen kommen! Auch im IE6 funktioniert das ganze nicht so ganz!
Also vorher testen...

31.03.2010, 11:33	#1 (permalink)
Schakatak Erfahrener Benutzer Registriert seit: 02.03.2010 Ort: Nähe Hamburg Beiträge: 281	"nach oben " Pfeil einfügen Hallo Ich würde auf meiner Seite gern den "nach oben" Pfeil einfügen wollen. Und zwar den, der auf folgender Seite unten rechts dargestellt wird, wenn man runterscrollt. Ist dieses Unterfangen leicht zu bewerkstelligen? Ihre neue Fahrschul-Website LG Schakatak

31.03.2010, 17:40	#3 (permalink)
Schakatak Erfahrener Benutzer Registriert seit: 02.03.2010 Ort: Nähe Hamburg Beiträge: 281	AW: "nach oben " Pfeil einfügen Vielen Dank Voodoo Ich finde es schön, dass du hier den Code gebracht hast. Nur leider weiß ich nicht, wie ich ihn einbinde. Ich kann ihn in der entsprechenden Datei einfügen, wüsste aber gerne, an welcher Stelle ich das tun muss. Setze bitte nicht allzuviel Fachwissen bei mir voraus. Aber bis jetzt haben wir ja alle meine Probleme gelöst, dann werden wir das auch schaffen. Ich sehe gerade, dass es in der global ccml die Namen der Dateien gibt. Diese Namen löschen und den Code dort einfügen? LG Schakatak Geändert von Schakatak (31.03.2010 um 17:47 Uhr)

03.04.2010, 09:38	#4 (permalink)
Schakatak Erfahrener Benutzer Registriert seit: 02.03.2010 Ort: Nähe Hamburg Beiträge: 281	AW: "nach oben " Pfeil einfügen Hi Voodoo. Auch wenn ich mir die Codes länger anschaue und mir Gedanken mache, wie du das so meinen könntest, komme ich hier nicht weiter. Wo genau muss ich den Code einbinden? Muss ich im Code etwas ändern? Bräuchte leichte weitere Unterstützung. Frohe Ostern ;-) LG Schakatak

06.04.2010, 16:22	#5 (permalink)
Schakatak Erfahrener Benutzer Registriert seit: 02.03.2010 Ort: Nähe Hamburg Beiträge: 281	AW: "nach oben " Pfeil einfügen Update Hallo Forum Leider habe ich die Sache mit dem "nach oben" Pfeil nicht lösenb können. Auch als ich die Pfade angepasst habe, funktionierte es NICHT. Beim Hochladen meiner Website mittels W2D klagte das Programm sein Leid und meinte: Ich kann die drei Dateien (jquery.js, scroll.js und pic.jpg)nicht öffnen. Zum Glück konnte ich wieder alles rückgängig machen. Ich hoffe nochmals auf eine Lösung, wie jetzt was zu machen ist. Ansonsten muss ich mein Vorhaben abbrechen, da ich echt Schiss habe, mir alles kaputt zu machen. navigation.ccml Code: <script type="text/javascript" src="<cc:print value="hier die URL zur jquery.js">"></script> <script type="text/javascript" src="<cc:print value="hier die URL zu scroll.js">"></script> <script type="text/javascript"> //<![CDATA[ $(document).ready(function () { $(window).scroll(function() { if($(window).scrollTop() > 10) $('#scrolltotop').fadeIn(2000); else $('#scrolltotop').fadeOut(2000); }); }); //]]> </script> </head> <body> <div id="scrolltotop" onclick="return scrollToTop();" style="display: none;"><cc:printp Bei der Navigation.ccml habe ich die roten Felder angepasst. Den oberen Teil des Codes vor head und den unteren Teil unter body eingefügt. gobal.ccml Code: <cc:picture obj="pic.top" dst="pic_top.gif" src="pic_top.gif"> <cc:asset src="jquery.js" dst="jq.js" obj="myjq"> <cc:asset src="scroll.js" dst="scroll.js" obj="myscroll"> Bei der Global.ccml hatte ich alles so belassen. style_design.css Code: #scrolltotop { position: fixed; bottom: 10px; right: 10px; cursor: pointer; z-index: 1000; } Bei der style_design.css hatte ich auch alles so belassen. Die drei benötigten Dateien habe ich mittels eines Editors unter dem jeweiligen Namen abgespeicht und auf meinen Webspace geladen. LG Schakatak Geändert von Schakatak (06.04.2010 um 16:38 Uhr)

12.04.2010, 11:06	#6 (permalink)
Schakatak Erfahrener Benutzer Registriert seit: 02.03.2010 Ort: Nähe Hamburg Beiträge: 281	AW: "nach oben " Pfeil einfügen Hallo And dieser Stelle ein Lob an Voodoo 36, der mir den Lösungsweg meines kleinen "Pfeil nach oben" per EMail aufgezeigt hat. Jetzt funktioniert alles einwandfrei. In der navigation.ccml hatten ich ein <body> zu viel. Einfach gelöscht. Die drei angehängten Dateien jquery.js, scroll.js und pic_top.gif kommen bei W2D in den Ordner des jeweiligen Designs. Vielen Dank nochmals für die Geduld. Lieben Gruß Schakatak PS : Dieses Problem gelöst. DEr Thread darf geschlossen werden.

12.04.2010, 14:22	#7 (permalink)
*voodoo36* Administrator Registriert seit: 17.04.2009 Ort: Regensburg Beiträge: 4.204	AW: "nach oben " Pfeil einfügen Ja, danke kein Problem. __________________ Grüße aus Bayern www.ts-design4you.de - www.boogie-rabbits.de

11.07.2010, 15:03	#8 (permalink)
*voodoo36* Administrator Registriert seit: 17.04.2009 Ort: Regensburg Beiträge: 4.204	AW: "nach oben " Pfeil einfügen Zur Info: Mit diesem Einbau (Pfeil nach oben Icon) kann es mit anderen Scripten zu Problemen kommen! Auch im IE6 funktioniert das ganze nicht so ganz! Also vorher testen... __________________ Grüße aus Bayern www.ts-design4you.de - www.boogie-rabbits.de

Themen-Optionen	Thema durchsuchen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen	Thema durchsuchen: Erweiterte Suche
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
"Nach oben" Links einfügen	Lars M	Web to Date 6.0	7	13.01.2011 20:41
Absatzbezogene "nach oben" unterdrücken	Bata Decker	Web to Date 5.0	4	21.04.2010 13:03
Bild im Desing "Loung" einfügen	bruggi1	Web to Date 6.0	2	04.02.2010 08:36
Pfeil nach oben	Bomba	Web to Date 6.0	24	06.01.2010 22:41
Aufmacher: Sortierung bei Einträgen "vorher" und "nachher" falsch?	bejoro	Web to Date 6.0	2	21.06.2009 15:09