#1 Scrollen mit jQuery von Wolfgang 27.06.2013 10:22

avatar

Hallo Florian,
jQuery begeistert mich immer mehr. Gibt es eigentlich so etwas wie ein Verzeichnis, was mit jQuery möglich ist?

Ich habe hier eine Code der auf interessanter Weise die Webseite zum Anfang scrollen läßt.
Leider funktioniert der Code nicht korrekt oder ich habe einen Fehler gemacht. Stimmt vielleicht die Version von jQuery nicht?
Wird "display:none" deaktiviert kann man den Button sehen und er funktioniert auch. Er sollte eigentlich erst sichtbar sein, wenn man die Seite anscrollt.
Läßt sich das Script auch für beides umbauen (zum Anfang und zum Ende scrollen) ?

Link: http://andreknieriem.de/schon-zum-seiten...oll-to-pagetop/


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<style type="text/css">
.scrollup{
width:40px;
height:40px;
opacity:0.3;
position:fixed;
bottom:50px;
right:100px;
display:none;
text-indent:-9999px;
background: url('icon_top.png') no-repeat;
}
</style>
 
<script type="text/javascript" src="http://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function(){

$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});

$('.scrollup').click(function(){
$("html, body").animate({ scrollTop: 0 }, 600);
return false;
});

});
</script>
 
<a href="#" class="scrollup">Scroll</a>
 




Bis dann und schon mal besten Dank im Voraus
Gruß aus Hannover

#2 RE: Scrollen mit jQuery von florian-zier 30.06.2013 01:18

avatar

Hallo Wolfgang,
so spontan fällt mir für ein jQuery-Verzeichnis nur die Api-Dokumentation ein.
Diese finde ich ziemlich gut, auch wenn sie nicht darauf ausgelegt ist, alle Funktionen hübsch zu präsentieren.
Viele Methoden enthalten dennoch ein kleines Beispiel am Ende der ausführlichen Beschreibung.

Es gibt auch eine Plugin-Übersicht, dort finden sich meistens Links auf die zugehörigen Websites und ab und zu auch direkt eine Demo.
Solltest du vor allem nach Beispielen für grafische Elemente suchen, dann wirst du sicherlich bei jQueryUI-Demos fündig.
Das ist eine Erweiterung für jQuery, welche visuelle Bedienelemente bereitstellt.


Ich habe für die Scroll-Funktionen jetzt mal eine Testseite gemacht. Also bei mir hat es mit jQuery 1.7.1 funktioniert.
Ebenso habe ich eine zweite Version erstellt, welche auch das Scrollen zum Seitenende ermöglicht.
Das gefällt mir so eigentlich ziemlich gut, bin mir aber noch nicht ganz sicher, ob ich das selbst einbauen werde.

Auf jeden Fall findest du beide Versionen im Anhang.
Die Version standard ist der einfache Nachbau, in updown befindet sich die erweiterte Variante.
Zu Anfang habe ich den Button zwar nicht gesehen, das lag aber nur daran, dass das icon_top.png nicht gefunden wurde, weil es bei sich mir natürlich nicht im gleichen Verzeichnis befand.

Da die Bilder nicht so groß sind und damit die Pfade nicht irgendwann ungültig werden (Seite nicht mehr erreichbar etc…), habe ich sie Base64 codiert in die Seite eingebettet.
Zur Sichherheit stelle ich sie aber auch hier nochmal bereit, sie sind beide neu abgespeichert und optimiert worden.
Das Original scheint ziemlich viele Informationen mit sich zu tragen und konnte nicht einfach nach drehen abgespeichert werden, da irgendein Problem mit dem Format auftrat.

#3 RE: Scrollen mit jQuery von Wolfgang 30.06.2013 22:29

avatar

Funktioniert, mal wieder super!!!

Auf jeden Fall besten Dank!



PS: Die jQuery-Verzeichnisse werde ich mir demnächst in Ruhe ansehen!

Gruß
Wolfgang

#4 RE: Scrollen mit jQuery von Wolfgang 02.07.2013 19:46

avatar

Hallo Florian,.
wenn man das Script ins Forum einbaut funktioniert es nur mit Deinen "Base64 codierten Bildern".
Ich habe noch Schwierigkeiten mit der Umsetzung neuer Bilder.

Wenn ich folgende Bilder habe, wie sieht dazu der Base64 Code aus?

http://www.bilder-hochladen.net/files/1tys-u2-f4dd.png

So?
background: url('data:image/png;base64,aHR0cDovL3d3dy5iaWxkZXItaG9jaGxhZGVuLm5ldC9maWxlcy8xdHlzLXUxLTQ1NmEucG5n') no-repeat;
Funktioniert leider nicht! Es ist nur ein kleiner Strich zu sehen. Der Code sieht auch ziemlich kurz aus.


http://www.bilder-hochladen.net/files/1tys-u1-456a.png



Gruß
Wolfgang

#5 RE: Scrollen mit jQuery von florian-zier 04.07.2013 23:01

avatar

Hallo Wolfgang,
ich habe es jetzt einmal mit deinen Bildern versucht. Dieser base64-Code ist in der Tat etwas zu kurz geraten, aber mit dem richtigen Code funktionieren auch diese.

Vielleicht hilft dir auch die Seite von base64image da weiter.
Die gibt neben der base64-Codierung auch gleich XHTML-, XML- und natürlich CSS-Anweisungen aus.

Beachte auch, dass manchmal ggf. ==-Zeichen am Ende aufgefüllt werden und dazu gehören, wenngleich sie nicht immer generiert werden.
Sie dienen nur zur Auffüllung auf eine bestimmte Zeichenzahl.

Evtl. ist dein generierter String versehentlich die dekodierte Variante des Bildes, welches ja noch gar nicht codiert war.
Bei der Dekodierung werden die Strings ja wieder kürzer, aber keine Ahnung wie die Datei nach dem Upload dann direkt dekodiert werden sollte.
Achte also darauf, dass du das Bild wirklich codierst und nicht versehentlich dekodierst. Letzteres kannst du dann wieder machen, um wieder aus dem base64-String das Originalbild zu erhalten.

Der kleine Strich statt der Grafik bekommst du wirklich immer nur zu sehen, wenn die Grafik nicht korrekt geladen werden konnte.
Alternativ zu base64 kannst du natürlich immer noch die hochgeladenen Bilder selbst mit der URL im CSS verlinken.
Das direkte Einbetten hat sich nur gerade so angeboten, da es ja nur zwei kleine Dateien sind.


Natürlich gibt es die aktuelle Testseite wieder im Anhang.

#6 RE: Scrollen mit jQuery von Wolfgang 10.07.2013 00:15

avatar

Funktioniert tadellos!
Auch der Links für den base64-Code ist Klasse!

Alles bestens, danke danke!


Bis dann

Xobor Forum Software von Xobor
Einfach ein eigenes Forum erstellen
Datenschutz