Topicacties

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

Pagina: 1

Reageer Nieuw Topic

Geplaatst op donderdag 23 juni 2005 16:39

Acties:

Door: Peedy

Bekijk de gallery van Peedy

Berichten: 5.371
Reg. datum: 09 februari 2002

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:

1
2
3

<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:

1
2
3

<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	#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....

Peedy wijzigde dit bericht 23-06-2005 16:53 (64%)

Saying that Java is nice because it works on every OS is like saying that anal sex is nice because it works on every gender.

Geplaatst op donderdag 23 juni 2005 16:59

Acties:

Door: faabman

Bekijk de gallery van faabman

Berichten: 1.345
Reg. datum: 21 januari 2001

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!

Geplaatst op donderdag 23 juni 2005 17:00

Acties:

Door: Peedy

Bekijk de gallery van Peedy

Berichten: 5.371
Reg. datum: 09 februari 2002

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

Saying that Java is nice because it works on every OS is like saying that anal sex is nice because it works on every gender.

Geplaatst op donderdag 23 juni 2005 17:15

Acties:

Door: Peedy

Bekijk de gallery van Peedy

Berichten: 5.371
Reg. datum: 09 februari 2002

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:

1
2
3

<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

Saying that Java is nice because it works on every OS is like saying that anal sex is nice because it works on every gender.

Geplaatst op donderdag 23 juni 2005 17:19

Acties:

Door: faabman

Bekijk de gallery van faabman

Berichten: 1.345
Reg. datum: 21 januari 2001

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!

Geplaatst op donderdag 23 juni 2005 17:19

Acties:

Door: McVirusS

Berichten: 13.923
Reg. datum: 03 januari 2000

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

Kayenta - (freelance) Flash & Webdevelopment
Flash, Actionscript 2.0/3.0, PHP, HTML, jQuery, CSS, Javascript, AJAX

Geplaatst op donderdag 23 juni 2005 17:22

Acties:

Door: faabman

Bekijk de gallery van faabman

Berichten: 1.345
Reg. datum: 21 januari 2001

quote:
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!

Geplaatst op donderdag 23 juni 2005 17:27

Acties:

Door: Peedy

Bekijk de gallery van Peedy

Berichten: 5.371
Reg. datum: 09 februari 2002

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!

Peedy wijzigde dit bericht 23-06-2005 17:28 (24%)

Saying that Java is nice because it works on every OS is like saying that anal sex is nice because it works on every gender.

Geplaatst op donderdag 23 juni 2005 17:29

Acties:

Door: RobIII

Moderator PRG/SEA/WEB

Papa van LucaIII en DanuIII

Berichten: 21.137
Reg. datum: 18 december 2001

code:

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

Voor de type-zuinigen

"90% of all statistics are made up"

Trotse papa van Luca en Danu! | Pick My Icon!

Geplaatst op donderdag 23 juni 2005 17:31

Acties:

Door: Peedy

Bekijk de gallery van Peedy

Berichten: 5.371
Reg. datum: 09 februari 2002

@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

Peedy wijzigde dit bericht 23-06-2005 17:32 (27%)

Saying that Java is nice because it works on every OS is like saying that anal sex is nice because it works on every gender.

Geplaatst op donderdag 23 juni 2005 17:34

Acties:

Door: faabman

Bekijk de gallery van faabman

Berichten: 1.345
Reg. datum: 21 januari 2001

quote:
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

faabman wijzigde dit bericht 23-06-2005 17:35 (13%)

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

Geplaatst op donderdag 23 juni 2005 17:35

Acties:

Door: Peedy

Bekijk de gallery van Peedy

Berichten: 5.371
Reg. datum: 09 februari 2002

quote:
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

Peedy wijzigde dit bericht 23-06-2005 17:36 (14%)

Saying that Java is nice because it works on every OS is like saying that anal sex is nice because it works on every gender.

Geplaatst op donderdag 23 juni 2005 17:38

Acties:

Door: faabman

Bekijk de gallery van faabman

Berichten: 1.345
Reg. datum: 21 januari 2001

quote:
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!

Geplaatst op donderdag 23 juni 2005 18:13

Acties:

Door: Peedy

Bekijk de gallery van Peedy

Berichten: 5.371
Reg. datum: 09 februari 2002

quote:
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.

Peedy wijzigde dit bericht 23-06-2005 18:19 (45%)

Saying that Java is nice because it works on every OS is like saying that anal sex is nice because it works on every gender.

Geplaatst op donderdag 23 juni 2005 19:23

Acties:

Door: Amras

no comment

Bekijk de gallery van Amras

Berichten: 885
Reg. datum: 26 januari 2003

quote:
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
<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.

Amres - lvl 80 Draenei Hunter || Solau - lvl 70 Human Warrior (subscription cancelled!)

Geplaatst op donderdag 23 juni 2005 21:41

Acties:

Door: crisp

Devver / Moderator WEB

Papa van Jeremy \o/

Berichten: 32.925
Reg. datum: 24 februari 2000

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

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

crisp wijzigde dit bericht 23-06-2005 21:42 (58%)

Crisp's blog minitracker:
04-11 Inline validatie met een Ajax sausje
20-08 Having fun with IE - part 4: invalid argument

Geplaatst op donderdag 23 juni 2005 23:47

Acties:

Door: Peedy

Bekijk de gallery van Peedy

Berichten: 5.371
Reg. datum: 09 februari 2002

quote:
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!

quote:
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...

Saying that Java is nice because it works on every OS is like saying that anal sex is nice because it works on every gender.

Geplaatst op donderdag 23 juni 2005 23:51

Acties:

Door: crisp

Devver / Moderator WEB

Papa van Jeremy \o/

Berichten: 32.925
Reg. datum: 24 februari 2000

quote:
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';

    }

}

crisp wijzigde dit bericht 23-06-2005 23:52 (5%)

Crisp's blog minitracker:
04-11 Inline validatie met een Ajax sausje
20-08 Having fun with IE - part 4: invalid argument

Geplaatst op vrijdag 24 juni 2005 00:01

Acties:

Door: Peedy

Bekijk de gallery van Peedy

Berichten: 5.371
Reg. datum: 09 februari 2002

quote:
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' ?

Peedy wijzigde dit bericht 24-06-2005 00:09 (16%)

Saying that Java is nice because it works on every OS is like saying that anal sex is nice because it works on every gender.

Geplaatst op vrijdag 24 juni 2005 00:11

Acties:

Door: crisp

Devver / Moderator WEB

Papa van Jeremy \o/

Berichten: 32.925
Reg. datum: 24 februari 2000

quote:
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.

Crisp's blog minitracker:
04-11 Inline validatie met een Ajax sausje
20-08 Having fun with IE - part 4: invalid argument

Pagina: 1

Frontpage

Archieven

Pricewatch

Forum

Community

Jobs

Inloggen

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

16:52 Nieuws

21:36 Productreviews

21:56 Vraag & Aanbod

17:33 Jobs

21:23 Etc.

22:04 Reacties

22:05 Forum

12:06 Tweakblogs

06-11 Computable headlines

06-11 CRN headlines