JavaScript - Javascript Coding Involving Div Tags

I have a basic Javascript slideshow that flicks through a series of 6 jpg images very quickly.
I also have a button that i need coded so that when a user clicks on the button, the script for the slide show slows down the speed of the flicking images slowly over the coarse of ten seconds and stops on an image.
How do i go about coding the button in javascript?
I hope this makes sense.

Thankyou

Here is my code so far.

var i, imgs, pic;

function rotate()
{
pic.src=imgs[i];
(i===(imgs.length -1))? i=0:i++;
setTimeout(rotate,500);
}




function diceroll()
{
pic=document.getElementById("yes");
imgs=["photo1.jpg", "photo2.jpg","photo3.jpg","photo4.jpg","photo5.jpg"];

var preload=new Array();
for(i=0;i<imgs.length;i++)
{
preload[i]=new Image();
preload[i].src=imgs[i];
}

i=0;
rotate();
}

I am an amateur web designer and could really use your help.

I'm working on a test page right now (http://www.piscatawayacres.com/test.html). I'm trying to have 3 effects going on at the same time, but due to my inexperience with Javascript (I, in fact, copied and pasted most of it), I can't get them to work. To complicate things, my test page works to a certain extent, but when I copy and paste the coding to other pages (like alpacas.html, sheep.html, goats.html, etc.) it ceases to work. I have no idea why it does this.

The 3 effects I want to have work:

1. Javascript rollover buttons.

2. A Javascript slideshow--the square picture above the buttons should be changing.

3. I want the image and the buttons to follow the user down the page as they scroll. For some reason though, the buttons (on the couple of pages they work at all) cease to work except at the very top of the page or the very bottom, but not in between.

I've been struggling with this obstacle for a long time, so I would greatly appreciate any help someone could give.

Thanks so much for your help.

PAC

P.S. I want to emphasize that some of the coding works on the test.html page, but WON'T work when I copy and paste it elsewhere. I can only assume it is because of conflicts with the coding. I know my coding is not flawless....

I have the following HTML code:

Quote:
<form id="registration" action="/cgi-bin/registration.cgi" method="POST" onsubmit="return control()">
<fieldset>
<legend>Legend 1</legend>
<label>......</label> <input ..../><br/>
<label>......</label> <input ....onclick="return orgreg()"/><br/>
</fieldset>
<fieldset>
<legend>Legend 2</legend>
<label>......</label> <input ..../><br/>
<label>......</label> <input ..../><br/>
<label>......</label> <input ..../><br/>
<label>......</label> <input ..../><br/>
<label>......</label> <input ..../><br/>
</fieldset>
........
........
and the following javascript code:
Quote:
function orgreg() {

if (document.getElementById) {
alert(document.getElementById("registration").firstChild);
}

}
The output of alert window is [Object Text].
My question is: first child is first fieldset tag or not.
Because I want insert (with insertBefore) an other fieldset block after first child.

Hi, I'm fairly new to javascript & am trying to learn it using best methods. I have been using various books & some video tutorials, such as lynda.com. I've noticed when I do google searches for example tutorials, 9 times out 10, the javascript has been coded into the html file. As a newbie I find it takes a very long time to redo the coding into the separate .js file. And if the coding is relatively complex (and most of it appears that way to someone new to this) I can't get it too work using a separate file for the javascript. I wanted to ask anyone very familiar with this, their suggestions regarding good places for tutorials where the .js file is separated. Apparently there are advantages to having it separate and it's considered best practices from what I've come to understand. Also most of the results from google searches pulls up out-dated coding and/or tutorials that suggest you should already understand what is being referred too. I'm trying to avoid learning it the wrong way. I'm willing to put in the effort, however I don't want to pick up bad habits. Any help is very appreciated. If this was not as clear as I intended it to be, please ask any specifics and I'll try my best to answer.
-Todd

Hi Experts,

I'm new to this forum and need your help regarding javascript.

I am creating a roster for my team with a web interface.
Ex: A picture is attached for your reference

