Link ändern bei Klick

[NiX]

Hallo zusammen.

Ich habe einen Link, der ein PHP-Skript lädt, dass ein wenig dauert (5-10 Sekunden).
Kann ich, sobald der Benutzer auf den Link geklickt hat den Text des Link ändern auf "bitte warten"?

Wie mache ich das? Irgendwie mit CSS, nicht?

Viele Grüsse,
niX

[Dennis]

Hi NiX,

Wie mache ich das? Irgendwie mit CSS, nicht?

Nein, das musst du mit Javascript machen (onClick, Inhalt verändern, z.B. innerHTML).

MfG, Dennis.

[NiX]

Hallo Dennis

Nein, das musst du mit Javascript machen (onClick, Inhalt verändern, z.B. innerHTML).

Hast du mir ein Bespiel? Ich kenne mich mit JavaScript leider überhaupt nicht aus.

Grüsse,
NiX

[wahsaga]

hi,

Ich habe einen Link, der ein PHP-Skript lädt, dass ein wenig dauert (5-10 Sekunden).
Kann ich, sobald der Benutzer auf den Link geklickt hat den Text des Link ändern auf "bitte warten"?

Wie mache ich das? Irgendwie mit CSS, nicht?

Nee, mit CSS würde ich das eher nicht machen - könnte über :focus zwar halbwegs gehen, aber ist wohl nicht ganz das gewünschte.

Da würde ich eher per onClick reagieren, und .innerHTML des Links oder .data des (eines] Text-Kindknotens ändern.

gruß,
wahsaga

[Ashura]

Hallo NiX.

Ich habe einen Link, der ein PHP-Skript lädt, dass ein wenig dauert (5-10 Sekunden).
Kann ich, sobald der Benutzer auf den Link geklickt hat den Text des Link ändern auf "bitte warten"?

Das ginge recht einfach mit JavaScript.

Du benötigst http://de.selfhtml.org/javascript/sprache/objekte.htm#this@title=this, http://de.selfhtml.org/javascript/objekte/node.htm#first_child@title=firstChild und http://de.selfhtml.org/javascript/objekte/node.htm#node_value@title=nodeValue.
(Die beiden Letzeren können alternativ auch durch http://de.selfhtml.org/javascript/objekte/all.htm#inner_text@title=innerText ersetzt werden, was aber von weniger Browsern unterstützt wird.)

Wie mache ich das? Irgendwie mit CSS, nicht?

Mit CSS ist es durchaus auch möglich, wenn auch anscheinend momentan nur im Opera. Zudem muss danach der Cache geleert werden, um den Originaltext wiederherzustellen:

<a id="variabletext" href="http://example.org">Example</a>

a#variabletext:visited {  
  content:"Bitte warten.";  
}

Die ID soll hier diesen Link von allen restlichen abgrenzen.

Einen schönen Mittwoch noch.

Gruß, Ashura

[Ingo Turski]

Hi,

Mit CSS ist es durchaus auch möglich, wenn auch anscheinend momentan nur im Opera. Zudem muss danach der Cache geleert werden, um den Originaltext wiederherzustellen:

ja wenn Du das auch so ungünstig machst.. ;-)

#variabletext { background:white; }  
#variabletext:active, #variabletext:focus { background:#fff; }  
#variabletext:active span, #variabletext:focus span { display:none; }  
#variabletext:active #warten, #variabletext:focus #warten { display:inline; }

<a id="variabletext" href="#variabletext"><span>Example</span><span id="warten">Bitte warten.</span></a>

funktioniert sogar im IE. Für Firefox gäbe es da noch elegantere CSS-Lösungen.

freundliche Grüße
Ingo

[Ashura]

Hallo Ingo.

ja wenn Du das auch so ungünstig machst.. ;-)

#variabletext { background:white; }

#variabletext:active, #variabletext:focus { background:#fff; }
#variabletext:active span, #variabletext:focus span { display:none; }
#variabletext:active #warten, #variabletext:focus #warten { display:inline; }

  
Hier fehlt noch ein  
  
`#variabletext span#warten {display:none;}`{:.language-css}  
  
am Anfang.  
  

> Für Firefox gäbe es da noch elegantere CSS-Lösungen.  
  
Welche?  
  
  
Mir missfällt hier, dass wieder nur für den IE zusätzliches Markup erforderlich ist. Zudem sieht der Linktext in Textbrowsern etwas merkwürdig aus. (Ja, man könnte einen Gedankenstrich o. Ä. in einem weiteren span hinzufügen)  
  
  
Einen schönen Donnerstag noch.  
  
Gruß, Ashura  

