Firefox Eventhandler bei deaktivierten Select-Listen

[Torsten Steiger]

Hallo allerseits,

ich bin gerade dabei, meine Seite für iPhones zu optimieren. Da es keine Hover Effekte in dem Sinne gibt, bin ich teils auf Javascript angewiesen um meine Dropdownlisten zu verwirklichen.

Ich habe eine Selectliste die nur zum Schein existiert bzw. zur Anzeige, da ich eigentlich aus Platzgründen in der Liste Inputfelder brauche. Das geht aber ja nicht, daher ist sie von Anfang an auf "disabled" gestellt. Via CSS active Effekt öffnet sich beim klicken eine Box, die über die Selectliste geschoben wird und ich mir im Prinzip eine "Option"-liste selbst gebastelt habe.

Das funktioniert auch in allen gängigen Browsern. Allerdings bleibt die Liste auch nur durch den anschließenden hover-Effekt geöffnet, den habe ich beim Handy ja nicht.

Im Prinzip sieht das so aus:

<ul class='DropDown'><li><select name='NurSoDa' disabled><option>Alle Kategorien</option></select>  
<ul class='Box'>  
<li>Punkt eins mit Inputfeld</li>  
<li>Punkt zwei mit Inputfeld</li>  
</ul>  
</li>  
</ul>

Nun ist mein Versuch folgender: Beim anklicken des DropDown wird der Box eine extra Klasse angehangen um sie offen zu halten. Ob ich nur die Selectliste anklicke oder nicht ist wegen dem Bubbling egal.

class='Box Offen'

Das funktioniert im IE und Opera problemlos. Mir macht aber jetzt der Firefox zu schaffen, denn die deaktivierte Selectliste ist vom Bubbling nicht betroffen. Auch dann nicht, wenn ich explizit einen Eventhandler auf die Selectliste lege. Ist die Selectliste aber aktiviert (<select name='NurSoDa'>), dann funktioniert es wieder problemlos.

Weiß jemand einen Workaround, um das Problem zu lösen? Via Google konnte ich nichts brauchbares finden.

Danke!

mfg,
Torsten

[molily]

Hallo,

Ich verstehe nicht, warum du es so kompliziert machst. Mir scheint das arg konstruiert. Warum eine <select disabled>, »die nur zum Schein existiert«? Setze das Öffnen und Schließen doch einfach mit einem Button oder Link um, der einen click-Handler besitzt. Der Rest ist ein bisschen CSS, damit der Button so aussieht, wie du es gerne hättest.

Mathias

[Torsten Steiger]

Hallo molily,

Ich verstehe nicht, warum du es so kompliziert machst. Mir scheint das arg konstruiert. Warum eine <select disabled>, »die nur zum Schein existiert«? Setze das Öffnen und Schließen doch einfach mit einem Button oder Link um, der einen click-Handler besitzt. Der Rest ist ein bisschen CSS, damit der Button so aussieht, wie du es gerne hättest.

Ich möchte, dass es wie eine echte Selectliste aussieht. Der Besucher erkennt die Selectliste und weiß was sie bedeutet. Das Problem: Ich kann nicht einfach ein Bild des Dropdownbuttons machen und rechts außen vom link als Hintergrund setzen, da er in jedem Browser anders aussieht. Das wäre gegenüber den nebenher existierenden richtigen Selectlisten ziemlich merkwürdig, denn teilweise muss auch nur ein Wert und nicht mehrere angeklickt werden.
Die Werte, die in der Liste übrigends angeklickt werden, werden mittels Javascript in das Optionfeld geschrieben. Schließt sich die Box, steht dann in der Selectliste "Wert1, Wert2, Wert3" statt "Alle Kategorien".

Ich hoffe du verstehst deshalb meine Entscheidung und kannst mir bei dem Problem helfen.

mfg,
Torsten

[molily]

Ich möchte, dass es wie eine echte Selectliste aussieht. Der Besucher erkennt die Selectliste und weiß was sie bedeutet.