The time is in IST (+5:30)

I have created a drp down list which has PST, EST,CST time. I need to write a code so that whenever I select any of these times (PST,EST,CST, MST, IST) , it should automatically update the table. Please help.

Regards,
Indy

Hey.

so, I know how to add the row, and cells, I did that...except now I need to add properties to the cells (class, ID, onclick etc)...just wondering how I go about doing that.

Here is what I have so far:

Code:

function add_new_proj(){
	
	new_proj_id = prompt("What would you like the new Project Number to be?","xxx-xxxxx");
	
	var table=document.getElementById('projectDisplay').insertRow(1);//creates a var which adds one row to the table
	//the variables are finding the correct cell to enter the data into the new row (based on an array 0 based system)
	
	
	
	var projectID=table.insertCell(0);
	var ProjectName=table.insertCell(1);
	var Client=table.insertCell(2);
	var ClientProjectID=table.insertCell(3);
	var delete_cell=table.insertCell(4);
	
	
	projectID.innerHTML = new_proj_id;
	ProjectName.innerHTML ="";
	Client.innerHTML = "";
	ClientProjectID.innerHTML = "";
	delete_cell.innerHTML = "<span class='delete' id='$ProjKey-d' onclick='delete_edit_proj(\"ajax_modify_proj.php\",this.id)'> Delete </span>";
	
	
	
	
}

this is an example of what the cells look like (the ones that already exist, generated via PHP code):

PHP Code:
echo "<td class='projectTd' id='2tdName-$j' onclick='editTd(this.id);'> $ProjName </td>"; 


So yeah..I need the new cells to pretty much look like that >.< with a class, id, and onclick event.

any help would be great!

thanks

Hi,

I wanna make a form that receives:

textbox URL And textbox Anchor

and result will be two anchors one <a href, and one phpBB

Example:

Url: www.pushpin.co.il
Anchor: pushpin

Results:
<a href="http://www.pushpin.co.il">pushpin</a>

