IE9 macht JS-Manipulationen rückgängig?!?
Thomas
- browser
Hallo Forum,
mit dem IE9 hat sich zwar einiges gebessert - aber ganz zufrieden kann man immer noch nicht sein.
Das Problem: Ich habe eine Funktion gebaut, die mir per Klick EIN bestimmtes DIV-Element zeigt und alle anderen versteckt. Ich kann aus bestimmten Gründen kein jQuery oder ein ähnliche Framework verwenden, weil der Hoster dieses verbietet. Gut. Also selber schreiben:
...
<head>
<script type="text/javascript">
[code lang=javascript]
function wackelschalter(given) {
var blocks = document.getElementById('tm_serviceDetails');
for (var i=0; i<=blocks.childNodes.length-1; i++) {
if (blocks.childNodes[i].nodeName == 'DIV') {
if (blocks.childNodes[i].className == given ) {
blocks.childNodes[i].style.display = "block";
} else {
blocks.childNodes[i].style.display = "none";
}
}
}
}
</script>
</head>
...
[/code]
aufgerufen wird über einen onClick="wackelschalter(bereich1);". Hier übergebe ich den Klassennamen des DIV-Elements ('bereich1', 'bereich2', '...'), das gezeigt werden soll; alle anderen DIVs werden verborgen.
Die zu manipulierenden Objekte sehen so aus:
<div id="tm_serviceDetails" style="margin-top:0;">
<div class="bereich1" style="display:none;">
<div id="bereich1">
<div class="serviceBereich_ubersicht container">
<h2>Service im Überblick</h2>
...
ALLE Browser reagieren korrekt und tun was sie sollen. Nur der IE9 nicht. Er führt die Manipulation prinzipiell durch, zeigt aber keine Änderungen an. Bemüht man den Debugger kann man die Änderungen sehen - nach Durchlauf der Schleife nimmt der IE aber alle Änderungen wieder zurück und zeigt das HTML so an, wie in die Datei eingetragen.
Er nimmt also die Änderungen wieder zurück. Keine Ahnung, warum er das macht.
Weiss jemand Rat?
--
Tom
Hi,
mit dem IE9 hat sich zwar einiges gebessert - aber ganz zufrieden kann man immer noch nicht sein.
Der primäre Grund zur Unzufriedenheit sind vermutlich eher deine HTML-Kenntnisse.
function wackelschalter(given) {
var blocks = document.getElementById('tm_serviceDetails');
for (var i=0; i<=blocks.childNodes.length-1; i++) {
Eine ID hat dokumentweit eindeutig zu sein.
Dass du hier eine Schleife darüber zu machen versuchst, legt den Verdacht nahe, dass du die ID fehlerhafter Weise mehrfach verwendest.
Schiebe die Schuld für deine Fehler nicht dem Browser zu.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
Hi,
Eine ID hat dokumentweit eindeutig zu sein.
Dass du hier eine Schleife darüber zu machen versuchst, legt den Verdacht nahe, dass du die ID fehlerhafter Weise mehrfach verwendest.
My bad - ich hatte den Zugriff auf childNodes übersehen.
MfG ChrisB
Das mit den HTML-Kenntnissen ignoriere ich jetzt mal.
Merke: erst lesen, verstehen und dann meckern - und nicht umgekehrt.
--
Tom
Hallo,
function wackelschalter(given) {
var blocks = document.getElementById('tm_serviceDetails');
for (var i=0; i<=blocks.childNodes.length-1; i++) {
Stilanmerkung: Um Wiederholungen zu vermeiden und die Performance zu optimieren, besser so:
var details = document.getElementById('tm_serviceDetails').childNodes;
for (var i = 0, l = details.length; i < l; i++) {
if (blocks.childNodes[i].nodeName == 'DIV') {
Die Wiederholung von »blocks.childNodes[i]« ist unnötig und langsam. Den Wert kannst du in einer Variablen speichern.
var detail = details[i];
if (detail.nodeName == 'DIV') usw.
if (blocks.childNodes[i].className == given ) { blocks.childNodes[i].style.display = "block"; } else { blocks.childNodes[i].style.display = "none"; }
Kürzer:
detail.style.display = detail.className == given ? 'block' : 'none';
aufgerufen wird über einen onClick="wackelschalter(bereich1);".
Wo steht das onclick? Zeig mal den entsprechenden Code.
Hier übergebe ich den Klassennamen des DIV-Elements ('bereich1', 'bereich2', '...')
In obigem Beispiel übergibst du keinen String, sondern einen (wahrscheinlich nicht auflösbaren) Bezeichner. Da fehlen die Anführungszeichen.
nach Durchlauf der Schleife nimmt der IE aber alle Änderungen wieder zurück und zeigt das HTML so an, wie in die Datei eingetragen.
Hört sich so an, als würde die Seite neu geladen. Wo steht das onclick? In einem a-Element?
Stell den Beispielcode mal bitte auf http://jsfiddle.net oder lade ihn anderweitig hoch, sodass wir ihn einfach testen können.
Mathias
Wo steht das onclick? Zeig mal den entsprechenden Code.
<a onclick="wackelschalter('bereich1');" href="#" target="_top">Übersicht</a>
Hier übergebe ich den Klassennamen des DIV-Elements ('bereich1', 'bereich2', '...')
In obigem Beispiel übergibst du keinen String, sondern einen (wahrscheinlich nicht auflösbaren) Bezeichner. Da fehlen die Anführungszeichen.
nach Durchlauf der Schleife nimmt der IE aber alle Änderungen wieder zurück und zeigt das HTML so an, wie in die Datei eingetragen.
Hört sich so an, als würde die Seite neu geladen. Wo steht das onclick? In einem a-Element?
ja. s.o.
Hi,
<a onclick="wackelschalter('bereich1');" href="#" target="_top">Übersicht</a>
Warum setzt du bei einem Link, der ausschließlich JavaScript aufrufen soll, ein target-Attribut?
nach Durchlauf der Schleife nimmt der IE aber alle Änderungen wieder zurück und zeigt das HTML so an, wie in die Datei eingetragen.
Hört sich so an, als würde die Seite neu geladen.
Und, hast du das überprüft?
MfG ChrisB
[latex]Mae govannen![/latex]
<a onclick="wackelschalter('bereich1');" href="#" target="_top">Übersicht</a>
Warum setzt du bei einem Link, der ausschließlich JavaScript aufrufen soll, ein target-Attribut?
Müßte die Frage hier nicht eher lauten "Warum ist da ein Link, wenn nichts verlinkt werden soll, sondern nur eine JavaScript-Funktion aufgerufen werden soll?".
Da dort die Standard-Aktion nicht unterdrückt wird, wird die Seite ohnehin neu geladen und die Änderungen durch die Funktion sind hinfällig ...
Ein <button onclick="wackelschalter('bereich1')">Übersicht</button>
und etwas CSS, um bspw. das Aussehen eines Links zu erreichen, sollte reichen.
Stur lächeln und winken, Männer!
Kai
Hi,
<a onclick="wackelschalter('bereich1');" href="#" target="_top">Übersicht</a>
Warum setzt du bei einem Link, der ausschließlich JavaScript aufrufen soll, ein target-Attribut?
Müßte die Frage hier nicht eher lauten "Warum ist da ein Link, wenn nichts verlinkt werden soll, sondern nur eine JavaScript-Funktion aufgerufen werden soll?".
Jein. Die Frage sollte man sich verkneifen, wenn Mathias mitdiskutiert – bei Cheatah hätte man einen dankbareren Adressaten :-)
Da dort die Standard-Aktion nicht unterdrückt wird, wird die Seite ohnehin neu geladen und die Änderungen durch die Funktion sind hinfällig ...
Standardaktion für einen Link mit href="#" wäre aber höchsten das Springen an den Seitenanfang.
Denkbar, dass das target-Attribut hier den IE aber zu anderem Verhalten veranlasst.
MfG ChrisB
Ein
<button onclick="wackelschalter('bereich1')">Übersicht</button>
und etwas CSS, um bspw. das Aussehen eines Links zu erreichen, sollte reichen.
Erstens sendet ein Button standardmäßig ein Formular ab, sodass man auf jeden Fall type="button" notieren sollte.
Zweitens ist es nicht möglich, ausgehend von einem button-Element »mit etwas CSS« browserübergreifend das Aussehen eines Links zu erreichen.
Drittens bietet das a-Element ein Verhalten und Aussehen, das am nächsten am Original liegt. ;)
Mathias
[latex]Mae govannen![/latex]
Ein
<button onclick="wackelschalter('bereich1')">Übersicht</button>
und etwas CSS, um bspw. das Aussehen eines Links zu erreichen, sollte reichen.Erstens sendet ein Button standardmäßig ein Formular ab, sodass man auf jeden Fall type="button" notieren sollte.
Ja.
Zweitens ist es nicht möglich, ausgehend von einem button-Element »mit etwas CSS« browserübergreifend das Aussehen eines Links zu erreichen.
Nicht? Welcher Browser sperrt sich? Daß es im umgekehrten Fall (Link wie Button stylen) nicht wirklich klappt, ist mir bekannt.
Aber dieser Fall ist mir nicht wissentlich untergekommen (wobei ich das seit auch schon längere Zeit nicht mehr verwendet habe)
Drittens bietet das a-Element ein Verhalten und Aussehen, das am nächsten am Original liegt. ;)
Aber unabhängig davon ist href="#"
für _solche_ Links trotzdem *immer* unsinnig. Dann besser href="javascript:;"
o.Ä.
Stur lächeln und winken, Männer!
Kai
Hi!
Drittens bietet das a-Element ein Verhalten und Aussehen, das am nächsten am Original liegt. ;)
Aber unabhängig davon isthref="#"
für _solche_ Links trotzdem *immer* unsinnig. Dann besserhref="javascript:;"
o.Ä.
Spricht was dagegen, das href-Attribut leer zulassen, anstatt es mit einem sinnlosen Wert zu füllen? Es zwar kein Pflichtattribut, aber ganz weglassen geht auch nicht, wenn man das Link-Verhalten nicht einbüßen möchte.
Lo!
[latex]Mae govannen![/latex]
Spricht was dagegen, das href-Attribut leer zulassen, anstatt es mit einem sinnlosen Wert zu füllen?
Die Seite wird neu geladen, was bei solchen Konstrukten nun gerade nicht bezweckt wird.
Heißt: Man müßte dann wiederum diese Aktion durch zusätzliches Javascript unterdrücken.
Stur lächeln und winken, Männer!
Kai
Hi!
Spricht was dagegen, das href-Attribut leer zulassen, anstatt es mit einem sinnlosen Wert zu füllen?
Die Seite wird neu geladen, was bei solchen Konstrukten nun gerade nicht bezweckt wird.
Heißt: Man müßte dann wiederum diese Aktion durch zusätzliches Javascript unterdrücken.
Es gibt doch sowieso einen onclick-Handler, der mit return false; abschließt, gerade um die Standard-Reaktion auf einen Klick zu verhindern.
Besser noch als sinnlose Werte wäre noch, eine Javascript-lose Alternative zu verlinken.
Lo!
[latex]Mae govannen![/latex]
Spricht was dagegen, das href-Attribut leer zulassen, anstatt es mit einem sinnlosen Wert zu füllen?
Die Seite wird neu geladen, was bei solchen Konstrukten nun gerade nicht bezweckt wird.
Heißt: Man müßte dann wiederum diese Aktion durch zusätzliches Javascript unterdrücken.Es gibt doch sowieso einen onclick-Handler, der mit return false; abschließt, gerade um die Standard-Reaktion auf einen Klick zu verhindern.
Hier ist kein return false;
angegeben, daher sollte das in diesem speziellen Fall dort im onclick-Attribut ergänzt werden.
Aber mein Einwand bezog sich auch generell auf alle Nicht-Link-Links ^^, auch ohne vergebenens onclick-Attribut, und da halte ich es für sinnvoller, <a href="javascript:;">
als Ersatz für <a href="#">
zu schreiben als ein leeres href-Attribut zu verwenden und allen Links ein zusätzlichen onclick-Attribut zu verpassen.
Man kann natürlich auch dem body (oder einem untergeordneten gruppierenden Element) einen "globalen" click-Handler verpassen, das geklickte Element ermitteln und dann bei leerem href des Links die Standardaktion mit e.preventDefault()
bzw e.returnValue = false;
unterdrücken... ^^
Stur lächeln und winken, Männer!
Kai
Hi!
Hier ist kein
return false;
angegeben, daher sollte das in diesem speziellen Fall dort im onclick-Attribut ergänzt werden.
Richtig, das war aber ein Problem, weswegen ein return false vorgeschlagen wurde.
Aber mein Einwand bezog sich auch generell auf alle Nicht-Link-Links ^^, auch ohne vergebenens onclick-Attribut, und da halte ich es für sinnvoller,
<a href="javascript:;">
als Ersatz für<a href="#">
zu schreiben als ein leeres href-Attribut zu verwenden und allen Links ein zusätzlichen onclick-Attribut zu verpassen.
Welchen Sinn hat denn ein Nicht-Link, der noch nicht mal auf onclick reagiert?
Lo!
[latex]Mae govannen![/latex]
Aber mein Einwand bezog sich auch generell auf alle Nicht-Link-Links ^^, auch ohne vergebenens onclick-Attribut, und da halte ich es für sinnvoller,
<a href="javascript:;">
als Ersatz für<a href="#">
zu schreiben als ein leeres href-Attribut zu verwenden und allen Links ein zusätzlichen onclick-Attribut zu verpassen.Welchen Sinn hat denn ein Nicht-Link, der noch nicht mal auf onclick reagiert?
Beispielsweise ein Bereich, der auf CSS :hover reagieren soll und noch alte Browser wie IE6 berücksichtigen muß, aus welchen Gründen auch immer (aka Chef-Etage ^^).
Stur lächeln und winken, Männer!
Kai
Welcher Browser sperrt sich? Daß es im umgekehrten Fall (Link wie Button stylen) nicht wirklich klappt, ist mir bekannt.
Einen Link wie einen Button zu stylen ist sogar einfacher.
Versuche mal, einen Button so zu stylen, dass er im Kontext eines Fließtextes wie normaler Text aussieht, also so:
Text Text Text
Da werden dir verschiedene, auch aktuelle Browser einen Strich durch die Rechnung machen. Das Zurücksetzen der Abstände funktioniert nicht überall. Das Setzen der Schriftformatierung ist nervig. Das Ausrichten des Textes auf derselben Grundlinie wie der Text der umgebenden Zeilenbox funktioniert nicht überall. Beim Fokussieren, Markieren und Aktivieren verhält sich die Box nicht wie ein Link.
Beispiel:
http://jsfiddle.net/N8FUq/2/
Versuche mal, die Abstände im FF und Webkit wegzubekommen. Keine Chance meines Wissens. Im Internet Explorer 7 sieht es gräßlich aus.
Aber unabhängig davon ist
href="#"
für _solche_ Links trotzdem *immer* unsinnig. Dann besserhref="javascript:;"
o.Ä.
href="#" ist nicht unsinniger als href="" oder href="quatschMitSoße", wenn keine brauchbare Fallback-URL existiert. Funktional hat href="javascript:;" keinen Mehrwert, es deutet höchstens etwas für den Programmierer an. Dass das im Falle <a href="javascript:;" onclick="…; return false"> nötig wäre, sehe ich nicht.
Mathias
Hallo,
Welcher Browser sperrt sich? Daß es im umgekehrten Fall (Link wie Button stylen) nicht wirklich klappt, ist mir bekannt.
Einen Link wie einen Button zu stylen ist sogar einfacher.
tatsächlich?
Versuche mal, einen Button so zu stylen, dass er im Kontext eines Fließtextes wie normaler Text aussieht
Versuch mal, einen Link so zu stylen, dass er aussieht wie ein vom GUI des Systems generierter Button, von dem du als Webautor nicht weißt, wie er aussieht. Das geht IMO nur, wenn du alle deine Buttons komplett selbst gestaltest und dann auch den Link genau so formatierst.
href="#" ist nicht unsinniger als href="" oder href="quatschMitSoße", wenn keine brauchbare Fallback-URL existiert. Funktional hat href="javascript:;" keinen Mehrwert, es deutet höchstens etwas für den Programmierer an. Dass das im Falle <a href="javascript:;" onclick="…; return false"> nötig wäre, sehe ich nicht.
Sehe ich ähnlich. Ein "javascript:" im href hat nur einen Nachteil, wenn man alte IEs (IE6) auch noch bedienen will oder muss. Bei deaktiviertem Javascript fangen die nämlich scheinbar an, irgendwas zu laden (Ladefortschrittsbalken) und hören von allein nicht wieder auf damit.
Ciao,
Martin
Versuch mal, einen Link so zu stylen, dass er aussieht wie ein vom GUI des Systems generierter Button, von dem du als Webautor nicht weißt, wie er aussieht.
Gut, das ist ein besonderer Fall, der tatsächlich schwer umzusetzen ist.
Zumindest theoretisch ist das kein Problem. In CSS 2 und teilweise auch CSS 3 gibt es einen Haufen Keywords als Eigenschaftswerte, die auf den GUI-Standard verweisen. In CSS 3 gibt es die appearance-Eigenschaft (s.a.), die das Übernehmen sämtlicher Styles eines Standard-Buttons erlaubt.
Anders herum habe ich appearance: hyperlink
ausprobiert, hat aber keine Verbesserung gebracht.
Im IE7 kann man die Ausrichtung übrigens mit vertical-align: middle
verbessern, diese Deklaration darf aber kein anderer Browser zu Gesicht bekommen, sonst sieht es in denen mies aus.
Mathias
[latex]Mae govannen![/latex]
Welcher Browser sperrt sich? Daß es im umgekehrten Fall (Link wie Button stylen) nicht wirklich klappt, ist mir bekannt.
Einen Link wie einen Button zu stylen ist sogar einfacher.
Nein. Jedenfalls nicht so, daß sich das Aussehen auch nur annähernd den Standard-Buttons des jeweils verwendeten Browsers angleicht. Man hat dann nur einen häßlichen Klotz, der absolut nicht zu ggf. vorhandenen anderen Buttons paßt.
Versuche mal, einen Button so zu stylen, dass er im Kontext eines Fließtextes wie normaler Text aussieht, also so:
Text Text Text
Da werden dir verschiedene, auch aktuelle Browser einen Strich durch die Rechnung machen. Das Zurücksetzen der Abstände funktioniert nicht überall. Das Setzen der Schriftformatierung ist nervig. Das Ausrichten des Textes auf derselben Grundlinie wie der Text der umgebenden Zeilenbox funktioniert nicht überall. Beim Fokussieren, Markieren und Aktivieren verhält sich die Box nicht wie ein Link.
Ok, mag sein, wie gesagt, ich habe schon ewig nicht mehr Buttons als Text-Links verwendet. Dann halt doch ein Link.
Aber unabhängig davon ist
href="#"
für _solche_ Links trotzdem *immer* unsinnig. Dann besserhref="javascript:;"
o.Ä.href="#" ist nicht unsinniger als href="" oder href="quatschMitSoße", wenn keine brauchbare Fallback-URL existiert. Funktional hat href="javascript:;" keinen Mehrwert, es deutet höchstens etwas für den Programmierer an.
Wie ich schon in einem anderen Beitrag schrieb: Ich bezog mich dabei generell auf nicht-verlinkende Links, nicht nur wenn ein click-Verhalten definiert ist. Und dann ist ein funktionaler Unterschied gegeben. Natürlich ist der Inhalt des href-Attributs solange völlig egal, wie das Standardverhalten in irgendeiner Weise deaktiviert wird. Aber ich halte es für sinnvoll, sich auf eine immer einheitliche Schreibweise festzulegen, und da ist href="javascript:;" meiner Meinung nach die sinnvollste.
Mit href="javascript:;" kann man notfalls auch mal vorhandenes click-Verhalten temporär entfernen, ohne daß der Link dann direkt zur Usability-Falle für den Nutzer wird. Mit href="#" springt der Browser zum Dokumentanfang, mit href="" lädt er die Seite neu. Der Nutzer verliert die Position auf der Seite und ist genervt. All das passiert bei href="javascript:;" nicht; auch dann nicht, wenn der Nutzer Javascript deaktiviert hat. Und darum geht es mir. Ich jedenfalls bin es leid, ständig die Lese-Position im Dokument wieder neu suchen zu müssen, weil irgend ein Dödel mich per href="#" an den Seitenanfang geschickt hat.
Eine andere (und meiner Meinung nach wesentlich sinnvollere) Alternative ist es, die entsprechenden nicht verlinkenden Links überhaupt erst mit Javascript ins Dokument einzufügen, dann stellt sich das Problem gar nicht erst. Das ist aber viel mehr Aufwand und dürfte einen Javascript-Anfänger überfordern.
Stur lächeln und winken, Männer!
Kai
Hi!
Aber ich halte es für sinnvoll, sich auf eine immer einheitliche Schreibweise festzulegen, und da ist href="javascript:;" meiner Meinung nach die sinnvollste.
Netter Versuch, sich das Leben einfacher zu machen. Das konsequente Durchsetzen scheitert aber in der Praxis oftmals daran, dass man individuelle Lösungen braucht. Und dann war's das mit der Einheitlichkeit.
Mit href="javascript:;" kann man notfalls auch mal vorhandenes click-Verhalten temporär entfernen, ohne daß der Link dann direkt zur Usability-Falle für den Nutzer wird. Mit href="#" springt der Browser zum Dokumentanfang, mit href="" lädt er die Seite neu. Der Nutzer verliert die Position auf der Seite und ist genervt. All das passiert bei href="javascript:;" nicht; auch dann nicht, wenn der Nutzer Javascript deaktiviert hat. Und darum geht es mir. Ich jedenfalls bin es leid, ständig die Lese-Position im Dokument wieder neu suchen zu müssen, weil irgend ein Dödel mich per href="#" an den Seitenanfang geschickt hat.
Sehe ich nur das Problem nicht? Wenn du beispielsweise nur :hover im IE6 haben willst, dann brauchst du doch das Standardverhalten des Links nicht und bist besser dran, es zu unterdrücken, also kann href ganz wegfallen. Ohne href ändert sich das Rendering, das Element sieht dann aus wie einfacher Text ohne Unterstreichung und ohne Cursor-Änderung. Wenn man was klickbares braucht, dann mit href (wenn man die Rendering-Eigenschaften braucht), onclick braucht man dann sowieso und da kann man doch das return false hinschreiben. Was dann in href drinsteht ist nur noch für ausgeschaltetes Javascript relevant.
Lo!
[latex]Mae govannen![/latex]
Aber ich halte es für sinnvoll, sich auf eine immer einheitliche Schreibweise festzulegen, und da ist href="javascript:;" meiner Meinung nach die sinnvollste.
Netter Versuch, sich das Leben einfacher zu machen.
Nein, man macht _den Nutzern_ das Leben einfacher, weil Usability-Desaster wie "Seite neu laden" oder "Zum Seitenanfang springen" von vornherein ausgeschlossen werden, egal ob der Nutzer JS deaktiviert hat oder der Entwickler vergessen hat, die Standardaktion zu unterdrücken.
Das konsequente Durchsetzen scheitert aber in der Praxis oftmals daran, dass man individuelle Lösungen braucht. Und dann war's das mit der Einheitlichkeit.
Wir reden anscheinend aneinander vorbei oder verstehen uns nicht.
Was sollte an <a href="#" onclick="foo();return false">
(oder href="") für individuelle Lösungen besser geeignet sein als <a href="javascript:;" onclick="foo()">
Im Gegenteil sehe ich fast ausschließlich Nachteile.
Was dann in href drinsteht ist nur noch für ausgeschaltetes Javascript relevant.
Eben. Und dann ist die Seite schlechter nutzbar, s.o.
Stur lächeln und winken, Männer!
Kai
Hi!
Wir reden anscheinend aneinander vorbei oder verstehen uns nicht.
Das mit der Einheitlichkeit hatte ich auf's Allgemeine bezogen. Aber selbst für das vorliegende Thema sehe ich nicht, dass Einheitlichkeit durchsetzbar ist.
Was sollte an
<a href="#" onclick="foo();return false">
(oder href="") für individuelle Lösungen besser geeignet sein als<a href="javascript:;" onclick="foo()">
Im Gegenteil sehe ich fast ausschließlich Nachteile.Was dann in href drinsteht ist nur noch für ausgeschaltetes Javascript relevant.
Eben. Und dann ist die Seite schlechter nutzbar, s.o.
Das, denke ich, kommt auf den Einzelfall an. Im Allgemeinen ist eine Alternative zu ausgeschaltetem Javascript sinnvoll, womit das href mit einem sinnvollen Wert belegt werden sollte. Und dann kommst du nicht umhin, return false zu verwenden.
Ich seh da jetzt als Anwendungsfall für href="javascript:;" nur alte IE6 die :hover aber ohne onclick brauchen und man dan Anwender, wenn er trotz Sinnlosigkeit auf das Elmenent klickt, nicht in die Wüste schicken will. Ansonsten wäre href mit was Sinnvollem zu füllen oder kann ganz wegbleiben.
Lo!
[latex]Mae govannen![/latex]
Das, denke ich, kommt auf den Einzelfall an. Im Allgemeinen ist eine Alternative zu ausgeschaltetem Javascript sinnvoll, womit das href mit einem sinnvollen Wert belegt werden sollte. Und dann kommst du nicht umhin, return false zu verwenden.
Das ist klar, aber um diese Art Links geht es nicht. Ich rede hier ausschließlich(!) von den den speziellen Links, die üblicherweise (und meiner Meinung nach eben fälschlicherweise) fast überall mit href="#" ausgestattet werden und außerhalb der Javascript-Funktionalität keinen weiteren Sinn haben, also kein Fallback benötigen. Deshalb habe ich in jenem Beitrag auch das Wort "solche" extra betont, wobei sich das (und der ganze Subthread) auf das vorgestelle Beispiel bezog.
Besser ist natürlich das Einfügen derartiger Links per JS, aber wenn hier jemand bspw. eine HTML-eine Frage stellt und href="#" Links im Beispiel hat, würde es üblicherweise zu weit gehen, ihm diese Technik nahezulegen. Daher sollte man dann meiner Meinung nach besser einen kurzen Hinweis geben, daß er dann zumindest href="javascript:;" verwenden sollte, um ungewünschte Effekte beim Nutzer zu verhindern.
Narf!
Kai
Hi!
Ich rede hier ausschließlich(!) von den den speziellen Links, die üblicherweise (und meiner Meinung nach eben fälschlicherweise) fast überall mit href="#" ausgestattet werden und außerhalb der Javascript-Funktionalität keinen weiteren Sinn haben, also kein Fallback benötigen.
Ok, aber warum haben sie bei reiner Javascript-Funktionalität überhaupt ein href? Nur wegen IE6-hover? Oder wegen des Default-Renderings als Link, was man auch mit CSS erreichen kann?
Besser ist natürlich das Einfügen derartiger Links per JS, aber wenn hier jemand bspw. eine HTML-eine Frage stellt und href="#" Links im Beispiel hat, würde es üblicherweise zu weit gehen, ihm diese Technik nahezulegen. Daher sollte man dann meiner Meinung nach besser einen kurzen Hinweis geben, daß er dann zumindest href="javascript:;" verwenden sollte, um ungewünschte Effekte beim Nutzer zu verhindern.
Das Weglassen des unnützen (mit IE6-hover-Ausnahme) Attributes sollte man nicht empfehlen?
Lo!
[latex]Mae govannen![/latex]
Ok, aber warum haben sie bei reiner Javascript-Funktionalität überhaupt ein href? Nur wegen IE6-hover? Oder wegen des Default-Renderings als Link, was man auch mit CSS erreichen kann?
Gibt es einen Wert für CSS, der die Link-Farbe des im Browser eingestellten Default-Wertes übernimmt? Wenn nicht, ist es schon ein Problem, das mit "echten" Links zu synchronisieren.
Besser ist natürlich das Einfügen derartiger Links per JS, aber wenn hier jemand bspw. eine HTML-eine Frage stellt und href="#" Links im Beispiel hat, würde es üblicherweise zu weit gehen, ihm diese Technik nahezulegen. Daher sollte man dann meiner Meinung nach besser einen kurzen Hinweis geben, daß er dann zumindest href="javascript:;" verwenden sollte, um ungewünschte Effekte beim Nutzer zu verhindern.
Das Weglassen des unnützen (mit IE6-hover-Ausnahme) Attributes sollte man nicht empfehlen?
Wird ein a-Element ohne href überhaupt und, wenn ja, von allen mehr und minder relevanten Browsern (ggf. incl. Vorgänger-Generationen) wie ein Link dargestellt, damit der Nutzer das als aktives Element erkennt? Soweit ich weiß nicht. Es geht Autoren, die solch ein Element in der angesprochenen Weise nutzen vermutlich hauptsächlich darum, das (Default-)Aussehen und Verhalten von Links zu erreichen.
Stur lächeln und winken, Männer!
Kai
Hi,
Gibt es einen Wert für CSS, der die Link-Farbe des im Browser eingestellten Default-Wertes übernimmt? Wenn nicht, ist es schon ein Problem, das mit "echten" Links zu synchronisieren.
Wer noch nicht mal seine eigenen Formatierungen für Links angibt, sondern sich mit den Browser-Defaults zufrieden gibt – dem kann Darstellung offenbar nicht so wichtig sein, dass das jetzt wirklich ein Argument wäre …
MfG ChrisB
Hi!
Ok, aber warum haben sie bei reiner Javascript-Funktionalität überhaupt ein href? Nur wegen IE6-hover? Oder wegen des Default-Renderings als Link, was man auch mit CSS erreichen kann?
Gibt es einen Wert für CSS, der die Link-Farbe des im Browser eingestellten Default-Wertes übernimmt? Wenn nicht, ist es schon ein Problem, das mit "echten" Links zu synchronisieren.
Für Firefox ja: https://developer.mozilla.org/en/CSS/color_value#Mozilla_Color_Preference_Extensions
Wer also seine Linkfarben selbst definiert, hat auch kein unlösbares Problem. Gibt es weitere Argumente für href?
Wird ein a-Element ohne href überhaupt und, wenn ja, von allen mehr und minder relevanten Browsern (ggf. incl. Vorgänger-Generationen) wie ein Link dargestellt, damit der Nutzer das als aktives Element erkennt? Soweit ich weiß nicht. Es geht Autoren, die solch ein Element in der angesprochenen Weise nutzen vermutlich hauptsächlich darum, das (Default-)Aussehen und Verhalten von Links zu erreichen.
Ohne href wird es vermutlich von keinem Browser als Link dargestellt (hab es nur mit IE und Fx getestet), es linkt ja auch nirgendwohin. Ob es dann aber sinnvoll ist, es wie ein Link aussehen zu lassen ist ein anderes Thema.
Lo!
Hi,
Sehe ich nur das Problem nicht? Wenn du beispielsweise nur :hover im IE6 haben willst, dann brauchst du doch das Standardverhalten des Links nicht und bist besser dran, es zu unterdrücken, also kann href ganz wegfallen.
Dann bekommst du aber IIRC kein :hover im IE 6 – das bekommst du nur für Links *mit* gesetztem href-Attribut.
MfG ChrisB
Hi!
Wenn du beispielsweise nur :hover im IE6 haben willst, dann brauchst du doch das Standardverhalten des Links nicht und bist besser dran, es zu unterdrücken, also kann href ganz wegfallen.
Dann bekommst du aber IIRC kein :hover im IE 6 – das bekommst du nur für Links *mit* gesetztem href-Attribut.
Ja stimmt, ohne href geht es nicht.
Lo!
Jedenfalls nicht so, daß sich das Aussehen auch nur annähernd den Standard-Buttons des jeweils verwendeten Browsers angleicht.
In die Verlegenheit dies erreichen zu wollen kam ich zum Glück noch nicht im Laufe meiner Karriere.
Ich bezog mich dabei generell auf nicht-verlinkende Links, nicht nur wenn ein click-Verhalten definiert ist.
Wieso sollte man das tun – einen Link einfügen, der nichts tut?
Mit href="javascript:;" kann man notfalls auch mal vorhandenes click-Verhalten temporär entfernen, ohne daß der Link dann direkt zur Usability-Falle für den Nutzer wird.
Ich wüsste nicht, wieso man absichtlich einen Notfall herbeiführen sollte.
Eine andere (und meiner Meinung nach wesentlich sinnvollere) Alternative ist es, die entsprechenden nicht verlinkenden Links überhaupt erst mit Javascript ins Dokument einzufügen, dann stellt sich das Problem gar nicht erst. Das ist aber viel mehr Aufwand und dürfte einen Javascript-Anfänger überfordern.
Achso. Ich predige das seit Jahren auch für Anfänger.
Mathias
[latex]Mae govannen![/latex]
Ich bezog mich dabei generell auf nicht-verlinkende Links, nicht nur wenn ein click-Verhalten definiert ist.
Wieso sollte man das tun – einen Link einfügen, der nichts tut?
Sollte man natürlich nicht. Aber in der Realität findet man <a href="#" onclick="foo();return false"> und ähnliches millionenfach. Gut - ich kann es sicherlich nicht ändern, bin aber dennoch ein Don Quixote, der dazu aufruft, Leuten, die solche Links benutzen wollen, dann wenigstens zu der href="javascript:;" Version zu raten, ähnlich wie auch zu CSS statt Tabellenlayout geraten wird.
Eine andere (und meiner Meinung nach wesentlich sinnvollere) Alternative ist es, die entsprechenden nicht verlinkenden Links überhaupt erst mit Javascript ins Dokument einzufügen, dann stellt sich das Problem gar nicht erst. Das ist aber viel mehr Aufwand und dürfte einen Javascript-Anfänger überfordern.
Achso. Ich predige das seit Jahren auch für Anfänger.
Ich sehe für Anfänger da zu viele Probleme. Je nach vorhandener und gewünschter Struktur des Dokuments _kann_ das Einhängen erzeugter Elemente an eine ganz bestimmte Stelle ins DOM recht umständlich werden, weil man mit insertBefore, parentNode, replaceChild und/oder den Siblings arbeiten muß. Meist ist es (relativ) einfach, klar. Aber eben nicht immer. Warum gibt es bspw. kein insertAfter? Spätestens da fängt man an mit den Referenzen zu jonglieren. Ob ein Anfänger das hinbekommt?
Stur lächeln und winken, Männer!
Kai
<a onclick="wackelschalter('bereich1');" href="#" target="_top">Übersicht</a>
Dann ist das für dich interessant:
[Unterdrücken der Standardaktion des Ereignisses](http://molily.de/js/event-handling-objekt.html#standardaktion)
z.B.
onclick="wackelschalter('bereich1'); return false"
Mathias
So. Danke für die kolateralen Anmerkungen und -regungen. Habe das Problem grad gelöst (beim Rauchen - vor der Tür):
IE führt erst die Funktion aus und dann folgt er brav dem, was im href eingetragen steht - und lädt die Seite neu. Eigentlich ganz logisch, nur dass die anderen Browser das nicht so machen.
Habe den Funktionsaufruf jetzt in den <li>-Tag eingetragen und den Link zu einem Anker gemacht, um ganz auf der richtigen Seite zu sein.
--
Vielen Dank nochmals,
Tom
So. Danke für die kolateralen Anmerkungen und -regungen. Habe das Problem grad gelöst (beim Rauchen - vor der Tür):
IE führt erst die Funktion aus und dann folgt er brav dem, was im href eingetragen steht - und lädt die Seite neu. Eigentlich ganz logisch, nur dass die anderen Browser das nicht so machen.
Habe den Funktionsaufruf jetzt in den <li>-Tag eingetragen und den Link zu einem Anker gemacht, um ganz auf der richtigen Seite zu sein.
--
Vielen Dank nochmals,
Tom
Hallo,
IE führt erst die Funktion aus und dann folgt er brav dem, was im href eingetragen steht
ja, das ist klar. Machen die anderen Browser auch.
und lädt die Seite neu. Eigentlich ganz logisch, nur dass die anderen Browser das nicht so machen.
Eigentlich ganz logisch, dass die anderen Browser so reagieren, denn href="#" heißt ja nur: Springe an den Anfang der aktuell geladenen Seite. Für mich ist der IE hier der Sonderling.
Habe den Funktionsaufruf jetzt in den <li>-Tag eingetragen und den Link zu einem Anker gemacht, um ganz auf der richtigen Seite zu sein.
Was genau meinst du mit "den Link zu einem Anker gemacht"? Etwa ein a-Element mit name-Attribut? Wenn ja, wozu?
Ciao,
Martin
PS: Du hättest dein abschließendes Fazit nicht unbedingt zweimal absetzen müssen. Einmal reicht.