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.
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.
I have a page that uses an iframe. Underneath that there is a frameset which has two frames. One of the frame id is myframeid. Here is the code snippet.
<html>
<head></head>
<body>
<iframe name="someiframe" src="/app/html/files">
<html>
<head></head>
<body>
<script>
function thismyfunction(dObj, dTo, dCode){
if (dTo == 'start'){
if (tempora) {
if (confirm('Is this correct?')){
window.myframeid.location.href = '/code/cgi/bin';
}
} else {
if (confirm('Prefer to view your account?')){
window.myframeid.location.href = '/code/welcome/account';
} }
}
}
</script>
<frameset cols="30%, 70%" FRAMEBORDER=NO FRAMESPACING=0 BORDER=0>
<frame name="someframe" id="topframe" src="/app/source/default.htm" scrolling="no">
<frame name="someframe2" id="myframeid" src="/app/html/load">
<input type="button" onclick="parent.thismyfunction(this.form, 'start')"
id="nicebutton" value="Hello world" />
</frameset>
</body>
</head>
</html>
</iframe>
</body>
</head>
</html>
This is working on IE 11 but not working on google chrome version 36. Working as in when I click on the button using IE 11 browser, the function works. but not in google chrome. I think the google chrome doesn't like the below code.
window.myframeid.location.href = '/code/cgi/bin';
Any ideas why? Thank you!
myframeid is an id, you can get a reference with document.getElementById('myframeid'). You can load a new page by setting its 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 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");
});