-- 
[The End of an Era...](http://www.nightwish.com/english/lettertotarjaen.html)

[Ingo Turski]

Hi,

Hier fehlt noch ein

#variabletext span#warten {display:none;}

am Anfang.

stimmt, ist irgendwie beim Kopieren abhanden gekommen.

Für Firefox gäbe es da noch elegantere CSS-Lösungen.

Welche?

die content-Eigenschaft nutzen und damit auch den unschönen Effekt in Textbrowsern vermeiden.

freundliche Grüße
Ingo

[Ashura]

Hallo Ingo.

Für Firefox gäbe es da noch elegantere CSS-Lösungen.

Welche?
die content-Eigenschaft nutzen und damit auch den unschönen Effekt in Textbrowsern vermeiden.

Dann bleibt es also bei :visited, da der Text beim Aufrufen des Links erscheinen und sicher auch beim Loslassen der (Maus)taste noch bleiben soll.

Aber wie willst du im Fx den Textinhalt des Links per content-Eigenschaft ändern? Wie gesagt kann dies momentan nur Opera.

Oder soll es wieder ein zusätzliches span werden?

Einen schönen Donnerstag noch.

Gruß, Ashura

[Ingo Turski]

Hi,

Dann bleibt es also bei :visited, da der Text beim Aufrufen des Links erscheinen und sicher auch beim Loslassen der (Maus)taste noch bleiben soll.

nö:

#variablertext:focus span { display:none; }  
#variablertext:focus:after { content:'Bitte warten.'; }

<a id="variablertext" href="#variablertext"><span>Example</span></a>

allerdings funktioniert dieses Beispiel, wie auch die vorherige IE-taugliche Lösung, nicht ganz richtig im Opera, weil der den Focus nach dem Anklicken von Ankerlinks verliert. Beim Warten auf eine angeforderte Seite sollte dies anders sein.

Aber wie willst du im Fx den Textinhalt des Links per content-Eigenschaft ändern? Wie gesagt kann dies momentan nur Opera.

Oder soll es wieder ein zusätzliches span werden?

zur Not ginge es auch ohne:

#variablertext:focus { visibility:hidden; }  
#variablertext:focus:after { visibility:visible; content:'Bitte warten.'; margin-left:-3.3em }

<a id="variablertext" href="#variablertext">Example</a>

freundliche Grüße
Ingo

[Ashura]

Hallo Ingo.

[…]
allerdings funktioniert dieses Beispiel, wie auch die vorherige IE-taugliche Lösung, nicht ganz richtig im Opera, weil der den Focus nach dem Anklicken von Ankerlinks verliert. Beim Warten auf eine angeforderte Seite sollte dies anders sein.

Leider ist meine Verbindung zu schnell um dies überprüfen zu können.

Oder soll es wieder ein zusätzliches span werden?
zur Not ginge es auch ohne:

#variablertext:focus { visibility:hidden; }

#variablertext:focus:after { visibility:visible; content:'Bitte warten.'; margin-left:-3.3em }

> `<a id="variablertext" href="#variablertext">Example</a>`{:.language-html}  
  
Ist auch eine Idee, wenn auch nicht Opera-tauglich.  
  
Dennoch hoffe ich, dass Fx eines Tages die content-Eigenschaft auch innerhalb von Elementen anwenden kann.  
  
  
Einen schönen Freitag noch.  
  
Gruß, Ashura  

-- 
[The End of an Era...](http://www.nightwish.com/english/lettertotarjaen.html)

[Ingo Turski]

Hi,

allerdings funktioniert dieses Beispiel, wie auch die vorherige IE-taugliche Lösung, nicht ganz richtig im Opera, weil der den Focus nach dem Anklicken von Ankerlinks verliert. Beim Warten auf eine angeforderte Seite sollte dies anders sein.

Leider ist meine Verbindung zu schnell um dies überprüfen zu können.

Du hattest genug Zeit, dies mit einem Link auf dieses Forum zu testen. ;-)

Ist auch eine Idee, wenn auch nicht Opera-tauglich.

Nunja, man könnte das mit Deiner Lösung für den Opera kombinieren...

freundliche Grüße
Ingo

[Ashura]

Hallo Ingo.

Leider ist meine Verbindung zu schnell um dies überprüfen zu können.

Du hattest genug Zeit, dies mit einem Link auf dieses Forum zu testen. ;-)

Zu diesem Zeitpunkt konnte ich aufgrund bekannter Ursache aber dein Posting noch nicht einmal lesen.

Ist auch eine Idee, wenn auch nicht Opera-tauglich.

Nunja, man könnte das mit Deiner Lösung für den Opera kombinieren...

Gute Idee.
Danke für diesen Dialog.

Einen schönen Samstag noch.

Gruß, Ashura