JavaScript - Adding A Settimeout To This Function

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 trying to toggle a class and one works and the other does not and I don't know why. I'm just getting my feet wet with jquery and javascript and I figured this was a pretty easy task to take on! Maybe.

Link to the page:
Franklin Township Soccer Club - Change Field Status

My sad, sorry attempt =|

Code:

	$( "li.open" ).click(function() {
	$( this ).toggleClass( "closed" );
	});
	
	$( "li.closed" ).click(function() {
	$( this ).toggleClass( "open" );
	});

The first function works with open, so I figured I'd just use opposite on closed! Ha! I don't think so!

In the end within those function there is an element in a form on that page it's hidden. I'd like to change the value from a 0 to 1 for vice versa. That' will be my next step. If you could give me a little nudge in the right direction I'd appreciate it! But first understanding why one works and the other does not, that is the primary mission!

I do appreciate any help given!

Dave

Hey guys,

I'm using a couple of JQuery plugins:

Quicksand - Shuffle/re-order
PrettyPhoto - standard lightbox type image viewer

I'm using Quicksand to filter my images, like a gallery, sorted into categories for my work; illustration, website, applications etc.

This is working fine.

I'm using PrettyPhoto to allow the user to click these images and see them in a larger size. This works fine when 'all' is selected from the quicksand menubar.

However, if I filter the list to any other option, PrettyPhoto doesn't work and clicking the image results in it opening in a new page.

Essentially, I need to re-call or re-load PrettyPhoto after the animation for filtering ends. But I don't know how.

You can see my galllery at:

http://www.gurugroup.net/#3

You can view the PrettyPhoto and Quicksand Javascript files he

http://www.sim-modding.com/stuff/javascripts/

I assume the re-call line would go somewhere around he

Code:

// Gets called when any animation is finished

Thankyou in advance.

Ste.

Heya guys

I'm looking for someone with a vast knowledge of Javascript... by any chance someone over here has some time to help a newby out?
(I think 10 minutes should be enough)



<INPUT TYPE="button" NAME="addToArray " VALUE=" ATA " OnClick="addToArray() "> <!--Add To Array -->
<INPUT TYPE="button" NAME="clearArray" VALUE=" CA " OnClick="clearArray()"> <!--Clear Array -->
<INPUT TYPE="button" NAME="showArray" VALUE=" SA " OnClick="showArray() "> <!--Show Array -->

These are my buttons.

What I want them to do is simply add something to an array, clear the array and show them on my screen.

I am working on an HTML project that displays a field with a number in the field by each day. What it does is start at 0 on day one. Each day it adds a 1 to the field. Day 2, the field would say 1, then day 3 would say 2, and so on. I am not sure how to approach this. This is also displayed in an HTML format. I want to to be automatic and change as the date changes. I will also need a way to reset it back to zero if possible.

Hi there, I'm looking for some help with modifying an existing function which controls the highlighted states of a multi level js accordion menu. I have had to use javascript due to certain css elements not working in safari browsers.

My problem is due to the multi level aspect as when a sub link is clicked, the parent link above it then deselects. I need the parent link to stay active when its sub links are clicked and only deselects when a link outside of that list is clicked upon.

I understand the theory of adding a conditional statement but simply don't know how to apply it correctly within the function...any help would be very much appreciated.

Here is the existing function which tells a link to be active or selected:

Code:

var Lst;

function CngClass(obj){
 if (Lst) Lst.className='.topnav';
 obj.className='selected';
 Lst=obj;
}

and here is the menu code:

Code:

<ul class="topnav">
	<li><a href="#">Home</a></li>
	
	<li><a onclick="CngClass(this);" href="#">Top Link 2</a>
		<ul>
			 <li><a onclick="CngClass(this);" href="#">Cookies</a></li>
			 <li><a onclick="CngClass(this);" href="#">Events</a></li>
			 <li><a onclick="CngClass(this);" href="#">Forms</a></li>
			 <li><a onclick="CngClass(this);" href="#">Games</a></li>
			 <li><a onclick="CngClass(this);" href="#">Images</a></li>
			 <li><a onclick="CngClass(this);" href="#">Navigations</a>
				<ul>
					<li><a onclick="CngClass(this);" href="#">CSS</a></li>
					<li><a onclick="CngClass(this);" href="#">JavaScript</a></li>
					<li><a onclick="CngClass(this);" href="#">JQuery</a></li>
				</ul>
			</li>
			 <li><a onclick="CngClass(this);" href="#">Tabs</a></li>
		</ul>
	</li>
	<li><a onclick="CngClass(this);" href="#">Tutorials</a>
		<ul>
			 <li><a onclick="CngClass(this);" href="#">HTML</a></li>
			 <li><a onclick="CngClass(this);" href="#">CSS</a></li>
			 <li><a onclick="CngClass(this);" href="#">JavaScript</a></li>
			 <li><a onclick="CngClass(this);" href="#">Java</a>
				<ul>
					<li><a onclick="CngClass(this);" href="#">JSP</a></li>
					<li><a onclick="CngClass(this);" href="#">JSF</a></li>
					<li><a onclick="CngClass(this);" href="#">JPA</a></li>
					<li><a onclick="CngClass(this);" href="#">Contact</a></li>
				</ul>
			</li>
			 <li><a onclick="CngClass(this);" href="#">Tabs</a></li>
		</ul>
	</li>
	<li><a onclick="CngClass(this);" href="#">Contact</a></li>
	<li><a onclick="CngClass(this);" href="#">Upload script</a></li>
</ul>

Thanks for any help or advice.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
I am learning to programme in HTML5 and Java, and I'd like some assistance with what I am sure is a pretty basic matter, if possible please? If anyone can assist it would be most appreciated?

I am using Dreamweaver (latest version)...

This code here below when run produces a google map with a street address look up input.

I am wanting to learn how to look up an address and submit this to resolve within the map, and also to insert a place holder... I'd like the look up box to sit within (and overlay) the map top left area - at the moment it sits below the map - which i guess is because I haven't inserted a frame??

Many Thanks grin):

***CODE***

<!DOCTYPE html>
<html>

<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 5; padding: 5;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="map-canvas"></div>
</body>


<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places"></script>
<script>
// This example displays an address form, using the autocomplete feature
// of the Google Places API to help users fill in the information.

var placeSearch, autocomplete;
var componentForm = {
street_number: 'short_name',
route: 'long_name',
locality: 'long_name',
administrative_area_level_1: 'short_name',
country: 'long_name',
postal_code: 'short_name'
};

function initialize() {
// Create the autocomplete object, restricting the search
// to geographical location types.
autocomplete = new google.maps.places.Autocomplete(
/** @type {HTMLInputElement} */(document.getElementById('autocomplete')),
{ types: ['geocode'] });
// When the user selects an address from the dropdown,
// populate the address fields in the form.
google.maps.event.addListener(autocomplete, 'place_changed', function() {
fillInAddress();
});
}

// [START region_fillform]
function fillInAddress() {
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();

for (var component in componentForm) {
document.getElementById(component).value = '';
document.getElementById(component).disabled = false;
}

// Get each component of the address from the place details
// and fill the corresponding field on the form.
for (var i = 0; i < place.address_components.length; i++) {
var addressType = place.address_components[i].types[0];
if (componentForm[addressType]) {
var val = place.address_components[i][componentForm[addressType]];
document.getElementById(addressType).value = val;
}
}
}
// [END region_fillform]

// [START region_geolocation]
// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var geolocation = new google.maps.LatLng(
position.coords.latitude, position.coords.longitude);
autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,
geolocation));
});
}
}
// [END region_geolocation]

</script>

<style>
#locationField, #controls {
position: relative;
width: 480px;
}
#autocomplete {
position: absolute;
top: 0px;
left: 0px;
width: 99%;
}
.label {
text-align: right;
font-weight: bold;
width: 100px;
color: #303030;
}
#address {
border: 1px solid #000090;
background-color: #f0f0ff;
width: 480px;
padding-right: 2px;
}
#address td {
font-size: 10pt;
}
.field {
width: 99%;
}
.slimField {
width: 80px;
}
.wideField {
width: 200px;
}
#locationField {
height: 20px;
margin-bottom: 2px;
}
</style>
</head>

