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.
Related
I am new to JQuery and I am trying to make a search box. When I type in the search box it doesn't do anything and I don't know why. Any help would be appreciated. Here is my 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>Search Test</title>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $cells = $("td");
$("#search").keyup(function() {
var val = $.trim(this.value).toUpperCase();
if (val === "")
$cells.parent().show();
else {
$cells.parent().hide();
$cells.filter(function() {
return -1 != $(this).text().toUpperCase().indexOf(val); }).parent().show();
}
});
});
</script>
<form action="" method="post">
<label for="search">Search</label>
<input type="text" name="search" id="search" class="inputfield" />
</form>
<table border="0" align="left">
<tr><td>Gripper 25x8-12 GR25812</td></tr>
<tr><td>Gripper 25x10-12 GR251012</td></tr>
<tr><td>Gripper 26x9-12 GR26912</td></tr>
<tr><td>Gripper 26x12-12 GR261212</td></tr>
</table>
</body>
</html>
This is working code I have tried it in Fiddle and it works
Try to search 25x in input box you will find the output.
Updated
May be there are some zero-width spaces between your code,
I check and I got Error in your code like,
Uncaught SyntaxError: Unexpected token ILLEGAL
Reference Chrome Uncaught Syntax Error: Unexpected Token ILLEGAL
And if you rewrite above code like,
$(function(){
var $cells = $("td");
$("#search").keyup(function() {
var val = $.trim($(this).val()).toUpperCase();
if (val === "")
$cells.parent().show();
else {
$cells.parent().hide();
$cells.filter(function() {return -1 != $(this).text().toUpperCase().indexOf(val);}).parent().show();
}
});
})
Then I found it works
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>
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>
I want to expand hidden text on a webpage and after some (re)search on google i came across the following code:
<!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>
<title>Test</title>
<script type="text/javascript">
function Expand(node)
{
// Change the image (if there is an image)
if (node.childNodes.length > 0)
{
if (node.firstChild.tagName == "IMG")
{
node.firstChild.src = "minus.gif";
}
}
node.nextSibling.style.display = '';
}
function Collapse(node)
{
// Change the image (if there is an image)
if (node.childNodes.length > 0)
{
if (node.firstChild.tagName == "IMG")
{
node.firstChild.src = "plus.gif";
}
}
node.nextSibling.style.display = 'none';
}
function Toggle(node)
{
// Unfold the branch if it isn't visible
if (node.nextSibling.style.display == 'none')
{
Expand(node);
}
// Collapse the branch if it IS visible
else
{
Collapse(node);
}
node.childNodes[1].nodeValue = (node.nextSibling.style.display == 'none')? 'More...' : 'Less...';
}
</script>
</head>
<body>
<a onclick="Toggle(this)" style="cursor:pointer;"><img src="plus.gif" alt="Expand/Collapse" /> More...</a><p style="display:none;">This is a sample of the expanded text that will show up when "+ More..." is clicked</p>
</body>
</html>
Now the script displays a .gif image of a plus sign(expand) with 'More...' beside it and when the .gif file or the 'More...' is clicked the hidden text appears and the plus.gif is replaced with a minus.gif and 'More...' changes to 'Less...'
but i want to implement it in another way, i want that once the expand (plus.gif) is clicked, no other .gif should appear again, i dont know how to modify the code to do it, so friends please help me out
i am a newbie in javascript so such a dumb doubt had to come
Thanx :)
Just change your code to 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>
<title>Test</title>
<script type="text/javascript">
function ExpandDelete(node)
{
if (node.nextSibling.style.display == 'none')
{
node.nextSibling.style.display = '';
node.parentNode.removeChild(node);
}
}
</script>
</head>
<body>
<a onclick="ExpandDelete(this);" style="cursor:pointer;"><img src="plus.gif" alt="Expand" /> More...</a><p style="display:none;">This is a sample of the expanded text that will show up when "+ More..." is clicked</p>
</body>
</html>