A HTML page contains three frames.
<frameset cols="30%, *">
<frame src="frame_a.htm">
<frameset rows="60%, *">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</framset>
What I need to do is, change that frames layout to two other styles on click event of button. Page contains three buttons, 1) Default Style, 2) Style-2, 3) Style-3
<!-- Style-2 -->
<!--
<frameset cols="*, 30%">
<frameset rows="60%, *">
<frame src="frame_b.htm">
<frame src-"frame_c.htm">
</frameset>
<frame src="frame_a.htm">
</frameset>
-->
<!-- Style-3 -->
<!--
<frameset cols="30%,35%,35%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
-->
How can I do this, when page is loaded and user click button 2 or 3 and page changes to style 2 or 3 respectively.
CSS can be a handy option, but I don't want to use CSS here.
Guide me in this regard.
jsFiddle Demo
The demo won't allow me to add buttons into the frame so I've added a prompt so you can refresh the page and enter a new value so see a different style.
HTML:
<button id="btn1">Default</button>
<button id="btn2">Style 1</button>
<button id="btn3">Style 2</button>
JS:
$('#btn1').click(function () {
$('#fset1').attr('cols', '30%, *');
$("#frame1").appendTo("#fset1");
$("#frame2").appendTo("#fset2");
$("#frame3").appendTo("#fset2");
$('#fset2').appendTo("#fset1");
});
$('#btn2').click(function () {
$('#fset2').appendTo("#fset1");
$('#fset1').attr('cols', '*, 30%');
$("#frame1").appendTo("#fset2");
$("#frame2").appendTo("#fset2");
$("#frame3").appendTo("#fset1");
});
$('#btn3').click(function () {
$('#fset1').attr('cols', '30%,35%,35%');
$("#frame1").appendTo("#fset1");
$("#frame2").appendTo("#fset1");
$("#frame3").appendTo("#fset1");
$('#fset2').appendTo("#fset1");
});
Related
What is the jQuery selector I need to access username from within main.html? The alert should say "Bob".
main.html
<head>
<script>
alert(username); // *** not working ***
</script>
</head>
<frameset>
<frame name="left" src="left.html">
<frameset>
<frame name="top" src="top.html">
<frame name="right" src="right.html">
</frameset>
</frameset>
right.html
<head>
<script>
var username = 'Bob';
</script>
</head>
Use the contentWindow property.
Example:
document.getElementById('frame_id').contentWindow.$('#' + idOfElementInFrame);
Note: this works for iframe tags. It should work for frame tags as well, but given that the frame tag is deprecated, you could have issues.
There is an example:
(1)mainpage:
<html>
<script>
function show(){
var winleft = window.frames["left"];
alert(winleft.username);
}
</script>
<frameset cols="25%,50%,25%">
<frame src="left.html" name="left">
<frame src="left.html" name="middle">
<frame src="left.html" name="right">
</frameset>
</html>
(2)left.html
<head>
<script>
var username = 'Bob';
</script>
</head>
(3)why?
Every frame has its own Object "window",
you should get the "window" object of the frame["left"],and the variable "username" is the proterty of the frame["left"]'s window(winleft) object.so,you can get the value of username.
I was testing my website on http://mobiletest.me
when i got an Error:
InvalidAccessError: A parameter or an operation is not supported by
the underlying object
My website contains multiple frames and framesets.
They`re built like this
<frameset rows="100px,30px,*,5%">
<frame src="topbar.php">
<frame src="toolbar.php" name="navigation">
<frameset cols="25%,40%,*%">
<frame src="content.html" name="content">
<frame src="content.html" name="content2">
<frame src="content.html" name="content3">
</frameset>
<frame src="endbar.php" name="endbar">
</frameset>
and I have a function clear() which sets the content of some frames to default:
function clear() {
parent.content.location = "content.html";
parent.content2.location = "content.html";
parent.content3.location = "content.html";
}
The Error appears on this line:
parent.content.location = "content.html";
Edit: and every other time when i try to access a frame form another frame
Note: pls no commands like "you should not use frames" They dont help...
Assuming this html:
<frame name="content">
Your js code will be:
parent.content.src = "content.html";
The key is src attribute.
My onclick opens a page called index.html. My site has frames and I want to set the target frame. my function is in FRAME id="preview" and i want to load index.html in FRAME id="bu"
onclick : function() {
// Add you own code to execute something on click
window.location = 'index.html';
}
-
<FRAMESET id="frameset" rows="95,*" cols="*">
<FRAME noresize="" id="tool" name="tool" src="Application/tool/<?=$id ?>">
<FRAMESET COLS="81%,*">
<FRAME id="preview" name="preview" src="<?=$preview_url ?>" onload="bu.setPreviewEvents()" >
<frameset id="tcolor" rows="60,*" cols="*">
<FRAME id="colorfr" name="colorfr" scrolling="no" src="<?=$colorfr_url ?>" >
<FRAME id="bu" name="bur" src="<?=$bu_url ?>" >
</frameset>
</FRAMESET>
</FRAMESET>
You can access the main window from any frame using top. To refer a specific frame element, you can use its name, or frames collection of the main window:
window.top.frames['bur'].location.href = 'index.html';
Notice, that frames collection contains the window objects within frame elements, not frame elements.
A frame is not reloading in Firefox and Chrome, but works in IE.
parent.toolbar.location.reload()
my function executes in the "builder" frame. i have used this method before and it has worked in all browsers...but not anymore, only works in i.e.
here is frame layout
<FRAMESET id="frameset" rows="95,*" cols="*">
<FRAME noresize="" id="toolbar" name="toolbar" src="Application/toolbar/<?=$id ?>">
<FRAMESET COLS="81%,*">
<FRAME id="preview" name="preview" src="<?=$preview_url ?>" onload="builder.setPreviewEvents()" >
<frameset id="tcolor" rows="60,*" cols="*">
<FRAME id="colorfr" name="colorfr" scrolling="no" src="<?=$colorfr_url ?>" >
<FRAME id="builder" name="builder" src="<?=$builder_url ?>" >
</frameset>
</FRAMESET>
</FRAMESET>
Try this:
parent.document.getElementById("toolbar").src = parent.document.getElementById("toolbar").src;
Can you tell me how we can change a frame size on mouse over?
eg:
<html>
<frameset rows="70%,30%">
<frame src="page1.htm">
<frame src="page2.htm">
</frameset>
</html>
On mouse over it should become like this:
<frameset rows="40%,60%">
And also is there any way we can do like this?
<frameset rows="40%,60%"> ---> <frameset rows="70%,30%"> ---> <frameset rows="40%,60%">
(after loading webpage; (after 5 seconds) (on mouse over)
for 5 seconds)
CODE:
<html>
<head>
<script>
var already=false;
var frameset;
window.onload=function(){frameset=document.getElementById("foo");};
setTimeout(modify,5000);
function modify()
{
already=true;
frameset.setAttribute("rows","70%,30%");
}
function big()
{
if(already)frameset.setAttribute("rows","70%,30%");
}
function small()
{
if(already)frameset.setAttribute("rows","40%,60%");
}
</script>
</head>
<frameset rows="40%,60%" id="foo" >
<frame src="page1.htm">
<frame src="page2.htm" onmouseover="small();" onmouseout="big();">
</frameset>
</html>
You can use JQUERY to change frame Size. there is a effect Animation already defined in it.
Its very easy to do with it.