Kirjautuminen

Haku

Tehtävät

Keskustelu: Nettisivujen teko: javascript pudotusvalikko

KuinKala [23.07.2005 12:05:14]

#

Eli javascript-funktio joka ottaa selectistä option elementin arvon, ja sen mukaan pitäisi mennä oikealle sivulle.. Mutta jostain syystä ei suostu toimimaan... ainankaan firefoxilla. tarkistin myös että selain hyväksyy javascriptin.

<html>
<head>
<body>
<script language="javascript">
<!--
function goto() {
	if (document.drop.valinta.selectedIndex==0) return;
	if (document.drop.valinta.selectedIndex==1) return;
	if (document.drop.valinta.selectedIndex==2) { window.location.href="index.php"; }
	if (document.drop.valinta.selectedIndex==3) { window.location.href="keskus/"; }
	if (document.drop.valinta.selectedIndex==4) { window.location.href="history.php"; }
	if (document.drop.valinta.selectedIndex==5) { window.location.href="kommentit.php"; }
	if (document.drop.valinta.selectedIndex==6) { window.location.href="kilpailu.php"; }
}
// -->
</script>
</head>
<form name="drop">
<select name="valinta" style="font-family: Verdana, Arial, Tahoma; font-size: 10px; color: #000000; width: 110px;" onChange=goto()>
<option value=0>Navigaatio</option>
<option value=1> </option>
<option value=2>Etusivu</option>
<option value=3>Keskus</option>
<option value=4>Historia</option>
<option value=5>Grafiikka</option>
<option value=6>Kilpailu!</option>
</select>
</form>
</body>
</html>

OskariB [23.07.2005 14:09:41]

# 

<html>
<head>
<title>
</title>
</head>
<SCRIPT LANGUAGE="JavaScript">
function linkit(){
document.location.href = document.lomake.valinnat.value
}
</SCRIPT>
<body>
<FORM name="lomake">
<SELECT NAME="valinnat" onChange="linkit()">
<option></option>
<option VALUE="index.php">Etusivu</option>
<option VALUE="keskus/">Keskus</option>
<option VALUE="history.php">Historia</option>
<option VALUE="kommentit.php">Grafiikka</option>
<option VALUE="kilpailu.php">Kilpailu</option>
</select>
</form>
</body>
</html>

Tällainen pudotusvalikko toimii ainakin minun Firefox:lla.

KuinKala [23.07.2005 14:17:44]

#

Hmm. No hitto, kappas. Sehän toimii. Kiitos paljon.

Tulikohan taas ajateltua liian vaikeasti :)

zhoop [20.08.2005 14:29:40]

#

Olisiko tälläista pudotus valikkoa mahdollisuus toteuttaa PHP:llä? Jos niin miten? Tämähän taitaa olla JavaScripti?

Tempfile [20.08.2005 14:37:18]

#

zhoop, ei ole. PHP on servupuolen kieli, javascript klienttipuolen. Servupuolen kielillä ei voi tehdä mitään käyttäjän selaimessa dynaamisesti muuttuvia asioita, ja klienttipuolen kielillä ei voi käsitellä servun tiedostoja yms. Ainut tapa "toteuttaa" tällainen PHP:llä on siis echo():ttaa tuo ylläoleva html:n pätkä PHP-skriptassa :)

Metabolix [20.08.2005 15:00:01]

#

Jos tuohon haluaa sotkea vielä PHP:n, niin voi tehdä jotenkin tähän tapaan:

<form action="index.php" method="GET">
  <select name="sivu" onChange="submit()">
    <!-- Valinnat tähän... -->
  </select>
</form>

Noin JavaScript lähettää formin, kun valinta tehdään, ja PHP-skripti voi sitten tulostaa halutun sivun. Kannattaa myös laittaa viereen se submit-nappula, joa vaikkapa vun onLoad-tapahtumassa piilottaa se JavaScriptilla (style="display:none;"). Silloin on skriptittömilläkin käyttäjillä mahdollisuus siirtyä toiselle sivulle.

Niin ja voihan noita pudotusvalikoita rakentaa CSS:lläkin (olisiko CSS2), mutta silloin ne eivät välttämättä toimi IE:ssä. Silloin ei tarvita JavaScriptiä ja voidaan (ja pitää) käyttää PHP:tä.

jideko [23.08.2005 15:13:54]

#

http://www.phoenity.com/newtedge/horizontal_nav/#block
http://www.howtocreate.co.uk/tutorials/testMenu.html

Tuolla olis CSS:llä tehtyjä valikoita mutta ei halua toimia oikein IE:llä.

Vastaus

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

Tietoa sivustosta