[ url = http://www.pushpin.co.il/ ] pushpin[ /url ]

Help?

I came across some embedded JavaScript code and I noticed some weird “HTML comment-like tags” within embedded JavaScript that are getting rendered in FireFox but not IE. Specifically the closing tag "//-->"

And the JavaScript code between these tags is functional (not commented out)!

Code:

<SCRIPT type=text/javascript>
<!--

....

//-->
</SCRIPT>

What are these?

Example usage:

Code:

<SCRIPT type=text/javascript>
<!--
var zz, zv, d, fTSR;
d = new Date();
fTSR=0;
zv = d.getTime();
zz = "&zz="+zv;

var gBF=false;
function GoTo(u){window.top.location = u + zz;}
function Go(u){window.top.location = u;} 

....

//-->
</SCRIPT>

Hello all out there I am going to post this in 2 separate views.

I am working on an assignment from this link

http://books.google.ca/books?id=aG_T2aD ... MonthCell()&source=bl&ots=EJXyGF-tbI&sig=vbgqgua2uSaL6DWp0Rx_BYoZ0z8&hl=en&ei=9C7gTLmiAYaXnAeywLWRDw&sa=X&oi=book_result&ct=result&re snum=1&ved=0CBcQ6AEwAA#v=onepage&q=writeMonthCell()&f=false

if u scroll down to case 1
is what I am working on

included in the case are 2 other files as to the one i have to work on

i used all the proper steps and instructions and i think I have the correcting coding for my form

however my program still does not work

here is the exact code i am using
let me know if anyone sees any errors, as I am convinced i have it correct?

Here is my code:

<html>
<head>
<!--
New Perspectives on JavaScript
Tutorial 3
Case Problem 1

The Lighthouse
Author: John Res
Date: November 14 2010

Filename: clist.htm
Supporting files: lhouse.css, list.js, logo.jpg

-->
<title>The Lighthouse</title>
<link href="lhouse.css" rel="stylesheet" type="text/css" />
<script type"text/javascript" src"list.js"></script>
<script type="text/javascript">
function amountTotal() { // return sum of values to amount array
total=0;
for(var i=0; i<amount.length; i++) { // set variable to 0
total+=amount[i];
}
return total;
}
</script>
</head>

<body>

<div id="title">
<img src="logo.jpg" alt="The Lighthouse" />
The Lighthouse<br />
543 Oak Street<br />
Delphi, KY &nbsp;&nbsp;89011<br/>
(542) 555-7511
</div>

<div id="data_list">
<script type=”text/javascript”> // set up variables of rows and cellspaces
document.write(“<table border=’1′ rules=’rows’ cellspacing=’0′>”);
document.write(“<tr><th>Date</th><th>Amount</th><th>First Name</th>”);
document.write(“<th>Last Name</th><th>Address</th></tr>”);

for (i=0; i< amount.length; i++) { // create a loop in counter of variable starting at 0 and increase of 1 increments
if (i%2==0) document.write(“<tr>”);
else document.write(“<tr class=’yellowrow’>”); // have every row with a yellow background use a loop

document.write(“<td>”+date[i]+”</td>”);
document.write(“<td class=’amt’>”+amount[i]+”</td>”); // have values of the dates
document.write(“<td>”+firstName[i]+”</td>”);
document.write(“<td>”+lastName[i]+”</td>”);
document.write(“<td>”);
document.write(street[i]+”<br />”);
document.write(city[i]+”, “+state[i]+” “+zip[i]); // zip arrays for address
document.write(“</td>”);
document.write(“</tr>”);
}
document.write(“</table>”);
</script>

</div>

<div id="totals">
<script type=”text/javascript”> // use script elements in HTML
document.write(“<table border=’1′ cellspacing=’1′>”);
document.write(“<tr><th id=’sumTitle’ colspan=’2′>Summary</th></tr>”);
document.write(“<tr><th>Contributors</th>”);
document.write(“<td>”+amount.length+”</td></tr>”);
document.write(“<tr><th>Amount</th>”);
document.write(“<td>$”+amountTotal()+”</td></tr>”);
document.write(“</table>”);
</script>

</div>

</body>
</html>

thanks everyone

Hello, I'm new to this forum. I want to improve my ability to write JavaScript and am looking for a friendly place to find some constructive criticism and suggestions on my code.

This script does not have any practical use (that I can think of); it calculates prime numbers. It is just an exercise. I am looking for suggestions on all aspects from the CSS/aesthetics to the HTML and of course the JavaScript.

I posted the script here.

One definite thing that bugs me is the cursor is not in the text field when the page loads. Also it would be better if the user had the option of hitting the return key in addition to the submit button. Suggestions appreciated.

Code:

<!DOCTYPE html>
<html lang="en">
<head>

<title>Prime Number Calculator</title>
	<style type="text/css">
		form{
			width: 200px;
			border: solid 3px blue;
			border-style: double;
			padding:5px;
			text-align:center;
			background-color:#eee;
		}
		#title{
		
			text-align:center;
			border: solid 1px blue;
			background-color:#fff;
			margin:5px;
			padding:0px;
		}
	</style>
	<script src="jquery.js" type="text/javascript"></script>
	<script type="text/javascript">
		var candidates = new Array();
		function calculatePrimes(form){
  			var max = form.input.value; 
			
			//Check to make sure input is a number
			if(isNaN(max)){
				alert("Dude, you must enter a number!");
			}
			
			for(i=2; i<=max; i++){candidates[i]=i;}
			
			var i=2;
			for(i=2; i<Math.sqrt(max); i++){
				if (candidates[i]!=0){
					var j=i*i;
					while(j<max){
						candidates[j] = 0;
						j=j+i;
					}
				}
			}
			
			//Pull the primes out of the candidates
			i=2;
			var primesOut = "";
			for(i=2; i<max; i++){
				if(candidates[i]!= 0){
					primesOut = primesOut + ((i>2)?", " : "" ) + candidates[i];
				}
			}
			form.output.value = primesOut;
		}
	</script>
