|
JavaScript - Controlling Frames Containing External Pages
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. Similar TutorialsHello, I was wondering if it is possible to load external pages (from a different server) into a lightbox, without using a iframe. Any solutions for this? Thanks a lot in advance! Kind regards, Robbert ok guys, i am not very saavy with javascript and I dont know if this is an easy fix or something difficult, but here is my plan. I would like to have 4 divs with content in each and set each to occupy the same web space through absolute positioning. The .js would be for me to have three divs with a display:none and one to have display:block. and then at a set interval, have the divs switch role so that one that was display none is then block and the others are hidden. I dont want to have a page reload and I dont want to work in flash or anything like that, I just need an example of a script that will alternate through a set array of div ids (i.e. "<<div id="ad1"></div> div id="ad2"></div> <div id="ad3"></div> <div id="ad4"></div>, and change the display attribute every 10 seconds or so. Any help would be greatly appreciated thanks so much Hi, I have a few checkboxes in a form. Some of them work independently, but some make the others go on and off. Specifically the lower ones are controlling the upper ones. Can anyone explain why please? Code: <td> <input type="checkbox" name="weddingitem1" value="Toppers" id="Toppers"/><label for="Toppers" >Toppers<br /> <input type="checkbox" name="weddingitem2" value="Champers" id="Champers"/><label for="Champers" >Champers<br /> </td> Hi, Im trying to change the position of a div when a button is clicked. The js is: Code: function curPos() {
objDivStrip = document.getElementById('thumbview');
return objDivStrip.style.top;
}
function up(pos) {
//get objects
objImgStrip = document.getElementById('str');
objDivStrip = document.getElementById('thumbview');
//Get End position
var totImg = (objImgStrip.height - 100) / 130;
var endpos = totImg * 130;
if (pos=endpos)
{
return false;
}
else
{
objDivStrip.style.top = pos - 130;
}
}
and the html on the button is Code: <img id="arrow" src="images/arrow_up.jpg" onclick="up(curPos());" /> The code doesnt work but if anyone could point me in the direction to get it to work your help is greatly appreciated. Cheers Sol hi everybody; i'm using this code to trigger functions with left and right arrow keys.. but they work even if the arrow keys pressed in input boxes.. is there any way to prevent this code to work when user presses the arrow keys in input boxes? Code: document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 37:
geri();
gostergeyaz();
break;
case 39:
ileri();
gostergeyaz();
break;
}
};
Hello, I need your help. I have 2 checkboxes. How would I control one from the other? Eg. [ ] Option A [ ] Option B - If Option A was checked first and, I put a checkmark in option B then Uncheck Option A and leave option B checked. - If Option B was checked and, I put a check mark in Option A then uncheck Option B and leave Option A checked. How would that be written in Javascript, I am totally confused. Any help with this is much and foremost greatly appreciated. Cheers, J I have the following code ... Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
<style type="text/css">
body {
background-color:#000;
}
#scenery {
width:964px;
height:482px;
padding:318px 0 0 316px;
margin:auto;
background-image:url('http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg');
}
</style>
</head>
<body>
<div id="scenery">
<img src="http://cdn3.iconfinder.com/data/icons/softwaredemo/PNG/128x128/DrawingPin1_Blue.png" alt="">
</div>
</body>
</html>
... in which I would like to use Javascript to control the values in the 'padding'. Code: padding:318px 0 0 316px; May I know how can I use Javascript to control that 'padding' values? Appreciate any help. I am trying to use JavaScript to manipulate the appearance of a web browser. (1) Initially I need to identify and save the current browser settings (e.g. position, height, width, caption on or off, menubar on or off, border on or off). (2) Then I need to change the appearance of the browser to full screen, no border, no caption, no status bar, no menubar). (3) Finally, I need to return the browser to the initial settings using the settings saved at the beginning. I am a novice at JavaScript and am having a difficult time locating details of the language that permit me to accomplish my objectives. John Chapman jchapman@onlinecbt.com I am trying to do a custom add to cart to use with paypal and need to utilize javascript to achieve inserting some code or a weight value per the paypal forms' options choice. Here is my dilemma, All of my items have multiple weights, for instance the below example called Aqua Max 100 comes in .5lbs, 1.5lbs., 10lbs., 20lbs., and 50lbs. Paypal allows you to enter weight but it's one weight per item and I would have to create 5 Paypal buttons just for this one item to calculate the different weights per zip code. I need help making javascript insert the following code within the paypal forms' code upon option select before clicking submit? <input type="hidden" name="weight" value=".5"> <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="1.5"> <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="10 <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="20 <input type="hidden" name="weight_unit" value="lbs"> <input type="hidden" name="weight" value="50 <input type="hidden" name="weight_unit" value="lbs"> The code I came up with is wrong as I'm getting an error but I was originally trying to make it enter a weight using a hidden fillable number and without any real javascript training, just alot of googling but I think I'm pretty close. Please take a look at the code I've came up with so far and maybe point me in the correct direction: <html> <body> <form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post"> <input type="hidden" name="cmd" value="_cart"> <input type="hidden" name="business" value="test@test.com"> <input type="hidden" name="currency_code" value="USD"> <input type='hidden'text' name='amt' id='amt' value="0.00"/> <table> <tr> <td> <input type="text" name="on0" value="Aqua Max 100">Aqua Max 100</td></tr> <tr><td> <select name="os0" onChange="getamt()"> <option value="select">Please Select</option> <option value="1/2 lb.">1/2 lb. $3.99 USD</option> <option value="1 - 1/2 lbs">1 - 1/2 lbs $7.59 USD</option> <option value="10 lbs.">10 lbs. $25.80 USD</option> <option value="20 lbs.">20 lbs. $42.75 USD</option> <option value="50 lbs.">50 lbs. $86.20 USD</option> </select></td></tr> </table> <script type="text/javascript"> function getamt() { var sh=0; var choice = document.getElementById("os0").selectedIndex; if (choice == 0) { sh=0; } if (choice == 1) { sh=.5; } if (choice == 2) { sh=1.5; } if (choice == 3) { sh=10; } if (choice == 4) { sh=20 } if (choice == 5) { sh=50.00; } document.getElementById("on0").value=sh; } </script> <input type="image" src="https://images.paypal.com/images/sc-but-03.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!" /> <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1"> </form> </body> </html> Good day/evening. I am trying to reload the contents of a div asynchronously using jquery. It works fine if the link/button to do so is outside of the div I am reloading, but I need the button to be inside the div I am reloading and it does not work if I do it from there. I have thought about overlaying divs but I need the buttons to be very exactly positioned as its a graphical representation of a map and recoding the way the buttons are placed would not only annoy me but be very difficult. You see its an isometric view of a square, and the buttons need to be placed right along the edges of the 'diamond' therefore always coming inside or on top of the div that contains the map view. So, is what I am trying to do impossible or might I just be going about it the wrong way ? If it is the latter then I will post some code. Thanks in advance. EDIT: sorry, I didn't see the frameworks forum for Jquery stuff, if a mod could please move this thread in there then that would be just fab. Hi, I coded the following JavaScript: Code: var el = document.createElement("iframe");
el.setAttribute('id', 'ifrm');
document.body.appendChild(el);
el.setAttribute('height', 250);
el.setAttribute('width', 300);
el.setAttribute('frameborder', 0);
el.setAttribute('marginheight', 0);
el.setAttribute('marginwidth', 0)
el.setAttribute('src', 'http://example.com/?pub=1&format=image&size=300x250&url='+window.location);
And am putting it between <script type="text/javascript"> and </script> tags in the <body> section of my site. But, it only works in certain areas of the page. Can you guys think of any reason for this? Let me know... Thanks, ~Christian Hi, I hav linked external js (ext1.js) to my app.html page. Now in the ext1.js, I have a function like [CODE] function onwindowload(){ //Access HTML element and append external js 2 (ext2.js) here }[CODE] //Access HTML element and append external js 2 (ext2.js) here--->I donno how to add external JS here. Even if i add the external JS here, the JS uses document.write fn. which replaces entire page. Please suggest a solution 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? I need to display a picture when it is clicked within various color mats and frames. Does anyone know the code for it? Thanks.
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 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 Hi, 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. Dear Forum, I have a website of quite a few pages which also has a style sheet switcher so the user can select their own customised graphics and layout (css file) these css files load in the graphics but only when the call is clicked... even if the page has already been opened for seconds or minutes when the graphics could have been loaded in for an instant switch. so i implemented the following code: Code:
<SCRIPT language="javascript">
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</SCRIPT>
<body onLoad="MM_preloadImages('/corporate/heading.png','/creative/heading.png','/earth/heading.png','/under-the-sea/heading.png','/space-and-stars/heading.png','/classical/heading.png','/corporate/document.jpg','/space-and-stars/document.png','/creative/document.jpg','/earth/background.jpg','/under-the-sea/background.jpg','/classical/document.png','/classical/background.jpg','/under-the-sea/document.png','/corporate/home-graphics.png','/earth/content.jpg','/earth/footer.jpg','/earth/home-graphics.png','/under-the-sea/home-graphics.png','/creative/home-graphics.png','/space-and-stars/background.jpg','');">
it works fantastically - you open the page and as long as it takes to notice where you can click the styles is the same amount of time it takes to have the styles cached for the styles switch immediately and effortlessly. however, the site has grown and is now quite a number of pages with the above in each html file. ive just added a "creative 2" style, which has caused the above to need updating........ the maintenance of this code is inefficient to edit each page. would someone be able to point or show me how to, in principle: Code: <body onLoad="MM_preloadImages('/styles-code.js);">
styles-code.js?? page:
'/corporate/heading.png',
'/creative/heading.png',
'/earth/heading.png',
'/sea/heading.png',
'/classical/heading.png',
'/corporate/background.jpg',
'/creative/background.jpg',
'/earth/background.jpg',
'/sea/background.jpg',
'/classical/background.jpg',
etc
and have 1 page of this code called in by all pages in an easy to see and edit list? would really appreciate guidance with this, Hello, I'm sorry if this has been asked before but I've been googling and looking in reference books for the last couple of days and just haven't been able to find an answer. I'm new to javascript and have just completed my first fully working script to crossfade images and have clickable links to go to a specific image, the code works perfectly when the code is inside of the html document with the elements but when you remove the javascript and put it in a seperate file its unable to get the value of the elements from the html. Is there a way to do this, give the document a alternative src to look in for the elements or something? An example below. Javascript snipit [CODE] imageId = "mainImage"; image = window.document.getElementById(imageId); alert(image); [CODE] image returns null. what I want it to return is the value fro the HTMl document that this file is included in. [CODE] <script type="text/javascript" src="fadeFunctions.js"> </script> </head> <body> <div id="imgHolder" style="position: absolute; top: 200px;"> <div id="topImage" style="position: absolute; top: 0px; left: 0px; z-index: 100;"><img id="mainImg" src="1.png" /></div> [CODE] Thanks for any help or suggestions that you can give. |
|||||||