Problemen met select element in a-blok - Softwareontwikkeling

vrijdag 29 mei 2009 11:05

Acties:

0 Henk 'm!

Topicstarter

Ik wil graag een select element in een a-blok zetten, dus:

HTML:

<a href="test2.html">
  <select>
    <option>test 1</option>
  </select>
</a>

Volgens de HTML 4.0 specs mag dit gewoon. Echter, zodra ik een keuze wil maken in de select box, dan 'vuurt' het a-blok logischerwijs. Een cancelBubble zou het probleem moeten oplossen. Echter, dit werkt alleen in IE (6), en niet in Firefox (2.0). Heeft iemand een idee hoe ik het mogelijk kan maken om de select aan te passen zonder het a-blok te laten vuren. En kan iemand verifieren wat er in IE 7/8 gebeurt.

Het is overigens niet nodig dat het a-blok uberhaubt iets doet, maar helaas werkt een onClick="return false" in de a-tag ook niet.

Hieronder overigens een volledige versie. Hierin heb ik zoveel opties toegevoegd dat de select-lijst over tekst in het a-blok heenvalt, en ook lager is dan de onderkant van het a-blok.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<a href="test2.html"  target="_blank" style="display:block;background:red">
    <select onMouseDown="event.cancelBubble=true;">
        <option>test 1</option>
        <option>test 2</option>
        <option>test 3</option>
        <option>test 4</option>
        <option>test 5</option>
        <option>test 5</option>
        <option>test 6</option>
        <option>test 7</option>
        <option>test 8</option>
    </select>
    <br>
    <br>
    <br>
    <br>
testing testing
</a>

</body> 
</html>

[ Voor 0% gewijzigd door KabouterSuper op 29-05-2009 11:08 . Reden: typo ]

When life gives you lemons, start a battery factory

vrijdag 29 mei 2009 11:12

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Ik vraag me serieus af of er binnen een A-tag inderdaad een SELECT mag staan.

Maar of het nu wel of niet mag, waarom zou je uberhaupt iets anders dan tekst of een plaatje in een A willen zetten? Dat is vragen om problemen.

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 29 mei 2009 11:13

Acties:

0 Henk 'm!

crisp

Devver

Pixelated

Het is overigens niet nodig dat het a-blok uberhaubt iets doet

Waarom wil je dan ueberhaupt een select in een anchor?

Dat cancelBubble IE-only is is bekend; het zal niet lastig moeten zijn te vinden wat het standaard equivalent daarvan is

Echter, dit werkt alleen in IE (6), en niet in Firefox (2.0)

Werk je echt nog met zulke verouderde browsers?

[ Voor 39% gewijzigd door crisp op 29-05-2009 11:15 ]

Intentionally left blank

vrijdag 29 mei 2009 11:22

Acties:

0 Henk 'm!

Verwijderd

