How do I get a variable in an iframe from the parent if I do not know how many iframes are on the parent page and the order of the one in question. For instance, I know the iframe in question is the second one, so I can select windows.frames[1]. But if I didn't know know it was the second one, how would I select it by ID.
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Testing</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js" type="text/javascript"></script>
<style type="text/css">
</style>
<script type="text/javascript">
$(function(){
$('#getValues').click(function(){
//This works, but I don't want to select the iframe by the number since I don't know it.
console.log(
window.frames[1],
window.frames[1].window,
window.frames[1].window.getMe
);
console.log(
window.frames['myIFrame'],
window.frames['myIFrame'].document,
window.frames['myIFrame'].window,
document.getElementById('myIFrame'),
document.getElementById('myIFrame').window
);
});
});
</script>
</head>
<body>
<button id="getValues">getValues</button>
<div><iframe src="otherIframe.html"></iframe></div>
<!-- iframe3_get.html only sets global variable getMe to something. -->
<div><iframe id="myIFrame" src="iframe3_get.html"></iframe></div>
</body>
</html>
In the bellow example, getM1 and getMe2 will be equal. This doesn't seem to be a very good answer, but it is the only one I have. If it is a bad answer and you elect to vote it down, please provide a better answer.
$('#getValues').click(function(){
var getMe1=window.frames[1].window.getMe;
for (var i = window.frames.length - 1; i >= 0; i--) {
if(window.frames[i].frameElement.id=='myIFrame'){
var getMe2=window.frames[i].frameElement.getMe;
break;
}
}
});
Related
I am looking to build a webpage that submits into a database (.asp) but also calculates a percentage.
The percentage amount is 8%.
Ideally I want the user to type an amount in an input box (for example lets say £100)
Then underneath there is another input box which automatically caluates the £100 + 8% (so £108)
I haven't got a clue how to start so I haven't got any code
Live jsFiddle: http://jsfiddle.net/5mB3Q/
This is your jQuery:
$("#val").on('keyup', function(){
$("#incPerc").text(parseInt($(this).val())*1.08);
});
you might want to use a library to limit the input to digits only.
something like this: Limit Textfield Input to digits only
added the second input http://jsfiddle.net/5mB3Q/1/
and the round of two digits:
$("#val").on('keyup', function(){
var withPerc = parseFloat($(this).val())*1.08;
$("#incPerc").text(withPerc.toFixed(2));
$("#otherInput").val(withPerc.toFixed(2));
});
edit: ok, full code because of the comment:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<form>
<input id="val">
<input id="otherInput">
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#val").on('keyup', function(){
var withPerc = parseFloat($(this).val())*0.08;
$("#incPerc").text(withPerc.toFixed(2));
$("#otherInput").val(withPerc.toFixed(2));
});
});
</script>
</body>
</html>
You forgot the protocol when you linked the jQuery lib. (and doc.ready)
$('#output').text = (int)($('#input').text.Substring(0, $('#input').text.Length - 1)) * 1,08 + $('#input').text.Substring($('#input').text.Length - 1);
I'm trying to display data in a table format. The table however needs to be dynamic, so it will accommodate more or less rows, depending on the data list shown. I would love to do it with Raphael.js, so I can mess with effects, but plain Jane is good enough now. An example with two rows and two columns will suffice.
Now, I know how to create a static table in HTML inside a div, but I need this to overlay an existing page with JavaScript.
All I was able to do so far is this
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TESTING CODE</title>
<script language="JavaScript" type="text/javascript">
function routeIt (kontent, zPath) {
if (zPath == 'Meeting') {
var ta1 = document.createElement('div');
ta1.setAttribute("name","travel");
ta1.setAttribute("id","mobile");
ta1.setAttribute("style","position:float");
ta1.setAttribute("id","mobile");
ta1.setAttribute("width","600");
ta1.setAttribute("height","100");
ta1.setAttribute("left","120");
ta1.setAttribute("top","320");
document.getElementById.('mobile').innerHTML = 'This venerable day of march the 42nd I pledge to uphold the traditions of all the welders...';
}
</script>
</head>
<body>
<a class="linqs" href="javascript:routeIt('Hello','Meeting') "><span title="Make comments about the Meeting...">Meetings</span></a>
<a class="linqs" href="javascript:routeIt('Tzigane','Resolution')"><span title="Make comments about your Portfolio...">Portfolio</span></a>
<a class="linqs2" href="javascript:routeIt('Kratt','SendEmail') "><span title="Emails from ...">Email</span></a>
</body>
</html>
The last line does not work and the DIV or the contents do not show up... but it does not err in creating the DIV. So, I'm not even able to get the DIV to come up!
The data lists are coming in as follows:
zList1 = [['zebra','24'],['cat','153'],['paycheck','$123.56']]
zList2 = [['Wine','gloogloo'],['cereal','bowl'],['garage','three cars']]
Any help would be appreciated...
Dennis
Here is The Bug Fixed code: Try and post the comment,
function routeIt (kontent, zPath) {
if (zPath == 'Meeting') {
var ta1 = document.createElement('div');
ta1.setAttribute("name","travel");
ta1.setAttribute("id","mobile");
ta1.setAttribute("style","position:float");
ta1.setAttribute("id","mobile");
ta1.setAttribute("width","600");
ta1.setAttribute("height","100");
ta1.setAttribute("left","120");
ta1.setAttribute("top","320");
document.getElementById("bodyID").appendChild(ta1);
document.getElementById.('mobile').innerHTML = 'This venerable day of march the 42nd I pledge to uphold the traditions of all the welders...';
}
}
add id="bodyID" to the the body tag definition.
Cheers, Arun
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
//function del () {
var x= new Date ();
var date= x.getDate ();
var hours= x.getHours();
var minutes=x.getMinutes();
var sec= x.getSeconds();
document.write(minutes +":"+ sec )
if (minutes=="33"){
//alert ("time is over")
document.getElementById('airtel').removeChild(airtel);
}
//}
</script>
</head>
<body>
<div id="airtel">
<div id="vodafone">vodaphone</div>
<div id="idea">idea</div>
</div>
</body>
</html>
Using jQuery Library removes the pain from using Javascript for handling the DOM, i sugest you give it a try.
But if you just want that working in native Javascript, what you need to do is traverse to the parentNode and then remove the child you want.
var element = document.getElementById('airtel');
element.parentNode.removeChild(element);
Maybe you are better off using jQuery with it's remove method for this.
You should get the element of 'airtel' then remove it from it's parent, which is the Body tag.
var airtel= document.getElementById('airtel');
document.getElementsByTagName('body')[0].removeChild(airtel);
I have made a Language Translator but that translates hard coded strings in a html page using java script. I would to make it flexible by allowing user enter a string into a textbox/textarea and my app can then translate it for the user.
Any help would be appreciable :)
Heres my code: (please note to enter your own API key)
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://www.google.com/jsapi?key=YOUR_API_KEY_HERE" type="text/javascript"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var content = document.getElementById('content');
// Setting the text in the div.
content.innerHTML = '<div id="text">Hola, me alegro mucho de verte.<\/div><div id="translation"/>';
// Grabbing the text to translate
var text = document.getElementById("text").innerHTML;
// Translate from Spanish to English, and have the callback of the request
google.language.translate(text, 'es', 'en', function(result) {
var translated = document.getElementById("translation");
if (result.translation) {
translated.innerHTML = result.translation;
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="content">Loading...</div>
</body>
</html>
You can use the google translate api
You can make calls to the api and get a translated version. Refer this
Put this in html
<button type="button" onclick="initialize()">Translate</button>
And this in your initialize function if content is a textbox
content.value = "your translated text"
This will change your text in the same box
This code attempts to dynamically switch the class of the StateContainer div from StateOne to StateTwo to alternate the visibility of the DIV.
When I run it, I always see the following both before and after clicking the button.
Visible first
Visible first
Visible first
Visible first
Would appreciate any suggestions for why this code does not work the way I'm expecting.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<style type="text/css">
.StateOne .InitiallyHidden { display: none; }
.StateTwo .InitiallyVisible { display: none; }
</style>
<script type="text/javascript">
$(document).ready(function()
{
$('.x').click(
var s = document.GetElementById('StateContainer');
s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
);
});
</script>
</head>
<body>
<button class="x">Change StateContainer</button>
<div class="StateOne" id="StateContainer">
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
<div class="InitiallyVisible">Visible first</div>
<div class="InitiallyHidden">Visible second</div>
</div>
</body>
</html>
It looks like you're not using the click event properly. You need to provide it with a function:
$('.x').click(function() {
var s = document.getElementById('StateContainer');
s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
});
Also, if you're already using jQuery, the following syntax is much shorter than document.getElementById (which doesn't have a capital G, by the way):
var s = $("#StateContainer")[0];
Steve