<head>
<body>
	<form>
		<h2 id="title">Prime-Number Calculator</h1>
		Check up to:<input type="text" name="input" size="5" value="100" \> <br />
		<textarea rows="5" cols="20" name="output"></textarea>
		<input  name="calc" value="Find!" type=button onClick="calculatePrimes(this.form)">
	</form>
</body>
</html>

I'm working on a new custom theme for my WordPress based site, and up until now I've been using the following PHP code to color code links based on whether the post was in the "Wii" category, "Xbox" category, or "PlayStation" category:

PHP Code:
<li>
    <?php if (in_category(3) ) { ?>
    <a style="color:#990000;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    <? }elseif (in_category(4) ) { ?>
    <a style="color:#669900;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    <? }elseif (in_category(7) ) { ?>
    <a style="color:#0099cc;" href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    <? } else { ?>
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
    <? } ?>
</li>

Thing is, I've now installed a plugin called "Recently Popular" that logs all visits and can output which posts were viewed the most in the past X days/weeks/months/etc. and the author has it set up to only allow HTML formatting via this line:

PHP Code:
<?php get_recently_popular(1, 'WEEK', 5, 0, 0, '<a href="%post_url%" rel="bookmark" title="%post_title%">%post_title%</a>'); ?>

I've tried sticking PHP in the line, but it only takes HTML. I've tried sticking one of these lines in each of the conditional statements above, but realized that this line outputs the entire "Recently Popular" list, not just one item - so everything would end up being the same color still. I contacted the plugin author, who said that without hardcoding there's no way to get around this via the plugin, but that outputting it normally and running it through JavaScript might give me a way to apply CSS styling to it after it's been rendered.

I'm not experienced with JavaScript, unfortunately... does anyone know how I can do this?

Hi

I have been trying to create a form using Django for a very long time but have not been able to get it to look the way I want. Someone suggested to me that I should use Javascript (Jquery) to do this.

Here's what I want to do. For the form I want, there are certain statuses at the bottom, like "Done", "Incomplete" and etc. When the form is filled in, the person will click on one of these statuses. What I want this button to do is to save the page/form and also to generate a few new links relating to the status selected.

For example, if the person selects "Done" this should save the form and generate two new buttons. One that says "Close" which would take you to the home page, and one that says "Continue" which would take you to the next form.

My problem is that I'm new to Django and have no experience with Javascript. So if anyone could help or give me hints that would be greatly appreciated.

Hi,

