|
JavaScript - Input To Another Frame, Box Intact
.
• How do submit your input box value to another frame without the input box vanishing? • This code is bloated. Below is the code with the gist highlighted (scroll). • Relevant options?: --- document.forms[].action --- document.forms[].value --- document.getElementById(typer).value EXAMPLE: Type & Hit Enter (Viewable on: FF 3.6) FRAME 1: Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
window.onload = function() {
document.getElementById("typer").focus();
}
</script>
<style type="text/css">
body
{
text-align:left;
background-color: #FFFFFF;
overflow: hidden;
font-family:sans-serif;
font-size: 60px;
}
form, input, select, textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 100%;
border: 0;
position:absolute;
top:180px;
left:60px;
}
img
{
position:absolute;
left:0px;
top:300px;
z-index:1;
}
</style>
</head>
<body>
<iframe id="ifm" name="ifm" src="F2.htm" frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="no"></iframe>
<form name="form2" method=GET action="http://www.google.com/search">
<input type=text id="typer" name=q size=31 maxlength=255 value="">
</form>
</body>
</html>
FRAME 2: Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<style type="text/css">
html {overflow: auto;}
html, body, div, iframe {margin: 0px; padding: 0px; height: 100%; border: none;}
iframe {display: block; width: 100%; border: none; overflow-y: auto; overflow-x: hidden;}
</style>
<body>
</body>
</html>
. Similar TutorialsHi. I have a question about java script code. I'm creating a website with frames. Within the main page frame, there are tables in the main content page. When I created the website, it fit perfectly in the browser window of my smaller laptop. I just checked it out on my old G5 and the images/pages are too big and either cut off or scroll bars appear (which is not what I want) So I wanted to know what code I put in my files and where to put it? Also, what pages does it need to be in? the main frame index page? the specific pages that fit within the frames? some are images that load in the frames? would i need to create an .html for those and then have the .jpg load so that it can be resized? I need the main page to be resized to fit the browser as well as the pages in the frames to fit. Can you help? Thanks I' am trying to do a frame by frame animation, lik an animated gif. I am using svg (vector graphics) and IE9 has native support for svg. The code functions in every other browser but IE9 plays the animation once then nothing. If you would like to try and not have svg files you can use whatever gif,jpg or png just put an img-tag where i have embed. Code: <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Animation</title>
<style type="text/css">
/*One div per image all uses this class*/
.eyesPos {
position:absolute;
width:80px;
height:50px;
z-index:1;
left: 0px;
top: 0px;
}
#eye_wrapper{/*This is a master div for easy placement of the others*/
position:absolute;
width:80px;
height:50px;
z-index:2;
left: 275px;
top: 200px;
}
</style>
<script>
var eyes=["a","b","c","d"];//Image id in this array
var startAnim=setInterval(visaOga,100);//Animation speed
function visaOga(){
document.getElementById(eyes.splice(0,1)).style.display="block";
if(eyes.length==0){
document.getElementById("a").style.display="none";
document.getElementById("b").style.display="none";
document.getElementById("c").style.display="none";
dBort = function(){
document.getElementById("d").style.display="none";
eyes=["a","b","c","d"];
}
setTimeout(dBort,1500);//So last image is shown 1.5 sec
return;//Aborts - dBort -. Sequence can start over
if(document.getElementById("d").style.display=="none"){
startAnim;//Strts sequence if last image invisible
}
}
}
</script>
</head>
<body>
<!--Images in own div invisible at start-->
<div id="eye_wrapper">
<div class="eyesPos" id="a" style= display:none;>
<embed src="0.svg" width="80" height="50" />
</div>
<div class="eyesPos" id="b" style= display:none;>
<embed src="1.svg" width="80" height="50" />
</div>
<div class="eyesPos" id="c" style= display:none;>
<embed src="2.svg" width="80" height="50" />
</div>
<div class="eyesPos" id="d" style= display:none;>
<embed src="3.svg" width="80" height="50" />
</div>
</div>
</body>
</html>
guys help pls.. i need to pass the data in the textfields from the left frame to the textfields in the right frame of my frameset. (ex: dslnum of frame1 will be pass to txtDSLTN of frame2) frame1: http://www.mediafire.com/?hge1ws29mdhmu7e frame2: http://www.mediafire.com/?k83cb64wbpskw97 thanks in advance! I have a page called answersheet.html which I am popping up using a function called NewWindow; Code: <a href="javascript:myVoid()" onclick="NewWindow('/images/101online/practicetest1/listensubtest1/answersheet.html','PopUp','625','400','no',''); return true;">
It works fine. answersheet.html consists of two frames, the top frame containing a button with onclick="myprint()" to print out the bottom frame: Code: <script type="text/javascript">
function myprint() {
window.parent.bottom.focus();
window.print();
}
</script>
It does the job in Internet Explorer, but Firefox and Chrome only print the top frame with the print button! Is the function myprint() IE only coding? If so, what should I use? I have a problem with adding new inputs to a form (if and when required), Internet Explorer is fine but in Firefox if any previous input fields are filled when the more button is clicked they get reset to blank. JS: Code: fields = 0;
function addInput() {
if (fields != 100) {
document.getElementById('input').innerHTML += "<input type='text' name='input[]' size='30' />";
fields += 1;
} else {
document.getElementById('input').innerHTML += "<br />Maximum 100 fields allowed.";
document.form.add.disabled=true;}
}
form: Code: <form action="index.php" method="post"> <div id="input"> <input type="text" name="input[]" size="30" maxlength="15" /> </div> <!-- button --> <div id="more"> <input type="button" onclick="addInput()" name="add" value="More" /> </div> <!-- // button --> <input type="submit" name="submit" value="Submit" /> </form> as usual any help is appretiated .. 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. Hi, i want to set an input value to the same value as the input selected from another input on the same form so when the user selects input 1 i want the hidden input2 to get the same value im guessing i use onsubmit because its hidden so there wont be a focus or blur this would be part of the input Code: onsubmit="(this.value = this.othervalue)" othervalue being the other input name="othervalue" is that the correct syntax i was doing some 3d things with unity3d, and i want to embed them into web pages, or to allow others to embed it into their pages...so i managed to do it with frames. now, there is a problem when i want to open the link to my site from the application that is embedded, it opens the window but in frame, so that is just bad... embedded window is small, a bit larger then youtube default size, so it looks ugly when it opens site in it.... is there a way to pop up the window, or to open new tab from the frame? and not to involve making scripts outside the frame because it will be harder to present the user what he needs to do in order to embed this content into his page? any ideas? thank you! Hi, I am sure there is a simple thing I am doing wrong. I am using serif plus, (instead of dreamweaver), I have 12 pages, and am using 3 seperate master pages for various pages. Master page B holds the repetitive information for page7.html and contained within page7 is an iframe linked to page18.html. On page7.html, beside the iframe I have six 'hot spots' anchored within the page displayed (page18). This works really well. The problem I have is when page7.html loads it comes up at the top of the iframe, (half way down the main page), not the top of the page that contains it. I have tried putting an anchor at the top of page7.html and inserting code as in OnLoad, go to anchor etc., window.location, and just about everything else I could think of, but nothing seems to make the page open in the correct place. You have to scroll to the top each time. Can anyone help with this please. Not very experienced but hoping to learn. Sybs I have this offer iframed on my website and I want it so that when they get to a certain page (i have the specific url), I can redirect it to another site. Is this possible by any chance?
Here is the story... There is a submit button (POST) that targets to a frame, given that there is no way to change it through DOM manipulation. Code:
<script language="JavaScript" type="text/javascript">
<!--
window.onload = function() { if (top!=window) top.location=window.location }
-->
</script>
That piece of code is not elegant in the sense that it will show the parent window and the frame for like one second, then the content in the frame takes over to cover up the parent window. Is there a way for the frame to take over the parent window instantly? Hi, i have an input value array for customer ids, i also need to make a copy of that array into another input element on submit to use for another process. So far here is what i have come up with regarding the js the current html is this Code:
<!-- original input -->
<input id="cb<?php echo $i;?>" name="cid[]" value="<?php echo $commissions[$i]['id'];?>" onclick="isChecked(this.checked);" type="checkbox" />
<!-- this is new html input which is outside the $i loop that i need a copy of cid[] stored on submit
<input type="hidden" name="ids[]" onsubmit="valueTovalue();" />
<!-- here is the js so far -->
<script type="text/javascript">
function valueTovalue()
{
var valin = document.adminForm.cid.value; //cid is the array cid[]
document.adminForm.ids.value = valin; //copy the array to the new input element array ids
}
</script>
so basically if they click 1 cid then ids will also show 1, if they click all cid then ids will show all as well. will that work the way i have it, am i even close here.. thanks update: what i have seems to work fine for text values or string values but not for arrays, what am i missing that it wont copy an array? Array ( [cid] => Array ( [0] => 1 ) [task] => remarksonly [remark] => hhhyyy [boxchecked] => 1 [ids] => Array ( [0] => ) ) am i getting closer lol Code:
function valueTovalue()
{
var valin = cid.concat;
document.adminForm.ids.value = valin.concat;
return(true);
this has to be close i hope Code: document.adminForm.ids.value = [].concat(document.adminForm.cid); I have plenty of information in my database now, and I'm thinking of making a double-frame style webpage that can pull content from the db. but the AJAX code I have is sometimes very slow. It might be my server though. Could anyone shed some light on how the following website populates the right side frame with help content? http://vb.mvps.org/hardcore/ if you double click on the file on the left, the content immediately appears on the right. I'm guessing that it doesn't come from a database, because of pages like this: http://vb.mvps.org/hardcore/html/int...elibraries.htm that same content can be seen by one of those help chapters too. So, there's a complete file for the link. Could someone tell me how exactly this works? In here is an example of a frameset im currently working. i have this frameset: http://www.mediafire.com/?75dvswgvelw19a9 what i want is when i select radio button "YES" and click on the "create" button in form1 http://www.mediafire.com/?eld7a1rb21h799e it will pass the value to radio button "ON" in form 2 http://www.mediafire.com/?f0o060cdpyf06ya and will call the function of the radio button "ON" -shows the hidden textarea. And if i select radio button "NO" in form1 and click on "create" button, it will select radio button "OFF" in form 2. help plsssssssss Hi... I am having a problem with the resize... I use the script below to adjust the size of the frame. It works nicely for me. The only problem is, the frame initially jumps to the bookmark, and then on the reload, jumps to the top of the page. Any ideas on how to keep the frame at the bookmark in the web page, instead of jumping back up to the top???? Thanks much in advance.... <script> <!-- function resize_iframe(){ if ( window.frames["MainWindow"].document.body.scrollHeight=0 ) { } else { document.getElementById("MainWindow").height=100 document.getElementById('MainWindow').height=window.frames["MainWindow"].document.body.scrollHeight + 20 } } // --> </script> <IFRAME src="main.htm" frameborder="0" scrolling="no" ID=MainWindow NAME=MainWindow HEIGHT=800 WIDTH=1012 onLoad=resize_iframe();></IFRAME> Hello everybody I have two frame in one page. say frame1 & frame2. Now I want to replace <body> to <body bgcolor="#FFFFFF"> in frame2. Is it possible? if possible then please help me Say you have a document with 2 frames with 2 buttons in one of the frames. If one button opens a window, how can you make the other button close it?
I'm trying to write a little Greasemonkey script (in Firefox) to manipulate the top bar Google Translate produces when translating a site. For example: http://translate.google.com/translat.../www.google.de. Google has employed traditional HTML frames. According to many websites, I can use something like window.frames[0].contentDocument to access the first frame. However, this is refusing to work! I have been debugging this for hours. I have verified that I am indeed running the script from the top-level window (window.parent === window.top), and I am able to manipulate the frames themselves without a problem. When I try something like window.frames[0].contentDocument.URL, it returns as about:blank (I also get this with the other frame, i.e., frames[1]). I have tried several different methods of getting at that frame, including getElementsByTagName("frame")[0] (which works for manipulating the frame itself, but not for editing the frame's content through contentDocument). Here's my little script so far. I've included the first part so you can see for yourself that I'm definitely in the top-level window and using the right @include because it works. In this example, the URL returned is "about:blank" (again, I'm in Firefox). Code: // ==UserScript==
// @name GTranslate
// @include /^https?://translate\.google\.com/translate\?.*/
// ==/UserScript==
// change how the frame is displayed
var bar = document.getElementsByTagName("frame")[0];
bar.removeAttribute("noresize");
// manipulate the content inside the frame
var gt = bar.contentDocument;
alert(bar.URL);
Hello, Sorry to bug again, need some help here. Need the search results to pop up on another frame. Code: <script language="JavaScript" type="text/javascript">
<!--
//
// Script by Jari Aarniala [www.mbnet.fi/~foo -- foo@mbnet.fi]
//
// This script makes it easy to choose with which search engine
// you`d like to search the net. You may use this if you keep this
// text here...
//
function startSearch(){
searchString = document.searchForm.searchText.value;
if(searchString != ""){
searchEngine = document.searchForm.whichEngine.selectedIndex + 1;
finalSearchString = "";
if(searchEngine == 1){
finalSearchString = "http://www.excite.com/search.gw?trace=a&search=" + searchString;
}
...
location.href = finalSearchString;
}
}
// -->
</script><basefont face="Verdana, Arial, sans-serif">
<form name="searchForm" id="searchForm">
<table cellspacing="2" cellpadding="3" width="320" bgcolor="#444444" border="1">
<tbody>
<tr>
<td bgcolor="lightblue"><font face="Verdana, Arial, sans-serif" size="1">Search for:<br></font></td>
<td bgcolor="lightblue"><font face="Verdana, Arial, sans-serif" size="1">Search from:</font></td>
<td bgcolor="lightblue"> </td>
</tr>
<tr>
<td bgcolor="navajowhite"><input name="searchText"></td>
<td bgcolor="navajowhite"><select name="whichEngine">
<option selected>
BMP
</option>
<option>
AOTS
</option>
...
</select></td>
<td bgcolor="navajowhite">
<input onClick="startSearch()" type="button" value="Send"></td>
And I'm using real frames. Thanks Hi everyone i want to have a "onmouseover" that show a div and also mask 2 others div in a frame (which have id "mainFrame"). I have a javascript that is OK under FireFox, Safari, IE 7 but in IE 5 or 6 the others div are not mask when my mouse is going on the text. Here's my code, if someone can help me ! Code: <td width="180" valign="middle">
<div align="center" class="Menu">
<a href="javascript:showdiv_contact()" class="Menu" onmouseover="parent.frames['mainFrame'].document.getElementById('presentation').style.display='none';parent.frames['mainFrame'].document.getElementById('services').style.display='none';parent.frames['mainFrame'].document.getElementById('prestations').style.display='none';parent.frames['mainFrame'].document.getElementById('contact').style.display='block'" >Contact</a></div></td>
I also try to set the javascript in the head, like this: Code: <script language="javascript" type="text/javascript">
function aff_prest() {
parent.frames['mainFrame'].document.getElementById('prestations').style.display='block';
}
function masque_prest() {
parent.frames['mainFrame'].document.getElementById('prestations').style.display='none';
function aff_presentation() {
parent.frames['mainFrame'].document.getElementById('presentation').style.display='block';
}
function masque_presentation() {
parent.frames['mainFrame'].document.getElementById('presentation').style.display='none';
}
</script>
and then this in the onmouseover: Code: <a href="javascript:showdiv()" class="Menu" onmouseover="javascript:masque_presentation();javascript:aff_prest();">Nos prestations</a> but again that works on FireFox not in IE6 Thanks to everyone for your help! |
|||||||