als het "A" blok niets hoeft te doen dan gok ik dat je het als container wilt gebruiken. Dan zou ik voor een DIV of SPAN gaan i.p.v. een A.
Een andere optie is om de HREF te verwijderen, die is namelijk niet verplicht in HTML, er bestaan namelijk ook A NAME elementen voor ankers (zodat blabla.html#bottom werkt).

vrijdag 29 mei 2009 12:29

Acties:

0 Henk 'm!

KabouterSuper

Topicstarter

...While SELECT is most useful within a FORM, HTML 4 allows SELECT in any block-level or inline element other than BUTTON... (van http://library.thinkquest...fs/html/forms/select.php3)

De situatie is dat ik een crm-systeempje heb, waarin gebruikers een plaatje/icoon zelf kunnen uitkiezen. Dit doe ik door in de 'edit'-modus een select-box over het plaatje heen te zetten waarin alle mogelijke plaatjes zitten. In de 'view'-modus is de select-box niet aanwezig. De wens is nu om het plaatje klikbaar te maken (en bijvoorbeeld te verwijzen naar de website van de desbetreffende gebruiker). Echter, in de 'edit'-modus resulteert dit dus in een select-box in een a-blok. Evenzeer, in de 'edit' modus is het niet nodig dat het anchor iets doet.

Dat onBubble IE-only is, wist ik niet. Ik ga op zoek naar het Firefox equivalent (als dit bestaat).

@crisp: ja, hoewel ik werk bij een IT-bedrijf, werkt vrijwel het hele bedrijf nog met W-XP en IE6, en is het niet toegestaan om W-Vista en IE7+ te gebruiken.

When life gives you lemons, start a battery factory

vrijdag 29 mei 2009 13:10

Acties:

0 Henk 'm!

Bosmonster

*zucht*

je kunt de seelct toch gewoon over de afbeelding heen zetten, ipv in de a-tag?

vrijdag 29 mei 2009 13:14

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

Ik kon er op de W3.org website niets over vinden, of het toegestaan was of niet. Vind het vrij onlogisch (o.a. vanwegen de problemen die het met zich mee brengt), maar het mag dus.

Anyway, het lijkt mij de mooiste oplossing om in "edit-mode" de gehele A-tag te verwijderen/vervangen. Of je zou het href-attribuut op "#" kunnen zetten.

-- edit --

Bosmonster zijn idee is misschien nog wel de mooiste oplossing; de SELECT er overheen plaatsen.

[ Voor 14% gewijzigd door OkkE op 29-05-2009 13:15 ]

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 29 mei 2009 13:28

Acties:

0 Henk 'm!

KabouterSuper

Topicstarter

De select over het anchor heenzetten is een optie, maar dan moet je wel de positie van het anchor weten. De lol van de select in het anchor zetten is dat je dit niet hoeft te weten.

Overigens heb ik inmiddels wel de firefox-variant van cancelBubble gevonden (stopPropagation() en preventDefault() ), en inmiddels heb ik een werkende versie, zie hieronder. Op de een of andere manier moet je zowel de onClick als de onMouseDown afvangen om het gewenste doel te bereiken.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<script>
function _cancelBubble(evt)
{
  var e=(window.event)?window.event:evt;
  e.cancelBubble=true;
  e.returnValue = false;
  if (e.stopPropagation) 
  {
    e.stopPropagation();
    e.preventDefault();
  }
}


</script>
<a href="test2.html"  target="_blank" style="display:block;background:red"> 
    <select onClick="_cancelBubble(event);" onMouseDown="_cancelBubble(event);"> 
        <option>test 1</option> 
        <option>test 2</option> 
        <option>test 3</option> 
        <option>test 4</option> 
        <option>test 5</option> 
        <option>test 5</option> 
        <option>test 6</option> 
        <option>test 7</option> 
        <option>test 8</option> 
    </select> 
    <br> 
    <br> 
    <br> 
    <br> 

testing testing 
</a> 

</body>     
</html>

When life gives you lemons, start a battery factory

vrijdag 29 mei 2009 13:45

Acties:

0 Henk 'm!

Bosmonster

*zucht*

KabouterSuper schreef op vrijdag 29 mei 2009 @ 13:28:
De select over het anchor heenzetten is een optie, maar dan moet je wel de positie van het anchor weten. De lol van de select in het anchor zetten is dat je dit niet hoeft te weten.

Zet er 1 container omheen met display:relative en je kunt hem daar gewoon inzetten. 1 extra element, een hele berg zorgen minder.

vrijdag 29 mei 2009 13:48

Acties:

0 Henk 'm!

OkkE

CSS influencer :+

KabouterSuper schreef op vrijdag 29 mei 2009 @ 13:28:
De select over het anchor heenzetten is een optie, maar dan moet je wel de positie van het anchor weten. De lol van de select in het anchor zetten is dat je dit niet hoeft te weten.

Door de verschillende elementen relatief en absoluut te positioneren is het niet nodig de positie van je A-tag te weten.

Online voorbeeld en de code:

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="nl">
<head>
    <title>titel</title>
    <style type="text/css">
    form { margin: 10%; }
    form p { position: relative; }
    form a { padding: 5px; background: lightblue; }
    form select { position: absolute; top: 0; left: 0; }
    </style>
</head>
<body>

<form action="/" method="post">

    <p>Edit mode</p>
    <p>
        <a href="">This is a test-link</a>
        <select name="">
            <option value="1">Test 1</option>
            <option value="2">Test 2</option>
            <option value="3">Test 3</option>
        </select>
    </p>

    <hr>

    <p>Normal mode</p>
    <p>
        <a href="">This is a test-link</a>
    </p>

</form>

</body>
</html>

“The best way to get the right answer on the Internet is not to ask a question, it's to post the wrong answer.”
QA Engineer walks into a bar. Orders a beer. Orders 0 beers. Orders 999999999 beers. Orders a lizard. Orders -1 beers.

vrijdag 29 mei 2009 17:08

Acties:

0 Henk 'm!

KabouterSuper

Topicstarter

Dank voor de voorbeelden....ik ga kijken of het mogelijk is om de select buiten het anchor te krijgen.

When life gives you lemons, start a battery factory