I'm still in the early stages of learning Javascript so I'm not sure how (or if it's possible) to do this. I know HTML, CSS, etc... just not too familiar with Javascript. Here's the deal.... I run a website that features a chat room written in Perl for CGI. The chat room will automatically email a user their password if it's forgotten but there is one issue.....it does not have the "Forgot Password?" link. To achieve the Lost Password page, the user must enter an invalid password FIRST on the login screen, otherwise they cannot get to that option and are often requesting assistance.

What I had in mind was an easier way for the user to get their password since new novice members are not sure how to get to the lost password page. I'm not trying to edit the Perl code for the chat, but I wanted to build a "Forgot Password?" page using a Javascript code that will automatically take their username from the "username" login field and direct them to the lost password page which would be "chat2.cgi?action=send_pwd&name=..."

I'm sorry if this is confusing, I'm not sure that I am explaining this right. When the user enters an invalid password, it takes them to the lost password page which contains a link "lost password" and will automatically email them their login details when clicked on. When they click that link, the URL contains the string "chat2.cgi?action=send_pwd&name=username"

What I would like to do is put a link on the login page (like most normal chat rooms have) that says "Forgot Password?". When clicked on, I want it to take them to a page where all they have to do is enter their username in a form and click Submit, then have a Javascript code automatically extract their username from that field and insert their username automatically to the end of that URL (chat2.cgi?action=send_pwd&name=...) where ... would be the name extracted from that form field. This would result in the browser taking them to that URL which would trigger the chat to automatically email the password. Can I do this with Javascript?? If so, any help would be greatly appreciated!

Hi, I'm currently trying to get javascript to work with internet explorer. I managed to get one part of the translation file to work. It's a javascript to change some of the words on Facebook from English to Secwepemc (native american language). The original file works in Firefox and Chrome but not in safari. I knew it was because internet explorer has its own parameters. A file works completely for FF and chrome but not for IE. So, I changed the language a bit so that IE can understand it. Now I have one part of the translation working but not the others. I am wondering if it would be better to use ID's, names, and class all together to get the english words I want to change. I am using grease monkey for IE to use this script. I know firefox and chrome are much better but the plan is for everyone to use and some people still use IE. I know that if I have part of the words translating, then it must be the wrong identifiers. If someone can either help me find the right identifiers or if I missed changing syntax from FF and Chrome to IE, that would be amazing! Here is the javascript file.

Code:

var es = new Array();
es["Home"] = "Tsitcw";
es["News Feed"] = "Lexeyem";
es["Friends"] = "Kweselkten";
es["Like"] = "Xwexwisten";
es[" likes this."] = " r xwexwistes.";
es["Today"] = "Pyin Te Sitqt";
es["Say hello."] = "Say weytk.";
es["Say hi."] = "Say weytk.";
es["Tomorrow"] = "Pexweyt";
es["What are you planning?"] = "Me7 Stemi ke7 tsuwet?";
es["Where?"] = "T'he7en";
es["Who's invited?"] = "Sweti7?";
es["What's on your mind?"] = "Stemi ke7 peti'nesme?";

function loadSecwepemc() {
	var fbelem = document.getElementsByTagName('a');

	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.innerText in es) {
		thisElem.innerText = es[thisElem.innerText];
	    }
	}

	var fbelem = document.getElementsByTagName('span');

	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.innerText in es) {
		thisElem.innerText = es[thisElem.innerText];
	    }
	}

	var fbelem = document.getElementsByClassName('ego_social_context');

	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.innerText in es) {
		thisElem.innerText = es[thisElem.innerText];
	    }
	}


	var fbelem = document.getElementsByTagName('input');
	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.getAttribute('placeholder') in es) {
		thisElem.setAttribute('placeholder',es[thisElem.getAttribute('placeholder')]);
	    }
	    if (thisElem.getAttribute('value') in es) {
		thisElem.setAttribute('value',es[thisElem.getAttribute('value')]);
	    }
	}

	var fbelem = document.getElementsByTagName('textarea');
	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.getAttribute('placeholder') in es) {
		thisElem.setAttribute('placeholder',es[thisElem.getAttribute('placeholder')]);
	    }
	    if (thisElem.getAttribute('title') in es) {
		thisElem.setAttribute('title',es[thisElem.getAttribute('title')]);
	    }
	    if (thisElem.innerText in es) {
		thisElem.innerText = es[thisElem.innerText];
	    }
	}

	var fbelem = document.getElementsByTagName('h3');
	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.innerText in es) {
		thisElem.innerText = es[thisElem.innerText];
		thisElem.attachEvent( "onClick", loadSecwepemc());  // capture phase
	    }
	}

	var fbelem = document.getElementsByTagName('h2');
	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.innerText in es) {
		icon = thisElem.childNodes[0]
		thisElem.innerText = es[thisElem.innerText];
		thisElem.appendChild(icon)
	    }
	}
}

loadSecwepemc();

