|
JavaScript - Changing An Iframe Source From A Input Text
I am looking for an input text that links to a iframe. . ?
To begin, we need some simple HTML elements: A basic form; An Input text that will contain the URLs we want to use; An iFrame that will display the page we select from the input text. Thanks in advance Stickers Similar TutorialsOk, 'nother head-banger for the hardcore! I have a "contact us" <a> with the id 'contact' on the main page, which is supposed to change the source file of an iframe to the contact page. Except when I click on "contact us" nothing happens. I've tried to get this to work several different ways, and suspect that the problem is purely syntax, but I just haven't been able to figure it out. Here's the code: The snippet on the main page (index.html): Code:
<div id="linkListContact" class="LinkList">
<img id="linkListContactBg" class="SideBarBgImg" src="Assets/Backgrounds/SideBar/ContactBg.png"></img>
<span>
<ul>
<li>
<div><a id="contact">Contact Us</a>
</div>
</li>
</ul>
</span>
</div>
... and the relevant Javascript: Code:
function setIFrame(frameSource)
{
document.getElementById('mainWindow').src = frameSource;
}
function setContactLink()
{
var contactURL = "http://katabasis.spreadshirt.com/shop/imprint"
document.getElementById('contact').onclick = new Function ( "setIFrame( 'contactURL' )" );
}
The setIFrame function is used to call the content initially when the page loads, and is working beautifully in that context. You can see the problem in action at the actual site: www.katabasis-apparel.com. Thanks. I'm building a template editor and need some help changing some of the variables. Part 1. Only at DEALERNAME. Must present coupon at time of write-up. Cannot be combined with any other offer. 1 coupon per customer per transaction. Expires: 00/00/00.s I need to be able to fill out two fields to change DEALERNAME and 00/00/00. I found a way to do this but it required the output to be in a field. I need it the output to look no different than before. Part 2. I'm using this to change some text via radio button but I would like an option to select how many details are there is the first place. Say they only want 1 or 2 details and not 3. Head Code: <script language="javascript" type="text/javascript">
function detail1a(){
document.getElementById("detail1").innerHTML = "Up to 5 Quarts";
}
function detail1b(){
document.getElementById("detail1").innerHTML = "Synthetic Oil Extra";
}
function detail1c(){
document.getElementById("detail1").innerHTML = "Lube Chassis";
}
function detail2a(){
document.getElementById("detail2").innerHTML = "Up to 5 Quarts";
}
function detail2b(){
document.getElementById("detail2").innerHTML = "Synthetic Oil Extra";
}
function detail2c(){
document.getElementById("detail2").innerHTML = "Lube Chassis";
}
function detail3a(){
document.getElementById("detail3").innerHTML = "Up to 5 Quarts";
}
function detail3b(){
document.getElementById("detail3").innerHTML = "Synthetic Oil Extra";
}
function detail3c(){
document.getElementById("detail3").innerHTML = "Lube Chassis";
}
</script>
Body Code: <span style="font-weight: bold;">Offer Details</span><br /> <p style="margin: 8px 10px"> Detail 1<br /> <input type="radio" name="on/off" onclick="detail1a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail1b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail1c();" />Lube Chassis<br /> </p> <p style="margin: 8px 10px"> Detail 2<br /> <input type="radio" name="on/off" onclick="detail2a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail2b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail2c();" />Lube Chassis<br /> </p> <p style="margin: 8px 10px"> Detail 3<br /> <input type="radio" name="on/off" onclick="detail3a();" />Up to 5 quarts<br /> <input type="radio" name="on/off" onclick="detail3b();" />Synthetic Oil Extra<br /> <input type="radio" name="on/off" onclick="detail3c();" />Lube Chassis<br /> </p> Output Code: <ul> <li><span id="detail1">Detail 1</span></li> <li><span id="detail2">Detail 2</span></li> <li><span id="detail3">Detail 3</span></li> </ul> Yeah that was a loooong title. Hopefully it's clear enough Right now, my div changes opacity if it's moused over qua the following code: Code: style="opacity:0.3;filter:alpha(opacity=30)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.3;this.filters.alpha.opacity=30 but this isn't quite optimal, cause if the user mouses out, it changes back to fade, and the user can't quite see what he's entering. So I would like the div to have opacity=1 when one of the textfields in it is active and opacity=0 when it's not. Is there a way to do that? //deafdigit This is probable very easy, I've tried with normal html and am unable to get my head around it. I would like to in some way replicate how a web browser works. I have a form entry field with a submit button at the top of the page. Under that I have an iframe. I copy the url http://www.bbc.co.uk into the entry field, click submit and the iframe updates with the website. Have looked around and haven't found anything similar. Code so far.... <form target="myURL"> <input type="text" name="goTo"> <input type="submit" name="submit" value="submit"> </form> <iframe src="" name="myURL" border="0" frameborder="0" width="768" height="354"></iframe> Thanks in advanced. Death = $Mill Dear all, I am trying to set up a web site for an art gallery. That is for new talents so I have no budget. I am not a web designer and I am facing some barriers. Maybe some of you could help me. My problem is, I guess, about going around with the DOM node tree. My page looks like this: FRAME 1 - Header FRAME 2 - Navigation bar FRAME 3 - Has arrows for scrolling iframe 3.1 ---- iframe 3.1 - has thumbnails FRAME 4 - First for query and after shows the enlarged pictures of thumbnails FRAME 5 - Has arrows for scrolling iframe 5.1 ---iframe 5.1 Has text explaining pictures in frame 4 How it works: In first place, after page has been loaded, I am using frame 4 to run a HTML form. After submit, iframe 3.1 is populated with thumbnails according to the query. When a thumbnail is clicked, I succeeded in bringing the corresponding text, talking about the artwork, on iframe 5.1 to do so, I change the html source in iframe 5.1 I am using for that: top.frames['frame5_id'].document.getElementById('iframe 5.1_id').src=new_source.html; The idea was about doing the same with the frame 4 that is for a larger picture of the artwork. But first I need to get rid of the form once it was submitted (bring a new HTML with a dummy transparent gif to be swapped with the desired picture). But how can I bring a new html in frame 4? After the form is submitted the 'action' moves to iframe 3.1 I tried changing the html source using getElementById but I could not find a way to get to the right object. So my questions a Two src attibutes must be changed with code written in iframe 3.1. (where the thumbnails are clicked). But... How can I address and change the HTML src code in FRAME 4 ? How can I address and change the src image in the new code loaded in FRAME 4 ? I have both attributes in variables but don't know how to get to the target elements Thanks for any help. regards, wagner Ok, from the beginning. I have written a HTML5 player with controls and stuff. But I have one problem. After using switch-to-HD option the controls (like full screen) stops working. And in Firebug I see strange behaviour when switching back from HD (press HD, let it load and press HD again) - it seem like every event is triggered two times, and then more and more. What can I do with all of it? And it seems that there is a 'ghost' of the player that was before, cause it still plays when I switch to HD. The player is he http://secondgate.pl/temporary/nttp/ I also tried differend method for switching the source, using .load(). But it seems that Firefox can't load the movie after that and Chrome sets the volume to 100%, so it didn't work either. The player from this method is he http://secondgate.pl/temporary/tpp_004/ I would be mostly grateful for help. I know it's a lot of code, but it's all commented. I have no idea what am I doing wrong and I'm sitting like a week in front of it. Hey. I've been trying to get this page working with dynamically loaded iframe sources passed by URL, but I can't seem to get it working. Here's the relavent code: Code: <script type="text/javascript">
function delineate(str) {
URL = str.indexOf("=") + 1;
return(str.substring(URL))
}
</script>
Then there's a form/submit button that simply return the name of a type of item, for example "german" or "french" Using the form attributes method="link" and action="pageURL.html", where pageURL is the page that all of this is on. Code: <form name="hack"><input type="hidden" name="selector" /></form> <script language="javascript"> var url=window.location; document.hack.selector.value=url; var url_select=document.hack.selector.value; var selectedURL="../types/" +delineate(url_select) +".html"; document.write (selectedURL); frames['middleframe'].location.href=selectedURL; </script> <iframe id="middleframe" name="middleframe" src="../types/default.html" width="100%" scrolling="auto" height="1000" frameborder="0" style="display: inline;" /> I used the hidden form to change the url to text - advice from another website. I'm sure there are better ways to do it, but I'll explore them as soon as this thing actually works.. The types are in a subfolder named types, as shown. The document.write was placed in as a debug helper, and it displays the proper file location of whatever I select with the combo box, but the iframe doesn't change it's src to the selected page! I've tired the last line of the last <script> with several different methods, none of them producing any effect whatsoever. What am I doing incorrectly? Any help? Thanks. All, Trying to append data from an API to the frame source; not loading. master page: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" language="javascript" name="mm_scormRTI" >
<!-- Inserted by:
// SCORM Runtime Wrapper
// version 1.2.6 09/09/02
// Copyright 2000, 2001, 2002 Macromedia, Inc. All rights reserved.
// ----------------------------------------------------
// define global var as handle to API object
var mm_adl_API = null;
// mm_getAPI, which calls findAPI as needed
function mm_getAPI()
{blah}
// returns LMS API object (or null if not found)
function findAPI(win)
{bleh }
// call LMSInitialize()
function mm_adlOnload()
{do api stuff- this is where i get ny value }
// get the API, launch it
mm_getAPI();
// -->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DCB Document</title>
</head>
<body onLoad="mm_adlOnload()">this is a test;</p></p></p>
<iframe src="blank.htm" width="100%" height="800" id="qualtrics" name="qualtrics">
<p>Your browser does not support iframes.</p>
</iframe>
</p></p>
<input type="button" name="mm_finishBtn" value="Finish Lesson" onClick="mm_adlOnunload()" />
</body>
</html>
blank.htm: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" language="javascript">
//test
function loadit(){
var stud = window.opener.mm_adl_API.LMSGetValue("cmi.core.student_id");
var newlink = "https://mylink.com/stud_id=" + stud;
parent.document.getElementById("qualtrics").src=newlink;
}
// -->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DCB meta Document</title>
</head>
<body onLoad="loadit()">this is a test iframe</p></p></p>
</body>
</html>
help? i'm kind of dizzy right now since i've tried X different versions...still working on it. the new URL doesnt load i want to get the stud_id from the API and append it to the url that i launch in the iframe Im very new to java scripting so any help would be truly appreciated. I have a single web page that loads several iframes. One of the iframe pages has to be logged in first. I have that taken care of but once the page is loaded I need to change the source to a link with in the page. My guess is I need something to execute the code like a onload or something. This is what Ive been trying to get to work but like I said a newb! The iframe in question is named "cad" the initial source once loaded is 'https://urlname.com/mainmenu.asp' the source I need to change to is 'https://urlname.com/UnitStatusF.asp?agency_id=28' [CODE] function ChangesSrc() { var iframeid = document.getElementById(cad); var unitstatus = 'https://urlname.com/UnitStatusF.asp?agency_id=28' if (iframeid.src = 'https://urlname.com/mainmenu.asp') iframeid.src = unitstaus; return false; } [[CODE] I have a script which creates an element of iframe. I have a button which refreshes the iframe link. I need to do something to change a variable in the iframe src on every click of the button. I'll explain the real issue. I have a list of games I have with random name like, boomer.swf, kingdom.swf, balloon.swf and so on. So I somehow made this, Code: var r_text = new Array ();
r_text[0] = "boomer";
r_text[1] = "kingdom";
r_text[2] = "balloon";
var i = Math.floor(3*Math.random())
var gamedrome = { game: ""+r_text[i]+""};
Now I have a .js file which creates iframe element Code: function embed_game(params, options)
{
var data = [];
for(var i in params)
{
data.push(i + "=" + encodeURIComponent(params[i]));
}
data = data.join("&");
var frame = document.createElement("iframe");
frame.src = "http://website.com/embed/game.html?"+ data;
frame.style.width="100%";
frame.style.height="100%";
frame.style.border = "0";
frame.frameBorder = "0";
frame.id="newroom";
....
and another small script to refresh the inner iframe and not the page to change game. Code: <script type="text/javascript">
function Reload () {
var f = document.getElementById('newroom');
f.src = f.src;
}
</script>
It all works fine until the game is loaded, but the problem is that if once the game is loaded in site, the iframe source is already set and my button keeps loading the same game. I need to randomize it on every click. Please help me out. I read the "http://bodybrowser.googlelabs.com/body.html" page into an Iframe on my page. I now need to print the "viewcontainer" DIV that resides in the iframe. Accessing divs in an iframe is an issue with cross domain sources. Can anyone help me with a workaround or different idea? Thanks in advance!! Hi! I want to insert flash player on my page, that user can change flv source. But I dont know how to make input field that change flv source. I tried to insert input field and button but dont know how to make it working, please help me Here is my flvplayer embed code: <script type="text/javascript" src="http://flvplayer.com/free-flv-player/flvplayer/swfobject/swfobject.js"></script> <div id="embed_player"> <h1>Please Upgrade Your Flash Player</h1> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" /></a></p> </div> <script type="text/javascript"> var flashvars = { flvpFolderLocation: "http://flvplayer.com/free-flv-player/flvplayer/", flvpVideoSource: "http://flvplayer.com/media/audi_tdi_commercial.mp4", flvpWidth: "640", flvpHeight: "375", flvpInitVolume: "50", flvpTurnOnCorners: "true", flvpBgColor: "#FFFFFF" }; var params = { bgcolor: "#FFFFFF", menu: "true", allowfullscreen: "true" }; swfobject.embedSWF("http://flvplayer.com/free-flv-player/FlvPlayer.swf", "embed_player", "640", "375", "9.0.0", "http://flvplayer.com/free-flv-player/flvplayer/swfobject/expressInstall.swf", flashvars, params); </script> Hi all can someone guide me (total JS newbie) on this presumably pretty easy task? I have a "parent" page with some text inputs in it (a form). This is what I am after: -when the user clicks a link it pops open a new window via JS - "child" (this is working). -in the "child" window there are also some text inputs (another form) (done). -when the user changes the value for 'testChild_textInput_4' in the child window, then I want it to automatically set this same value, to effectively overwrite, what is currently in 'testParent_textInput_2' in the parent window. Presumably this involves an onChange event, but it is also OK with me if the needful (the text input's value in the parent window being overwritten) happens upon the child window's form submit. If anyone can show me either trick, I would be thrilled! I set up a test page to make this all easy to talk about: http://www.yellow-turtle.com/testDumpMe_parent.html Please let me know! Thanks! -John Hi, I have a table with a list of items which currently show 8 items per page. I want to have an input box at the top of the page so if I want a different amount of items to be shown i enter the number and the page alters the pagination to what ever number is entered. Hope this makes sense. Thanks for any help I would like to change the alignment of an image which currently under div which is under iframe. the page which is called under iframe is readymade html from some other site. I dont have any control on that HTML page which is under iframe. Please tell me how to align image under iframe.
I created a page that has an iframe on it. Within this iframe I call an asp page. The asp page is supposed to do some work and then update the innerHTML of a <div> object on the parent page to indicate that processing of the page in the iframe is complete. The code works in IE but not FireFox. I am wondering what is the best way to make the script work for both browsers? Sub page JavaScript: Code: updateParent()
{
parent.document.getElementById("num2").innerHTML = '<center><strong>Processing complete.</strong></center>';
}
Parent page: Code: <div id="num2"></div> hi im trying to make the background color change to white after the iframe is triggered. right now it sits transparent on the page but after the iframe is triggered i want the background to be white. is there a way to do this? i dont know much about java but im assuming this would be something to use java for. Thanks Code: <iframe name="result" style="border: 0px solid #000000;"frameborder="0" width='100%' height='590px' src="result1.php" allowtransparency="true"></iframe> I am thinking this should be fairly easy but yet I am not getting far. I want to have a form with a single text imput field for a zip code. Depending on which zip code the user enters will determine which url they will be sent to. If they enter a zip code which is not in the script, they would be sent to a default url. I am also assuming this can be accomplished with javascript. Any help is greatly appreciated. I have now go an applet from http://castleamber.com/amberticker.html, I have contacted the publisher and asked whether ther is a way to add line/streaming text from a textarea into he applet at runtime, however they are not responding as yet. If possible could someone tell me how I would use a repaint() case statement in this applet in order to get the value of the textarea to reflect in the ticker. Any code I do use will have all compliments to the creators and those who have helped along the way. Thank you Hi - I'm working in ASP.Net 2.0. My page has a GridView control, which is populated by a SQLDataSource. The GridView has one Button control per row. The button has a client-side javascript function (ShowDelete) attached to its OnClientClick event on DataBinding of the GridView. This event fires some javascript. The javascript does 3 things: - It changes the text of the button from "Hide" to "Create" - It changes the background color of the button from red to green - It assigns a new onClientClick event to the button: "ShowAvailable" The text and the color of the button change with no problem. After I change the OnClientClick event, I send an alert with the button's OnClientClick event and it reports it to be "ShowAvailable". However, when I click on the button, it doesn't fire ShowAvailable, it fires the original onClientClick event (ShowDelete). Also, when I do View Source, it shows the button's text, color and OnClientClick event as their original settings, i.e., "Hidden", "Red" and "ShowDelete", even though I'm looking at a green button that says "Create." What's going on here? Here's the code I use to attach the OnClientClick event on DataBinding of the GridView: Code: foreach (GridViewRow row in this.gvLocation.Rows)
{
if (row.RowType == DataControlRowType.DataRow || row.RowType == DataControlRowType.EmptyDataRow)
{
int rowindex = row.RowIndex + 1; //to exclude the header which is counted as a row when we get to javascript
btnAction.OnClientClick = "ShowDelete(" + rowindex.ToString() + "); return false";
}
}
Here's the javascript for ShowDelete: Code: function ShowDelete(rowindex)
{
var locationgridID = '<%= gvLocation.ClientID %>';
locationgrid = document.getElementById(locationgridID);
if (locationgrid != null)
{
action_cell = locationgrid.rows[rowindex].cells[3];
for (k = 0; k < action_cell.childNodes.length; k++)
{
if (typeof(action_cell.childNodes[k].id) == 'string')
{
action_cell.childNodes[k].value = "Create";
action_cell.childNodes[k].style.backgroundColor = "Green";
action_cell.childNodes[k].onclientclick = "ShowAvailable(" + rowindex + "); return false";
alert(action_cell.childNodes[k].onclientclick); // reports the OnClientClick event is ShowAvailable
}
}
}
}
Any thoughts are greatly appreciated! |
|||||||