JavaScript - What Is The Problem In This Code (settimeout Function Does Not Work)

Hey everyone,

I wanted to write my own script for a fade-in animation, since the ones I have found have got too many options or need some framework, which makes them unnecessarily big. I wanted to learn too.

Unfortunately, the code didn't work as I wanted, and I commented some things so as to find out what's happening.

The only function called from outside is fadeIn with a string as argument (in the example, this string is: d1296668690535). This is the code:

Code:

var fadems = 500;	// Anim. duration in milliseconds
var fps = 20;		// Frames per second

function fadeIn(elemId){
	var frames = fadems/1000 * fps;
	var delay = 1000 / fps;
	var incrOp = 1 / frames;
	
	//document.getElementById(elemId).style.zoom = '1';
	
	setOp(elemId, 0);
	
	for(i=1; i<=frames; i++){
		debugOutLn("(fadeIn for) elemId = " + elemId);
		setTimeout("setOp(" + elemId + "," + incrOp*i + ")", delay*i);
	}
}

function setOp(elemId, val){
	debugOutLn("(setOp) elemId = " + elemId + "; val = " + val);
	// document.getElementById(elemId).style.opacity = val;
	// document.getElementById(elemId).style.filter = 'alpha(opacity = ' + val * 100 + ')';
}

Code:

function debugOutLn(str){
	document.getElementById("debug").innerHTML += str + "<br />";
}

And this is the text it outputs (on Opera 11.01):

Code:

(setOp) elemId = d1296668690535; val = 0
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(fadeIn for) elemId = d1296668690535
(setOp) elemId =  [object HTMLDivElement] ; val = 0.1
(setOp) elemId =  [object HTMLDivElement] ; val = 0.2
(setOp) elemId =  [object HTMLDivElement] ; val = 0.30000000000000004
(setOp) elemId =  [object HTMLDivElement] ; val = 0.4
(setOp) elemId =  [object HTMLDivElement] ; val = 0.5
(setOp) elemId =  [object HTMLDivElement] ; val = 0.6000000000000001
(setOp) elemId =  [object HTMLDivElement] ; val = 0.7
(setOp) elemId =  [object HTMLDivElement] ; val = 0.8
(setOp) elemId =  [object HTMLDivElement] ; val = 0.9
(setOp) elemId =  [object HTMLDivElement] ; val = 1

Why is an object reference assigned to what was previously a string?


Thanks for the help!

hi,

i'm making a page with an image on it. when that image is clicked i want it to make one div visible, and also run the javascript function to make a second div visible after 2 seconds. Everything seems to work correctly except that the javascript runs on page load instead of waiting for when the image is clicked. any help much appreciated. thanks!

Here's the javascript:
<code
<script type="text/javascript">
function showIt() {
document.getElementById("show_1").style.visibility = "visible";
}
setTimeout("showIt()", 2000);
</script>
</head>
</code>

Here's the html:
<code>
<div id="flyer1">content
<div id="show_1" style="visibility:hidden">content
</div>
</div>

<div id="image">
<a href="javascript:void(0)" onclick="MM_showHideLayers('flyer1', '','show')"; "showIt()">image</a>
</div>
</code>

I'm working on a disjointed rollover, with several links changing an image in another location. There is a default image that appears when the page opens and whenever you roll off any of the links. Initially, the problem was that mousing from one link to the next caused a quick flash of the default image because there is a little space between these links. To address that, I added a time out to keep the default image from appearing immediately on onmouseout. Now, when I mouse from one link to the next I get a smooth transition, but then the delayed onmouseout function kicks in while still hovering over a link. How can I make hovering over a new link override this delayed onmouseout?

Here's the script:
Code:

<script type="text/javascript">
	window.onload = preloader()

	function preloader(){
	var pic1 = new Image();
	pic1.src = "images/cover1.jpg";
	var pic2 = new Image();
	pic1.src = "images/cover2.jpg";
	var pic3 = new Image();
	pic1.src = "images/cover3.jpg";
	var pic4 = new Image();
	pic1.src = "images/cover4.jpg";
	}
	
	function bookInfoSwap(imgSrc,ID,bInfo) {
		document.getElementById("covers").src = imgSrc;
		document.getElementById("courseID").innerHTML = ID;
		document.getElementById("bookInfo").innerHTML = bInfo;
	}
	
	function swapDelay() {
		setTimeout("bookInfoRevert()",3000);
	}
	
	function bookInfoRevert() {
		document.getElementById("covers").src = "images/covers.gif";
		document.getElementById("courseID").innerHTML = "&nbsp;";
		document.getElementById("bookInfo").innerHTML = "&nbsp;";
	}
	 
	

</script>

...and a couple of the links:

Code:

<a href="http://www.mymathlab.com/" target="_blank" onmouseover="bookInfoSwap('images/cover6.jpg','Self Study Course ID: <br />cos68804','Billstein, <em>A Problem Solving approach to Mathematics for Elementary School Teachers, 9/e and Custom Edition</em>');" onmouseout="swapDelay();" class="courseTab">Math 10/11</a>

<a href="http://www.mymathlab.com/" target="_blank" onmouseover="bookInfoSwap('images/cover4.jpg','Self Study Course ID: <br />cos59796','Sullivan, <em>Statistics: Informed Decisions Using Data, 3/e</em>');" onmouseout="swapDelay();" class="courseTab">Math 21</a>

Thanks.

I have 2 news tickers that I want to show one after the other. They are both widgets (javascript) that I grabbed from the stated website. However to get one to run after the other I felt like I needed a setTimeout(). So I made one of them delayed (ticker8) but instead of JUST appearing after 5000 ms, it appears and EVERYTHING ELSE DISAPPEARS. I know that it's something silly I just can't figure out what it is. The HTML code is below.

[CODE]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script LANGUAGE='JavaScript' type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_EconomicStats_US.js'></script>
</head>

<body>