Das ergibt völlig Sinn, wenn sich beim Tap auf die Auswahlliste dann auch eine Auswahl öffnet. Und zwar so wie der Browser das üblicherweise darstellt (unter iOS z.B. ein Overlay bzw. ein Auswahlrad). Solch ein Select als mobile Navigation zu verwenden ist gängige Praxis.

Eine normale Select-Liste als Navigation kannst du nicht verwenden, weil in den Einträgen komplexes HTML drin stehen muss? (Warum?)

Ich hoffe du verstehst deshalb meine Entscheidung und kannst mir bei dem Problem helfen.

Wenn Firefox keinen Event für ein deaktiviertes Select wirft, dann kannst du daran m.W. nichts ändern, außer eine richtige (aktivierte) Auswahlliste zu verwenden oder keine.

Grüße
Mathias

[Torsten]

Hallo,

Eine normale Select-Liste als Navigation kannst du nicht verwenden, weil in den Einträgen komplexes HTML drin stehen muss? (Warum?)

Meine Selectliste ist keine Navigation. In meiner Selectliste sind Checkboxen die entsprechend behandelt und an die Seite weitergeschickt werden. <form method='POST'>

Wenn Firefox keinen Event für ein deaktiviertes Select wirft, dann kannst du daran m.W. nichts ändern, außer eine richtige (aktivierte) Auswahlliste zu verwenden oder keine.

Ist es möglich, dass beim anklicken zumindest die überliegende Box auch überliegend bleibt und nicht die Auswahl der Selectliste aus den Optionfeldern angezeigt wird?

mfg,
Torsten

[Torsten]

hallo,

also ich habe darüber nachgedacht, die Selectliste beim anklicken mittels Javascript zu deaktivieren, also vorher aktiviert zu lassen.

Allerdings funktionieren meine Ansätze hier nicht:

setAttribute('disabled','disabled');
oder
setAttribute('disabled',true);
oder
disabled=true;
oder
e.preventDefault();

Warum, ist der Firefox so verbuggt? Die Option scheint immernoch durch.

mfg,
Torsten

[molily]

Ist es möglich, dass beim anklicken zumindest die überliegende Box auch überliegend bleibt und nicht die Auswahl der Selectliste aus den Optionfeldern angezeigt wird?

Das sollte mit preventDefault beim click möglich sein, ja.

Zeig uns am besten mal deinen Code, momentan habe ich nur ein ungenaues Bild im Kopf davon, was du genau tust.

Mathias

[Torsten]

Hallo,

Zeig uns am besten mal deinen Code, momentan habe ich nur ein ungenaues Bild im Kopf davon, was du genau tust.

Ich werde es mal genauso reinkopieren, dass du es einfach nur kopieren brauchst und alles funktioniert direkt. Ich habe mal alles andere rausgeschmissen. Ein Teil des CSS ist auskommentiert. Wenn du die Kommentartags entfernst, siehst du, wie es bei normalen PC Betrieb arbeiten wird.

<!DOCTYPE html>  
<html dir='ltr' lang='de'>  
	<meta charset='utf-8'>

<style>  
*{border:none;list-style-type:none;margin:0px;padding:0px;text-decoration:none}  
	ul.drop {  
		display:block;  
		background:#F40;  
		max-width:200px;  
		min-width:300px;  
		margin:10px 20px;  
}  
ul.drop li select {width:100%;}  
  
ul:after{clear: both;content: " ";display: block;font-size: 0;height: 0;visibility: hidden;}  
  
.drop li {  
	float:left;  
	display:block;  
	width:100%;  
}  
  
.drop li:first-child {  
	display:inline-block;  
	position:relative;  
	z-index:2;  
}  
  
  
/* ul.drop li:active ul,ul.drop li > ul:hover, */ ul.drop ul.test {  
	position:absolute;  
	display:block;  
	width:100%;  
	min-width:200px;  
	max-width:300px;  
  
}  
  
