change class of div in html page (located inside iframe) according to parent title
Question
In my site i built a textual menu as menu.html inside iframe.each href i put in seperate div. i wanted that according to title of parent page the class of one of the divs will be changed (for example:if title of parent is "home" then class of the aforementioned div changes to 'marked'). i have tried the following script but still it deosn't work. what is wrong? thanks again!
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript">
switch (window.parent.document.title) {
case "hoempage":document.getElementById("nada1").className="marked"; break;
case "about": document.getElementById("nada2").className = "marked"; break;
case "jokes": document.getElementById("nada3").className = "marked"; break;
case "freewares": document.getElementById("nada4").className = "marked"; break;
case "links": document.getElementById("nada5").className = "marked"; break;
default: alert("god damn!"); break;
}
</script>
</head>
<body dir="rtl">
<ul class="menu1">
<li><a href="Index.html" target="_parent"><div id="nada1">homepage</div></a></li>
<li><a href="About.html" target="_parent"><div id="nada2">about</div></a> </li>
<li><a href="Jokes.html" target="_parent"><div id="nada3">jokes</div></a></li>
<li><a href="freewares.html" target="_parent"><div id="nada4">freewares</div></a> </li>
<li> <a href="NetGames.html" target="_parent"><div id="nada5">links</div></a> </li>
</ul>
<br /><br /><hr />
<div class="write_mail">if you want to rgister to site updates enter name + email:
<form action="sent.php" method="post" >
<input type="text" name="subscr" /><br />email
<input type="text" name="perosnal"/><br />name
<br />
<input type="submit" name="submit" onclick="alert('good job and thanks!');"/> </form></div>
</body>
</html>
edited: i tried the solutions but nevertheless it still decline working. here is the parent code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>homepage</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body dir="rtl">
<iframe src="menu.html" class="navibar" height="430px" width="50px" scrolling="no" style="border-style:none"></iframe>
<br />
<p class="About">built by zetta the beginner 2012<br />
</p>
</body>
</html>
and the menu.html is the code i updated at the begining of the message. sorry again for harassment :(
2 answers
solution1
0 2012-10-08 11:21:42
You forgot to use break; after each case . See, whenever a case is valid, the following commands will be executed until stopped by a break :
switch(value){
case c0: f0();
case c1: f1();
case c2: f2();
default: f3();
}
Now if value equals c1 , f1() will be executed. The next label ( case c2 ) instead f2 is called, so is f2 and f3 . You need to stop the execution of the cases:
switch(value){
case c0: f0(); break;
case c1: f1(); break;
case c2: f2(); break;
default: f3(); break; // doesn't really need a break since it is the last
}
While this might seem counter-intuitive at first, that's the only way to follow the DRY concept:
switch(myletter){
case 'A':
case 'B':
case 'C': alert("Hey, it's either A,B or C"); break;
default: alert("Sorry, I don't know this letter yet :/");
}
For more information see MDN: switch .
solution2
0 ACCPTED 2012-10-08 11:40:35
page that embed the iframe code as follow:
<html>
<head>
<title>main</title>
<style>
.marked{background:yellow}
</style>
</head>
<body>
<div id="class1">dddddddddddddddd</div><div id="class2">dddddddddddddddd</div>
<iframe src="iframe.htm"></iframe>
</body>
</html>
iframe page code:
<html>
<head>
<title>something</title>
<script type="text/javascript">
switch (window.parent.document.title) {
case "main": window.parent.document.getElementById("class1").className = "marked";break;
case "About": window.parent.document.getElementById("class2").className = "marked";break;
case "Interesting facts":
document.getElementById("class3").className = "marked";break;
default: alert("I failed, sorry! :("); break;
}
</script>
</head>
<body></body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.