Javascript tips & trucs (28-1-2010)

 

Vragen beantwoord ik tegen betaling van een uurtarief van € 60,- met een minimum van 1 uur

 

I N H O U D S O P G A V E

 

Javascript tips & trucs (28-1-2010)

1 Layer tonen op basis van onmousemove (cf. Google)

2 Knop van kleur veranderen: onClick

3 Plaatje swappen met onClick

4 Uitschakelen rechter muisknop

5 Checken formulierveld

6 Plaatsen van de cursor in formuliervak

7 Frames

7.1 Hoofdframe

7.2 Code in subframe start

7.3 Code in subframe top

7.4 Pagina maakt deel uit van andermans frame

 


•  Layer tonen op basis van onmousemove (cf. Google)

<html onMouseMove="show();">

<head>

<title>voorbeeld</title>

<script language="JavaScript" type="text/JavaScript">

function show()

{

document.getElementById("laagje").style.visibility = "visible";

}

</script>

</head>

<body >

<div id="laagje" style="visibility: hidden;">

Ik kom zomaar tevoorschijn

</div>

</body>

</html>

•  Knop van kleur veranderen: onClick

<html>

<head>

<title>kleur van de knop</title>

<script language="JavaScript" type="text/JavaScript">

function colorchange()

{

if(document.getElementById("knop").value=="Click")

{

document.getElementById("knop").style.backgroundColor='#C8A2C8';

form.knop.value='My color';

}

else

{

document.getElementById("knop").style.backgroundColor='#FFFFFF';

form.knop.value='Click';

}

}

</script>

</head>

<body>

<form action="" method="get" name="form">

<input name="knop" id = "test" type="button" value="Click" onclick ="colorchange();">

</form>

</body>

</html>

•  Plaatje swappen met onClick

<html>

<head>

<title>plaatje</title>

<script language="JavaScript" type="text/JavaScript">

function imagechange()

{

if(document.getElementById("knop").value=="Click")

{

form.knop.value='Plaatje';

document.getElementById("plaatje").src='julie.jpg';

//of:document.images[0].src='julie.jpg';

 

}

else

{

form.knop.value='Click';

document.getElementById("plaatje").src='leeg.jpg';

//of:document.images[0].src='leeg.jpg';

}

}

</script>

</head>

<body>

<form action="" method="get" name="form">

<input name="knop" id = "test" type="button" value="Click" onclick ="imagechange();">

</form>

<img id="plaatje" width= 150 src="leeg.jpg">

</body>

</html>

 

•  Uitschakelen rechter muisknop

<html>

<head>

<title>rechter muisknop</title>

<SCRIPT language=JavaScript>

function click()

{

if (document.all && event.button == 2)

{

window.alert("Copyright WalMar");

}

}

//initialiseert script

document.onmousedown=click;

</SCRIPT>

</head>

<body>

<div>Klik hier rechts</div>

</body>

</html>

•  Checken formulierveld

<html>

<head>

<title>controle formulier</title>

<SCRIPT LANGUAGE="Javascript">

function checknaam(){

if (document.formulier.naam.value.length < 3)

{

alert('Naam is te kort.\n\rGeef minimaal 3 tekens');

return false;

}

else

{

document.formulier.submit();

}

}

</SCRIPT>

</head>

<body>

<form action="" method="post" name="formulier">

Naam: <input name="naam" type="text"></p>

<input type="submit" onClick="checknaam(this)" value="klik hier">

</form>

</body>

</html>

 

•  Plaatsen van de cursor in formuliervak

<html>

<head>

<title>cursor plaatsen</title>

</head>

<body onLoad="formulier.tekst.focus();">

<form action="" method="get" name="formulier">

<input name="tekst" type="text"></p>

<input type="submit" value="klik hier">

</form>

</body>

</html>

 

•  Frames

Frames worden als verouderd beschouwd. Toch zie je ze nog volop. De volgende code voorkomt enig ongemak.

•  Hoofdframe

<HTML>

<HEAD>

<TITLE>totaalframe</TITLE>

<SCRIPT LANGUAGE="JavaScript">

var ar0 = "top.htm";

var ar1 = "linksonder.htm";

var ar2 = "start.htm";

var str = location.search;

var pos = str.indexOf("&");

if (pos != -1) {

var num = str.substring(pos + 1, str.length);

window["ar" + num] = str.substring(1, pos); //elke pagina staat voor een window

}

</SCRIPT>

</head>

<SCRIPT LANGUAGE="JavaScript">

document.write(

'<frameset rows="110,*" border="1" framespacing="1" bordercolor="#0000FF" cols="*">',

'<frame name="inhoud" src="',ar0,'"scrolling="no" noresize>',

'<FRAMESET framespacing="0" border="1" frameborder="0" cols="120,*" bordercolor="#FFFFFF" rows="*"> ',

'<FRAME name="vaandel1" src="',ar1,'" scrolling="no">',

'<FRAME name="hoofd" src="',ar2,'" >',

'</FRAMESET>'

);

</SCRIPT>

<NOFRAMES>

<BODY>

<P>Op deze pagina worden frames gebruikt, maar uw browser ondersteunt geen frames.</P>

</BODY>

</NOFRAMES>

</FRAMESET>

</HTML>

 

•  Code in subframe start

<html>

<head>

<title>startframe</title>

<SCRIPT LANGUAGE="JavaScript">

var naam = document.URL;

var pos = naam.lastIndexOf("/");

var bron = naam.substring(pos+1,naam.length);

/*onderstaande meet of er wel drie subframes + 1 totaalframe zijn (3) zijn

en of het subframe niet op zichzelf staat

in dat geval zorgt het script ervoor dat automatisch het totaalframe

geladen wordt waar bij de onderhavige pagina op de juiste plek komt (2)

*/

if (parent.frames.length!=3 || top==self){

self.location.href="totaalframe.htm?"+bron+"&2";

}

</SCRIPT>

</head>

 

<body>

start

</body>

</html>

•  Code in subframe top

<html>

<head>

<title>topframe</title>

<SCRIPT LANGUAGE="JavaScript">

var naam = document.URL;

var pos = naam.lastIndexOf("/");

var bron = naam.substring(pos+1,naam.length);

/*

*/

if (parent.frames.length!=3 || top==self){

self.location.href="totaalframe.htm?"+bron+"&0";

}

</SCRIPT>

</head>

<body>

top

</body>

</html>

•  Pagina maakt deel uit van andermans frame

if (parent.frames[1])

//zijn er meerdere frames: er wordt hier gewerkt met een array en deze test of nr 2 bestaat

parent.location.href = self.location.href;

/* test of een pagina in een frame is opgenomen; is dat het geval dan wordt het venster automatisch op de plek van de parent gezet; parent verwijs naar het parent venster van frames */