<div id="ticker6">
<script LANGUAGE='JavaScript' type='text/javascript' SRC='http://www.theFinancials.com/syndicated/Free/EXk_Interest_TBills.js'></script>
<script LANGUAGE='JavaScript' type='text/javascript'>
document.writeln(EXk_Interest_TBills('0050201336','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'37373 7'));
</script>
</div>

<div id="ticker8">


<script type="text/javascript">

setTimeout("ticker8()", 5000);

function ticker8()
{
<!--START theFinancials.com Content-->
<!--copyright theFinancials.com - All Rights Reserved-->
document.writeln(EXk_EconomicStats_US('0199604514','100%','C9C9C9','yes','6B6B6B','Arial',11,1,'3737 37'));
<!--END theFinancials.com Content-->
}
</script>
</div>

</body>
</html>

[CODE]

Would really appreciate some help with this one.

Many thanks in advance

Hello all.

I am doing an experiment with setTimeout for a much larger project and cant seem to get this bit of code working. What is "supposed" to happen is on hover the div goes black, and on removing the mouse it turns red after 1 second. however, it doesnt work. ive tried a bunch of variations but nothing gets it to work. i want to line up a bunch of divs and not need to write a seperate function for each one. any ideas?

here is the HTML:

Code:

<div id="0" onMouseOver="blackit('0')" onMouseOut="fadeit('0')"></div>
<div id="1" onMouseOver="blackit('1')" onMouseOut="fadeit('1')"></div>
<div id="2" onMouseOver="blackit('2')" onMouseOut="fadeit('2')"></div>
<div id="3" onMouseOver="blackit('3')" onMouseOut="fadeit('3')"></div>

here is the JavaScript:
Code:

function blackit(elemID)
{
document.getElementById(elemID).style.backgroundColor="#000";
}

function fadeit(elemID)
{
setTimeout("document.getElementById(elemID).style.backgroundColor='red'", 1000);
}

there is some CSS but nothing crazy. it should work but it doesnt. the black on hover works but then it either stays black or goes red immediately, not waiting the 1 second.

thanks

Hello,

I have two frames, one to the left, one to the right.
The left one contains a form, which I'm using to take in user input, and at the same time to refresh the frame on the right.

The left frame's code is:

Code:

<html>
<head>
<script type="text/javascript">
function reload_right_frame()
{ 
parent.right_frame.location.reload();
}
</script>
</head>

<form method="post">
<input type="submit" value="Enter"  onClick="reload_right_frame();">
<input type='text' name='userinput'>
</form>

<?php
echo "You entered: " . $_POST['userinput'];
?>

</html>

This succeeds in spewing out what the user entered, and simultaneously refreshing the right-hand frame.

However, I want there to be a delay in refreshing the right-hand frame, so I changed the left-frame coding as follows:

Code:

<html>
<head>
<script type="text/javascript">
function delayed_reload()
{
var t=setTimeout("reloadframe()",3000);
}
function reload_right_frame()
{ 
parent.right_frame.location.reload();
}
</script>
</head>

<form method="post">
<input type="submit" value="Enter"  onClick="delayed_reload();">
<input type='text' name='userinput'>
</form>

<?php
echo "You entered: " . $_POST['userinput'];
?>

</html>

This is where it stops working. The right-hand frame is not reloaded at all. I want it to reload after 3 seconds. The user input text is spewed out, though.

If I change the input type from "submit" to "button", however, the delayed reload of the right-hand frame works fine, but then the user input text fails to show.

How can I make both form and delayed reload both work? I'm probably missing something obvious.

Thanks in advance for any help!

I'm new to JS and I can't get this function to display. Can you help me please? 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=utf-8">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title>Untitled</title>
<head>
<script type="text/javascript">
function creatediv(){
var nwdiv=document.createElement('div');
nwdiv.style.float='right'
nwdiv.id='mydiv';
var txt='hello world!';
document.body.apendChild(nwdiv);
document.getElementById(mydiv).innerHTML=txt;
document.write(txt);
}
</script>
<style type="text/css">
</style>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="creatediv()" />
</form>


</body>
</html>

hello, would you please tell me why my function does not work?
what's wrong with my code

Code:

<html>

<head>

<title> Egypt </title>

</head>

<body>

<form name="myform" action="#" onsubmit="return checkBoxes(this);">
<div align="left"><br>
<input type="checkbox" name="option1" value="Top10"> Top 10 Tourist Attractions of Egypt<br>
<input type="checkbox" name="option2" value="Alexandria"> Alexandria <br>
<input type="checkbox" name="option3" value="POIs"> POIs<br>
<br>
<INPUT TYPE=SUBMIT VALUE="submit">

</div>
</form>


<script type="text/javascript">

function checkBoxes(theForm) {
	if (
	theForm.option1.checked == false &&
	theForm.option2.checked == false &&
	theForm.option3.checked == false) 
	{
		alert ('You didn\'t choose any of the checkboxes!');
		return false;
	} else { 	
		return true;
	}




</script>
</body>

</html>

I made a 50th anniversary guestbook to add memories/etc about our organization. The people can look at the entries and then if they want to add one of there own, there's a link that should pop up a form in a new for them to add it. I have no idea why this pop is not working in Internet Explorer (both IE6 and 7). It works beautifully in Firefox. I have no idea how you can go wrong with window.open. I'm stuck.

Again, only the actual pop up function doesn't work. Everything else seems to be working fine. I included all of my code though even for the tab navigation because the link to the pop up form changes based on what tab they are in (i.e. if they're looking at the past memories tab and click on the link, it takes them to the past memories form). I know it's probably TMI on the code, but I thought it might be somehow related and better safe than sorry, right?

HTML Page

Code:

<html>
<head>
<title>50th Anniversary Reflections</title>
<script type="text/javascript" src="js/guestbook.js"></script>
<link href="css/guestbook.css" media="all" type="text/css" rel="stylesheet">
</head>

<body>
<div id="guestbook_container">

<div id="tab_nav_container">	
    <ul>
    <li><div id="tab_1" class="tabs_on" onclick="tabsClass.switchTab(this);"><a target="gstbk_frame" href="guestbook_query.asp?cat=1" onclick="change_value(1);">Past Memories</a></div></li>
    <li><div id="tab_2" class="tabs_off" onclick="tabsClass.switchTab(this);"><a target="gstbk_frame" href="guestbook_query.asp?cat=2" onclick="change_value(2);">Career Impact</a></div></li>
    <li><div id="tab_3" class="tabs_off" onclick="tabsClass.switchTab(this);"><a target="gstbk_frame" href="guestbook_query.asp?cat=3" onclick="change_value(3);">Future Wishes</a></div></li>
    <li><div id="new" class="tabs_off" onclick="popupform();">Share Your Memories</div></li>
    </ul>
</div><!-- end tab_nav_container -->

<div id="tab_content_container">
  <div id="tab_1_data" class="tab_content"><p class="tab_category">What is your most important memory of NACUA?</p></div>
  <div id="tab_2_data" class="tab_content" style="display: none;"><p class="tab_category">How has NACUA benefitted you and your career?</p></div>
  <div id="tab_3_data" class="tab_content" style="display: none;"><p class="tab_category">What is your most important wish or hope for NACUA's future?</p></div>
</div><!-- end tab_content_container -->

<script type="text/javascript">
tabsClass.addTabs("tab_nav_container");
</script>
<br class="clear" />

<div id="iframe_container">
<iframe name="gstbk_frame" id="gstbk_frame" src="guestbook_query.asp?cat=1" width="730px" height="550px" scrolling="auto" frameborder="none"></iframe>
</div><!-- end iframe_container -->
<br class="clear" />

</div><!-- end guestbook_container -->
</body>
</html>

Here's the guestbook.js file:

Code:

//***** ASSIGN/CHANGE CATEGORY VALUES *****

function popupform(){
	var href;
	href="guestbook_submission_form.asp?cat="+catValue;
	window.open(href, "Submission Form", 'width=600, height=400, scrollbars=no');
}

var catValue = "1"

function change_value(catChange){
 	catValue=catChange;
	change_text();
}

function change_text(){
	if(catValue=="1"){
		document.getElementById("new").innerHTML = "<a href='#' style='color:#ffffff;'>Share Your Memories!</a>";
	}
	if(catValue=="2"){
		document.getElementById("new").innerHTML = "<a href='#' style='color:#ffffff;'>Share Your Career Experiences!</a>";
	}
	if(catValue=="3"){
		document.getElementById("new").innerHTML = "<a href='#' style='color:#ffffff;'>Add Your Own Wish!</a>";
	}
}


//***** ASSIGN/CHANGE VALUES AND TABS *****

function assignCategory(cat){
	document.form.category.value=cat;
}

function onLoadAssignAndSwitch(cat){
	assignCategory(cat);
	tabsClass.addTabs("tab_nav_container");
	var initialTab = "tab_" + cat + "_data"
	if (initialTab != "tab_1_data"){
		document.getElementById(initialTab).style.display = "";	
		document.getElementById("tab_1_data").style.display = "none";
	}	
	document.getElementById("tab_" + cat).className = "tabs_on";
}

function assignAndSwitch(element, cat){
	tabsClass.switchTab(element);
	assignCategory(cat);
}


//***** TABBED MENU *****

var tabsClass = {
	tabSetArray: 	new Array(),
	classOn: 		"tabs_on",
	classOff: 		"tabs_off",
	
	addTabs: function (tabsContainer) {
		tabs = document.getElementById(tabsContainer).getElementsByTagName("div");
		for (x in tabs) {
			if (typeof(tabs[x].id) != "undefined") {
				this.tabSetArray.push(tabs[x].id);
			} else {}
		}
	},

	switchTab: function (element) {
		for (x in this.tabSetArray) {
			tabItem = this.tabSetArray[x];
			dataElement = document.getElementById(tabItem + "_data");
			if (dataElement) {
				if (dataElement.style.display != "none") {
					dataElement.style.display = "none";
				} else {}
			} else {}

			tabElement = document.getElementById(tabItem);
			if (tabElement) {
				if (tabElement.className != this.classOff) {
					tabElement.className = this.classOff;
				} else {}
			} else {}
		}

		document.getElementById(element.id + "_data").style.display = "";
		element.className = this.classOn;
	}
};

I'm not that advanced in javascript (although not a total idiot) Any help and/or suggestions would be greatly appreciated! Thank you!

hello,

I posted a threat a couple of days ago, but i got no answer. I guess it was just too messy. So i'm trying over again. You might therefore have a little deja vu, but still, any help will be greatly appreciated.

I need this function to work on all my div, separately, on loading.
here is the function:

Code:

<script>
// Random Position Script

var xxx = Math.floor(Math.random()* (pageWidth()-230));
var yyy = Math.floor(Math.random()* (pageHeight()-50));

function start() 
{var x = (posLeft()+xxx) + 'px'; 
var y = (posTop()+yyy) + 'px'; 
moveObjTo('myobj',x,y); 
setObjVis('myobj','visible');}
window.onload = start;
window.onscroll = start;// JavaScript Document

</script>

At the moment, the function is working on one object ('myObj'). I laced all my documents into separate divs and i need them all (and seperatly) to load on a random position at start. So i need to write in something that makes this function keep on going for all my objects.

It might seem like a very dumb question, but 'm just starting with javascript, so not much of a coder yet. Hope you can help o this one.

nice day to everybody!

I've been trying for several hours to solve this University problem but I'm just unable to get it done.
I'm supposed to create a function that takes an array with all the A,B,C,D ... and shift them one place to the right (for instance array of A,B,C,D should be shifted and be like D,A,B,C - the last character goes to first position)

Here is the code that I've been dealing with:

Code:

var abcArray = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

function shift(anyArray)
{
var newArray = Array(anyArray.length);
for (var position = 0; position < newArray.length; position = position + 1)
{
if (position == 0)
{
newArray[position] = anyArray[anyArray.length - 1];
}
else
{
newArray[position] = anyArray[position - 1];
}
}
anyArray = newArray;
}

shift(abcArray);
document.write(abcArray);

If I remove the function and try this code directly on the array it does work, but when I use the code as it is just like you see - the function shift doesn't change the Array and doesn't shift the values inside one position to the right and I have no clue why.

Anyone has some ideas?!

Hey guys,

I'm beginning to learn javascript, and I've come across functions like the one below in many scripts. I just don't understand the purpose of the parameter! Nothing is being passed into the function when it's being called- so what's the point of specifying an argument???

Code:

function doSomething(e) {
	if (!e) var e = window.event;
	alert(e.type);
}

Why not:

Code:

function doSomething() {
	var e = window.event;
	alert(e.type);
}

Hi!

What am doing wrong? The script works -- identifies blank fields -- but the second function (change_subject) is ignored.

This is the script:

Code:

<HEAD>
<script>
  function is_filled()  
  {
    if (form_1.realname.value=="")
      {
        alert("Please enter your name")
        form_1.realname.focus()
        return false
      }
    if (form_1.subject.value=="")
      {
        alert("Please enter a subject")
        form_1.message.focus()
        return false
      }
else
return true
  };
  function change_subject
  {
  form_1.subject.value="form_1.realname.value + '_' + form_1.subject.value"
  };
</script>
</HEAD>

This is the FORM (used for MSA FormMail):

Code:

	  <form  name="form_1"; onSubmit="return is_filled()"; on Submit="change_subject()"; method="post"; action="http://gb2gf.org/cgi-sys/FormMail.cgi">
	  <input type="hidden" name="recipient"    value="drt@gb2gf.org">
	  <input type="hidden" name="required"     value="greeting,realname,city_state,email_1,email_2,message">
	  <input type="hidden" name="sort"         value="order:greeting,realname,city_state,email_1,email_2,message">
	  <input type="hidden" name="redirect"     value="http://www.gb2gf.org/thanks.htm">

<!-- Input fields here -->

           </form>

Thanks!

Dr. T.

I'm still learning js core using Flanagan's 5th ed.
so please bear with me; is the if ("ignore" in arguments.callee) return;
below valid or a typeo?
Thanks J.
Code:

function inspect(inspector, title) {
    var expression, result;

    // You can use a breakpoint to turn off subsequent breakpoints by
    // creating a property named "ignore" on this function.
    if ("ignore" in arguments.callee) return;
.......