nicht angemeldet
JQuery
suit
Gunnar Bittersmann
StruppiHi,
ich experimentiere ich gerade etwas mit jguery. Kann sein, dass nicht alles unter Firefox funktioniert? Ich habe eine einfache Funktion für das Ausblenden des DIVs. Die funktioniert unter IE aber nicht unter FF.
$(function(){$('#inhalt').fadeOut();})
Muss man was besonderes beachten?
Gruß
-
Ja, das div#inhalt muss es auch nach dem document.ready-Event geben. Wie sieht denn Deine sonstige HTML/CSS/JS-Struktur aus?
Gruß, LX
--
RFC 1925, Satz 6a: Es ist immer möglich, einen weiteren Umweg einzufügen.
RFC 1925, Satz 11a: Siehe Regel 6a
-
Hallo,
danke für deine Antwort.
Das Ganze sieh in etwa so aus:
<html>
<head>
<script language="javascript">
function hideDiv() {
$(function(){$('#sidebar').fadeOut();})
}function showDiv() {
$(function(){
$('#sidebar').css("display","none").fadeIn();
})
}</script>
</head>
<body>
...<td rowspan="3" valign="top">
<div id="inhalt" class="hide" style="border:1px solid black; width:600px; height:486px; background-color:#FAFAFA;">
......
</div>
</td>
....
</body>
</html>Das DIV-Element soll am Anfang unsichtbar sein. Daher habe ich es so versucht:
<body onload="$(function(){$('#inhalt').css('display','none');})">
Bei dem Klick auf einen Link sollte das DIV-Element dann sichtbar bzw. unsichbar werden.
-
ready() dürfte dich in erster Linie anstatt onload interessieren.
Weiters: erstelle zuerst ein Dokument welches ohne JavaScript einwandfrei funktioniert, danach kümmere dich um die Goodies.
Setze eine Klasse ins body-Element (oder html-Element) welche indiziert, dass JavaScript verfügbar ist (mit addClass());
body { border: 5px solid red; } .js body { border: 5px solid green; }Damit sparst du dir, CSS-Informationen per JavaScript zu setzen.
-
Hi,
danke für die Vorschläge. Ich verstehe aber immer noch nicht, warum "fadeIn" und "fadeOut" unter FF nich funktioniert.
Gruß
-
danke für die Vorschläge. Ich verstehe aber immer noch nicht, warum "fadeIn" und "fadeOut" unter FF nich funktioniert.
Soweit ich das beurteilen kann wird es überhaupt nicht funktionieren, in keinem Browser - du führst die Funktion ja nicht aus.
-
Hi,
ja das ist richtig. Ich habe die zwei Links weggelassen. Das sollte so aussehen:
<html>
<head>
<script language="javascript">
function hideDiv() {
$(function(){$('#inhalt').fadeOut();})
}function showDiv() {
$(function(){
$('#inhalt').css("display","none").fadeIn();
})
}</script>
</head>
<body>
...<td rowspan="3" valign="top">
<div id="inhalt" class="hide" style="border:1px solid black; width:600px; height:486px; background-color:#FAFAFA;">
......
</div>
</td>
....<a href='#' onclick="hideDiv();">Sichtbar</a>
<a href='#' onclick="showDiv();">Unsichtbar</a>
</body>
</html>Gruß
-
ja das ist richtig. Ich habe die zwei Links weggelassen. Das sollte so aussehen:
Mal abgesehen von den zahlreichen Fehlern, den unsinnigen Codestellen sowie dass "sichtbar" etwas versteckt und "unsichtbar" es wieder herzaubert, funtkioniert das einwandfrei (wenn man jQuery einbindet) :)
-
heeeeeeeee!? "...zahlreichen Fehlern"?! ich weiss nicht, was da so falsch sein kann. Das ist richtig, dass das Ganz nicht sauber kodiert ist, aber wie ich gesagt habe, ich übe noch, ohne mich erst mal um andere Sachen zu kümmern. Funktioniert meinen Code mit den "zahlreichen Fehlern" bei dir auch unter FF?
Gruß
-
heeeeeeeee!? "...zahlreichen Fehlern"?!
Ja, zahlreiche Fehler :)
ich weiss nicht, was da so falsch sein kann.
Wenn du möchtest, kann ich dir die Fehler aufschlüsseln.
Das ist richtig, dass das Ganz nicht sauber kodiert ist, aber wie ich gesagt habe, ich übe noch, ohne mich erst mal um andere Sachen zu kümmern.
Wenn du dir gleich einen sauberen Stil angewöhnst, ist es wesentlich leichter Fehler zu finden und auch zu vermeiden. Es war auch kein Vorwurf, persönlicher Angriff oder sonstwas sondern nur ein Hinweis.
Darum habe ich ja zuvor erwähnt, dass es ggf. schlau wäre zuerst ein gültiges HTML-Dokument mit CSS vorzubereiten und auf JavaScript vollständig zu verzichten, wenn das fertig ist, baut man das JavaScript ein.
Wenn man mit JavaScript beginnt, neigt man dazu (auch als "Profi") einige Dinge zu vergessen die im nachhinein extrem umständlich zu korrigieren sind.
Funktioniert meinen Code mit den "zahlreichen Fehlern" bei dir auch unter FF?
Ich habs unter Opera 10.10 und Firefox 3.6 ausprobiert, es funktioniert augenscheinlich.
-
-
-
Hi!
function hideDiv() {
$(function(){$('#inhalt').fadeOut();})
}Mit $(function...) erzeugst du einen DOM-Ready-Event-Handler. Du willst aber zum Zeitpunkt des Funktionsaufrufs nur $('#inhalt').fadeOut(); ausführen.
Lo!
-
Hi,
vielen Dank. Das war mein Fehler. Jetzt hat auch FF was davon :-). Anfängerfehler halt...
Gruß
-
Mit $(function...) erzeugst du einen DOM-Ready-Event-Handler. Du willst aber zum Zeitpunkt des Funktionsaufrufs nur $('#inhalt').fadeOut(); ausführen.
Ansich ja, aber der Handler wird durch ausführen der funktion erzeugt und zu diesem Zeipunkt ist das DOM fertig und das fadeOut() wird ausgeführt.
Es erfüllt seinen Zweck ("funzt"), ist aber etwas unsinnig.
-
Hi!
Mit $(function...) erzeugst du einen DOM-Ready-Event-Handler. Du willst aber zum Zeitpunkt des Funktionsaufrufs nur $('#inhalt').fadeOut(); ausführen.
Ansich ja, aber der Handler wird durch ausführen der funktion erzeugt und zu diesem Zeipunkt ist das DOM fertig und das fadeOut() wird ausgeführt.Ja, das DOM ist fertig, und zwar schon längst. Wird beim Zuweisen an den Handler ein Ereignis wiederholt, das schon in der Vergangenheit liegt?
Es erfüllt seinen Zweck ("funzt"), ist aber etwas unsinnig.
Das hat es ja eben im FF nicht.
Lo!
-
Ja, das DOM ist fertig, und zwar schon längst.
Ist mir klar.
Wird beim Zuweisen an den Handler ein Ereignis wiederholt, das schon in der Vergangenheit liegt?
Möglicherweise - ich weiss nicht, wie jQuery diesbeglich arbeitet und ob ready() hier ggf. ähnlich reagiert wie live() und eben nicht wie bind().
Es erfüllt seinen Zweck ("funzt"), ist aber etwas unsinnig.
Das hat es ja eben im FF nicht.
In Firefox 3.6 bei mir schon - anstandslos.
-
-
-
-
@@Smart:
nuqneH
Ich habe die zwei Links weggelassen.
Das hättest du nicht tun sollen.
Das sollte so aussehen:
Das sollte es nicht tun.
<html>
http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Welche HTML-Version?
<script language="javascript">
@language bitte umweltgerecht entsorgen. In Abhängigkeit der Antwort auf die vorige Frage http://de.selfhtml.org/javascript/intro.htm#javascriptbereiche@title=fehlt @type.
<td rowspan="3" valign="top">
<div id="inhalt" class="hide" style="border:1px solid black; width:600px; height:486px; background-color:#FAFAFA;">Layouttabelle? Pfui!
Layoutangaben mit missbilligten HTML-Attributen anstatt mit http://de.selfhtml.org/css/index.htm@title=CSS? Pfui! Pfui!
Layoutangaben inline mit @style anstatt im Stylesheet? Pfui! Pfui! Pfui!
<a href='#' onclick="hideDiv();">Sichtbar</a>
<a href='#' onclick="showDiv();">Unsichtbar</a>Beim Click auf die Links soll zum Seitenanfang gesprungen werden?
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a-
Schön, dass wenigstens einer hier sein Spass hat...
1. Es ging nicht um die 2 Links sondern um die JQuery-Funktionen. Nicht darauf habe ich eine Antwort. Bleiben wir lieber alle bei HTML...
2. Der Code-Schnipsel sollte genau aussehen, wie ich angegeben habe, weil der Rest nicht relevant war.
3. Das Layout sollte auch genau aufgebaut sein, weil hier nicht um tds geht sondern um <div>-Element, das nur als Platzhalter für meine Zwecke dient und nicht damit etwas anzuzeigen.
4. Ob du die Attributen missblligst oder nicht, ist nicht sehr wichtig. Die halt da...
5. Ich habe keine "Stylesheet" im kopft, weil dies, zum 3. mal, ein Code-Schnipsel ist...-
Schön, dass wenigstens einer hier sein Spass hat...
- Es ging nicht um die 2 Links sondern um die JQuery-Funktionen. Nicht darauf habe ich eine Antwort. Bleiben wir lieber alle bei HTML...
Die könntest du sinnvollerweise aber auch ohne links umsetzen und per bind(), click() oder toggle() dranhängen und somit auf den Eventhandler "onclick" verzichten.
- Der Code-Schnipsel sollte genau aussehen, wie ich angegeben habe, weil der Rest nicht relevant war.
Trotzdem war er (wie auch ich sagte voller Fehler).
- Ob du die Attributen missblligst oder nicht, ist nicht sehr wichtig. Die halt da...
Die HTML-Spezifikation sieht das ebenfalls so - bei der Fehlersuche ist es enorm hilfreich, wenn man gültigen Code hat - sollte mal ein Fehler reinrutschen - z.B. ein nicht geschlossenes div-Element oder ähnliches - findet man das wesentlich leichter. Wenn man vorher allerdingst erst 127 Fehler lt. Validator weggraben muss, wirds zeitraubend.
Und statt langugage="javascript" einfach type="text/javascript" zu notieren ist wirklich kein Beinbruch.
- Ich habe keine "Stylesheet" im kopft, weil dies, zum 3. mal, ein Code-Schnipsel ist...
Deine Entscheidung wenn du dir selbst unnötig arbeit machst. Unobtrusives arbeiten mit JavaScript ist jedenfalls wesentlich einfacher - besonders mit Frameworks wie jQuery. Wie das prinzipiell funktioniert, habe ich bereits erwähnt. Wenn du es nicht wissen willst: deine Entscheidung, es ist aber kein Grund gleich unfreundlich zu werden. Du musst dich nicht rechtfertigen, wenn du etwas auf eine bestimmte Art und Weise machen möchtest, niemand zwingt dich dazu das umzusetzen, was dir hier vorgeschlagen wird. Aber als "noch übender Anfänger" wäre es ggf. nicht verkehrt, die Ratschläge von "Profis" wahrzunehmen, besonders wenn dir versichert wird, dass es einfacher/besser/ordentlicher ist.
-
@@Smart:
nuqneH
Schön, dass wenigstens einer hier sein Spass hat...
- Es ging nicht um […]
„Uns gibt es nur mit Meinung und ungebetener Beratung.“ [Chräcker Heller]
Du trägst deinen Nickname zu Unrecht?
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a
-
-
-
-
-
-
-
Das Ganze sieh in etwa so aus:
<html>
Kein Doctype? Warum nicht?
<head>
<script language="javascript">Wozu das language Attribut? Das ist 1998 aus dem Standard geworfen worden. Wo ist das type Attribut, dass seitdem ein Pflichtattribut ist.
function hideDiv() {
$(function(){$('#sidebar').fadeOut();})Du weißt was du tust? Nein? Dann schau doch in die Doku, vielleicht wird dann klarer, was du falsch machst.
function showDiv() {
$(function(){Hier das gleiche.
<td rowspan="3" valign="top">
Tabellen sind in erster Linie für Tabellarische Daten gedacht, ..
<div id="inhalt" class="hide" style="border:1px solid black; width:600px; height:486px; background-color:#FAFAFA;">
Nicht für irgendwelche Elemente.
<body onload="$(function(){$('#inhalt').css('display','none');})">
Wo hast du diese Schreibweise mit der anonymen Funktion aufgeschnappt? Die brauchst du z.b. bei Events aber nicht hier.
Struppi.
-
@@Struppi:
nuqneH
<script language="javascript">
Wozu das language Attribut? Das ist 1998 aus dem Standard geworfen worden.Nein.
Wo ist das type Attribut, dass seitdem ein Pflichtattribut ist.
Kann man so nicht (mehr) sagen. [HTML5]
Qapla'
--
Volumen einer Pizza mit Radius z und Dicke a: pi z z a
-
-
-