I tried to show the div tag to another frame set while checkbox click.
My index.html file is
<html>
<head>
<title></title>
</head>
<frameset cols="25%,75%">
<frame src="left-panel.html"></frame>
<frame src="right-panel.html"></frame>
</framset>
</html>
left-panel.html
<html>
<body>
<script src="min.js"></script>
<script src="file.js"></script>
<input type="checkbox" value = "1" class="theClass">Click<h1>
<input type="checkbox" value = "2" class="theClass">Click<h1>
<input type="checkbox" value = "3" class="theClass">Click<h1>
</body>
</html>
right-panel.html
<html>
<body>
<script src="min.js"></script>
<script src="file.js"></script>
<div id="footer" style="width:98%; background:blue; height:10%; position:absolute; bottom:0; visibility:hidden;"></div>
</body>
</html>
Then my js file is
$('.theClass').change(function(){
($('.theClass:checked').map(function(){ myfunction(this.value); }).get())
});
function myfunction(ad)
{
document.getElementById("footer").innerHTML = ad;
}
When click the checkbox I want to display these checkbox value into the footer div in another html
I tried to show the div tag to another frame set while checkbox click.
My index.html file is
<html>
<head>
<title></title>
</head>
<frameset cols="25%,75%">
<frame src="left-panel.html"></frame>
<frame src="right-panel.html"></frame>
</framset>
</html>
left-panel.html
<html>
<body>
<script src="min.js"></script>
<script src="file.js"></script>
<input type="checkbox" value = "1" class="theClass">Click<h1>
<input type="checkbox" value = "2" class="theClass">Click<h1>
<input type="checkbox" value = "3" class="theClass">Click<h1>
</body>
</html>
right-panel.html
<html>
<body>
<script src="min.js"></script>
<script src="file.js"></script>
<div id="footer" style="width:98%; background:blue; height:10%; position:absolute; bottom:0; visibility:hidden;"></div>
</body>
</html>
Then my js file is
$('.theClass').change(function(){
($('.theClass:checked').map(function(){ myfunction(this.value); }).get())
});
function myfunction(ad)
{
document.getElementById("footer").innerHTML = ad;
}
When click the checkbox I want to display these checkbox value into the footer div in another html
Share Improve this question edited Aug 27, 2015 at 10:17 Magicprog.fr 4,1004 gold badges28 silver badges35 bronze badges asked Aug 24, 2015 at 10:08 user4284509user4284509 2- 5 Haven't really seen framesets since the nineties, are you sure that's what you want to use ? – adeneo Commented Aug 24, 2015 at 10:09
- See stackoverflow./questions/7170582/…. This is deliberately hard for security reasons. – user5211736 Commented Aug 27, 2015 at 10:02
3 Answers
Reset to default 6 +50First define the names of the frames:
<frameset cols="25%,75%">
<frame name="left" src="left-panel.html"></frame>
<frame name="right" src="right-panel.html"></frame>
</framset>
And then in the javascript:
function myfunction(ad) {
top.left.document.getElementById("footer").innerHTML = ad;
}
You can access only to parent:
function myfunction(ad) {
parent.left.document.getElementById("footer").innerHTML = ad;
}
First, the sub-frames should have the same origin(same domain) in order to manipulate them.
Then, get the parent frame by parent
.
Get the sub-frame by (according to http://javascript.info/tutorial/frames-and-iframes):
window.frames[0] - access by number
window.frames['iframeName'] - access by iframe name
So the answer is
$().ready(function(){
$("#cli").hover(function () {
parent.frames[1].$("#footer").css("visibility","visible");
},
function () {
parent.frames[1].$("#footer").css("visibility","hidden");
});
});
edit: sorry to find that the question is modified.
Each frame is a diferent web, with his own copys of the JS variables, for security reasons one page cant modify other page using JS. For example, when you call document variable from leftpanel, is diferent than the document variable called from rightpanel, and diferent tha the document variable called from index.html
Remember JS is executed in client side.
Maybe you must to use two divs:
your.css
#wrapper {
}
#left {
float: left;
width: 75%;
background-color: #CCF;
}
#right {
float: right;
width: 25%;
background-color: #FFA;
}
#cleared {
clear: both;
}
index.html
<html>
<head>
<title></title>
<link rel="stylesheet" href="your.css">
<script src="min.js"></script>
<script src="file.js"></script>
</head>
<body>
<div id="wrapper">
<div id="left">
<input type="checkbox" value = "1" class="theClass">Click<h1>
<input type="checkbox" value = "2" class="theClass">Click<h1>
<input type="checkbox" value = "3" class="theClass">Click<h1>
</div>
<div id="right">
<div id="footer" style="width:98%; background:blue; height:10%; position:absolute; bottom:0; visibility:hidden;"></div>
</div>
<div id="cleared"></div>
</div>
</body>
</html>
If you wants to use frames, maybe you must use PHP with ajax to make the changes in the server side