When I run the code on my site it starts off with image jackhammers1 instead of jackhammers0 and won't execute the startBouncing() method. it just displays the form with one image and no animation. It is an example copied from the textbook so I don't see how it shouldn't work.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JackHammer</title>
<script type="text/javascript">
/* <![CDATA[ */
var jackhammers = newArray(11);
var curJackhammer = 0;
var direction;
var begin;
jackhammers[0] = "jackhammer0.gif";
jackhammers[1] = "jackhammer1.gif";
jackhammers[2] = "jackhammer2.gif";
jackhammers[3] = "jackhammer3.gif";
jackhammers[4] = "jackhammer4.gif";
jackhammers[5] = "jackhammer5.gif";
jackhammers[6] = "jackhammer6.gif";
jackhammers[7] = "jackhammer7.gif";
jackhammers[8] = "jackhammer8.gif";
jackhammers[9] = "jackhammer9.gif";
jackhammers[10] = "jackhammer10.gif";
function bounce(){
if(curJackhammer == 10)
curJackhammer = 0;
else
++curJackhammer;
document.getElementsByTagName("img")[0].src = jackhammers[curJackhammer].src;
if(curJackhammer == 0)
direction = "up";
else if(curJackhammer == 10)
direction = "down";
document.getElementsByTagName("img")[0].src = jackhammers[curJackhammer];
}
function startBouncing(){
if (begin)
clearInterval (begin);
begin = setInterval("bounce()",90);
}
/* ]]> */
</script>
</head>
<body>
<h1>Jackhammer Man</h1>
<p><img src="jackhammer1.gif" height="113" width="100" alt="Image of a man with a jackhammer." /></p>
<form action="" enctype="text/plain">
<p>
<input type="button" value="Start Bouncing" onclick="startBouncing();" />
<input type="button" value="Stop Bouncing" onclick="clearInterval(begin);" />
</p>
</form>
</body>
</html>
It starts with jackhammer1 because in the html source you have <img src="jackhammer1.gif"... instead of jackhammer0, and also when the user clicks the button to start bouncing, it will start with jackhammer1 because in the javascript you increment curJackhammer from 0 to 1 before you swap the images.
I think the following code will do what you want... (not sure what you were trying to do with the direction = "up" / "down", though).
And note that curly brackets are usually needed after if and else in javascript, though they are optional if only a single command follows.
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JackHammer</title>
<script type="text/javascript">
var curJackhammer = 0;
var begin;
function bounce() {
document.getElementsByTagName('img')[0].src =
'jackhammer' + curJackhammer + '.gif';
curJackhammer ++;
if (curJackhammer > 10) {
curJackhammer = 0;
}
}
function startBouncing(){
if (begin) {
clearInterval (begin);
}
begin = setInterval(bounce,90);
}
</script>
</head>
<body>
<h1>Jackhammer Man</h1>
<p><img src="jackhammer1.gif" height="113" width="100"
alt="Image of a man with a jackhammer." /></p>
<form action="" enctype="text/plain">
<p>
<input type="button" value="Start Bouncing" onclick="startBouncing();" />
<input type="button" value="Stop Bouncing" onclick="clearInterval(begin);" />
</p>
</form>
</body>
</html>
Related
The dleMonitor and script in the code below are not working. Why? I think that timeout block need to be set in template file. I just want to make logout from profile after timeout. Help me please.
<!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"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
<title>
<ui:insert name="title">CMS</ui:insert>
</title>
<link rel="stylesheet" type="text/css" href="/cms/css/style.css"/>
<h:outputScript name="jsf.js" library="javax.faces" target="head"/>
<script type="text/javascript">
var timeOut = 1000 * 60 * 1; // 30 minutes
var lastActivity = new Date().getTime();
var checkTimeout;
checkTimeOut = function(){
if(new Date().getTime() > lastActivity + timeOut){
window.location.replace('http://sidanmor.com');
}else{
window.setTimeout(checkTimeOut, 1000); // check once per second
}
}
</script>
</h:head>
<body>
<p:idleMonitor timeout="5000" listener="#{LogoutServlet.service()}"
onidle="PF('alertExpire').show();">
</p:idleMonitor>
<p:idleMonitor widgetVar="idle" timeout="300" onidle="alert('OK')" />
<div id="minHeight"></div>
<div id="outer">
<div id="clearheader"></div>
<div id="nav">
<ui:include src="/templates/#{mainCms.edition}/nav.xhtml" />
</div>
<div id="content">
<ui:insert name="content" > Content area. </ui:insert>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer">
www.com.ua
</p>
</div>
<div id="header">
<a href="/cms" class="logo" title="ом">
<span class="main">г</span>
</a>
</div>
</body>
</html>
I'll assume that this code
window.location.replace('http://sidanmor.com');
logs you out from the system. So here
var checkTimeout;
checkTimeOut = function(){
if(new Date().getTime() > lastActivity + timeOut){
window.location.replace('http://sidanmor.com');
}else{
window.setTimeout(checkTimeOut, 1000); // check once per second
}
}
you are assigning the function into checkTimeout variable without executing it, so adding this
checkTimeout(); // runs the function
will execute the function and run it again every second.
OK this is what im trying to do here:
I simply want to randomize the image under dv id splash and i have images placed in the root folder. I tried to randomize the code using function randomImg() here but the output is empty.
Any ideas?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML</title>
<meta name="author" content="blahblahblah" />
<!-- Date: 2014-03-06 -->
<script type="text/javascript">
function randomImg()
{
var images = new Array();
images[0] = "img06.jpg";
images[1] = "img07.jpg";
images[4] = "img08.jpg";
images[5] = "img09.jpg";
images[6] = "img10.jpg";
var random = Math.ceil(Math.random()* images.length);
if (random == 0) { random =1; }
document.write('<img src="images[random]">');
}
</script>
</head>
<body>
<div id="header">
<div id="logo">
<h1>Welcome</h1>
<h2>Flower of the day</h2>
</div>
<div id="splash"><img src="virus.jpg" alt="random images"/></div>
<script type="text/javascript">
document.getElementById('splash').firstElementChild.src = 'img09.jpg';
randomImg();
</script>
</div>
</body>
</html>
Update this html:
<div id="splash"><img id='image' src="virus.jpg" alt="random images"/></div>
Instead of document.write('<img src="images[random]">'); put
document.getElementById('image').src=images[random];
Else
Simply replace document.write('<img src="images[random]">'); with
document.getElementById('splash').firstElementChild.src =images[random];
I have a page, where i'd like to use function. First a have a addTitle() function which is generated into a div. This is the function:
function addTitle(){
var ni = document.getElementById('div_fieldset');
var titleSpan = document.createElement("span");
ni.appendChild(titleSpan);
titleSpan.setAttribute("id","titleSpan");
titleSpan.setAttribute("class","fields");
if(titleSpan.previousSibling.nodeName=="#text"){
document.getElementById("titleSpan").style.paddingLeft="85px";
titleSpan.style.width="86.5%";
}else{
var titleSelect = document.createElement("select");
titleSelect.setAttribute("size","1");
titleSelect.setAttribute("name","titleSelect");
titleSelect.setAttribute("class","logicalOpSelect");
orOption=document.createElement("OPTION");
orText=document.createTextNode("OR");
orOption.appendChild(orText);
orOption.setAttribute("value","OR");
titleSelect.appendChild(orOption);
andOption=document.createElement("OPTION");
andText=document.createTextNode("AND");
andOption.appendChild(andText);
andOption.setAttribute("value","AND");
titleSelect.appendChild(andOption);
titleSpan.appendChild(titleSelect);
}
var titleSpanInner = document.createElement("span");
titleSpan.appendChild(titleSpanInner);
titleSpanInner.setAttribute("class","labels");
titleSpanInner.innerHTML="Title";
var titleInput = document.createElement("input");
titleSpan.appendChild(titleInput);
titleInput.setAttribute("class","input_text");
titleInput.setAttribute("type","text");
titleInput.setAttribute("name","title_input");
titleInput.setAttribute("size","50");
var removeButton = document.createElement("input");
titleSpan.appendChild(removeButton);
removeButton.setAttribute("id","removeTitle");
removeButton.setAttribute("class","removeButton");
removeButton.setAttribute("type","button");
removeButton.setAttribute("value","Delete field");
removeButton.setAttribute("onClick","remove(this.id)");
}
Then here is the html 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="X-UA-Compatible" content="IE=8"/>
<title>Search</title>
<link rel="stylesheet" href="css/search.css" type="text/css" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<script type="text/javascript">
function AddTitle(){
...
Here is the addTitle code, which is placed above
...
}
</script>
<body onload="addTitle();">
<div id="box">
<form name="search" method="post" action="search.php">
<div id="div_fieldset">
</div>
<input class="button" type="submit" value="Search">
</form>
</div>
</body>
</html>
And in internet eplorer 8 or 9 the field_set div has't any content, only the titleSpan span. But if i put the whole addTitle source into the field_set div, then the last section of the addTitle does'n appear, this one:
var removeButton = document.createElement("input");
titleSpan.appendChild(removeButton);
removeButton.setAttribute("id","removeTitle");
removeButton.setAttribute("class","removeButton");
removeButton.setAttribute("type","button");
removeButton.setAttribute("value","Delete field");
removeButton.setAttribute("onClick","remove(this.id)");
What is the problem and what is the solution? Thanks!
Here is a language translation code that google provides to detect the language in which the code is typed . This is the default code in which it translates the code from "var text=" field . I want to modify this code so as to recieve input from the user in a text box and on clicking the submit button it should display the result of language detected on the same page .
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Language API - Basic Translation</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize() {
var text = "¿Dónde está el baño?";
google.language.detect(text, function(result) {
if (!result.error) {
var language = 'unknown';
for (l in google.language.Languages) {
if (google.language.Languages[l] == result.language) {
language = l;
break;
}
}
var container = document.getElementById("detection");
container.innerHTML = text + " is: <b>" + language + "</b>";
}
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="detection"></div>
</body>
</html>
Try this
<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Language API - Basic Translation</title>
<script type="text/javascript" src="//www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("language", "1");
function initialize(text) {
google.language.detect(text, function(result) {
if (!result.error) {
var language = 'unknown';
for (l in google.language.Languages) {
if (google.language.Languages[l] == result.language) {
language = l;
break;
}
}
var container = document.getElementById("detection");
container.innerHTML = text + " is: <b>" + language + "</b>";
}
});
return false;
}
</script>
</head>
<body>
<form onsubmit="return initialize(this.text1.value">
<input type="text" value="" name="text1" /><input type="submit" />
</form>
<div id="detection"></div>
</body>
</html>
The cat that is on this web page is suppose to move when you click it to move and stop moving when you click it. For some reason mine is not doing it. I do not receive any errors either. Can someone point me in the direction of what I am doing wrong?
<!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>Fat Cat Dancing</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type= "text/javscript">
<![CDATA[
var cats = new Array(3);
var fatCat = 0;
var direction;
var begin;
cats[0] = "fatcat0.gif";
cats[1] = "fatcat1.gif";
cats[2] = "fatcat2.gif";
function dance() {
if (fatCat == 0)
direction = "right";
else if (fatCat == 2)
direction = "left"
if (direction == "right")
++fatCat;
else if (direction == "left")
--fatCat;
document.animation.src = cats[fatCat];
}
function startDancing() {
if (begin)
clearInterval(begin);
begin = setInterval("dance()",200);
}
]]>
</script>
</head>
<body>
<h1>Fat Cat Dancing</h1>
<p><img src="fatcat1.gif" name="animation" alt="animation" id="animation" /></p>
<form action="">
<input type="button" name="run" value="Start Dancing" onClick="startDancing();" />
<input type="button" name="stop" value="Stop Dancing" onClick="clearInterval(begin);" />
</form>
</body>
</html>
<!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>Fat Cat Dancing</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<script type= "text/javascript">
<![CDATA[
var cats = new Array(3);
var fatCat = 0;
var direction;
var begin;
cats[0] = "fatcat0.gif";
cats[1] = "fatcat1.gif";
cats[2] = "fatcat2.gif";
function dance() {
if (fatCat == 0)
direction = "right";
else if (fatCat == 2)
direction = "left";
if (direction == "right")
++fatCat;
else if (direction == "left")
--fatCat;
document.animation.src = cats[fatCat];
}
function startDancing() {
if (begin)
clearInterval(begin);
begin = setInterval("dance();",200);
}
]]>
</script>
</head>
<body>
<h1>Fat Cat Dancing</h1>
<p><img src="fatcat1.gif" name="animation" alt="animation" id="animation"/></p>
<form action= "">
<input type="button" name="run" value="Start Dancing" onClick="startDancing();"/>
<input type="button" name="stop" value="Stop Dancing " onClick="clearInterval(begin);"/>
You forgot to delimit a few lines.
EDIT: Good eye, Zecc! You also spelled "javascript" wrong in your <script> tag.
First of all, your <script> tag reads text/javscript instead of text/javascript. That probably makes the whole script be ignored.
If after that it still doesn't work, try substituting document.animation.src = cats[fatCat]; with document.getElementById('animation').src = cats[fatCat];
Zecc's answer might be correct, I can't be bothered setting this up to test. However you're code style should be better. The indentation is all akimbo in the example, I hope thats just because of the way code in SO is formatted. But you are also missing brackets around most of the if statements, which compounds the problem of poor indentation
Is
if (begin)
clearInterval(begin);
begin = setInterval("dance()",200);
correct, or should it be:
if (begin) {
clearInterval(begin);
begin = setInterval("dance()",200);
}
because the code provided is ambiguous as to the meaning.