<body onload="initialize()">
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address"
onFocus="geolocate()" type="text"></input>
</div>

<table id="address">
<tr>
<td class="label">Street address</td>
<td class="slimField"><input class="field" id="street_number"
disabled="true"></input></td>
<td class="wideField" colspan="2"><input class="field" id="route"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">City</td>
<td class="wideField" colspan="3"><input class="field" id="locality"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">State</td>
<td class="slimField"><input class="field"
id="administrative_area_level_1" disabled="true"></input></td>
<td class="label">Zip code</td>
<td class="wideField"><input class="field" id="postal_code"
disabled="true"></input></td>
</tr>
<tr>
<td class="label">Country</td>
<td class="wideField" colspan="3"><input class="field"
id="country" disabled="true"></input></td>
</tr>
</table>
</body>
</html>

Hi, firstly I apologise if the title of this thread isn't quite accurate. I'm sure you've all heard it before but I am a complete newbie to Javascript so again: apologies if this is boring and tiresome to even read, let alone help with!

I have been asked to make some changes to a form that uses Javascript for the form validation. There is a 'function' that contains the variables of the various form fields and then further code to raise 'alerts' if one of the fields on the form hasn't been filled in. My problem is that for some reason I am unable to add an extra variable to this code after the field of 'County' (this will hopefully make sense when you see the code / link...) and I am stumped as to why. I am able to add variables for all of the other required fields except for 'Postcode' after 'County'. This is the case for both forms. The link is he http://samdelara.co.uk/previews/banq...ation-form.htm and the code I am trying edit is below:

function checkAvailibility()
{
// re-calculate...
calculate ();
if ( isName() && isAddress1() && isTown() && isCounty() && isPostcode() && isYourEmail() && isFuncDate() && somethingToQuoteFor() && isYourEmailValid() ) {
document.ordersummary.emailQuote.value = "No";
setValue();
return true;
}
else
{
return false;
}
}


function isName() { if (document.ordersummary.Name.value=="") { alert ("\n Please Enter Your Name")
document.ordersummary.Name.focus(); return false; } return true; }
function isAddress1() { if (document.ordersummary.Address1.value=="") { alert ("\n Please Enter Your Address")
document.ordersummary.Address1.focus(); return false; } return true; }
function isTown() { if (document.ordersummary.Town.value=="") { alert ("\n Please Enter Your Town")
document.ordersummary.Town.focus(); return false; } return true; }
function isCounty() { if (document.ordersummary.County.value=="") { alert ("\n Please Enter Your County")
document.ordersummary.County.focus(); return false; } return true; }
function isPostcode() { if (document.ordersummary.Postcode.value=="") { alert ("\n Please Enter Your Postcode")
document.ordersummary.Postcode.focus(); return false; } return true; }
function isYourEmail() { if (document.ordersummary.YourEmail.value=="") { alert ("\n Please Enter Your Email")
document.ordersummary.YourEmail.focus(); return false; } return true; }
function isFuncDate() { if (document.ordersummary.FuncDate.value=="") { alert ("\n Please Enter Your Function Date")
document.ordersummary.FuncDate.focus(); return false; } return true; }
function isemailonly() { if (document.ordersummary.emailonly.value=="") { alert ("\n Please Enter Your Email Address")
document.ordersummary.emailonly.focus(); return false; } return true; }

Any help with this would be very much appreciated and once again, I apologise for my distinct lack of knowledge in this area!

Sam

Hello, all. I have a script that toggles an element's style between display block and display none based on an onclick event.

It's being implemented in a content management system (WordPress) so it has some dynamic post ID's assigned to it.

I have tried editing it to toggle the variable "type" so that I can have the class of the div change with the rest of the variables being swapped during the toggle, but no matter what I've changed I can't seem to get it to update the variable when someone clicks on the link with the onclick event.

Everything else works perfectly, content is shown and hidden when you click the link, I just can't get the "type" variable to switch.

I think it's something to do with the JavaScript function itself (it looks to me like it's only looking at 4 variables and this new one would be a new variable that's being toggled).

Below is the code. How can I get the type variable to update like the others (hidden_css, tmp_text, more_text, less_text)?

Code:

/*-----------------------------------------------------------------------------------*/
// Show Hide Posts
/*-----------------------------------------------------------------------------------*/

### Function: Enqueue JavaScripts
add_action('wp_enqueue_scripts', 'showhide_scripts');
function showhide_scripts() {
	wp_enqueue_script('jquery');
}


### Function: Short Code For Inserting Show/Hide Into Post
add_shortcode('showhide', 'showhide_shortcode');
function showhide_shortcode($atts, $content = null) {
	// Variables
	$post_id = get_the_id();
	
	// Extract ShortCode Attributes
	extract(shortcode_atts(array(
		'type' => 'show',
		'more_text' => __('View Full Post'),
		'less_text' => __('Close Post'), 
		'hidden' => 'yes'
	), $atts));
	

	// Determine Whether To Show Or Hide Content
	$hidden_css = 'display: none;';
	if($hidden == 'no') {
		$hidden_css = 'display: block;';
		$type = 'hide';
		$tmp_text = $more_text;
		$more_text = $less_text;
		$less_text = $tmp_text;
	}

	// Format HTML Output
	$output = '<div id="'.$type.'-content-'.$post_id.'" class="'.$type.'-content" style="'.$hidden_css.'">'.$content.'</div>';	
	$output .= '<div class="'.$type.'-link"><a href="#" onclick="showhide_toggle(\''.$type.'\', '.$post_id.', \''.esc_js($more_text).'\', \''.esc_js($less_text).'\'); return false;"><span id="'.$type.'-toggle-'.$post_id.'">'.$more_text.'</span></a></div>';
	
	
	return $output;
}


### Function: Add JavaScript To Footer
add_action('wp_footer', 'showhide_footer');
function showhide_footer() {
	echo '<script type="text/javascript">'."\n";
	echo '/* <![CDATA[ */'."\n";
	echo 'function showhide_toggle(a,b,c,d){jQuery("#"+a+"-content-"+b).toggle();jQuery("#"+a+"-toggle-"+b).text(jQuery("#"+a+"-toggle-"+b).text()==c?d:c)};'."\n";
	echo '/* ]]> */'."\n";
	echo '</script>'."\n";
}

Hi All,

i have an auto suggest function which suggests results to the user from my db.

now if i click on one of the suggestions with the mouse it redirects to the relivant url which is stored in the db, however if i use the arrow keys and select a suggestion with the enter key nothing happens

can anyone please help me to get this working so that if i press enter when a suggestion is selected it goes to that stores url?

thanks

and my index.php code
PHP Code:
   <div class="main">
           <form id="test" name="form1" method="post" action="">
          <div id="holder">
         <input type="text" id="keyword" tabindex="0"><img src="images/loading.gif" id="loading">
     
     </div>
     <div id="ajax_response"></div>
   </div></form> 


here is my ajax_server.php page code
PHP Code:
<?php
    include("config.php");
    $keyword = $_POST['data'];
    $sql = "select storeName,storeLink from ".$db_table." where ".$db_column." like '".$keyword."%' limit 0,20";
    //$sql = "select name from ".$db_table."";
    $result = mysql_query($sql) or die(mysql_error());
    if(mysql_num_rows($result))
    {
        echo '<ul class="list">';
        while($row = mysql_fetch_array($result))
        {
            $str = strtolower($row['storeName']);
            $link = $row['storeLink'];
            $start = strpos($str,$keyword); 
            $end   = similar_text($str,$keyword); 
            $last = substr($str,$end,strlen($str));
            $first = substr($str,$start,$end);
            
            $final = '<span class="bold">'.$first.'</span>'.$last;
        
            echo '<li><a href="'.$link.'">'.$final.'</a></li>';
        }
        echo "</ul>";
    }
    else
        echo 0;
?>

and my script.js file
Code:

