Hello I am trying to create a simple example for widgets.
My html:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:widget="http://www.netvibes.com/ns/">
<head>
<title>Hello World Widget</title>
<script src="js\widget.js"></script>
<script>
function widgetLoading() {
if (widget) {
helloWorld();
}
}
widgetLoading();
</script>
</head>
<body>
</body>
</html>
My widget.js:
function helloWorld() {
widget.body.innerHTML="Hello World!!!";
}
I get the error: Uncaught ReferenceError: widget is not defined
Do i have to add something more so that i can print "Hello World!!!"
Related
I can't even get this to work. If I put a debug on the first line of javascript it never gets to it. I'm stumped.
<!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>
<title></title>
</head>
<body>
<script type="text/javascript">
function Hello()
{
alert('Hello');
}
</script>
</body>
</html>
You just forgot to invoke the function like this: Hello(). Here is the working snippet:
<!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>
<title></title>
</head>
<body>
<script type="text/javascript">
function Hello()
{
alert('Hello');
}
Hello();
</script>
</body>
</html>
Need to call the function as follows
<script type="text/javascript">
function Hello()
{
alert('Hello');
}
Hello(); //----> function call
</script>
Just call the function
<!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>
<title></title>
</head>
<body>
<script type="text/javascript">
function Hello()
{
alert('Hello');
}
Hello();
</script>
</body>
</html>
This is what I have so far below. If I hard code the file: media/video2.mp4 in the function it works but when I make it a variable its not passing it through correctly because I keep get this error:
Error loading player: No playable sources found
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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My JWPlayer</title>
<script type="text/javascript" src="jwplayer/jwplayer.js" ></script>
<script type="text/javascript">
function changeVideo(filename) {
jwplayer("video").setup({
file: " + filename + ",
height: 360,
width: 640,
});
jwplayer('video').load();
}
</script>
</head>
<body>
<div id="video">Loading the player ...</div>
<script type="text/javascript">
jwplayer("video").setup({
file: "media/video1.mp4",
height: 360,
width: 640
});
</script>
<p>Play Video 2</p>
</body>
</html>
It is because you are placing variable filename in the script as a string literal.
just change this line
file: " + filename + ",
to
file: filename,
and it will work fine!
I have a sample code:
in index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
</head>
<body>
<input type="text" value="" name="test" id="text_input">
<iframe src="iframe.html">
</body>
</html>
And iframe.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>iframe</title>
<script>
function getValue(text) {
document.getElementById('text_input').value = text;
}
</script>
</head>
<body>
Click
</body>
</html>
When click on a tag, value "text" can not be passed on from iframe to index.html, how to fix it ?
Use parent to get parent window of iframe. Try this
function getValue(text) {
parent.document.getElementById('text_input').value = text;
}
I am using the following code.I want to pass property bgcolor as argument
<!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>Untitled Document</title>
<script type="text/javascript">
function myFunction(key,valu)
{
document.body.key=valu;
}
</script>
</head>
<body onLoad="myFunction('bgColor','red');">
</body>
</html>
But it is not working.
you can try
document.body[key]=valu;
key is string in this case.
If you're passing a property as a string, you must use the square-bracket notation rather than dot notation:
function myFunction(key,valu)
{
document.body[key]=valu;
}
I suggest this since bgColor and onload attribute is so '90s
<!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>Untitled Document</title>
<script type="text/javascript">
function setStyle(key,valu) {
document.body.style[key] = valu;
}
window.onload=function() {
setStyle("backgroundColor","red")
}
</script>
</head>
<body>
</body>
</html>
It won't work ever,
try this
function change(key , value)
{
document.body.setAttribute(key, value);
}
This works:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script src="/js/msgv/widgets/excanvas2.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
function canvasTest(){
console.log("beginning canvasTest");
var b_canvas = document.getElementById("regularCanvas");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
</script>
</head>
<body onLoad="canvasTest()">
<canvas id="regularCanvas" style="border: 1px dotted; float: left;" class="clear" height="225" width="300"></canvas>
</body>
</html>
This doesn't:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
The only difference between the two is where I'm loading it in the page. Everything works fine when I load excanvas in the head. I get an error when I load it at the bottom of the body.
<script type="text/javascript" charset="utf-8">
function canvasTest(){
console.log("beginning canvasTest");
var b_canvas = document.getElementById("regularCanvas");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
}
</script>
</head>
<body onLoad="canvasTest()">
<canvas id="regularCanvas" style="border: 1px dotted; float: left;" class="clear" height="225" width="300"></canvas>
<script src="/js/msgv/widgets/excanvas2.js" type="text/javascript"></script>
</body>
</html>
It is well explained in the official documentation:
The excanvas.js file must be included in the page before any occurrences of canvas elements in the markup. This is due to limitations in IE and we need to do our magic before IE sees any instance of in the markup. It is recommended to put it in the head.