 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
missmultitasking
Threadersteller
Dabei seit: 11.02.2013
Ort: Stuttgart
Alter: -
Geschlecht: -
|
Verfasst Mo 11.02.2013 21:06
Titel JQuery Scroll.to funktioniert nicht in Firefox |
  |
|
Hallo Allerseits,
ich versuche nun seit diversen Stunden das Scroll.to-Script von Ariel Flesler (http://flesler.blogspot.de/2007/10/jqueryscrollto.html) in meine Seite einzubauen.
Problem ist, dass ich sein Tutorial nicht kapiere, weil meine JQuery-Kenntnisse dafür wohl[/code] entwas zu rudimentär sind. Ich versteh nicht, wie er das Script einbindet. Ich hab also weiter im Netz gesucht und eine Lösung dafür gefunden, aber die funktioniert nur in Chrome und Safari aber nicht in Firefox (IE konnt ich leider noch garnicht testen...  ). Ich hab auch schon andere, leicht verständlichere Tutorials gefunden, aber die binden dann immer entweder horizontale oder vertikale Scroller ein, ich will aber quer über die Seite scrollen. Ich häng mal meinen Code hier rein und es wäre toll, falls mir irgendjemand sagen kann, warum der Firefox das nicht scrollen will (also die Links funktionieren, aber das Script scheint nicht richtig angesprochen zu werden).
Vielen dollen Dank für jedwede Hilfe...
PS: Falls jemand ein anderes Tutorial kennt, auf dem die Einbindung eines Multidirection-Scrolls gut beschrieben ist würde das natürlich auch reichen... 
Und hier der Code:
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Unbenanntes Dokument</title>
<!-- Load jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Load ScrollTo -->
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<style type="text/css">
#navi {
background-color: #CC0;
height: 200px;
width: 300px;
position: fixed;
z-index: 99;
}
#sec_impressum {
background-color: #FF9;
height: 500px;
width: 400px;
position: absolute;
top: 1417px;
left: 488px;
}
#sec_grafik {
background-color: #69F;
height: 600px;
width: 400px;
position: absolute;
left: 11px;
top: 246px;
}
#wrapper {
height: 2000px;
width: 2000px;
}
#sec_mode {
background-color: #F96;
position: absolute;
left: 1574px;
top: 885px;
height: 500px;
width: 400px;
}
</style>
<!-- javascript that will initiate jQuery and the LocalScroll plugin -->
<script>
// When the document is loaded...
$(document).ready(function()
{
// Add a click event to the links inside the #nav div
$("#navi a").click(function(e)
{
// Prevent the default behavior of the anchor links
event.preventDefault();
// Get the "href" attribute from the links and store it in a variable
var boxId = $(this).attr("href");
// Scroll to the box that corresponds with the link we just clicked on.
$.scrollTo( boxId , 600);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="navi">
<p><a href="#sec_grafik">Grafik</a></p>
<p><a href="#sec_mode">Mode</a></p>
<p><a href="#sec_impressum">Impressum</a></p>
</div>
<div id="sec_grafik">Raum für den Inhalt von id "sec_grafik"</div>
<div id="sec_mode">Raum für den Inhalt von id "sec_mode"</div>
<div id="sec_impressum">Raum für den Inhalt von id "sec_impressum"</div>
</div>
</body>
</html>
|
|
|
| |
  |
 |
labrar
Dabei seit: 04.04.2006
Ort: -
Alter: 49
Geschlecht: 
|
Verfasst Mo 11.02.2013 22:50
Titel
|
|
|
Bitte schön
| Code: | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Unbenanntes Dokument</title>
<!-- Load jQuery -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<!-- Load ScrollTo -->
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<style type="text/css">
#navi {
background-color: #CC0;
height: 200px;
width: 300px;
position: fixed;
z-index: 99;
}
#sec_impressum {
background-color: #FF9;
height: 500px;
width: 400px;
position: absolute;
top: 1417px;
left: 488px;
}
#sec_grafik {
background-color: #69F;
height: 600px;
width: 400px;
position: absolute;
left: 11px;
top: 246px;
}
#wrapper {
height: 2000px;
width: 2000px;
}
#sec_mode {
background-color: #F96;
position: absolute;
left: 1574px;
top: 885px;
height: 500px;
width: 400px;
}
</style>
<!-- javascript that will initiate jQuery and the LocalScroll plugin -->
<script>
// When the document is loaded...
$(document).ready(function()
{
// Add a click event to the links inside the #nav div
$("#navi a").click(function(e)
{
if(!e){e=window.event;}
// Prevent the default behavior of the anchor links
e.preventDefault();
// Get the "href" attribute from the links and store it in a variable
var boxId = $(this).attr("href");
// Scroll to the box that corresponds with the link we just clicked on.
$.scrollTo( boxId , 600);
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="navi">
<p><a href="#sec_grafik">Grafik</a></p>
<p><a href="#sec_mode">Mode</a></p>
<p><a href="#sec_impressum">Impressum</a></p>
</div>
<div id="sec_grafik">Raum für den Inhalt von id "sec_grafik"</div>
<div id="sec_mode">Raum für den Inhalt von id "sec_mode"</div>
<div id="sec_impressum">Raum für den Inhalt von id "sec_impressum"</div>
</div>
</body>
</html> |
Abgesehen davon ist Jquery WÜRG
EDIT der Richtigkeithalber
Warum es nicht ging war folgender Fehler im Codeabschnitt von dir
| Code: | $("#navi a").click(function(e)
{
// Prevent the default behavior of the anchor links
event.preventDefault();
// Get the "href" attribute from the links and store it in a variable
var boxId = $(this).attr("href");
// Scroll to the box that corresponds with the link we just clicked on.
$.scrollTo( boxId , 600);
}); |
Wie du siehst, versucht die CLICK Funktion den Eventhandler über das Attribut "e" aufzurufen.
Du aber versuchst dann plötzlich den evenet Handler über "event" anzusprechen.
| Code: | | [b]event[/b].preventDefault(); |
Was logischerweise nicht gehen kann. Da event, auch wenn es sich hierbei um eine Systemvariable handelt die eigentlich genau das tut, event durch e überschrieben wurde. evenet ist nur ein Platzhalter. Oder sagen wir einfach eine vordefinierte Variable. event funktioniert aber nur im Zusammenhang mit einem Funktionsaufruf.
Wenn der Funktionsaufruf aber bereits einen Eventhandler, in dem Fall e, mitbringt, dient event nur noch als Backup, falls e fehlschlägt.
Und auch dann benötigt event eine disovary dependencies. Also zB. window.event.
Deswegen ja noch der Zusatz meinerseits im neuen Code, falls e fehlschlägt.
Zuletzt bearbeitet von labrar am Mo 11.02.2013 23:01, insgesamt 1-mal bearbeitet
|
|
| |
|
|
|
Anzeige
|
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Mo 11.02.2013 22:52
Titel
|
|
|
|
Was genau soll denn passieren? Also bei mit läuft der Code. Click auf einen Link springt/scrollt den Container an.
|
|
| |
|
|
labrar
Dabei seit: 04.04.2006
Ort: -
Alter: 49
Geschlecht:
|
Verfasst Mo 11.02.2013 23:07
Titel
|
|
|
Sorry kanns durch die neue Antwort nicht mehr editieren.
An den Threadstarter.
Du weißt schon, dass preventDefault nur für Mobil Geräte Sinn macht.
Wenn deine Intension in die Richtung geht, solltest du dringendst von Jquery weg.
|
|
| |
|
|
pantonine
Dabei seit: 03.03.2011
Ort: gehen Sie bitte weiter…
Alter: -
Geschlecht: -
|
Verfasst Mo 11.02.2013 23:48
Titel
|
|
|
Ach so sollte das aussehen.
| Zitat: | Wie du siehst, versucht die CLICK Funktion den Eventhandler über das Attribut "e" aufzurufen.
Code:
function(e)
Du aber versuchst dann plötzlich den evenet Handler über "event" anzusprechen.
Code:
event.preventDefault();
Was logischerweise nicht gehen kann. Da event, auch wenn es sich hierbei um eine Systemvariable handelt die eigentlich genau das tut, event durch e überschrieben wurde. evenet ist nur ein Platzhalter. Oder sagen wir einfach eine vordefinierte Variable. event funktioniert aber nur im Zusammenhang mit einem Funktionsaufruf.
Wenn der Funktionsaufruf aber bereits einen Eventhandler, in dem Fall e, mitbringt, dient event nur noch als Backup, falls e fehlschlägt.
Und auch dann benötigt event eine disovary dependencies. Also zB. window.event.
Deswegen ja noch der Zusatz meinerseits im neuen Code, falls e fehlschlägt. |
Ehrlich gesagt ist das sehr schlecht erklärt.
1. click versucht überhaupt nicht, den event-Handler aufzurufen. Klick wird onClick aufgerufen mit einer anonymen Callbackfunktion als Parameter. Jene wiederum besitzt einen Parameter (alle Event-Callbacks erwarten per Definition das durch das Even erzeugte Event-Objekt als Parameter bzw. bekommen dies bei Aufruf übergeben. Die übergabe wird an die genannte Variable gebunden - wenn denn spezifiziert, in diesem Fall "e". (windows).event ist noch eine ganz andere Geschichte, die man aber vernachlässigen sollte, wenn man schon jQuery verwendet. Weil: browserspezifisch und damit nicht browserübergreifend vorhanden. Das zu vereinheitlichen ist die Leistung von jQuery.
2. preventDefault mach nicht nur für Mobilgeräte Sinn. Wenn man - wie man es tun sollte - statt Anker echte URLs in Link angibt, verhindert preventDefault eben den entsprechenden Request. Im konkreten Fall sind die Anker ok, da ja tatsächlich ein Ziel angesprungen werden soll.
[edit]
| Zitat: | Wenn deine Intension in die Richtung geht, solltest du dringendst von Jquery weg.
|
| Zitat: | | Abgesehen davon ist Jquery WÜRG |
Ohne nähere Begründung behalt Deine Meinung doch einfach für Dich.
[edit2]
| Zitat: | if(!e){e=window.event;}
|
Genau das erledigt jQ bereits. Keine Ahnung, wozu das hier jetzt gut sein soll.
Zuletzt bearbeitet von pantonine am Mo 11.02.2013 23:52, insgesamt 3-mal bearbeitet
|
|
| |
|
|
labrar
Dabei seit: 04.04.2006
Ort: -
Alter: 49
Geschlecht:
|
Verfasst Di 12.02.2013 00:35
Titel
|
|
|
Ich bin wirklich doof. Ich schreibe hier einen Roman warum nicht JQuery, nur um dann festzustellen, dass ich das aufgrund deines Satzes
"Ohne nähere Begründung behalt Deine Meinung doch einfach für Dich. "
geschrieben habe. Also habe ich den Roman wieder entfernt und stelle jetzt eine Gegenfrage.
Isst du gelben Schnee? Natürlich nicht. Wenn ich dich jetzt aber nach einer Medizinischen Begründung für deine Abneigung fragen würde, würdest du das ganze in drei Sätzen für dich begründen. Ein Arzt kann dir aber 1000 Gegenargumente bringen.
Also belassen wir es einfach dabei, da wir schließlich Meininungsfreiheit haben, ich mag JQ nicht (bzw. Nicht mehr)
Bezüglich meiner schlechten Erklärung. Ja da stimme ich dir zu. Jetzt beim nochmaligen Lesen, hätte ich es doch anders formulieren sollen. Andererseits (und das geht jetzt nicht negativ gegen den Threadersteller) weiß ich nicht ob dieser Faux Pax passiert wäre wenn etwas Hintergrundwissen in der Thematik vorhanden ist. Also gehe ich schlicht davon aus, Code gesehen, Code kopiert und Code für die eigenen Zwecke etwas angepasst.
Also gehe ich davon aus, dass er weder meine misserable, noch deine bessere Erklärung zum Thema Eventhandler verstanden hat. Da hierfür doch etwas mehr nötig ist als ein paar lapidare Sätze. Stimmts du mir soweit zu?
Und was prevent anbelangt muss ich zumindest für mich sagen, dass ich beim Browsen über ein nicht mobiles Gerät schon gerne die volle Kontrolle habe. Auch wenn du das für dich als Benutzerfreundlicher ansiehst, sehe ich eventblocker eher als Gängelei an.
Anders aber bei mobilen Geräten. Da geht es ohne gar nicht. Was aber ein anderes Thema ist, da es hier auch um pinch und double piches geht die die Darstellung einer Seite tatsächlich sehr beinflussen, bzw. die Steuerung erschweren können.
Solange ich am PC aber nur einen Mauszeiger habe finde ich, sollten andere Möglichkeiten gefunden werden.
Ist aber nur meine Meinung
Zuletzt bearbeitet von labrar am Di 12.02.2013 00:55, insgesamt 1-mal bearbeitet
|
|
| |
|
|
missmultitasking
Threadersteller
Dabei seit: 11.02.2013
Ort: Stuttgart
Alter: -
Geschlecht: -
|
Verfasst Di 12.02.2013 01:12
Titel
|
|
|
Puh...äh... na erst mal Danke für den Einsatz.... ich probier morgen mal aus, was ich davon kapiere...
Sorry... ich bin wirklich ziemlich unbedarft, aber ich hätt halt trotzdem gern so n Scroller... 
Eine Frage noch, labrar (auch, wenn du natürlich keine Romane schreiben musst.... vielleicht geht's ja auch n bisschen "zusammengefasst"?):
Was wäre denn dann die bessere Alternative zu JQuery?
Merci, merci
|
|
| |
|
|
labrar
Dabei seit: 04.04.2006
Ort: -
Alter: 49
Geschlecht:
|
Verfasst Di 12.02.2013 02:00
Titel
|
|
|
Was eigenes machen. Ich möchte jetzt keine Eigenwerbung für meine eigene Lib machen, deswegen würde ich dir empfehlen mal nach JStween zu googlen.
Wenn du mir eine PN schreibst, schicke ich dir aber einen Link zu meiner Lib + ein paar Beispielen.
Ich kann dir aber kein Tut über den ganzen Funktionsumfang schreiben, da das den Rahmen sprengen würde. Aber für dich wäre die Funktion animate ganz interessant. "Und ich hör sie schon. Animate?? So heißt doch die bei JQ auch?" Ja. Deshalb. Ich habe selbst Jahre lang mit JQ gearbeitet. Aber mit Ausnahme des Nahmens haben JQ und meine Lib nichts gemeinsam
Edit: Vergiss JStween. Funzt mittlerweile auch über Jquery. Obwohlm ich das damals besser fand und auch heute noch finde. Aber das ist eben der Strom. JQ kennt jeder und somit kommt auch keiner daran vorbei. Genauso wie Typo. Jeder kennts, jeder wills haben weils jeder hat. Qualität ist dabei Nebensache. Ich gugg mal ob ich die alte JStweenklasse ohne JQ finde.
Ups: Nochmal Edit. Hieß nie JStween. Dafür aber Motion Tween
http://jstween.blogspot.de/#Tween
Das ganze basiert auf den alten AS2 Klassen. Die ganezn Animationen die JQ bietet gibt es da besser und performanter.
[/code]
Nochmal Edit:
Du kommst aus Stuttgart?
Ich aus LB. No wünsch i dr a baar nädde grieas noch schduuagard
Zuletzt bearbeitet von labrar am Di 12.02.2013 02:13, insgesamt 4-mal bearbeitet
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
Problem mit Scroll sticking - jquery
Scroll-Rad-Funktion in Firefox ausschalten
JavaScript Scroll-Container in Firefox
Korrekte Scroll-Leiste in Firefox
Wie funktioniert der "Scroll-Effekt" auf der Apple Webseite?
jquery bibliothek funktioniert nicht
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
