[HTML/JS] Show/hide scriptje werkt wel in Opera, niet in IE - Softwareontwikkeling

donderdag 23 juni 2005 16:39

Acties:

Topicstarter

Hey,

Ik heb met de search gezocht op dit onderwerp en heb een leuk scriptje gevonden. Deze heb ik geïmplementeerd en alles werkt leuk in Opera..maar in IE doet hij het niet !

Dit is het scriptje zelf:

code:

<script language="javascript">
function ShowHide(id, visibility) {
obj = document.getElementsByTagName("tr");
obj[id].style.visibility = visibility;
}
</script>

Zo roep ik hem aan:

code:

<select name="dropdown" id="dropdown">
<option value="factuur" onclick="ShowHide('verbergtr','hidden')">Factuur</option>
<option value="incasso" onclick="ShowHide('verbergtr','visible')">Eenmalig incasso</option>
</select>

En dit is de row waar het dan om gaat:

code:

<tr id="verbergtr">
<td>Rekeningnummer</td>
<td><input type="text" name="rekeningnummer" size="30"></td>
</tr>

Waarbij ik dit in mijn CSS style heb staan:

code:

1
2
3

#verbergtr {
visibility:hidden;
}

Wie weet wat ik fout doe t.o.v. Internet Explorer?
Ik heb al geprobeerd onClick te veranderen in onFocus, onRelease, onMouseOver..maar dat werkt allemaal niet.

Edit: Als ik dit gebruik:

code:

1	<a href="javascript:ShowHide('verbergtr','visible')">test</a>

En dan op test klik, doet hij het wel. Het zit dus wel in de onclick in option.. wil IE dat gewoon niet pakken ??

Edit 2: Zelfs als ik dit doe:

code:

1	<select name="dropdown" id="dropdown" onChange="ShowHide('verbergtr','hidden')">

doet hij niets... maar eigenlijk wil ik dit helemaal niet, want zo kan ik niet terugschakelen naar 'Factuur' en dat die 2 veldjes weg zijn....

[ Voor 64% gewijzigd door Peedy op 23-06-2005 16:53 ]

donderdag 23 juni 2005 16:59

Acties:

faabman

als je toch al een id aan je html element geeft waarom vervang je

JavaScript:

1 2	obj = document.getElementsByTagName("tr"); obj[id].style.visibility = visibility;

dan niet door

JavaScript:

1	document.getElementById(id).style.visibility = visibility;

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

donderdag 23 juni 2005 17:00

Acties:

Peedy

Topicstarter

Omdat dat geen biet uitmaakt. Dan doet hij het in IE nog niet...

donderdag 23 juni 2005 17:15

Acties:

Peedy

Topicstarter

Uiteindelijk heb ik het zo opgelost;
het stukje CSS code eruit gehaald.

De functie nu iets korter gemaakt, met de regel van faabman:

code:

<script language="javascript">
function ShowHide(id, visibility) {
document.getElementById(id).style.visibility = visibility;
}
</script>

Dit bij de body ingezet:

code:

1	<body onload="ShowHide('verbergtr','hidden'); ShowHide('verbergtr2','hidden')">

En dit als dropdownmenu:

code:

<select name="dropdown" id="dropdown" onChange="ShowHide('verbergtr','visible'); ShowHide('verbergtr2','visible')">
<option value="factuur">Factuur</option>
<option value="incasso">Eenmalig incasso</option>
</select>

Het werkt nu ook in IE..maar mijn doel is niet bereikt. Ik kan namelijk niet meer terugschakelen naar 'hidden' als dropdown menu weer van incasso op factuur word gezet

donderdag 23 juni 2005 17:19

Acties:

faabman

JavaScript:

