dokumentinterne Verweise abfangen

[Caspar]

Hallo liebe Forumuser,

ich moechte, dass mit dem Anklicken eines dokumentinernen links (lastminute.php#id12), die Hintergrundfarbe des entsprechenden Divs geaendert wird.

Die jetzige Loesung ist der onClick Eventhandler:
<a href="lastminute.php#lmid39" onclick="highlightItem('lmid39');">text</a>

Die Funktion highlightItem(), verwendet das JS Prototype framework:
function highlightItem(itemId)
{
 if ( !(El = $(itemId + '_header')) || (lastHighlightedItem == itemId) )
  return false;

// reset colour for last highlighted item
 if ( lastEl = $(lastHighlightedItem + '_header') ) {
  lastEl.style.backgroundColor = '#D3D5D5';
 }

// alert(El.style);
 El.style.backgroundColor = '#FBB04D';
 lastHighlightedItem    = itemId;

}

Mit Firefox 2 kein Problem, der IE (v7 getestet) aendert zwar die Farbe, aber der Fensterinhalt wird nicht gescrollt. Ich denke, dass durch den onClick Eventhandler der eigentliche Linkmechanismus umgangen wird (?).

Meine Frage ist nun, ob Ihr eine Idee habt, wie ich den Effekt umsetzen koennte?

Vielen Dank im Voraus und Gruss,

Caspar

[Cheatah]

Hi,

Die jetzige Loesung ist der onClick Eventhandler:

die CSS-Pseudoklasse :target ist eine weitere Lösung. Sie erfordert u.U. eine einzige Zeile Code.

lastEl.style.backgroundColor = '#D3D5D5';
El.style.backgroundColor = '#FBB04D';

Wenn Du mal das Layout anpasst, musst Du ggf. neben dem CSS- auch den JavaScript-Code verändern. Ganz schlechte Idee. Halte jedwede CSS-Information, die nicht einer expliziten Berechnung unterliegt, ausschließlich im CSS-Code.

Mit Firefox 2 kein Problem, der IE (v7 getestet) aendert zwar die Farbe, aber der Fensterinhalt wird nicht gescrollt. Ich denke, dass durch den onClick Eventhandler der eigentliche Linkmechanismus umgangen wird (?).

Nein. onclick wird zwar vor dem eigentlichen Link ausgeführt, verhindert diesen jedoch nur, wenn aus dem Event-Handler false zurückgeliefert wird.

Cheatah

[Caspar]

Vielen Dank fuer die schnelle Antwort Cheatah!

die CSS-Pseudoklasse :target ist eine weitere Lösung. Sie erfordert u.U. eine einzige Zeile Code.

Das klingt nach einer idealen Loesung. Leider kriege ich sie nicht zum laufen.  Mit diesem CSS Code hat es nicht funktioniert:

div.lastmin .lastminute_header {
 background-color:#D3D5D5;
 color:#3A3A3A;
 padding:1px 2px 1px 2px;
 height:20px;
 font-size:11px;
 margin:0px;
 vertical-align:bottom;
 font-weight:bold;
}
div.lastmin .lastminute_header:target {
 background-color:#ff0000;
}

Das ist der HTML Code:

<div class="lastmin" id="lmid43">

<div class="left">
<table width="100%" cellspacing="0" cellpadding="0">
<tr>
<td rowspan="4" style="width:110px; vertical-align:top;"><a href="/files/lastminute/1b3eaaf1b35ca995eb6b7ba8e35d77e1.jpg" rel="lightbox[hosting_43]"><img src="/files/lastminute/65f690013af7c2b8aab5fa8bb82ff824.jpg" /></a>
 </td><nobr><td colspan="2" class="lastminute_header" id="lmid43_header">
 <span style="float:left;">Thajsko/Koh Samui</span>
 <div class="lastminute_price">1 881 €</div></nobr></td>
</tr>
<tr>
 <td><div class="lastminute_type">2 týždne&nbsp;ranajky</div></td>
 <td style="vertical-align:top; padding-top:2px;"><a href="lastminute.php?site=orderform&lmid=43" style="margin:0; padding:0;"><img src="img/requestorder3.gif" class="orderbutton" style="height:20px;width:82px"/></a></td>

</tr>
<tr>
 <td colspan="2">Chaweng Regent Beach&nbsp;****</td>
</tr>
<tr>
 <td colspan="2"><div style="float:left;">z/do Viedne:&nbsp<strong>denne</strong></div></td>
</tr>
</table>
</div>

</div>

lastEl.style.backgroundColor = '#D3D5D5';
El.style.backgroundColor = '#FBB04D';

Wenn Du mal das Layout anpasst, musst Du ggf. neben dem CSS- auch den JavaScript-Code verändern. Ganz schlechte Idee. Halte jedwede CSS-Information, die nicht einer expliziten Berechnung unterliegt, ausschließlich im CSS-Code.

Du hast recht.

Mit Firefox 2 kein Problem, der IE (v7 getestet) aendert zwar die Farbe, aber der Fensterinhalt wird nicht gescrollt. Ich denke, dass durch den onClick Eventhandler der eigentliche Linkmechanismus umgangen wird (?).

Nein. onclick wird zwar vor dem eigentlichen Link ausgeführt, verhindert diesen jedoch nur, wenn aus dem Event-Handler false zurückgeliefert wird.

Du hast recht. Ich habe den JS aufruf auskommentiert, und im IE funktioniert das Scrollen auch so nicht. Interessanter weise funktioniert es, sobald ich
in <div class="lastmin" id="lmid43"> (das referenzierte Element im Anchor) das Attribut class weglasse. Hast du, oder ihr eine Idee worand das liegen koennte?

Danke und Gruss,
Caspar

[Cheatah]

Hi,

Das klingt nach einer idealen Loesung. Leider kriege ich sie nicht zum laufen.  Mit diesem CSS Code hat es nicht funktioniert:

lass mich raten: Du testest im IE, richtig? Bei diesem musst Du auf einen Großteil an Fähigkeiten verzichten, und auf die erhebliche Masse idealer Lösungen sowieso.

Das ist der HTML Code:

Das ist der Code, aber mit HTML hat er nur rudimentär zu tun. Bitte beschäftige Dich mit den Grundlagen von CSS und mit semantischem Markup.

<div class="left">
<table width="100%" cellspacing="0" cellpadding="0">

Alle hier genannten Attribute beispielsweise gehören gelöscht. Einzig das class="left" *kann* bleiben, wenn es sich um eines jener Elemente handelt, bei deren Inhalt es um übrig gebliebene Dinge geht.

</td><nobr>

Beschäftige Dich außerdem mit validem Code.

<td colspan="2" class="lastminute_header" id="lmid43_header">
<span style="float:left;">Thajsko/Koh Samui</span>
<div class="lastminute_price">1 881 €</div></nobr></td>

Das <div> ist falsch, weil es offenbar keine Inhalte gruppiert; das <span> ist sicherlich schon deswegen sinnarm, weil es auf gleicher Ebene mit einem <div> existiert; und insgesamt sehen *diese* beiden Elemente so aus, als sollten sie eigentlich Spalten einer Tabelle sein.

Du hast recht. Ich habe den JS aufruf auskommentiert, und im IE funktioniert das Scrollen auch so nicht. Interessanter weise funktioniert es, sobald ich
in <div class="lastmin" id="lmid43"> (das referenzierte Element im Anchor) das Attribut class weglasse. Hast du, oder ihr eine Idee worand das liegen koennte?

Ich muss gestehen, dies ist auch mir neu. Sind mit der Klasse irgendwelche Styles verknüpft?

Cheatah

[Christoph]

Moin.

Ich hab da mal was gebastelt. Ein Großteil der Funktionalität findet sich bereits im Prototype Framework; das kannst du ja dem SELF-Gedanken entsprechend umschreiben...

Christoph

[Christoph]

Moin.

Ich habe jetzt mein patchcss-Skript etwas erweitert und eine modifizierte Beispieldatei angelegt.

Getestet in IE7, FF2 und Opera 9.27.

Christoph