ul.drop li ul {  
	background:#FDFDFD;  
	border:1px solid #000;  
	display:none;  
	margin-top:-22px;  
	position:absolute;  
	z-index:1;  
}  
ul.drop li ul li {  
font-size:85%;  
	display:block;  
	float:none;  
	white-space:nowrap;  
}  
ul.drop input {  
	margin:0px 5px;  
}  
ul.drop label {width:100%; cursor:pointer; display:block; padding:4px 0px;}  
ul.drop label:hover { background:#F90; }  
  
select[disabled] { background-color:#FFF;color:#000;}  
  
</style>

<div>  
<ul class='drop'>  
<li><select name='box'><option>Beliebig</option></select>  
<ul class='h'>  
<li><label><input type='checkbox' name='F[0]'>Selectbox</label></li>  
<li><label><input type='checkbox' name='F[1]'>Selectbox</label></li>  
<li><label><input type='checkbox' name='F[2]'>Selectbox</label></li>  
<li><label><input type='checkbox' name='F[3]'>Selectbox</label></li>  
<li><label><input type='checkbox' name='F[4]'>Selectbox</label></li>  
<li><label><input type='checkbox' name='F[5]'>Selectbox</label></li>  
</ul>  
</li>  
</ul>  
</div>

<script type='text/javascript'>  
function test()  
{  
    this.getElementsByClassName('h')[0].setAttribute("class",'test');  
}  
function disbale(e)  
{  
    e.preventDefault();  
    this.setAttribute('disabled',true);  
}  
  
obj = document.getElementsByClassName('drop');  
  
	for(i=0;i<obj.length;i++)  
	{  
		obj[i].getElementsByTagName('select')[0].onclick=disbale;  
		obj[i].onclick = test;  
	}  
</script>

</html>

mfg,
Torsten

[molily]

Hallo,

okay, das scheint im Firefox einfach nicht zu gehen. Zumindest nicht mit dem click-Event. Ob es noch andere Events gibt, weiß ich nicht. Mir fällt keiner für Firefox ein.

Da weiß ich auch nicht weiter. Wie gesagt, ich sehe hier aber auch keinen zwingenden Grund, ein select zu missbrauchen, um eigentlich ein Formular einzublenden.

Grüße
Mathias

[Torsten]

Hallo,

Da weiß ich auch nicht weiter. Wie gesagt, ich sehe hier aber auch keinen zwingenden Grund, ein select zu missbrauchen, um eigentlich ein Formular einzublenden.

Ich danke dir für deine Mühe Mathias. Ich habs auch stundenlang, selbst mit den absurdesten Methoden, versucht. Mittels Javascript lässt sich da absolut nichts in die richtige Richtung bewegen.

Allerdings habe ich dann doch jetzt eine Lösung erdacht. Ich hatte zwar den Willen, eine Lösung mit Javascript zu finden, auch um mein können zu testen, aber es ist eine CSS Lösung geworden - weiterhin aber mit Javascript.

Dabei habe ich die Selectliste aktiviert gelassen und musste sie so auch nicht mehr designen, dass sie geöffnet aussieht. Ich habe einfach einen transparenten div-Container darüber gelegt, den ich anklicken kann. Der Rest ist wie gehabt.

Der Missbrauch liegt in neuen Herausforderungen und dem besonderen Willen des Designers: Mir. ;-) Die Herausforderung habe ich somit ersteinmal gemeistert und nebenbei, wertvolle Erkenntnisse gesammelt. Ich bin mir sicher, dass auch wenn der ein oder andere zwangsweise als Coder denkt, der Besucher es gut finden wird.

mfg,
Torsten

[ChrisB]

Hi,

Ich möchte, dass es wie eine echte Selectliste aussieht. Der Besucher erkennt die Selectliste und weiß was sie bedeutet.

Sie bedeutet Auswahl aus einer vorgegebenen Menge von Optionen – aber nicht Freitext-Eingabe in Inputfeldern. Da du aber letzteres benutzen willst, fällt dieses „Argument“ der Vertrautheit der Selectfeld-Optik doch von vornherein in sich zusammen …

MfG ChrisB