function changedNode(e) {
	var fbelem = e.target.getElementsByTagName('a');

	for (var i = 0; i < fbelem.length; i++) {
		    var thisElem = fbelem[i];
		    if (thisElem.innerText in es) {
		    		thisElem.innerText = es[thisElem.innerText];
		    	    }
		}

	var fbelem = e.target.getElementsByTagName('span');

	for (var i = 0; i < fbelem.length; i++) {
		    var thisElem = fbelem[i];
		    if (thisElem.innerText in es) {
		    		thisElem.innerText = es[thisElem.innerText];
		    		thisElem.attachEvent( "onLoad", loadSecwepemc());  // capture phase
		    
		    	    }
		}
		
	var fbelem = e.target.getElementsByClassName('ego_social_context');

	for (var i = 0; i < fbelem.length; i++) {
		    var thisElem = fbelem[i];
		    if (thisElem.innerText in es) {
		    		thisElem.innerText = es[thisElem.innerText];
		    	    }
		}



	var fbelem = e.target.getElementsByTagName('input');
	for (var i = 0; i < fbelem.length; i++) {
		    var thisElem = fbelem[i];
		    if (thisElem.getAttribute('placeholder') in es) {
		    		thisElem.setAttribute('placeholder',es[thisElem.getAttribute('placeholder')]);
		    	    }
		    if (thisElem.getAttribute('value') in es) {
		    		thisElem.setAttribute('value',es[thisElem.getAttribute('value')]);
		    	    }
		}
	var fbelem = document.getElementsByTagName('textarea');
	for (var i = 0; i < fbelem.length; i++) {
	    var thisElem = fbelem[i];
	    if (thisElem.getAttribute('placeholder') in es) {
		thisElem.setAttribute('placeholder',es[thisElem.getAttribute('placeholder')]);
	    }
	    if (thisElem.getAttribute('title') in es) {
		thisElem.setAttribute('title',es[thisElem.getAttribute('title')]);
	    }
	    if (thisElem.innerText in es) {
		thisElem.innerText = es[thisElem.innerText];
	    }
	}

	var fbelem = e.target.getElementsByTagName('h3');
	for (var i = 0; i < fbelem.length; i++) {
		    var thisElem = fbelem[i];
		    if (thisElem.innerText in es) {
		    		thisElem.innerText = es[thisElem.innerText];
		    		thisElem.attachEvent( "onClick", loadSecwepemc());  // capture phase
		    	    }
		}

	var fbelem = e.target.getElementsByTagName('h2');
	for (var i = 0; i < fbelem.length; i++) {
		    var thisElem = fbelem[i];
		    if (thisElem.innerText in es) {
		    		icon = thisElem.childNodes[0]
		    		thisElem.innerText = es[thisElem.innerText];
		    		thisElem.appendChild(icon)
		    	    }
		}
}

document.attachEvent('onNodeInserted', changedNode());

How to I create the following code...

Code:

 #moving {
 	position:absolute;
 	float:right;
    top:100px;
    left:50px;
 }
  #movingword {
 	position:absolute;
 	float:right;
    top:0px;
    left:0px;
 }

... and this code ...


Code:

<div id="movingword">
	<font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font>
	</div>

... programmatically using Javascript?

(I will need a X number of "movingwords" and "moving", where X is a number and examples are "movingwords0", "movingwords1", "movingwords2" ... movingwordsX)




Here the full code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<title></title>

<style type="text/css">
body {
    background-color:#000;
 }
#scenery {
 	position:relative;
 }
 
 #moving {
 	position:absolute;
 	float:right;
    top:100px;
    left:50px;
 }
  #movingword {
 	position:absolute;
 	float:right;
    top:0px;
    left:0px;
 }
</style>

<script type="text/javascript">

var t=125;
var l=20;
$(document).ready(function() {
	document.getElementById("movingword").style.top = t + "px";
	document.getElementById("movingword").style.left = l + "px";
});

</script>

</head>
<body>

<font color=white><h1> Hello World </h1></font>

<div id="scenery">
 <img src="http://www.deshow.net/d/file/travel/2009-10/new-zealand-scenery-738-20.jpg" alt="">
	<div id="moving">
	<img src="http://cdn1.iconfinder.com/data/icons/gloss-basic-icons-by-momentum/32/bullet-yellow.png" alt="">
	</div>
	<div id="movingword">
	<font color="yellow"><font size="3"><b>This is the place</b></font><br>Welcome!</font>
	</div>
</div>

</body>
</html>