Keskustelu: Nettisivujen teko: Divin piilottaminen javascriptillä

mrkebab [06.08.2012 11:53:03]

Hei,

Yritän javascriptillä piilottaa yhtä diviä, mutta se ei tahdo onnistua millään.

Omasta mielestä kaikki on kuten pitää, mutta ei toimi.

Kun painan hide-napista, niin se tulostaa: testi, mutta mitään muuta ei tapahdu. En saa virheitä FF:sta.

Alla lyhennetty html.

<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>LOMAKE</title>
<link rel="stylesheet" href="style/style.css">

<script language=javascript type='text/javascript'>

    function hideDiv() {
    if (document.getElementById) {
    document.getElementById('hideShow').style.visibility = 'hidden';
    alert("testi");

    }
    }
    function showDiv() {
    if (document.getElementById) {
    document.getElementById('hideShow').style.visibility = 'visible';
    }
    }



</script>
</head>
<body onload="javascript:hideDiv()">

<form>
<table>
...
</table>

<table>
<div id="sct">
</div>
</table>


<div id='hideShow'>
<table width="508" align="center">

<tr>
    <td>Nimi</td>
    <td><input type="text" name="name" size="35"></td>
  </tr>
 <tr>
    <td>Nimi</td>
    <td><input type="text" name="name" size="35"></td>
  </tr>

</table>
</div>


<table>
</table>

</form>

<button onclick="javascript:hideDiv()">Hide</button>
<button onclick="javascript:showDiv()">Show</button>

</body>
</html>

Olisiko antaa vinkkiä?

Jaska [06.08.2012 12:51:41]

Eikö se ole display eikä visibility? En ole JS:ää koodannut, mutta netistä löytyi tämmöinen esimerkki.

mrkebab [06.08.2012 13:24:44]

Kokeilin Jaska sitäkin, mutta ei toiminut.

EDIT: Jahas, tällä sain toimimaan, eli oli tosiaan display ;)

document.getElementById('hideShow').style.display = 'none';
document.getElementById('hideShow').style.display = 'inline';

Lebe80 [06.08.2012 13:37:56]

pitäiskös displayn olla "block", kun on divi kyseessä, vai onko tuo asetettu css:llä oletukseksi olemaan "inline"?

Olli [07.08.2012 09:11:04]

Kannattaa muuten harkita jQueryn opettelemista. Sillä tuo sama hoituisi näin:

$("#hideShow").hide(); // piilottaa divin
$("#hideShow").show(); // näyttää divin

Lebe80 [07.08.2012 12:58:00]

Toisaalta. Jos jQueryä ei tarvitse muuhun, voi sen käyttäminen olla aika turhaa tässä tapauksessa.

Itse taas olen sen verran laiska, että liitän jQueryn melkein mihin tahansa webiprojektiin.

Yucca [08.08.2012 10:46:01]

mrkebab kirjoitti:

Kun painan hide-napista, niin se tulostaa: testi, mutta mitään muuta ei tapahdu. En saa virheitä FF:sta.

Alla lyhennetty html.

Juuri tuolla koodilla (copypaste) testattuna toimii ongelmitta Firefox 14:ssä. Mahdoitkohan lyhentää pois koodista sen kohdan, joka aiheuttaa ongelman, vai onkohan sinulla jokin Firefoxin erikoinen versio?

Vihje: Koodin lyhentämisen jälkeen kannattaa tarkistaa, onko onnistuttu eristämään ongelma (eli ilmeneekö se vielä lyhennetyssä koodissa).

Sopivin keino on yleensä visibility-ominaisuuden arvon muuttaminen, jota koodissasi on käytetty. Silloin näkyvistä poistetun elementin paikalla on tyhjä tila. Sen sijaan display-ominaisuuden arvon muuttaminen aiheuttaa koko sivun uudelleenmuotoilun (redraw).

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku

Tehtävät

Kilpailu