$(document).ready(function(){
	$(document).click(function(){
		$("#ajax_response").fadeOut('slow');
	});
	$("#keyword").focus();
	var offset = $("#keyword").offset();
	var width = $("#keyword").width()-2;
	$("#ajax_response").css("left",offset.left); 
	$("#ajax_response").css("width",width);
	$("#keyword").keyup(function(event){
		 //alert(event.keyCode);
		 var keyword = $("#keyword").val();
		 if(keyword.length)
		 {
			 if(event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13)
			 {
				 $("#loading").css("visibility","visible");
				 $.ajax({
				   type: "POST",
				   url: "ajax_server.php",
				   data: "data="+keyword,
				   success: function(msg){	
					if(msg != 0)
					  $("#ajax_response").fadeIn("slow").html(msg);
					else
					{
					  $("#ajax_response").fadeIn("slow");	
					  $("#ajax_response").html('<div style="text-align:left;">No Matches Found</div>');
					}
					$("#loading").css("visibility","hidden");
				   }
				 });
			 }
			 else
			 {
				switch (event.keyCode)
				{
				 case 40:
				 {
					  found = 0;
					  $("li").each(function(){
						 if($(this).attr("class") == "selected")
							found = 1;
					  });
					  if(found == 1)
					  {
						var sel = $("li[class='selected']");
						sel.next().addClass("selected");
						sel.removeClass("selected");
					  }
					  else
						$("li:first").addClass("selected");
					 }
				 break;
				 case 38:
				 {
					  found = 0;
					  $("li").each(function(){
						 if($(this).attr("class") == "selected")
							found = 1;
					  });
					  if(found == 1)
					  {
						var sel = $("li[class='selected']");
						sel.prev().addClass("selected");
						sel.removeClass("selected");
					  }
					  else
						$("li:last").addClass("selected");
				 }
				 break;
				 case 13:
					$("#ajax_response").fadeOut("slow");
					$("#keyword").val($("li[class='selected'] a").text());
				 break;
				}
			 }
		 }
		 else
			$("#ajax_response").fadeOut("slow");
	});
	$("#ajax_response").mouseover(function(){
		$(this).find("li a:first-child").mouseover(function () {
			  $(this).addClass("selected");
		});
		$(this).find("li a:first-child").mouseout(function () {
			  $(this).removeClass("selected");
		});
		$(this).find("li a:first-child").click(function () {
			  $("#keyword").val($(this).text());
			  $("#ajax_response").fadeOut("slow");
		});
	});
});

any help would be appreciated
thanks
Luke

I have the following javascript function:

[ function addNewWindowEvent(evType, fn)
{
if (window.addEventListener)
{
this.addEventListener("load", fn, false);
return true;
}
else if (window.attachEvent)
{
var onload = "onload"
this.attachEvent(onload, fn);
return true;
}
else
{
return false;
}
} ]

which is giving me a an exception every time a page on our site loads. The actual exception in firefox is this:

uncaught exception: [Exception... "Could not convert JavaScript argument" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: https://cms-dev.stchas.edu/global/js/hdvscripts.js :: addNewWindowEvent :: line 5" data: no]

and I'm not sure exactly what it's complaining about. I'm relatively new to javascript so diagnosing and fixing this problem has me quite puzzled, and so far I have been unable to find anything helpful when I try and google for information on this. I would appreciate any help or suggestions. Thanks.

henryv

Hi trying to load a random swf files using setTimeout please help


Code:

</head><script type="text/javascript">
var numberOfSongs = 3 
var sound = new Array(numberOfSongs+1)
sound[1]= "number/1.mp3"
sound[2]= "number/2.mp3" 
sound[3]= "number/3.mp3"

function randomNumber(){
var randomLooper = -1
while (randomLooper < 0 || randomLooper > numberOfSongs || isNaN(randomLooper)){    randomLooper = parseInt(Math.random()*(numberOfSongs+1))
}
    return randomLooper
}
var randomsub = randomNumber()
var soundFile = sound[randomsub]
document.write ('<EMBED src= "' + soundFile + '" hidden=true autostart=true loop=false>')
setTimeout(randomNumber,4000);

</script>

<body onload="randomNumber()">

Hello - I've got this lovely little animation that slides some div fields to the right a short distance. Everything works except the setTimeout (located in the SlideIn function). It simply 'jumps' without taking any time at all. I've tried a bunch of stuff:
changed the amount of time from 100 to 10000
changed it from var t = setTimeout("SlideIn()", 1000)
SlideIn with/without the brackets, with/without the quotation marks.
SlideIn()
SlideIn(i)
SlideIn(label_id_fixed)
SlideIn(label_id_no)

Just about at the end of my rope, and so many different combinations I'm forgetting which ones I've tried and which I haven't.

I know it is looping through because it gets to the end position and allows the other JavaScript functions to work ok. So it is not getting 'stuck' or anything like that.

Here is the complete code (there is a style sheet located separately).

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="class.css" />
</head>
<script type="text/javascript">
//<![CDATA[
window.onload=starter;
function starter(){
	collapseMenu();
	SetUpAnimation();	  
	}

function SetUpAnimation(){

	if (document.querySelectorAll)
		{
		labels = document.querySelectorAll('div.label');
			}
		else if (document.getElementsByClassName)
			{
		labels = document.getElementsByClassName('label');
		}
//loops through the labels
	if (labels){
				for (var i=1; i <= labels.length; i++)
					{SlideIn(i);
					}
				}
}

function SlideIn(label_id_no){
	var label_id_fixed = label_id_no;
	var endPos = 150;
	var currentPos = 0;
	for (currentPos = 1; currentPos < 60; currentPos++){
	var label_id_name = "label" + label_id_fixed;
	document.getElementById(label_id_name).style.left = currentPos + "px";
	setTimeout("SlideIn", 1000);
		}
}

function collapseMenu(){
	var elems = null;
	var labels = null;
	if (document.querySelectorAll)
		{
		elems = document.querySelectorAll('div.elements');
		labels = document.querySelectorAll('div.label');
}
		else if (document.getElementsByClassName)
			{			
		elems = document.getElementsByClassName('elements');
		labels = document.getElementsByClassName('label');
			}
if (elems){
				for (var i=0; i < elems.length; i++)
				{
				elems[i].style.display="none";
				}
			for (var i=0; i < labels.length; i++)
				{
			labels[i].onclick=showBlock;
				}
		}
		
}
function showBlock(evnt){
	var theEvent = evnt ? evnt : window.event;
	var theSrc = theEvent.target ? theEvent.target: theEvent.srcElement;
	var itemId = "elements" + theSrc.id.substr(5,1);
	var item = document.getElementById(itemId);
	if (item.style.display=='none'){
		item.style.display='block';
	}else{
		item.style.display='none';
	}
}



//]]>
</script>
</head>
<body>
<div class="label" id="label1">this is a label</div>
<div class="elements" id="elements1">
<p>painting</p><br />
<p>photography</p><br />
</div>
<div class="label" id="label2">this is another label</div>
<div class="elements" id="elements2">
<p>sculpture</p><br />
<p>ceramics</p><br />
</div>
</body>
</html>

Hello guys

I need to get something fun! with setTimeout function!
I am n00b! so be patent please.

I need when <body onload="Myfunc();"> fires, that function should show "Please wait...!" or "Loading...". for , say 5 seconds!. then it disappear.

I used setTimeout with that but it didn't do what I wanted!

here is my code:

PHP Code:
function Myfunc(){
document.getElementById("ss2").innerHTML = "Loading...";
setTimeout("Myfunc();", 5000);
}

// where id="ss2" is the place to display the string "loading..." ! 




and a one more question !

can I do something like a while loop! where it holds *i* value as seconds!
and for every second it passes it should print out a string I make it up !

let say loop for 3 seconds !
So, when seconds = 0 then display "string of second 0" and stick it in there, then go to the next second when it is exactly = 1 then display "new line with string of second 1" and stick it in there, then do to the last second when it is exactly = 2 then display " new line with string of second 2" and stick it in there, exit the loop!


is there anyway to do that? please note that I am a n00bie !

help is much appreciated !

Is there another JS function that I can use to force a time delay without having the code continue to run? I'm using the setTimeout() function but the call to this function doesn't stop the code flow. I need to stop the code flow while waiting. I guess I need a Sleep() type of JS function.

What I'm trying to do is display some blank text on the screen using a for loop (I'm using &nbsp;<BR> to give the appearance of "opening up" a vertical window section in the browser) and I need this 'text' to complete before allowing the following code in the function to execute. The following code will display a Table with rows of data. I'm trying to use a timing function to give a visual impression of a window opening up just before the data displays.

Thanks...