|
JavaScript - Why Does This Snippet Work?
Hi folks, I was hoping someone could help explain why the following code actually works. It's from an example in a book I'm working on (Head First Ajax) and I'm not sure why it works and I'd like to understand it.
Code: window.onload=initPage;
function initPage() {
//find thumbnails on the page
thumbs=document.getElementById("thumbnailPane").getElementsByTagName("img");
//set the handler for each image
for (var i=0; i<thumbs.length; i++) {
image=thumbs[i];
//create the onclick function
image.onclick=function() {
//find the full size image name
detailURL = 'images/' +this.title+ '-detail.jpg';
document.getElementById("itemDetail").src=detailURL;
//getDetails(this.title);
}
}
}
By adding -detail.jpg when an image is clicked, it will replace the current image with a slightly larger version of the image, which has an identical name but with -detail added. My problem is that looking at the for loop, it seems that, since there are four images, the value of i would be 4, and that onclick wouldn't work for images 1,2 and 3. It does work though, so there must be an array being created within the loop (??). I was thinking that the image variable is turned into an array consisting of four images...it's the only explanation that makes sense...but I don't understand how it works. Can someone explain the principle behind this bit of code? Similar TutorialsHello, In the below script syntax, a simple table converts Celsius degrees into Fahrenheit, using the For loop and integrating it into a table. Code: <html>
<head>
<title>Celsius-Fahrenheit Converter</title>
</head>
<body>
<table border=3>
<tr><td>CELSIUS</td><td>FAHRENHEIT</td></tr>
<script language="javascript">
for (celsius=0; celsius<=50; celsius=celsius+1)
{
document.write("<tr><td>"+celsius+"</td><td>"+((celsius*9/5)+32)+"</td></tr>");
}
</script>
</table>
</body>
</html>
My questions are about the following script inside the <td> tags: <td>"+celsius+"</td> <td>"+((celsius*9/5)+32)+"</td> 1) why is the script inside the above <td> tags placed between " " ? 2) why is the script inside the above <td> tags placed between + + ? Thanks a lot for your explanation to an absolute Javascript beginner...! I want to insert this js snippet Code: function addText(smiley) {
document.getElementById('message').value += " " + smiley + " ";
document.getElementById('message').focus();
return false;
}
to a loaded iframe with name&id chtifrm. I can access it & change embed something in its html via using something like: Code: $(parent.chtifrm.document.body).append('<div id=\"smly\" style=\"cursor:pointer;float:left;top:200px;display:none;position:absolute;\"><\/div>');
.... Code: parent.chtifrm.document.getElementById('chatbox_option_disco').style.display == 'none'
but how do I insert js in the head of loaded iframe? Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here. Code: function fade(obj, duration, toggle) {
steps = 1000;
elem = document.getElementById(obj);
function fadeIn() {
for(var i = 0; i <= 1; i+=(1/steps)) {
setTimeout("elem.style.opacity = "+ i +"", i * duration);
setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration);
}
}
function fadeOut() {
for(var i = 0; i <= 1; i+=(1/steps)) {
setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration);
setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration);
}
}
/* One for Fade in and anything will be fade out*/
if(toggle == 1) {
fadeIn();
}
else {
fadeOut();
}
}
Thanks, Jon W So here is the story I paid for some to create a slideshow, and it works fine in the orginial html document but when i copy and paste the code into my html document the scroller to the left of the image stops moving up and down I put the working file at this address: http://rusty813.comuv.com/ my files at this address where i am: http://rusty813.comuv.com/sample2.html the guy i paid to do work refuses to help even those i advertised the price in my ad and he wanted me to give it to pay him more to tell which code to change but go ahead take a look at the coding thanks alot for your guys help So i got this to work once, but i can't get it to work now. I am trying to make it so when i clicked a radio button, i get the description of each object i click. Please help!!! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <head> <script type="text/javascript"> var vegetarian="lots of mushrooms" var hawaiian="overloaded with juicy" var meatlovers="loads of pepperoni" </script> </head> <body> <form name="pizzaList" action="" method="get"> <p> Click the buttons for a description of each pizza.</p> <p> <input type="radio" name="pizzas" onclick="document.pizzaList.pizzaDesc.value=vegetarian" />Vegetarian <input type="radio" name="pizzas" onclick="document.pizzaList.pizzaDesc.value=hawaiian" />Hawaiian <input type="radio" name="pizzas" onclick="document.pizzaList.pizzaDesc.value=meatlovers" />MeatLovers </p> </form> <p> <textarea name="pizzaDesc"></textarea></p> <html xlmns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> </html> Hi I'm doing some js online tutorials and am stuck at this piece of code. It's supposed to be a carousel that loops. It's supposed to have the main image in the middle and images on either side of it. Something similar to www.atlanticrecords.com. But my code doesn't make it slide. I'm a complete novice to javascript and am desparate for this to work. This is the code if anyone would like to show me my mistakes. 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>Interactive Carousel</title>
<style type="text/css">
#feature_holder{position:relative; top:150px; overflow:hidden; height:400px; width:100%;}
.feature{position:absolute; width:1000px; height:400px; top:0; z-index:1;}
.arrow_right{right:20px;}
.arrow_left{left:20px;}
.arrow{height: 70px; width:70px; z-index:2; top:160px; position:absolute; background:#000;}
#feature_1{background: #666666;}
#feature_2{background: #225566;}
#feature_3{background: #006600;}
#feature_4{background: #ff0066;}
#feature_5{background: #00ff00;}
#feature_6{background: #0380ff;}
</style>
</head>
<body>
<div id="feature_holder">
<div class="arrow arrow_left"></div>
<div class="arrow arrow_right"></div>
<div class="feature" id="feature_1"></div>
<div class="feature" id="feature_2"></div>
<div class="feature" id="feature_3"></div>
<div class="feature" id="feature_4"></div>
<div class="feature" id="feature_5"></div>
<div class="feature" id="feature_6"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
var BrowserWidth
var FeatureCount
var CurrentFeature = 1
var NextFeature
var NextNextFeature
var PrevFeature
var PrevPrevFeature
$(document).ready (function(){
setFeatureCount()
getBrowserWidth()
setClicks()
setNextPrev()
setFeaturePosition()
});
setFeatureCount = function(){
FeatureCount = $('#feature_holder').children('.feature').length;
}
getBrowserWidth = function(){
BrowserWidth = $(window).width();
}
setClicks = function(){
$('#feature_holder').children('.arrow_left').click(function(){
SlideInFeature(true);
});
$('#feature_holder').children('.arrow_right').click(function(){
SlideInFeature(false);
});
}
setNextPrev = function(){
PrevFeature = (CurrentFeature-1);
PrevPrevFeature = (CurrentFeature-2);
NextFeature = (CurrentFeature+1);
NextNextFeature = (CurrentFeature+2);
if (CurrentFeature == 1){
PrevFeature = FeatureCount;}
setFeaturePosition = function(){
$('#feature_holder').children('.feature').css('left', -9999);
var CurrentPositioning = (BrowserWidth/2) - 500;
$('#feature_'+CurrentFeature).css('left', CurrentPositioning);
var NextPositioning = (BrowserWidth/2) + 500;
$('#feature_' +NextFeature).css('left', NextPositioning);
var PrevPositioning = (BrowserWidth/2) - 1500;
$('#feature_'+PrevFeature).css('left', PrevPositioning);
}}
</script>
</body>
</html>
Thanks I know we've all seen those text fields where when you type in am HTML tag it changes color! Example: <div> blah blah blah blah </div> I know that there is no flash involved, so how does it work? HI i have a form and submit bottom in my page . I've wrote a function that check the page element's value before submitting the form. my problem is this i couldn’t stop submitting the form before it has checked . Actually I want before the form submitted it has checked and if there was no problem then the function return true and submitted and if there was any problem, the function return false and the form stopped submitting I ‘ve added a function to the onclick of submit button and it call a function that check the values thanks Hi there! I'm completely new to javascript coding, but have suddenly found myself in need of using it. here's a little background (helps me keep track of where I am in my question). I've been "playing" with php for quite a while, and I decided I wanted to see how hard it would be to code a fairly simple forum. So far, everything is working out with very little need for bug fixes and some efficiency suggestins from a friend. I'm currently building the registration page, and wanted to have it compare the password and verification while the form is being filled. I found a code to do it after a few searches, but evidently I am missing something about how it works. This is the code I found: Code: <script type='text/javascript'>
function comparePasswords()
{
if(document.getElementById('pass1').value != document.getElementById('pass2').value)
{
$('passwordShow').innerHTML = 'Passwords do not match';
}
else
{
$('passwordShow').innerHTML = '';
}
}
</script>
This is the full code for the form I am trying to use it in: Code: <?php
echo "<script type='text/javascript'>\n function comparePasswords()\n {\n if(document.getElementById";
echo "('pass1').value != document.getElementById('pass2').value)\n {\n $('passwordShow').innerHTML";
echo " = 'Passwords do not match';\n }\n else\n {\n $('passwordShow').innerHTML = '';\n";
echo " }\n }\n</script> ";
echo "<form action='index.php?pg=verify' method='post'>";
echo "<table align='center' style='color: #C0C0C0'>";
echo "<tr><td>Username:</td><td><input type='text' name='user' /></td></tr>";
echo "<tr><td>Password:</td><td><input type='password' name='pass1' /></td></tr>";
echo "<tr><td>Re-enter Password</td><td><input type='password' name='pass2' onkeyup='comparePasswords();' /></td></tr>";
echo "<tr><td>Email<br />(used for password recovery)</td><td><input type='text' name='email' /></td></tr>";
require ('questions.php');
echo "<input type='hidden' name='source' value='reg' />";
echo "<br><center><input type='submit'/></form>";
?>
What am I not understanding about this? Can somebody give me a bit of help with the below code. The problem is that it works fine for the first pop up box but not for the other(s). I think it has something to do with the script using the getelementbyid. Can anybody help? Code: <script type="text/javascript">
var appearance = "notShown"
function show()
{
if (appearance == "notShown")
{
document.getElementById('P1').style.display = "inline";
appearance = "shown";
}
}
function remove()
{
document.getElementById('P1').style.display = "none";
appearance = "notShown";
}
</script>
<style type="text/css">
p#P1 { width: 319px; height: 169px; display:none; background-color: grey; position:absolute;z-index:2; }
p#P1 b { padding: 10px; float: left; }
p#P1 span { width: 300px; float: left; padding: 10px;}
button.close {float:right; margin: 5px; }
</style>
<a href="#" onclick="show()">box 1</a>
<p id="P1"><b>Lorem Ipsum</b><button type="button" class="close" onclick="remove()">X</button>
<span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span>
</p>
<br /><br /><br /><br /><br /><br />
<a href="#" onclick="show()">box 2</a>
<p id="P1"><b>Lorem Ipsum</b><button type="button" class="close" onclick="remove()">X</button>
<span>Lorem ipsum ut volumus antiopam pericula vix, per nulla oblique alienum ad. No ullum convenire eos. Sit tota iusto ut, ex mentitum voluptatum inciderint est. Ex dico idque argumentum eam, ei elit meliore definiebas per, nam soleat aliquando ad.</span>
Hello again, I have written the following code: <script language="Javascript"> var win=0 </script> <Form name="Form"> <Input type="button" name="button" value="Click" onClick="Good()"> </form> <script language="Javascript"> function Good() { if (win=0) { alert('You win!') } else { alert("You lose!") } } </script> Based on the following, when I click the button it should say "You win!" as win=0 but it keeps saying "You lose!". Why is this happening? hello, I found this script : http://roshanbh.com.np/2008/06/accor...ng-jquery.html I implemted this into my website http://test.tamarawobben.nl but as you can see it don't work. Can anyone help me figure out why the script does not work. Roelof Okay so I am fairly new to Javascript and am having some difficulties getting this rollover to work. I've gotten this rollover code to work in multiple other pages and for some reason it just wont work for this page. The code is below, basically I have three buttons on the page that need to have a rollover effect to display an alternate image for each button, I started small to try and get just the first one to work and have not had any luck. Tried three different browsers, nothing. Any advice will be greatly appreciated. Code:
<html>
<head>
<title>Ski Montana</title>
<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
if (document.images) {
photosUp = new Image
photosDown = new Image
photosUp.src = 'photosup.gif'
photosDown.src = 'photosdown.gif'
}
var images = new Array(3);
images[0] = new Image();
images[1] = new Image();
images[2] = new Image();
images[0].src ="bannerad1.jpg"
images[1].src ="bannerad2.jpg"
images[2].src ="bannerad3.jpg"
var outElm;
var currentImageIndex = 0;
var maxImageIndex = images.length-1;
function cycle(){
if (outElm) {
outElm.src = images[currentImageIndex].src;
++currentImageIndex;
if (currentImageIndex > maxImageIndex) {
currentImageIndex = 0;
}
}
}
function initImageCycler(elmID){
outElm = document.getElementById(elmID);
if (outElm) {
setInterval("cycle()", 2000);
}
}
//-->
</SCRIPT>
</head>
<body bgcolor="#FFFFFF" onload="initImageCycler('adBanner');">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="15" height="6" valign="top"></td>
<td width="103" height="6" valign="top"></td>
<td width="10" height="6" valign="top"></td>
<td width="9" height="6" valign="top"></td>
<td width="176" height="6" valign="top"></td>
<td width="1" height="6" valign="top"></td>
<td width="96" height="6" valign="top"></td>
<td width="1" height="6" valign="top"></td>
<td width="209" height="6" valign="top"></td>
<td width="11" height="6" valign="top"></td>
<td width="6" height="6" valign="top"></td>
<td width="133" height="6" valign="top"></td>
</tr>
<tr>
<td width="15" height="89" valign="top"></td>
<td width="103" height="89" valign="top"></td>
<td width="10" height="89" valign="top"></td>
<td width="503" height="89" colspan="7" valign="top"><img src="bannerad1.jpg" width="503" height="68" id="adBanner" alt="Ad Banners" /></td>
<td width="6" height="89" valign="top"></td>
<td width="133" height="89" valign="top"></td>
</tr>
<tr>
<td width="15" height="108" valign="top"></td>
<td width="103" height="108" valign="top"></td>
<td width="10" height="108" valign="top"></td>
<td width="9" height="108" valign="top"></td>
<td width="483" height="222" colspan="5" rowspan="3" valign="top">
<h1 align="center"><b><font size="+7">Welcome to Montana</font></b></h1>
<h2 align="center"><font size="+7"><b><font size="+3">Home of the Wild West
and some of the Best Ski Slopes in the World</font></b></font></h2>
</td>
<td width="11" height="108" valign="top"></td>
<td width="6" height="108" valign="top"></td>
<td width="133" height="108" valign="top"></td>
</tr>
<tr>
<td width="15" height="2" valign="top"></td>
<td width="103" height="2" valign="top"></td>
<td width="10" height="2" valign="top"></td>
<td width="9" height="2" valign="top"></td>
<td width="11" height="2" valign="top"></td>
<td width="6" height="2" valign="top"></td>
<td width="133" height="114" rowspan="2" valign="top"><img src="skiban2.jpg" width="130" height="99"></td>
</tr>
<tr>
<td width="15" height="112" valign="top"></td>
<td width="103" height="158" rowspan="2" valign="top"><img src="montana1.gif" width="103" height="115"></td>
<td width="10" height="112" valign="top"></td>
<td width="9" height="112" valign="top"></td>
<td width="11" height="112" valign="top"></td>
<td width="6" height="112" valign="top"></td>
</tr>
<tr>
<td width="15" height="46" valign="top"></td>
<td width="10" height="46" valign="top"></td>
<td width="9" height="46" valign="top"></td>
<td width="176" height="46" valign="top"></td>
<td width="97" height="46" colspan="2" valign="top"><a href="photos.htm" onMouseover="document.rollover.src=photosDown.src" onMouseout="document.rollover.src=photosUp.src"><img name="rollover" src="photosup.gif" border=0></a></td>
<td width="1" height="46" valign="top"></td>
<td width="209" height="46" valign="top"></td>
<td width="11" height="46" valign="top"></td>
<td width="6" height="46" valign="top"></td>
<td width="133" height="46" valign="top"></td>
</tr>
<tr>
<td width="15" height="44" valign="top"></td>
<td width="103" height="44" valign="top"></td>
<td width="10" height="44" valign="top"></td>
<td width="9" height="44" valign="top"></td>
<td width="176" height="44" valign="top"></td>
<td width="1" height="44" valign="top"></td>
<td width="97" height="44" colspan="2" valign="top"><a href="resorts.htm" onMouseover="document.rollover.src=resortsdown.src" onmouseout="document.rollover.src=resortsup.src"><img src="resortsup.gif" width="97" height="30" border="0" name="rollover"></a></td>
<td width="209" height="44" valign="top"></td>
<td width="11" height="44" valign="top"></td>
<td width="6" height="44" valign="top"></td>
<td width="133" height="44" valign="top"></td>
</tr>
<tr>
<td width="15" height="49" valign="top"></td>
<td width="103" height="49" valign="top"></td>
<td width="10" height="49" valign="top"></td>
<td width="9" height="49" valign="top"></td>
<td width="176" height="49" valign="top"></td>
<td width="97" height="49" colspan="2" valign="top"><a href="contactus.htm" onmouseover="document.rollover.src=contactusdown.src" onmouseout="document.rollover.src=contactusup.src"><img src="contactusup.gif" width="97" height="30" border="0" name="rollover"></a></td>
<td width="1" height="49" valign="top"></td>
<td width="209" height="49" valign="top"></td>
<td width="11" height="49" valign="top"></td>
<td width="6" height="49" valign="top"></td>
<td width="133" height="49" valign="top"></td>
</tr>
<tr>
<td width="15" height="1" valign="top"><img width="15" height="1" src="transparent.gif"></td>
<td width="103" height="1" valign="top"><img width="103" height="1" src="transparent.gif"></td>
<td width="10" height="1" valign="top"><img width="10" height="1" src="transparent.gif"></td>
<td width="9" height="1" valign="top"><img width="9" height="1" src="transparent.gif"></td>
<td width="176" height="1" valign="top"><img width="176" height="1" src="transparent.gif"></td>
<td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
<td width="96" height="1" valign="top"><img width="96" height="1" src="transparent.gif"></td>
<td width="1" height="1" valign="top"><img width="1" height="1" src="transparent.gif"></td>
<td width="209" height="1" valign="top"><img width="209" height="1" src="transparent.gif"></td>
<td width="11" height="1" valign="top"><img width="11" height="1" src="transparent.gif"></td>
<td width="6" height="1" valign="top"><img width="6" height="1" src="transparent.gif"></td>
<td width="133" height="1" valign="top"><img width="133" height="1" src="transparent.gif"></td>
</tr>
</table>
</body>
</html>
I am terrible at this. I want to get this functionality seen here http://davidlynch.org/js/maphilight/docs/demo_usa.html (image map areas highlighting on mouseover) to work on this here http://scratchitrich.com/test/ can anybody walk me through how to make this work? Thanks! Rather than post everything here, I'll give a link to my stackoverflow post, which didn't receive a good answer. Note: I have a different function that uses toggleClass on these same elements One person suggested using CSS. That worked very well, until I went to toggle my elements the second time (remove the added class). Then, the new "transition" line in my CSS caused the jQuery transition to perform very quickly. html - Using jquery .hover, with $this - Stack Overflow How can I get hover to work? Or better, use css transition, which I prefer - without ruining my jQuery toggleclass' animate time? Thanks. I read a beginners book on js and now I'm working through a cookbook style book to get a hang of things, I came across an example for redirecting URLs in the book that didn't work: Code: <form> <input type="text" name="url"> <input type="button" value="Go" onClick="location.href=this.form.url.value"> </form> After searching on the net I found another that works perfectly but I don't understand why the one in the book doesn't work. works: Code: <form name="openlocation"> <input type="text" name="href"> <input type="button" value="Go" onClick="location.href=document.openlocation.href.value;; "> </form> I tried replacing the url with href and other tweaks, is it that you cant use ".this" here, making it necesary to name the form? Any explanation help would be apreciated. Thanks in advance! Hi, I am trying to have a count-up timer on my website, where I count upwards from a specific date, measuring seconds, minutes, days and months. I've tried to set the code up he http://www.wuzhannanan.com/alex/timeticker.html But only one of the functions are showing. I've been stumped all day trying to figure this out, it seems so simple yet I cannot figure this out. Can someone please lend me some advice? Hi, first post here! I have inserted a 'fisheye' widget to dreamweaver. It works great. I created a link from the home button. When i test it and over the button with my mouth its shows the link but does not open the window. Would anyone have an idea or lead on how I can solve this issue? As well can i post the link of the page? Thanks for ur help and time. |
|||||||