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
Related
I am new to php and hoping someone can help.
I have been able to get an RSS feed up and running by pulling different code from over the internet.
What I am trying to achieve is, if the RSS feed is empty, I would like it to display a message "There are no current warnings"
If there are items in the RSS feed, I would like it to display the Item, along with a div below that is set to hidden.
<!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" xml:lang="en" dir="ltr" lang="en">
<head>
<title>Weather Warnings for Queensland - Issued by the Bureau of Meteorology</title></head>
<link type="text/css" href="rss-style.css" rel="stylesheet">
</head>
<script type="text/javascript">
window.setInterval (BlinkIt, 500);
var color = "#0000FF";
function BlinkIt () {
var blink = document.getElementById ("blink");
color = (color == "#FA000C")? "#0000FF" : "#FA000C";
blink.style.color = color;
}
</script>
<body bgcolor="#999">
<h1>Weather Warnings for Queensland - Issued by the Bureau of Meteorology</h1>
<hr>
<br>
<!-- display current weather warnings -->
<fieldset class="rsslib">
<?php
require_once("rsslib.php");
$url = "http://www.bom.gov.au/fwo/IDZ00056.warnings_qld.xml";
echo RSS_Display($url, 3, false, true)
//if there is no warning, i would like to display text saying "There are no current warnings"
// if there are warnings, I would like it to display the RSS, and also display the below wrapper blinking text.
?>
</fieldset>
<!---------------------------- echo "There are no current weather warnings" ---------------------------------->
<!-- this is where I put my blinking text, this is not currently set to only display when there is a warning-->
<div id='wrapper' style="display: none">
<div id="blink">
Current Weather Warning!
</div>
<div id="direction">
Please go to www.bom.gov.au for more details.
</div>
</div>
</body>
</html>
Any help would be much appreciated, I can copy in the rsslib.php if need be??
When you call RSS_Display, instead of displaying it immediately, store its return value in a variable. Then you can test whether it's an empty string (nothing to display) or not, and act accordingly:
$rss = RSS_Display($url, 3, false, true);
if ($rss == '')
{
// nothing shown, do whatever you want
}
else
{
// something to display
echo $rss;
// you can add other stuff here
}
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;
}
}
});
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);
<!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