|
JavaScript - Need Help On Refering Frames Using Javascript
hi Folks,
I am new for HTML FRAMES. I have the code like as shown below. Code: <FRAMESET rows="0,*" FRAMEBORDER=0 FRAMESPACING=0 BORDER=0>
<FRAME SRC="Javascript:parent.getStartupScreen ()" name="RP" scrolling="no" >
<FRAMESET rows="0,*,0,8%" FRAMEBORDER=0 FRAMESPACING=0 BORDER=0>
<FRAME SRC="/jsp/hierarchy/control.jsp" name="cF" scrolling="NO">
<FRAME SRC="Javascript:parent.getBlank()" name="vF" scrolling="AUTO">
<FRAME SRC="Javascript:parent.getBlank()" name="dF" scrolling="NO">
<FRAME SRC="/jsp/resourceplanner/ResourcePlannerFooter.jsp" name="RPF" scrolling="NO">
</FRAMESET>
</FRAMESET>
i am currently on "RPF" Frame. I want to refer "RP" Frame loaded "Form" Elements . Please suggest me . Thanks... Similar TutorialsHi, I will appreciate if someone could help me with this Case Problem. For some reason that I don't understand, it seems to be working in Firefox, but not IE. Well, most of it is working. The problem is to create a "Demo" which has three frames in rows. The first frame at the top is the title bar with "Submit Code", "show only code", "show only preview", and "show code and preview" buttons. The middle frame has 2 textarea boxes. The html code goes in the left box, and the css styles go in the right box. Once you enter any code in their respected boxes, and press "submit code", it should be rendered as a web page in the third frame below the boxes (which is just an empty document). I have attached a screenshot of how it should look like, and I am posting my entire code below. Everything is working except for the rendering of the web page in the third frame. When I click on submit, I get no errors, nothing happens. Any help or suggestions would be greatly appreciated. Thank you. Code: function showPreview(){
parent.document.getElementById("demo").rows="100,1,*";
}
function showCode(){
parent.document.getElementById("demo").rows="100,*,1";
parent.frames[1].document.getElementById("inputhtml").style.height="300px";
parent.frames[2].document.getElementById("inputcss").style.height="300px";
}
function showBoth(){
parent.document.getElementById("demo").rows="100,210,*";
parent.frames[1].document.getElementById("inputhtml").style.height="150px";
parent.frames[2].document.getElementById("inputcss").style.height="150px";
}
function sendCode(){
var previewFrame=parent.frames[3];
var htmlCode=parent.frames[1].document.getElementById("inputhtml").value;
var cssCode=parent.frames[2].document.getElementById("inputcss").value;
previewFrame.document.write("<html><head><title></title>");
previewFrame.document.write("<style type='text/css'>"+cssCode+"</styles>");
previewFrame.document.write("</head>");
previewFrame.document.write("<body>"+htmlCode+"</body></html>");
//previewFrame.document.close();
}
</script>
</head>
<body>
<form name="control" id="control" action="">
<h2 id="demotitle">Creating Web Pages</h2>
<p>
<input type="button" value="Submit Code" onClick="sendCode()"/>
<input type="button" value="Show Only Code" onClick="showCode()" />
<input type="button" value="Show Only Preview" onClick="showPreview()"/>
<input type="button" value="Show Code and Preview" onClick="showBoth()"/>
</p>
</form>
</body>
</html>
What's Up? OK, So I've been trying to add text to a <textarea> and text field tag inside of a frame via JavaScript, I did find a tutorial and using off-line html's it worked, But when I try to use a online frame, It doesn't work. OK, So one html opens two frames which are. Left.html Code: <HTML> <HEAD> <TITLE>JavaScript Example 13</TITLE> </HEAD> <BODY> <INPUT type="button" value="Button" onClick=""> </FORM> </BODY> </HTML> right.html Code: <form action="posting.php" method="post" name="post" onsubmit="return checkForm(this)"> <table width="100%" cellspacing="2" cellpadding="2" border="0"> <input class="post" type="text" value="" tabindex="2" style="width: 450px;" maxlength="60" size="45" name="subject"/> <textarea onkeyup="storeCaret(this);" onclick="storeCaret(this);" onselect="storeCaret(this);" class="post" tabindex="3" style="width: 450px;" cols="35" rows="15" name="message"/></textarea> <input type="submit" value="Submit" class="mainoption" name="post" tabindex="6" accesskey="s"/> Anyone Know What To Do? Thanks Bye. New assignment. This is the code i have below already supplied now. not exactly correct yet but want to just get something to work from i need to insert an embedded script element in head section of document, purpose os to hide htmlcode and csscode frames to provide more screen space to hide 2 frames i am to change value of rows attribute in demo frameset to "100,1,*" id of the frameset object is demo Code: <title>Web Design Demo Control Buttons</title>
<link href="title.css" rel="stylesheet" type="text/css" />
<script src="demo.htm" type="text/javascript"></script>
<script type="text/javascript">
function showPreview(id,x,y) {
object=document.getElementById(id);
object.style.visibility="hidden";
top.FrameName.rows = "100,1,*";
}
</script>
just for your reference here is the demo part Code: <html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 6
Case Problem 3
Web Design Demo
Filename: demo.htm
Supporting files: css.htm, html.htm, title.htm
-->
<title>HTML Demo</title>
</head>
<frameset rows="100,210,*" id="demo" name="demo">
<frame name="title" id="title" src="title.htm" scrolling="no" />
<frameset cols="*,*">
<frame name="code1" id="code1" src="html.htm" />
<frame name="code2" id="code2" src="css.htm" />
</frameset>
<frame name="output" id="output" />
</frameset>
</html>
how does this look so far just remember the top code is what i am working on what should i change and add? suggestions anyone? Hi, im having a problem adding a frame busting killer that counteracts a frame killer script on sites so i can load them inside my iframes.. here is the code i use <?php $result = mysql_query("SELECT ru.id, ru.username, ru.owid FROM raidbar_users ru LEFT JOIN raidbar_groups rg ON ru.groupid = rg.id WHERE rg.id = '".(int)$_REQUEST['group']."'") or die(mysql_error()); $myRaidid = raidid(); if(isset($_GET['gm'])) { echo '<FRAMESET rows="*,*,*,30" frameborder="0">' . "\n"; echo ' <FRAMESET cols="*,*" frameborder="0" scrolling="no">' . "\n"; $i = 0; while($row = mysql_fetch_array($result)) { if ($i == 2) { echo ' </FRAMESET>' . "\n"; echo ' <FRAMESET cols="*,*" frameborder="0" scrolling="no">' . "\n"; $i = 0; } echo ' <FRAME src="http://'.$server[$siteConfig['userServer']].'.***********/joinraid.php?raidid=' . $myRaidid . '&suid=' . $row['owid'] . '&serverid='.$siteConfig['userServer'].'">' . "\n"; $i++; } echo ' <FRAME src="">' . "\n"; echo ' </FRAMESET>' . "\n"; echo ' <FRAMESET frameborder="0" scrolling="no">' . "\n"; echo ' <FRAME src="http://'.$server[$siteConfig['userServer']].'.***********/raidmembers.php?raidid=' . $myRaidid . '">' . "\n"; echo ' </FRAMESET>' . "\n"; echo '</FRAMESET>' . "\n"; } else { echo '<table cellspacing=1 cellpadding=1>' . "\n"; echo '<tr>' . "\n"; $i = 0; while($row = mysql_fetch_array($result)) { if ($i == 2) { echo '</tr>' . "\n"; echo '<tr>' . "\n"; $i = 0; } echo ' <td><iframe src="./acct.php?suid=' . $row['owid'] . '" width=450 height=225 scrolling=no frameborder=0></iframe>' . "\n"; $i++; } echo '</tr>' . "\n"; echo '<tr>' . "\n"; echo ' <td><iframe src=http://'.$server[$siteConfig['userServer']].'.***********/raidmembers.php?raidid=' . raidid() . '&serverid='.$siteConfig['userServer'].' width=250 height=30 scrolling=no></iframe>' . "\n"; echo '</tr>' . "\n"; echo '</table>' . "\n"; } ?> Now im told to use the following.. <script type="text/javascript"> var prevent_bust = 0 window.onbeforeunload = function() { prevent_bust++ } setInterval(function() { if (prevent_bust > 0) { prevent_bust -= 2 window.top.location = 'http://server-which-responds-with-204.com' } }, 1) </script> or var prevent_bust = 0; // Event handler to catch execution of the busting script. window.onbeforeunload = function() { prevent_bust++ }; // Continuously monitor whether busting script has fired. setInterval(function() { if (prevent_bust > 0) { // Yes: it has fired. prevent_bust -= 2; // Avoid further action. // Get a 'No Content' status which keeps us on the same page. window.top.location = 'http://server-which-responds-with-204.com'; } }, 1); But the window.top.location i dont know how to incorporate that to work. Can anyone help? I'm building a webpage using javascript and iframes. Basically I have an iframe in the middle of the index.html page that links to another html page (let's call it iframe.html). My question is, is it possible to call a javascript function from iframe.html to control an object on index.html? If so, how do I do this? I'd like to be able to assign an image in iframe.html with the hyperlink of href="javascript:function()", where the function effects the CSS of a div on index.html. Thanks Hey guys, I'm using javascript in a menu to change the colour scheme of a page with frames and wondered how I could make this Javascript work across frames. The top frame is the colour picker with the Javascript and the bottom frame is the html template that will be changing colour scheme. JS: Code: var cols = {
red: [
{ el: '.headertitle', color: '#FF0000' },
{ el: '#wrapper #maincontent #leftpanel ul.leftnavigation li a.current', bgcolor: '#FF0000', color: '#FFFFFF' },
{ el: '#wrapper #maincontent #leftpanel', border: '#FF0000' },
{ el: '#wrapper #maincontent #leftpanel ul.leftoffers li div.titlebody a', color: '#FF0000' },
{ el: '#wrapper #maincontent #editable h2', color: '#FF0000' },
{ el: '#wrapper #maincontent #rightpanel', border: '#FF0000' },
{ el: '#wrapper #footer', bgcolor: '#FF0000' },
{ el: '#wrapper #maincontent #leftpanel ul.leftoffers li', bgcolor: '#F6D9D9'},
{ el: '.choosecolour', border: '#fff' },
{ el: '#cbred', border: '#000' }
],
orange: [
{ el: '#header', bgcolor: '#ff8c10', color: '#ffffff' },
{ el: '#nav li a', bgcolor: '#d63b18', color: '#ffffff', hoverbgcolor: '#fc6827', hovercolor: '#ffffff' },
{ el: '.primaryBgCol', bgcolor: '#ff8c10', color: '#ffffff' },
{ el: '.secondaryBgCol', bgcolor: '#f8a955', color: '#ffffff' },
{ el: '.footerBgCol', bgcolor: '#f2441c' },
{ el: '.footerTextCol', color: '#ffffff' },
{ el: '.borderCol', border: '#ff8c10' },
{ el: '#logo', src: 'images/logo_orange.gif'},
{ el: '.choosecolour', border: '#fff' },
{ el: '#cborange', border: '#000' }
]
};
function changeColour(col) {
$A(cols[col]).each(function(i) {
$$(i.el).each(function(j) {
if (i.bgcolor)
j.setStyle({ backgroundColor: i.bgcolor });
if (i.color)
j.setStyle({ color: i.color });
if (i.border)
j.setStyle({ borderColor: i.border });
if (i.src)
j.writeAttribute('src', i.src);
// hover colours
if (i.hovercolor || i.hoverbgcolor) {
j.onmouseover = function() { this.setStyle({ backgroundColor: i.hoverbgcolor, color: i.hovercolor }); };
j.onmouseout = function() { this.setStyle({ backgroundColor: i.bgcolor, color: i.color }); };
}
});
});
}
JS picker HTML code: Code: <div class="colours">
<div class="choosecolour" id="cbred" style="background-color: #c90c12;" onclick="changeColour('red');"></div>
<div class="choosecolour" id="cborange" style="background-color: #ff8c10;" onclick="changeColour('orange');"></div>
</div>
Anyone know how I can make the colour scheme of page in lower frame change when colour is picked in top page frame? CHANGE XX to TT CHANGE zero in c0m to O becoming com CHANGE YYY to WWW hxxps://yyy.yousendit.c0m/download/dklxb2VIcVg1aWF4dnc9PQ first an example of what im trying to do: when logging in to a forum, you enter your info at the top right corner. thts where the login info txt boxes are usually located. under these you'll find a menu bar. if you're logged in, the menu commands/items arent the same as when you're not logged in. example of logged in is search. example of not being logged in is register. anyways under the menu there's the forum itself. u no, sections and topics. the table basically. this is wht im trying to do. even if im doing it wrong plz indulge me I know that ppl dont use frames much anymore. but just go with it. It DOES help to no how to do something in different ways. Ok, assuming you setup my pages, press submit. All 3 frames SHOULD go to 1.php BUT what happens is that the lower two frames go to 1.php. the first frame doesnt. It's the frame that has the form which has the button. If i put the button outside the form and press submit, it works. all 3 frames change. so i'm guessing it's got to do with the form itself. How do I fix it? Thank you!!!! I have a web page with two frames, frame1 and frame2. I am trying to get the body tag of frame2 from frame1. I have declared two variables in javascript in frame1: var mainFrameDoc = parent.frame2.document; var mainFrameBody = mainFrameDoc.body; When I try to utilize the variable mainFrameBody I get an error stating that it is null or undefined. How can I get a handle to the body tag of frame2? Hi Friends......... I have two frames in page and in top frame i have a menu.... some of the submenus are clipped because they hide below second frame as height of first frame is small...however i dont want to change height of frames.... So is there any way so that i could display rest of submenus which are being clipped over second frame...... Please help..... I need to display a picture when it is clicked within various color mats and frames. Does anyone know the code for it? Thanks.
i have a simple frame that looks like this http://i307.photobucket.com/albums/n...aker/help2.jpg i have 3 pages (side.html, page1.html and page2.html) the above picture has side.html and page1.html loaded on default, what i want to do is whenever i click on the page 1 button, page1.html will load on the right side and when i click on page 2 button, page2.html will load i cant figure out what the code for this is and googling for the solution isn't getting me anywhere help please Please take a look at my site at http://purdypoodles.webs.com/index2.html to see what I have set up with frames. I'm looking for code that will allow users to click on "meet the parents" in the top frame, for example, and nicely scroll from the current position in the bottom frame to the Meet the Parents section also in the bottom frame. Then, if the user wants to go to Poodle Facts from there, it'll scroll smoothly from Meet the Parents to Poodle Facts. etc. I got a JS code somewhere, but it doesn't work. Any ideas??
Hi, I have a problem with my script displaying tabs (jquery tabs) in frames. When the scripts (not in frames) are viewed in the browser, the tabs are displayed correctly. I created a script containing frames for existing scripts to be displayed in certain frames. Some scripts display fine in the frames, even some of those that contain tabs. While some may display correctly, I still get some scripts when viewed in the frames script that are not displaying the tabs correctly. Can anyone please give me a solution to this problem. Thank you. First post! Hey all! So I've been having trouble figuring out how to make this page work. The page I'm working on has 3 frames: top/main/title frame, left frame, and right frame. What the page is supposed to be is like a shopping page. The left frame has all the items that you can select, while the right page has the "receipt" of your selected items. Now here's the problem: The left frame has an "Update Order" button on the bottom that updates the receipt on the right frame. However, I can't get the button to work. I'm not exactly sure how to write the code for the receipt frame (if there is any javascript code needed for that frame) or how to have the left frame send all that information to the right frame. I hope this all makes sense. Thanks for taking the time to read all that! I am using a JavaScript page that acts as a 'side-by-side' tester. It sends the same form in a POST to two different servers. One server is usually the production server the other a server under test. The results returned by the servers are displayed in two frames aligned side by side on the page. This page has worked in Firefox for several years. It worked up till early last week. Now, instead of populating the two frames, a new window opens up to display the response received from the Server. Nothing has changed in the code so I'm thinking that possibly the latest release of Firefox (10.0.2) has somehow broken this page. Here is the code that is envolved: Code: // setting up the frames
<frameset rows="400,*">
<frame src="file:///C:/TestSanity/controller.htm" name="controller"/>
<frameset cols="50%,50%">
<frame src="leftFrameInitialContent.html" name="leftWindow" onload='parent.controller.stopLeftFrameClock() ;'/>
<frame src="rightFrameInitialContent.html" name="rightWindow" onload='parent.controller.stopRightFrameClock();'/>
</frameset>
</frameset>
// sending a request whose response will be displayed in a frame
// pick the form that matches the current command
formToSubmit = document.getElementById(command + "_FORM") ;
// set the left frame destination url (action) from the value on the UI
formToSubmit.setAttribute("action", document.getElementById('leftFrameBaseUrl').value );
// send left window request
formToSubmit.setAttribute("target", "leftWindow");
formToSubmit.submit();
I don't have any idea what to look for as a cause. Any help and/or suggestions would be appreciated. Thanks, bkey Hello, I'd need some help for scripting. Here is what I need to do. I got links in frameA which open pages in frameB. Pages might be long to load, so when I click on the link, from frameA, I want to have the "wait" cursor until body of frameB loads, then return to "default" cursor in frameA. I'd also want the cursor to be on "wait" in all my 4 frames during the load if possible. I can't do it with a:active in CSS cause the cursor is stuck on "wait" when it's clicked even after page in frameB is loaded. I searched hours in forums, tried lots of things and didn't fix my problem. Would need help, thanks I am having trouble I can target two iframe windows at the same time using a Text Link, However I have not found a way to do this using a roll over image. Here is the Two codes I know. Can anyone help me please.... (roll over image) In the <head> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin loadImage1 = new Image(); loadImage1.src = "http://www.midwestfishing.org/pics/01_info_blue.gif"; staticImage1 = new Image(); staticImage1.src = "http://www.midwestfishing.org/pics/01_info_black.gif"; ........................................................... (button) <a href="info.html" rel="nofollow" target="frame1" onMouseOver="image1.src=loadImage1.src;" onMouseOut="image1.src=staticImage1.src;"> <img name="image1" src="http://www.midwestfishing.org/pics/01_info_black.gif" border=0></a> ........................................................... (two frames at once text) In the <head> <script language="javascript"> function loadTwo(iframe1URL, iframe2URL) { parent.frame1.location.href=iframe1URL parent.frame2.location.href=iframe2URL } </script> ........................................................... (button) <a href="javascript:loadTwo('info.html','home.html')">info</a> Thanks! This seems like it would be so simple and I have absolutely no idea. I have one page with no frames, and two links on it. The second page has an iframe on it. Both links on page 1 point to page 2 (which houses the iframe), but based on which link is clicked will determine what that iframe will display. Basically I need to figure out a way to target the iframe on page 2 after executing a window.open statement. Much like how google images creates a frame at the top after you click on one of the images from the search results. I've attached two simple files to better explain what I'm trying to do. FrameSet.zip I'd appreciate the help, I'm losing my mind. Problem I have an index.html that sets up 3 Frames. They are called FrameTop, FrameA and FrameB. See pic below. In FrameTop the user can type in a url into a textbox with id="urlINPUT". When user clicks LOADA it loads that url into FrameA. User can then browse web in FrameA, clicking links etc and going to new pages. The second button LOADB is designed to determine the current location/url of the page displayed in FrameA and load that into FrameB. So far when I write the javascript in FrameTop LOADA works but LOADB loads the FrameTop into FrameB! [error!] If someone can please help me with this problem it would be much appreciated. This work is going towards a free website idea. I suspect my error lies in use of parent/self in the parent.frame.location. Here is my page layout. -----------------Index.html------------------------------------- <frameset rows="5%,*"> <frame name="FrameTop" src="frame_top.html" /> <frameset cols="50%,50%"> <frame name="FrameA" id="FrameA" src="frame_a.html" /> <frame name="FrameB" id="FrameB" src="frame_b.html" /> <noframes> </noframes> </frameset> --------------------frame_top.html------------------------------- <SCRIPT language="JavaScript"> function loadURLintoA() /*gets the url typed in by user and loads it into Frame A. This works fine*/ { var urlrequest= "http://"+document.getElementById('urlINPUT').value; parent.FrameA.location.href = urlrequest; /*sets FrameA location to url that user enters in frametop input*/ } </SCRIPT> <SCRIPT language="JavaScript"> function loadAintoB() /*I WANT this to get the url of the website loaded in frame A and load it into frame B*/ { var urlofA = parent.FrameA.location; parent.FrameB.location = urlofA; /*this is supposed to get the url of FrameA and load it into FrameB*/ } </SCRIPT> </HEAD> <body bgcolor="#848484"> http://<input type="text" name="urlINPUT" value="" id="urlINPUT" size="10"> <input type="button" name="loadAbutton" id="loadAbutton" value="LOAD A" onclick="loadURLintoA()"> <input type="button" name="loadBbutton" id="loadBbutton" value="LOAD B" onclick="loadAintoB()"> ---------------------------------------------- What happens when I run index.html index.html loads the index correctly and displays FrameTop, FrameA and FrameB. The load A button also works correctly BUT when I click LoadB it loads FrameTop into FrameB! This happens when no page is loaded into FrameA AND when an external page in loaded in. Please help, I would be very greatfull if you could point out my mistake. With the help of Aerospace_Eng in a 2005 codingforums thread, now I can use one link (for example in a page about Topic 3) to load two related pages about Topic 4 (left-4.htm and right-4.htm) into the “left” and “right” iframes, using the code below. ___Is it possible to use this code, suitably supplemented, to also specify the frameset at “home.htm” if an external link to “right-4.htm” loads it into a browser without the frameset? (i.e. by putting a link into right-4.htm that will load it and left-4.htm into the iframe-context of home.htm) Code: <head>
<script> function changeLink(link) { parent.right.location=link; } </script>
</head>
<body>
<a href="left-4.htm" target="left" onclick="changeLink('right-4.htm'); return true">for Topic 4</a>
</body>
|
|||||||