function ShowHide(id) {
objNode = document.getElementById(id);

if(objNode.style.visibility == 'hidden'){
  objNode.style.visibility = 'visible';
}else{
  objNode.style.visibility = 'hidden';
}

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

donderdag 23 juni 2005 17:19

Acties:

McVirusS

Je kan ook style.display = "none"; en style.display = "block"; gebruiken.

donderdag 23 juni 2005 17:22

Acties:

faabman

McVirusS schreef op donderdag 23 juni 2005 @ 17:19:
Je kan ook style.display = "none"; en style.display = "block"; gebruiken.

Dat hangt van je doel af... Wil je het object onzichtbaar maken zonder dat er een verandering in de opmaak van je document plaats vind dan is visibility de beste oplossing. Display zal voor niet gepositioneerde elementen voor het verspringen van de omliggende elementen zorgen

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

donderdag 23 juni 2005 17:27

Acties:

Peedy

Topicstarter

Bingo!
Ik heb jullie ideen even gecombineerd en dit scriptje geknutseld:

code:

<script language="javascript">
function ShowHide(id) {
if(document.getElementById(id).style.display == 'none')
{ document.getElementById(id).style.display = 'block'; }
else
{ document.getElementById(id).style.display = 'none'; }
}
</script>

Met:

code:

1	<body onload="ShowHide('verbergtr','none'); ShowHide('verbergtr2','none')">

en:

code:

1	<select name="dropdown" id="dropdown" onChange="ShowHide('verbergtr','block'); ShowHide('verbergtr2','block')">

@faabman: thanks voor de uitleg, ik zocht eigenlijk display ipv visibility

Werkt super! Bedankt jongens!

[ Voor 24% gewijzigd door Peedy op 23-06-2005 17:28 ]

donderdag 23 juni 2005 17:29

Acties:

RobIII

Admin Devschuur®

^ Romeinse Ⅲ ja!

code:

1
2
3

<script language="javascript">
document.getElementById(id).style.display = (document.getElementById(id).style.display=='none') ? 'block' : 'none';
</script>

Voor de type-zuinigen

There are only two hard problems in distributed systems: 2. Exactly-once delivery 1. Guaranteed order of messages 2. Exactly-once delivery.

Je eigen tweaker.me redirect

Over mij

donderdag 23 juni 2005 17:31

Acties:

Peedy

Topicstarter

@Roblll: kan ook

Nog korter

Maarreuh... ben ik weer... in Opera verspringt mijn hele layout van mijn table.. de td's die er sowieso staan springen opeens naar rechts en mijn 'nieuwe' input balk springt naar links..

Komt dit vaker voor?

Testen kan hier... gaarne niets bestellen.. krijg ik een shitload aan mailtjes binnen

[ Voor 27% gewijzigd door Peedy op 23-06-2005 17:32 ]

donderdag 23 juni 2005 17:34

Acties:

faabman

pEeDy16 schreef op donderdag 23 juni 2005 @ 17:31:
@Roblll: kan ook Nog korter

Maarreuh... ben ik weer... in Opera verspringt mijn hele layout van mijn table.. de td's die er sowieso staan springen opeens naar rechts en mijn 'nieuwe' input balk springt naar links.. Komt dit vaker voor?

Testen kan hier... gaarne niets bestellen.. krijg ik een shitload aan mailtjes binnen

lees mijn reactie op McVirusS nog eens door

Waarom maak je je formulier eigenlijk op met een tabel en niet met fieldsets en labels??
http://www.rikkertkoppes.com/thoughts/clean-forms

[ Voor 13% gewijzigd door faabman op 23-06-2005 17:35 ]

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

donderdag 23 juni 2005 17:35

Acties:

Peedy

Topicstarter

faabman schreef op donderdag 23 juni 2005 @ 17:34:
[...]

lees mijn reactie op McVirusS nog eens door

Ja dat heb ik wel gelezen, maar in IE doet hij dat niet... en in Opera wel.. het kan toch niet zo zijn dat dat zo hoort? En als het een misvatting in Opera is; dan valt het toch wel te fixen?

@jouw edit: omdat ik nooit wist dat table 'bad html' is? Hmm eens even in die fieldsets verdiepen dan maar

[ Voor 14% gewijzigd door Peedy op 23-06-2005 17:36 ]

donderdag 23 juni 2005 17:38

Acties:

faabman

pEeDy16 schreef op donderdag 23 juni 2005 @ 17:35:
@jouw edit: omdat ik nooit wist dat table 'bad html' is? Hmm eens even in die fieldsets verdiepen dan maar

table is geen "bad html" (in sommige scenarios gooi ik formulier ook in een tabel), maar voor het simpele formuliertje wat jij hebt kun je beter de fieldset / label structuur gebruiken

Op zoek naar een baan als Coldfusion webdeveloper? Mail me!

donderdag 23 juni 2005 18:13

Acties:

Peedy

Topicstarter

pEeDy16 schreef op donderdag 23 juni 2005 @ 17:31:
Maarreuh... ben ik weer... in Opera verspringt mijn hele layout van mijn table.. de td's die er sowieso staan springen opeens naar rechts en mijn 'nieuwe' input balk springt naar links.. Komt dit vaker voor?

Testen kan hier... gaarne niets bestellen.. krijg ik een shitload aan mailtjes binnen

Opgelost!
Ik heb display:block; veranderd in display:table-row;

Nu werkt het normaal in Opera én IE

Edit: te vroeg gejuicht... hij doet het met table-row in IE weer niet

Edit 2: Ik heb het nu wel érg ruig opgelost

code:

<script language="javascript">
function ShowHide(id) {
if(document.getElementById(id).style.display == 'none')
{
if (navigator.appVersion.indexOf("MSIE") != -1)
{
document.getElementById(id).style.display = 'block';
}
else
{
document.getElementById(id).style.display = 'table-row';
}
}
else
{
document.getElementById(id).style.display = 'none';
}
}
</script>

Hij checkt gewoon of het IE is of niet.. is het IE, dan gebruikt hij 'block'.. is het niet IE (Opera of FF in de meeste gevallen denk ik) dan gebruikt hij 'table-row' ... absoluut niet netjes, maar tot zover de enige werkende oplossing.

[ Voor 45% gewijzigd door Peedy op 23-06-2005 18:19 ]

donderdag 23 juni 2005 19:23

Acties:

Amras

pEeDy16 schreef op donderdag 23 juni 2005 @ 18:13:
[...]

Opgelost!
Ik heb display:block; veranderd in display:table-row; Nu werkt het normaal in Opera én IE

Edit: te vroeg gejuicht... hij doet het met table-row in IE weer niet

Edit 2: Ik heb het nu wel érg ruig opgelost
code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script language="javascript">
function ShowHide(id) {
if(document.getElementById(id).style.display == 'none')
{
if (navigator.appVersion.indexOf("MSIE") != -1)
{
document.getElementById(id).style.display = 'block';
}
else
{
document.getElementById(id).style.display = 'table-row';
}
}
else
{
document.getElementById(id).style.display = 'none';
}
}
</script>
Hij checkt gewoon of het IE is of niet.. is het IE, dan gebruikt hij 'block'.. is het niet IE (Opera of FF in de meeste gevallen denk ik) dan gebruikt hij 'table-row' ... absoluut niet netjes, maar tot zover de enige werkende oplossing.

Waarom hou je het niet gewoon bij de visibility? Dan heb je van het hele probleem geen last. Browser checks worden meestal niet als mooi ervaren.

donderdag 23 juni 2005 21:41

Acties:

crisp

Devver

Pixelated

gebruik gewoon display='none' versus display=''

dit soort browserchecks zijn gewoon onbetrouwbaar. Opera heeft ook standaard 'MSIE' in de UA string staan bijvoorbeeld...

[ Voor 58% gewijzigd door crisp op 23-06-2005 21:42 ]

Intentionally left blank

donderdag 23 juni 2005 23:47

Acties:

Peedy

Topicstarter

Amras schreef op donderdag 23 juni 2005 @ 19:23:
[...]
Waarom hou je het niet gewoon bij de visibility? Dan heb je van het hele probleem geen last. Browser checks worden meestal niet als mooi ervaren.

Heb je de rest van het topic niet gelezen? Dan heb ik dus nog steeds last van het probleem!

crisp schreef op donderdag 23 juni 2005 @ 21:41:
gebruik gewoon display='none' versus display=''

dit soort browserchecks zijn gewoon onbetrouwbaar. Opera heeft ook standaard 'MSIE' in de UA string staan bijvoorbeeld...

Browserchecks zijn inderdaad onbetrouwbaar, maar deze werkt wel goed IE, Opera en Firefox. Dat Opera 'MSIE' in de UA heeft staan kan zijn, maar via dit script herkent hij Opera als 'een andere browser'. En dat display='none' versus display='' slaat nergens op

Zie reactie op bovenstaande quote...

donderdag 23 juni 2005 23:51

Acties:

crisp

Devver

Pixelated

pEeDy16 schreef op donderdag 23 juni 2005 @ 23:47:
[...]

Heb je de rest van het topic niet gelezen? Dan heb ik dus nog steeds last van het probleem!

[...]

Browserchecks zijn inderdaad onbetrouwbaar, maar deze werkt wel goed IE, Opera en Firefox. Dat Opera 'MSIE' in de UA heeft staan kan zijn, maar via dit script herkent hij Opera als 'een andere browser'. En dat display='none' versus display='' slaat nergens op Zie reactie op bovenstaande quote...

Opera kan ws dan wel met display='block' op een TR overweg of je hebt 'm op 'identify as Opera' staan (wat tegenwoordig niet meer de default is), maar er zijn nog meer browsers behalve de 3 die je noemt, en ook nog meer mogelijkheden om UA-strings te wijzigen wat uiteindelijk toch voor problemen kan en zal zorgen.
En hoezo slaat mijn opmerking nergens op? Omdat je niet snapt wat ik bedoel? Ik bedoel dus dit:

JavaScript:

function ShowHide(id)
{
    if(document.getElementById(id).style.display == 'none')
    {
        document.getElementById(id).style.display = '';
    }
    else
    {
        document.getElementById(id).style.display = 'none';
    }
}

[ Voor 5% gewijzigd door crisp op 23-06-2005 23:52 ]

Intentionally left blank

vrijdag 24 juni 2005 00:01

Acties:

Peedy

Topicstarter

crisp schreef op donderdag 23 juni 2005 @ 23:51:
[...]

Opera kan ws dan wel met display='block' op een TR overweg of je hebt 'm op 'identify as Opera' staan (wat tegenwoordig niet meer de default is), maar er zijn nog meer browsers behalve de 3 die je noemt, en ook nog meer mogelijkheden om UA-strings te wijzigen wat uiteindelijk toch voor problemen kan en zal zorgen.
En hoezo slaat mijn opmerking nergens op? Omdat je niet snapt wat ik bedoel? Ik bedoel dus dit:

Ja Opera kan display='block' wel doen als je UA op Opera hebt staan inderdaad. Heb je UA op Internet Explorer staan, dan gaat hij weer raar doen. Ik weet niet zeker of dat tegenwoordig niet meer de default is, aangezien ik net Opera opnieuw heb geinstalled en hij op Identify as Opera staat... maar dat terzijde. En ik vond je opmerking nergens op slaan omdat je zei 'versus' terwijl ik nooit display='' had gebruikt.. en je (naar mijns inziens) suggereerde dat ik display='block' moest gaan gebruiken. Maar okay... nu heb ik dus nog steeds geen passende oplossing hoe ik het in IE én Opera (als standaard UA IE is) aan het werk krijg zonder app identifier...

Edit: verrek..typo gemaakt... hij doet het wél! Super crisp!

Kan je me ook een verklaring geven waarom dit wel werkt en het andere niet of is het gewoon iets wat je 'even moet weten' ?

[ Voor 16% gewijzigd door Peedy op 24-06-2005 00:09 ]

vrijdag 24 juni 2005 00:11

Acties:

crisp

Devver

Pixelated

pEeDy16 schreef op vrijdag 24 juni 2005 @ 00:01:
[...]
Edit: verrek..typo gemaakt... hij doet het wél! Super crisp!
Kan je me ook een verklaring geven waarom dit wel werkt en het andere niet of is het gewoon iets wat je 'even moet weten' ?

Door de display property leeg te maken zal hij gewoon de standaard waarde aannemen. Of dat 'block' is of 'table-row' boeit dan niet zoveel.

Intentionally left blank

Pagina: 1

Reageer