|
JavaScript - Noobie Question
Hello,
I am working on making a starting hub website for myself. I have four images that are the background image in a table. I would like to have all four pictures be something different every time the page is loaded. Currently I can only get one image to rotate and the rest just show blank with no picture at all. I would like to have all four pictures show and have them rotate their image on page refreshes. Is this possible using just Javascript and HTML? Here is my code: This is my Javascript Code: <script type="text/javascript"><!--
var backgroundImages=new Array(5);
backgroundImages[0]="images/backgrounds/firework.jpg";
backgroundImages[1]="images/backgrounds/friends.jpg";
backgroundImages[2]="images/backgrounds/firework.jpg";
backgroundImages[3]="images/backgrounds/friends.jpg";
backgroundImages[4]="images/backgrounds/tigers.jpg";
onload=function(){
var e=(document.getElementById)?document.getElementById("myTableId"):(document.all)?document.all.myTableId:(document.layers)?document.myTableId:null;
if(!e)return true;
e.style.backgroundImage="url("+backgroundImages[Math.floor(Math.random()*backgroundImages.length)]+")";
}
//--></script>
and here is how I am calling the elements inside of the table: Code: <table cellpadding="1" cellspacing="0" border="0"> <tr> <td id="myTableId" width="302" height="422"> <a href="http://www.meachaverse.com/" target="_blank">meachaverse</a><br /> <a href="http://www.mittnmusic.com/" target="_blank">mittnmusic</a><br /> <a href="http://worldbycarey.blogspot.com/" target="_blank">worldbycarey</a><br /> <a href="http://www.certaingravity.com" target="_blank">certaingravity</a><br /> </td> <td id="myTableId" width="302" height="422"> <a href="http://www.meachaverse.com/" target="_blank">meachaverse</a><br /> <a href="http://www.mittnmusic.com/" target="_blank">mittnmusic</a><br /> <a href="http://worldbycarey.blogspot.com/" target="_blank">worldbycarey</a><br /> <a href="http://www.certaingravity.com" target="_blank">certaingravity</a><br /> </td> ANY Help with this would be much appreciated!!! The site is http://davenport80.comli.com Similar TutorialsJust wondering if it's possible to prevent a page displaying until the content is fully loaded. I have a form with a load of check boxes that reloads itself on each user click and it would be nice to smooth things out a little, e.g. hold a screenshot of the page until the reload is complete and then instantly show that one. Stupid question? Cheers, Nick I'm completely new to Java Script, but about a year ago I decided to learn how to build a website from scratch. I am confident with HTML and CSS, but Java seems to be flying over my head. Could anybody possibly help me with my coding? I'm sure the problem is obvious, but I don't know if this is the right place to post this sort of beginnier question. So if it is not, please redirect me to where I can. Thanks a lot! Quote: <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> <html> <head> <title></title> </head> <body> <script type="text/javascript"> function addzero(zero) { return zero; } var d = new Date(); var time=d.getHours function tod1 () { document.write("The time is "); document.write(addzero(d.getHours())); document.write(":"); document.write(addzero(d.getMinutes())); } function tod2 () { document.write("The time is "); document.write(addzero(d.getHours()+1)); document.write(":"); document.write(addzero(d.getMinutes())); } function tod3 () { document.write("The time is "); document.write(addzero(d.getHours()+2)); document.write(":"); document.write(addzero(d.getMinutes())); } function tod4 () { document.write("The time is "); document.write(addzero(d.getHours()+3)); document.write(":"); document.write(addzero(d.getMinutes())); } if (time>10) { alert("Good morning"); } </script> <p id="city"></p> <form name="form" action="wtf.php" method="post"> Vancouver: <input type="radio" name="city" id="Vancouver" onchange="tod1()"> Calgary: <input type="radio" name="city" id="Calgary" onchange="tod2()"> Winnipeg: <input type="radio" name="city" id="Winnipeg" onchange="tod3()"> Toronto: <input type="radio" name="city" id="Toronto" onchange="tod4()"> </form> </body> </html> hey , i got 2 function , the one working and the other one is'nt heres the functions : Code: var toDisplay = "f";
function human(){
var toAdd = toDisplay.substring(0,1);
setTimeout(human , 500);
document.getElementById('box').innerHTML += toAdd;
}
human(); // works (display "f" every half a sec)
function human2(toDisplay2){
var toAdd = toDisplay2.substring(0,1);
var t = setTimeout("human2(toDisplay2)" , 500);
document.getElementById('box').innerHTML += toAdd;
}
human2("dsd"); // not working (only display "d" and stop)
the first function works ( keep printing "f" every 0.5 sec ) the second function only work once and than stop ( print "d" and than stop ) what's the problem with the second function? thanks , Mor. Code: <body>
<title>Array Games</title>
<script type="text/javascript">
var City = new Array();
var uNoGo = false;
var endIt = false;
alert("Hello! This program does two things! One, it asks for five cities. It stores the city names in an array cause arrays are what we're doing this chapter. Then it tells you the city names VIA said array! Secondly, it asks you for a number between 1 and 250,00. It then checks if the number is a perfect square! Uses Binary Search. ;)");
while(!endIt)
{
for(var i=0;i<5;i++)
{
City[i] = prompt("Please enter in a city name!","");
}
for(var i=1;i<6;i++)
{
var msg += "\n" + "Your number " + i + " city is: " + City[i-1];
}
alert(msg);
while(!uNoGo)
{
var Sq = prompt("Enter in a number between 1 and 250,000.", "");
if(Sq >= 1 && Sq <= 250000)
{
var Mebe = Math.sqrt(Sq);
if(Math.round(Mebe)*Math.round(Mebe)==Sq)
{
alert("Gratz! Your number is a perfect square.");
}
else
{
alert("We're sorry, the number you have chosen is not a perfect square. It may be a circle but we don't know. Good luck next time!");
}
uNoGo = true;
}
else
{
alert("You entered in something invalid! WARNING NUCLEAR MELTDOWN IMMINENT!");
}
}
var cont = prompt("Do you want to ride again? Type N to stop, anything else to continue.","");
if(cont=="\\")
{
alert("As you came around the corner... SSSSSSSSSSSSSSSSSS. There goes your dirt house.");
}
if(cont=="N" || cont=="n")
{
endIt=true;
alert("Thank you, come again.");
}
}
</script>
</body>
</html>
I am trying make this codes work in a browser as javascript but nothing shows up hey all, what it says in the title, this block of code wont work and i dont know why. the first prompt box appears but not the "can vote, but can't drink" reply. can anyone offer any ideas? <!DOCTYPE html> <html> <head> <title>legal age</title> <script type="text/javascript"> var your_age = prompt("how old are you?"); if ((age > 18) && (age < 21)) { document.writeln("can vote, but can't drink."); } </script> </body> </html> kind regards, Redd . Ok i have been working on this for a while now. I have to have 3 fish swim across the screen in both direction. I have tried a few things but nothing is working. Can someone please explain to me what I am doing wrong. here is my code for you guys to look at it. 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>Fish tank</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
// <![CDATA[
var fishPos = new Array(3);
fishPos[0] = "fish1.gif";
fishPos[1] = "fish2.gif";
fishPos[2] = "fish3.gif";
var fillPosition = 10;
for(var i = 0; i < 50; ++i) {
horizontal[i] = fillPosition;
fillPosition += 10;
}
function fishSwim(fishNumber) {
document.getElementById("fishPos").style.left = horizontal + "px";
++fishPos[fishNumber];
if (fishPos[fishNumber] == 49)
fishPos[fishNumber] = 0;
}
function startSwimming() {
setInterval(fish1Swim, 100);
}
// ]]>
</script>
</head>
<body onload="startSwimming();">
<p><span id="fish1" style=
"position:absolute; left:10px; top:10px"><img src="fish1.gif" alt="Image of a fish" /></span></p>
<p><span id="fish2" style=
"position:absolute; left:10px; top:120px"><img src="fish3.gif" alt="Image of a fish" /></span></p>
<p><span id="fish3" style=
"position:absolute; left:10px; top:250px"><img src="fish2.gif" alt="Image of a fish" /></span></p>
</body>
</html>
I am really not understanding and in my book it only give me a page to read about the animation. I am still new to it. Thanks for looking hello all ive been asked to create a javascript slideshow.... and i don't really understand it that much i know a little javscript but not much........ is thier any helpful sites that i can use to teach you step by step to make a javascript slide show???? also if don't want loads of code to be used, i want the code to be clean insted of loads and loads of code what is just unessary. i will be linking the javascript file to the html file so i need to keep the code to a min LOL CHEERS Hi all I am doing an assigment and have gotten to the end and cannot get the unordered list to work. If I try having my </script> tag below the </ul> it does not display anything If i have it above it will only display the varible names or what ever I type between the <li> </li> tag and not the varible assigment. num1,2,3,4 being the varible name. ie. </script> <ul> <li>num1</li> I have tryed <li>+num2+</li> also tryed <li>(num3)</li> also tryed <li>'num4'</li> also tryed and does not display </ul> </head> </html> The following does not display any thing <ul> <li>num1</li> I have tryed <li>+num2+</li> also tryed <li>(num3)</li> also tryed <li>'num4'</li> also tryed </ul> </script> </head> </html> I need to get the <li></li> to display not what I type in there but the assigment of the varible name I put in there.,or the output the varible calculation produces. Hope that was easy to understand lol Any advise would be awesome, cheers Shayne Darcy. Could someone please take a look at my code? It's a simple quiz with one multiple choice question and one fill in the blank. When the user clicks on 'submit' I tried to show some kind of response with correct/incorrect images next to the question. It works with the multiple choice question, but not with the fill in the blank. How can I get the fill in the blank question to work. It always shows the answer as being wrong. Thank you. Quote: answer_list = [ ['False'], ['body','hips','knees'] // Note: No comma after final entry ]; response = []; function setAnswer(question, answer) { response[question] = answer; } function CheckAnswers() { var correct = 0; var flag, resp, answ; for (var i = 0; i < answer_list.length; i++) { flag = false; for(var j=0; j<answer_list[i].length; j++){ resp = response[i].toLowerCase(); answ = answer_list[i][j].toLowerCase(); ################################################################################################# if (response[0] == answer_list[0]) { flag = true; document.myquiz.a1c.style.backgroundImage="url('correct.gif')"; } else{ document.myquiz.a1c.style.backgroundImage = "url('incorrect.gif')"; document.myquiz.a1c.value = " ANS: False. Position the head snugly against the top bar of the frame and then bring the foot board to the infant's feet."; } if (response[1] == answer_list[1]) { flag = true; document.myquiz.a1d.style.backgroundImage="url('correct.gif')"; } else{ document.myquiz.a1d.style.backgroundImage = "url('incorrect.gif')"; } ################################################################################################### } if (flag) { correct++; } } document.writeln("You got " + correct + " of " + answer_list.length + " questions correct!"); } </SCRIPT> </HEAD> <FORM name="myquiz"> <B>1. When measuring height/length of a child who cannot securely stand, place the infant such that his or her feet are flat against the foot board.</B> <label><INPUT TYPE=radio NAME=question0 VALUE="True" onClick="setAnswer(0,this.value)">True</label> <label><INPUT TYPE=radio NAME=question0 VALUE="False" onClick="setAnswer(0,this.value)">False</label> <textarea rows="2" cols="85" name="a1c" style="background-repeat:no-repeat"></textarea> <B>2. When taking a supine length measurement, straighten the infant's <INPUT id="test" TYPE=text NAME=question1 size=10 onChange="setAnswer(1, this.value)">, <INPUT id="test" TYPE=text NAME=question1 size=10 onChange="setAnswer(1, this.value)">, and <INPUT id="test" TYPE=text NAME=question1 size=10 onChange="setAnswer(1, this.value)">.</B> <textarea rows="2" cols="85" name="a1d" style="background-repeat:no-repeat"></textarea> <INPUT TYPE="button" NAME="check" VALUE="Check Answers" onClick=CheckAnswers()> </FORM> </div> </FONT> </BODY> </HTML> You are given a mathematical expression containing integers and the basic operations: *,+,-, /. Find the number of unique results that can be obtained by parenthesizing the expression differently. i.e., by changing the order of evaluation of the operations. Note that all operations are integer operations. For example, if the input is 2 ∗ 3 + 6/2, your output should be 4. Plzz help me with this qs......... Hello, i haven't understood how to find the id from buttons, links, button images to auto click yet for example, i want to CLICK HERE how can i do that? how i find the id (I Own firefox with firebug and know basic html) it will be something like javascript:document.GetElementById('id').click(); right? but just want to know how to find or create ids on sites for auto click thanks I was asked to redo a menu for this site: http://www.listlabs.com/index.php It was originally an imaged based menu, but they wanted it all changed to css/html. I used quickmenu and it used JS to produce the arrows at the top of each menu item. Now to my question... I'm trying to program the menu items to stay active when on the current page. At first, it looks correct, but if you hover back over the menu, it changes back to the inactive state. Any help would be great! Thanks. I'm not sure if this is the correct forum or not, but here goes. I want to make a very simple XUL document. Just a simple basic window to be opened up, but, i want the XUL to Load and Render an HTML File. I'm not sure about what function(s) to call to achieve this, can anyone give me any ideas to go on? here's what i have so far use my JavaScript Function called LoadFromDisk(FileName), if the file is there or the load is sucessfull, it can be stored as a variable. And then i have a single Division in the XUL document called RenderWindow. From there i set the innerHTML of the RenderWindow to the data that was loaded from the disk. Is this the right way? thanks Hi all, I am trying to do a simple "animation" of the background color of a button. I want it to do 10 different colors in the course of 1 second. I have a loop like this (pseudo code): Code: var e = "the button element";
var c = 10;
while (c--) {
setTimeout(function(){ e.style.backgroundColor=(random color); }, (c * 100));
}
I expect that 10 instances of "setTimeout" would be created, each one timing out 0.1 seconds later than the previous one, giving me an "animation" of 10 different colors over the course of 1 second. Strangely, it doesn't work. All it does is WAIT one second, then set the background to the LAST color. What am I doing wrong? I can't see it. Thanks! -- Roger Edit: I also tried to do the loop forward instead... no difference. Hey! Sorry if this is a very remedial question, but I'm trying to make a table, of even and odd numbers organized in two columns (with as many rows as it takes to get through the sequence) and I'm having an issue with my code, obviously - haha. I'm still slightly new.. here is my code Code: document.write('<table>');
for (i=1; i < 50; i++) {
document.write("<tr>");
for (j = 0; j < 50; j++) {
if (j % 2==0) {
document.write('<td>' + j + '</td>');
}
else
{
document.write('<td>' + i + '</td>');
}
}
}
document.write("</tr>);
document.write("</table>");
Any help would be greatly appreciated! Ok, i am new to JavaScript and i am self teaching myself as i type this. Now here is my question: Is there a way using JavaScript or another web programming language to see where users came from before visiting your site. If it was a specific page I created could you have JavaScript functions that would change components on the website. (see example for better detail) Here is an example: My website home page, lets call it "HomePage" has an image called "LogoA" on the top of the page. Now if a user visited a specific page I created with in my website, we can call it "LandingPageA", and on LandingPageA they clicked a link that sent the user to my HomePage, could there be a command in JavaScript or another programming language that would say, Ok if user came from LandingPageA then load LogoA on HomePage. If user came from LandingPageB then load LogoB on HomePage if user came from LandingPageC then load LogoC on HomePage? If it is a confusing question i apologize. I can clarify if you needed it. I appreciate any help or info to lead me to a solution. Thanks -B Is there a way to have functions execute sequentially, rather than additively, using setTimeout? The problem here is varying browser speeds. Say we have some functions and they're set to fire after certain intervals, to create a rhythm. If you set them this way: Code: fn1(); setTimeout('fn2()',3000); setTimeout('fn3()',5000);
and fn2() takes approx 1600ms to complete, there should be a 400ms pause before fn3(). But no two browsers are the same: the rhythm is at the mercy of browser speed. In some browsers, fn3() will fire before fn2 is finished. It sounds finicky, but it's like looking at a cut in a film: it's either smooth and not noticed, or it jars. Is there a way to execute which says: "do fn1(); when it's finished, wait 3 seconds and do fn2(); when it's finished, wait 400ms and do fn3()" ? cheers. So, I've built this navigation bar so far and I'm curious if it's even possible to achieve what I'm thinking. Currently, when you hover over each of the links they drop down (padding is increased). Now, what I'm curious in doing is if you hover over say "test1", test2-4 also drop with it but in the padding that has been created from the drop down, "test1" information shows up. Allowing the user to click or read whatever information is in there. Also, if the user would like to, they can move their mouse to test2 and everything would animate (opacity, this I can do I think) to whatever is in the test2 field, test3 doing the same and so on. I haven't had much success with this, I've created a completely separate panel before, but that didn't exactly work or I wasn't doing it correctly. Here is what I've been working on, ANY help would be appreciated! Thanks! 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$("#nav li > a").hover(function() {
$(this).stop().animate({paddingTop: "100px"}, 100);
},
function() {
$(this).stop().animate({paddingTop: "10px"}, 200);
});
});
</script>
<style type="text/css">
#nav
{
position: absolute;
top: 0;
left: 60px;
padding: 0;
margin: 0;
list-style: none;
}
#nav li
{
display: inline;
}
#nav li a
{
float: left;
display: block;
color: #555;
text-decoration: none;
padding: 10px 30px;
background-color: #d1d1d1;
border-top: none;
}
</style>
</head>
<body>
<div id="wrap">
<ul id="nav">
<li><a href="">test1</a></li>
<li><a href="">test2</a></li>
<li><a href="">test3</a></li>
<li><a href="">test4</a></li>
</ul>
</div>
</body>
</html>
I would like to type something into my textbox and then press ENTER, it will execute a function. I tried onFocus, onChange and onBlur but it doesn't do what I want it to. Here's an example I use for onChange. Code: Application: <input type="text" onchange="execProg(0);"> Any comments or suggestions is greatly hi guys, l am trying to learn javascript, although certain things seem to be easy to understand, l still have plenty of questions. so l was reading some articles on w3schools and l was an interesting table about operations. http://i1087.photobucket.com/albums/...kesnosense.png if you check above's table you will see at the increment section as well decrement , you will see that in some cases the x and y dont have the same value, now l was just wondering, what is the difference between x=++y and x=y++ ? |
|||||||