|
JavaScript - Problems With Simple Object Fade Code
Hi all. I'm learning JS from pretty much scratch and the first thing I'm trying to do is simply make an image fade function. I just can't seem to make it work though, the image starts off at the right opacity (im this case 0.5) but after that the page goes white and the script never stops. It does seem to be counting up normally "opacity: 0.6 opacity: 0.7" etc. though.
Code: <img src="1.jpg" id="pic1">
<script type="text/javascript">
var amount = 0.5;
var target = document.getElementById('pic1');
function fade() {
if (target.style.opacity < 1.0) {
target.style.opacity = amount;
amount = amount + 0.1;
document.write("<br>opacity: " + target.style.opacity);
setTimeout("fade()", 1000)
//fade();
}
}
fade();
</script>
edit I rewrote it to make it simpler but still having basically the same problem D:! Similar TutorialsI have a script that fades links on load and im trying to get this to work on everything but the menu link that has the "active" class Code: <div id="menu"> <ul><li id="Home"><a title="Home" href="/" style="opacity: 0.6;">Home</a></li> <li class="active" id="projects"><a title="projects" href="/projects/" style="opacity: 0.6;">projects</a></li> <li class="last" id="Contact"><a title="Contact" href="/contact" style="opacity: 0.6;">Contact</a></li> </ul> </div> and here is the javascript.. (JQuery) Code: $(document).ready(function(){
$("#menu a").fadeTo("slow", 0.6); // This sets the opacity of the menu to fade down to 60% when the page loads
$("#menu a").hover(function(){
$(this).fadeTo("slow", 1.0); // This should set the opacity to 40% on hover
},function(){
$(this).fadeTo("slow", 0.6); // This should set the opacity back to 100% on mouseout
});
});
What do I add so any "<li>" that has the class "<li class="active"> isnt effected by the javascript so it just displays at 1.0 instead of 0.6? Hi, I'm have set up a gallery site, pretty standard stuff with thumbnails to the right and big image to the left. I would like to add a fade in on the big image when the thumbnail is clicked and don't really know how to implement it. The big images are contained in a div called <#left> while the thumbs are within a div called <div class="gallery"> I have searched Google and these forums for a solution but haven't had any luck...can anyone help me out with this? Thanks J This is a really awesome script that I'm sure all of you can put to use if you haven't yet heard of it. However, I'm trying to get it to fade a background image on my css styled navigation for my a:hover. Here is the script with a little simple tutorial on how to set it up: http://bavotasan.com/tutorials/creat...r-fade-effect/ My only other knowledge is in PHP, so after about 2 hours of fail in this client-side language, I decided it was about time I should post where some experienced people can help. I really appreciate all time you spend on this, and don't think it will take a moderate Javascript programmer very long. This is the link to my site so far: http://matt.mw/help-request You can see the script working as it is on my little yellow MW logo on the right side of the navigation. So in my scenario, I am looking to fade button.png to button-hover.png (both repeating on the x axis). Any ideas? Hello, I'm learning javascript, and was wondering if it was Possible to have buttons/links that you click, the whole page fades out, and then fade's in, with different stuff. here are my ideas for just changing the stuff Text: 1. having a javascript src file to start, and then when the button is clicked, that is formatted to white, the text layer is moved down, and a new javascript file is loaded? 2.variables? any help would be appreciated! Thanks, Cookies, whatever this forum gives out, you may receive! I am trying to use my date Object function to get the date from the comp but my variables in my function are coming up undefined. Here is my function: Code: function displayTime() {
var currentTime, hour, minute, second, range, m, s
currentTime = new Date()
var hourInt = currentTime.getHours()
var minuteInt = currentTime.getMinutes()
var secondInt = currentTime.getSeconds()
if (hourInt > 12) {
range = "PM"
hourInt -= 12
} else {
range = "AM"
}
hour = String(hourInt)
if (minuteInt < 10) {
m = String(0) + String(minuteInt)
}
minute = m
if (secondInt < 10) {
s = String(0) + String(secondInt)
}
second = s
document.timeForm.timeBox.value = hour + ":" + minute + ":" + second + " " + range
alert(hour + ":" + minute + ":" + second + " " + range)
I appreciate the help As you can see in the attached Firebug screen capture, I am setting up a new Date object with "2011", "4", "23" but in the watch window you can see it is setting up the date object with a month of May instead of April. I also tried 2011, 4, 23 (no quotes) and no improvement. What am I missing? Hello was following a tutorial online from bucky. and created a new example with different variables and such. My code in my eyes looks absolutely fine but however it does not display can anyone spot the problem? [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>Untitled Document</title> <script type="text/javascript"> function cigerettes (brand, tar, price) { this.brand=brand; this.tar=tar; this.price=price; this.ReducedCost = discount; } function discount() { var reduction = 20; var finalCost = this.price - reduction; return finalCost; } var packet1 = new cigerettes("Mayfair", "2.0 mg", 399); var packet2 = new cigerettes("Sovereign", "3.4 mg", 425); </script> </head> <body> <script type="text/javascript"> document.write(packet1.brand() + " they contain " + packet1.tar() + "of tar " + "the packet cost me " + packet1.price() + ". With discount I got them for: " + packet1.ReducedCost()); </script> </body> </html> [code] Hi there, this is my first post. I'm very new to javascript and have been programming a "beer counter" that simply counts +1 into a text object after every click. After I got this to work I copied the code in order to make a clear button / function. I've been having problems, even though the code seems to be identical. This is likely an obvious question, pardon my inexperience. <html> <head> <title>Beer Counter</title></head> <body><script language="Javascript"> var beers = 0 var output ="" function beer() { beers = beers + 1 output = document.getElementById('output') output.value = beers } function clear() { beers = 0 output = document.getElementById('output') output.value = beers } </script> <input type='button' value='Crush' onclick='beer()'; /> Beer count:</input> <input type='text' id='output' name='output'; /><br/> <input type='button' value='Clear' onclick='clear()'; /> </body> </html> Please help, I'm getting this error, Object expected, Code: 0 in Internet Explorer (not in Firefox, though). Here is the link to the page: http://www.uatparts.com/miva/merchan...Category_Code= I'm worried that my customers might shy away and not buy from me when they see this error. What do I need to do in order to stop this error from appearing? Note: I tried including the code in this thread but it was too long, the forum wouldn't let me. Hi all, I am creating a simple 3 field calculator that calculates net, vat and gross. The user has to input 2 of the 3 fields, hit calculate and it should fill the 3rd field. I have so far succeeded with the net field (enter in gross and vat) but the other 2 throw up spurious results! I have worked out these equations (they work on a calculator) Net = G - (( G * V ) / ( V + 100 )) VAT = (( G - N ) x 100 ) / N Gross = N + ( N x ( V / 100 )) Heres the code for the javascript Code: <script type="text/javascript">
function netvatgross_calc() {
var net = (Number(document.calc.gross.value))-(((Number(document.calc.gross.value)) * (Number(document.calc.vat.value)))/((Number(document.calc.vat.value))+100));
var net = net.toFixed(2);
document.calc.net.value=net;
var vat = (((Number(document.calc.gross.value))-(Number(document.calc.net.value)))*100)/(Number(document.calc.net.value));
var vat = vat.toFixed(2);
document.calc.vat.value=vat;
var gross = (Number(document.calc.net.value))+((Number(document.calc.vat.value))/100)*(Number(document.calc.net.value));
var gross = gross.toFixed(2);
document.calc.gross.value=gross;
}
</script>
Here's the work in progress I am also wanting to add some code to throw up an error if less or more than 2 values have been entered. What am I doing wrong? Any help greatly appreciated! Cheers Dan I am stuck on these problems and cannot figure them out! Any help would be appreciated. Thank you! Code: public int sumkj(int k, int j){
// Complete the method using a for loop that will add the numbers from k to j,
// where j is greater than k
int total = 0;
// TODO: ADD LOOP CODE HERE
return total;
}
// whilesum10
public int whilesum10(){
// Complete the method using a while loop that will add the numbers
// from 1 to 10
int total = 0;
int i = 1;
// TODO: ADD LOOP CODE HERE
return total;
}
// whilesumkj
public int whilesumkj(int k, int j){
// Complete the method using a while loop that will add the numbers
// from k to j, where j is greater than k
int total = 0;
int i = k;
// TODO: ADD LOOP CODE HERE
return total;
}
public int dosum10(){
// Complete the method using a do-while loop (i.e. condition at end of loop)
// that will add the numbers from 1 to 10
int total = 0;
int i = 1;
// TODO: ADD LOOP CODE HERE
return total;
}
public int dosumkj(int k, int j){
// Complete the method using a do-while loop (i.e. condition at end of loop)
// that will add the numbers from k to j, where j is greater than k
int total = 0;
int i = k;
// TODO: ADD LOOP CODE HERE
return total;
}
public String arrayprint(){
String msg = "";
String abc[] = new String[6];
abc[0] = "a";
abc[1] = "b";
abc[2] = "c";
abc[3] = "d";
abc[4] = "e";
abc[5] = "f";
// Create a loop that will output the values stored in the array abc
// using a for loop and the array length
// TODO: ADD LOOP CODE HERE
return msg;
}
public String baseballOuts(){
String msg = "";
int totalOuts = 0;
// Write a set of nested for-loops that willdetermine the number of
// outs in a regulation baseball game. Assume: 9 innings per game,
// 2 halves per inning, 3 outs per half inning.
// You solution should include a loop (outer or nested) for each
// of the assumptions.
// TODO: ADD LOOP CODE HERE
msg = "Total number of outs in a regulation baseball game is " + totalOuts + ".";
return msg;
}
public String factorial (int n){
String msg = "";
int factnum = 1;
// Use a loop to calculate the factorial of an input integer.
// Note: If the input integer is too high an error may occur even if your
// logic is correct. Why? At what value of input does the error occur?
// How can you adjust the method so that either the error does not occur
// or the method "fails gracefully?" Write your answers in the form of
// a comment here.
// TODO: ADD LOOP CODE HERE
msg = n + "! = " + factnum;
return msg;
}
}
I'm developing a simple game that involves a system of interconnected nodes with unidirectional travel between nodes (similar to the circulation system!). The goal of the game is to get from a starting node to an ending node, which can be a variable number of nodes away. The program picks a random starting point, then randomly chooses one of its connecting nodes (cNodes) and pushes it onto a pathArray. A cNode is randomly chosen from this new node and it is pushed onto the pathArray. This continues for a designated number of turns, thus generating a pathArray (invisible to the player). The last element in the pathArray is the endNode and the goal of the puzzle. At each node the player is given two options of travel (though there may be more than two ways to go). One of these options MUST be the correct way if the player has not deviated from the path up until that point. If the player has deviated, this option can be any cNode. The other node is any cNode that does not lead to the endNode. The following code contains a simplified list of nodes that represents the content in my game. The function, however, is taken word for word. In this snippet, the pathArray & startNode have already been generated and I am trying to resolve how to assign "nodeChoice" as either the correct direction of travel (for a player on the correct path) or any random cNode (for a player who has deviated from the path). Keep in mind that the pathArray and cNodes lengths can be any size. Code: <script>
//NODES:
var nodeA = {name:"A"};
var nodeB = {name:"B"};
var nodeC = {name:"C"};
var nodeD = {name:"D"};
var nodeE = {name:"E"};
var nodeF = {name:"F"};
var nodeG = {name:"G"};
var nodeH = {name:"H"};
var nodeI = {name:"I"};
var nodeJ = {name:"J"};
var nodeK = {name:"K"};
//An array of all nodes in the system:
var systemArray = [nodeA, nodeB, nodeC, nodeD, nodeE, nodeF, nodeG, nodeH, nodeI, nodeJ, nodeK];
//Connecting Nodes (cNodes):
//(uni-directional, but cyclical)
nodeA.cNodes = [nodeB, nodeC];
nodeB.cNodes = [nodeD, nodeE, nodeF];
nodeC.cNodes = [nodeF, nodeG];
nodeD.cNodes = [nodeI, nodeH];
nodeE.cNodes = [nodeJ];
nodeF.cNodes = [nodeK];
nodeG.cNodes = [nodeK];
nodeJ.cNodes = [nodeA];
nodeK.cNodes = [nodeA];
nodeI.cNodes = [nodeA];
nodeH.cNodes = [nodeA];
//The path chosen (generated from code not included here)
var pathArray = [nodeA, nodeB, nodeE, nodeJ];
//nodeChoice will represent a cNode from any given node
var nodeChoice;
//chooseNode is supposed to assign nodeChoice the next element in pathArray if the player on on the right path (if at nodeB, nodeChoice = nodeE).
//However, if the user has taken a different path, its cNodes will not be in pathArray in which case a random cNode is assigned to nodeChoice
function chooseNode(_node) {
//check each cNode to see if any are in pathArray
for (var j = 0; j < _node.cNodes.length; j++) {
//if a cNode is in pathArray, then we know to assign it nodeChoice...
if (_node.cNodes[j] in pathArray) {
nodeChoice = _node.cNodes[j];
console.log("choiceNode CORRECT: " + nodeChoice.name); //(for debugging purposes only)
}
//...otherwise don't do anything in this forLoop/ifStatement
};
//if by this point nodeChoice is still undefined, meaning none of the current node's cNodes are in pathArray, assign it any one of its cNodes.
if (nodeChoice == undefined) {
nodeChoice = _node.cNodes[Math.floor(Math.random()* _node.cNodes.length)];
console.log("choiceNode INCORRECT: " + nodeChoice.name);//(for debugging purposes only)
};
};
//Runtime:
chooseNode(nodeB);
//Result should be only nodeE.name since nodeD is not in the pathArray...
console.log(nodeChoice.name);
</script>
...however, nodeChoice is assigned either D, E or F randomly and we are given the troubleshooting statement "choiceNode INCORRECT: D (or) E (or) F", indicating that the if-in statement is always ignored. I know that the if-in statement doesn't work but am not sure how else to write it so that each cNode is compared the each element in pathArray, both of which can be of variable lengths... Hello, new to the forums so I don't know really where I should post this. Working with google spreadsheets and google script here if that makes any difference. I want a cell to print the letter O x number of times based on the value of a different cell? For example; If A1 is 3, i want B2 to print O O O. Just as A1 is 5 i want B2 to print O O O O O. I have this bit of code so far and think I could run this as a script, but i keep getting an error "Missing ; after for-loop initializer. (#2) (line 2)" Code: function Dot()
{
for (i < CellValue)
{
myOutputString = myOutPutString + "O ";
}
TargetCell.Formula=myOutputString;
}
Thank you for any help you can provide....and if there is a better place for this sort of stuff, please let me know. This may seem like a very noob-like question but I just can't figure it out! I am new to Javascript and I was playing around with if...else.. statements. I made this little code to see if I can make a password activated code. In this case I just want it to open an alert window if the right password is put in. I have tried running this in Chrome, IE and Firefox and none of them worked. Code: <script type="text/javascript">
var n1=prompt("Please enter the correct password.");
if (n1=1147)
{
alert("Congrats! You guessed the right password!");
}
else
{
alert("I am sorry"n1" is not the correct password. Please try again");
}
</script>
I have two problems with this simple survey that I am trying to write: 1. When I have the "<textarea>" code lines in it put a text-area on the page, but it puts all of the code following that first text-area line into the text-area box and doesn't execute that segment of code. 2. When there is no "<textarea>" (for the sake of seeing if the rest of it worked) it doesn't check the survey. I'm stumped and can't figure out what to do at this point, can someone please help me with this? Code and pictures follow: Code: <html>
<head>
<title>Survey</title>
<script langauge-"javascript">
<!--
var food=new Array("Berries", "Carrots", "Insects", "Salmon", "Salad", "Smelt", "Trout");
var story=new Array("Peter Rabbit", "Molly's Adventure", "Jeremy Fisher", "Mrs. TiggieWinkle", "The Tale of the Two Bad Mice", "Toad's Great Adventure");
function createWindow()
{
win=open("", "", "menubar, scrollbars");
win.document.write("<head><title>Survey Results</title></head>");
win.document.write("<body bgcolor='white'>");
return win;
}
function checkSurvey(form)
{
var outString="";
for(var i=0; i<=2; i++)
{
if(form.elements[i].value=="") {
alert("Please fill in your "+form.elements[i].name);
form.elements[i].focus();
return;
}
outString=outString+form.elements[i].name+":"+form.elements[i].value;
outString+="<br>";
}
if(!form.Attending[0].checked&&!form.Attending[1].checked)
{
alert("Please fill in the attendence information");
return;
}
if(form.Attending[0].checked) {
outString+="Attending: Yes<br>";
var index=form.Food.selectedIndex;
outString=outString+"Favorite Food: "+food[index]+"<br>";
index=form.Story.selectedIndex;
outString=outString+"favorite Story: "+story[index] + "<p>";
}
else
outString += "Attending: No <p>";
win.document.write(outString);
}
//-->
</script>
</head>
<body bgcolor="white"
onLoad = "win = createWindow()"
onUnload = "win.close()">
<b>The Survey</b><p>
<i>Please help us by filling our this survey</i><p>
<table cellpadding = "3">
<form name = "Survey">
<tr><td>First Name</td>
<td colspan = "3">
<input type = "text" name = "First Name" size = "12"></td></tr>
<tr><td>Last Name</td>
<td colspan = "3">
<input type = "text" name = "Last Name" size = "3"></td></tr>
<tr><td>Address</td>
<td colspan = "3">
<textarea name = "Address" rows = "5" cols = "30" wrap = "physical">
</teaxtarea></td></tr>
<tr><td>Attending?</td>
<td><input type = "radio" name = "Attending" value = "Yes">Yes</td>
<td><input type = "radio" name = "Attending" value = "No">No</td></tr>
<tr><td>Favorite Foods</td>
<td colspan="3"><select name = "Food">
<script langauge = "javascript">
<!--
for(var i=0; i<food.length; i++)
document.write("<option>" + food[i]);
//-->
</script></select></td>
</tr>
<tr><td>Favorite Story</td>
<td colspan = "3"><select name = "Story">
<script language="javascript">
<!--
for(var i=0; i<story.length; i++)
document.write("<option>" + story[i]);
//-->
</script></select></td></tr>
<tr><td><input type = 'button' value = 'Check Survey' onClick = "checkSurvey(this.form)"></td></tr></form>
</table>
</body>
</html>
The code I commeted out dosen't work I want to check if its null and if so alert them. { // PART 2: YOUR CODE STARTS AFTER THIS LINE correctAnswer = Math.floor((Math.random() * 100) + 1); // For testing purposes. alert("Testing purposes, correct answer is: " + correctAnswer); var number = 0; //// Calculations //if (isNaN(number) = true) { // alert("Thats not a number"); //} //document.write(number); while (number != correctAnswer) { number = prompt("Wrong Number, guess again."); number = Number(number); if (number < correctAnswer) { document.writeln("Small guess: " + number); } if (number > correctAnswer) { document.writeln("Large guess: " + number); } if (number == correctAnswer) { document.writeln("Correct guess: " + number); } } } I am having a problem with the follow code with IE9 only. Works fine with any other browser.. Any help? Thanks <a href="javascript:var w = window.open('show_photo.php?ad_id={AD_ID}&img_id={IMG_ID}','','width=450,height=500,toolbar=0,scroll bars=0,statusbar=0,menubar=0,resizable=0');"> </a> We are trying to validate a piece of code on our HTML pages and get the following message - "The text content of element script was not in the required format: Expected space, tab, newline, or slash but found < instead." The code is used to set up the Facebook tags in JavaScript, and does work by itself. However, we're trying to get it to work through validation on http://validator.w3.org Code: <script src="SiteTools.js">
//<![CDATA[
<!--
FacebookSetup('CABLED Project first 6 months', 'images/angela-imiev.jpg');
//-->
//]]>
</script>
Thanks i have code to create a select list. this select list is populated by db query i have two pieces of code i need looked at to fix the problem Code: echo "<select name='LearnedJutsus' id='YourJutsu' onchange='return jutsu()' >";
foreach($learnedJutsuInfo as $v)
{
echo "<option value='$v'>$v</option>";
}
echo "</select></form>";
and most importantly this one! Code:
var selection=document.getElementById("x").options[document.getElementById("x").selectedIndex].value;
i did not write the above code it was donated to me but it seems to be not working correctly. what i need is an explanation on how it works (which would be best since im foggy with jscript)or a fix for it i basically need it to grab the selected option's information for later use in the program. this is a pivotal part of the system any help appreciated. |
|||||||