Write A Simple Function To Animate The Collapse Of A Div Using SetTimeout?
Dec 15, 2010
I'm new to JavaScript, and have been playing around with a few simple functions to get going. However, I've hit a problem that I just can't fix, I'm trying to write a simple function to animate the collapse of a div using setTimeout (I know, jQuery does it a lot better), and it's gotten the best of me. The only error it's giving me now is
Code: missing ; before statement on line 25 but I can't see why. I assume it's something to do with my abuse of the setTimeout syntax (why does it insist that everthing is enclosed in quotes.I'm sure there are much better scripts than mine, and searching the forum I've come across Vic Phillips' fine specimen which mostly went over my head. But if I just wanted it to work I'd use jQuery - I'm more interested in why it's not working.
code is below. In addition to this I've also got an external script to compensate for browsers without getElementsByClass, but it should work in modern browsers up to the point where it doesn't!
[Code]...
View 4 Replies
ADVERTISEMENT
Dec 24, 2009
I'm trying to graph line with a delay between each line drawn - my code is:
var jg = new jsGraphics('Canvas');
jg.setColor('maroon');
jg.drawLine(40,130,80,120);
setTimeout('jg.paint()',10000);
jg.drawLine(80,120,120,110);
setTimeout('jg.paint()',10000);
Unfortunately it draws all the lines at the same time i.e the setTimeout function doesn't like the paint method.
View 1 Replies
View Related
Jan 21, 2009
I am trying to write a simple javascript function that locates a parameter in a url, if it is present, and replace it with a different value. Here's my code:
function setParam(url,param,value) {
var a = '&'+param+'=d+';
var new_url = url.replace(new RegExp(a), '');
new_url = new_url + '&'+param+'='+value;
return new_url;
}
The problem is, it doesn't work. It adds the new param, value pair to the old url, but the old param isn't replaced. What do I need to do here to make this work?
View 2 Replies
View Related
Jan 28, 2011
I found a decent way to include a toggle feature for displaying detail rows underneath "parent" rows in a regular old HTML table displaying heaps of data: [url]
See "Expandable "Detail" Table Rows" rows section.
Would anyone know what it would take to add an "expand all/collapse all" link that would toggle all child rows open/hidden?
If so, how difficult would it be to have multiple tables with this functionality on the same html page?
View 10 Replies
View Related
Mar 28, 2006
What I want is an element with a shifting background image:
<html><head>
<script type="text/javascript">
var x = 0
var y = 0
inc = 4
function bgWander(el){
x = x + Math.round(2*inc*Math.random())-inc
y = y + Math.round(2*inc*Math.random())-inc
el.style.backgroundPosition = x + 'px ' + y + 'px'
setTimeout('bgWander(el)',200)
}
</script></head><body>
<a onLoad="bgWander(this)" href=""
style="background:url(images/bgbar.png)">Link</a>
</body></html>
Can you show me the error of my ways?
View 3 Replies
View Related
Nov 18, 2010
I need a jqeury animate effection. when I click img1.jpg, img2.jpg will animate right 200px, but I have too many divs and other html elements, I tried many times, it also failed. How to write correctly? Thanks. PS: h1, the font is on the top of image, and b class="effect" is some fadein effect, it should be the toppest of the all.
<script type="text/javascript">
jQuery(".font1").click(function(){
jQuery(".div21").animate({"right": "+=200px"}, "slow");
[code]....
View 5 Replies
View Related
Jun 2, 2010
I have a toggle animation which puts the area I want to show to the user in view, ones that animation has played I want to animate several other objects on the page. I have the code to animate one object by using the callback function in animate. But is it possible to animate several objects in the callback function?. this is the code I have so far
$(document).ready(function(){
$(".navigaat").toggle(function(){
$(".mover").animate({left: '0px' }, 'slow',"", function() { $(".blok").animate( { fontSize:"160px" } , 1000 )});
[code]....
View 4 Replies
View Related
Jul 23, 2005
does anyone know how to write a simple vertical javascript nav bar?
View 3 Replies
View Related
Jun 2, 2010
I have been trying to make an expand/collapse (essentially accordion) list. So far, everything works and looks fine in Firefox, Safari, and Chrome, but in IE8, the page height is static when it loads, with a page height being as if all headers in the list were expanded. The expand/collapse functionality works,but as you can imagine, there is this big gap of space after the list.
The html markup uses <h2> tags for the always-visible header portion and a <div> for the expanding/collapsing content. The <div> content contains form elements and everything is enclosed in a form tag.Anyways, here is the jQuery code:
$(document).ready(function() {
$('<img src="plus.png" class="icon" />').prependTo('.header');
$('.content').hide();[code].....
View 5 Replies
View Related
Oct 25, 2011
I've noticed that setTimeout seems to return a simple integer as it's "id" which can be used to clear the timeout ahead of time. So, in order to have multiple setTimeouts called (which requires the previous one to be cleared before the next one is called), I simply did this:
clearTimeout(setTimeout(function() {
/* some code */
}, 1000) -1);
Note the "-1"... each time this code is called, it starts a new setTimeout and clears "instance-1" which is supposed to be the previous instance. The idea is that this block can be called hundreds of times, and when the calling finally stops, the inner code is executed 1 second later. This SEEMS to be working (yes, even in MSIE!). Question is, am I fooling myself? Is this wrong?
View 4 Replies
View Related
May 24, 2006
My intent is to be able to expand/collapse multiple tables individually, and all at once. My current implementation allows for the "individual", but not the "all at once" functionality, because the current code I'm using just toggles. code:
View 2 Replies
View Related
Jun 23, 2011
I am using a tiny script that is meant to expand and collapse paragraphs with the click of a "more../less.."link. The page I am writing is working as intended in IE8 so far, however the Javascript functions are not working in FF 3.6 or Chrome. When clicking on the "More../Less" in FF or Chrome, nothing happens.Here is the JS [code]...
View 3 Replies
View Related
Aug 21, 2011
I have a button that I want to be able to click on and for it to change to another image and also slide out a text panel and then when clicked the text panel slides back in and the button returns to its original state.
The code that i have found and adapted is below. So far I have it working to click on the button to expand but then I can only make it click on the panel to close not the actual button.
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
[Code].....
View 7 Replies
View Related
May 10, 2006
I want to change the elements class name dynamically when mouse is out with respect to that element.I want to change the class name after some delay (i.e, i am using settimeout function).
var ulNodes = getElementsByClass("nice-menu");
var liNodes = null;
for(var i = 0; i < ulNodes.length; i++) {
liNodes = ulNodes[i].getElementsByTagName("li");
for(j = 0; j < liNodes.length; j++) {
if(liNodes[j].className == "menuparent") {
liNodes[j].onmouseout=function(){
timer = window.setTimeout(function (){
this.className = "menuparent"; //My problem is with //this line
},4000);
} } } }
I need to set the elemets class name to "menuparent" after some delay after the pointer moves away form that element.
-> When ever i say alert(this.className); in the setTimeout function, the alert box says undefined.
-> I can succesfully alert any where else in the mouseout function except within the settimeout function in mouseover function of that element.
View 1 Replies
View Related
Apr 1, 2010
I'm using jQuery 1.4 to hide a div (#cartPop) when the "close" link inside of it (#cartPop a) is clicked. Since I'm using animate() to fade the div out (opacity), I also have to use hide() to get rid of the div once it has faded out (otherwise the invisible div, which is on a higher z-index, blocks the elements on a lower z-index).
Code:
The problem is that the hide() function calls immediately without waiting for the animate() function to run. Even if I append a delay() function before hide() like so:
Code:
...it still doesn't wait.
View 3 Replies
View Related
Sep 13, 2011
I want to design a page flashes 4 digits when loaded, press submit to stop, and starts when press again.Below is the script:
Code:
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
[code]....
View 1 Replies
View Related
Oct 10, 2006
I'm not exactly sure why this doesn't work. I'm basically just trying a
simple approach at a slide down div.
function slide_div {
setTimeout("document.getElementById('mydiv').style.length=ཆp x'",1000);
setTimeout("document.getElementById('mydiv').style.length=ཐp x'",1000);
setTimeout("document.getElementById('mydiv').style.length=ཚp x'",1000);
setTimeout("document.getElementById('mydiv').style.length=ཤp x'",1000);
setTimeout("document.getElementById('mydiv').style.length=p x'",1000);
setTimeout("document.getElementById('mydiv').style.length=ླྀp x'",1000);
}
It seems like it just runs the last setTimeout line and pops out all at
once. I've even tried adding a=, b=, c=,. etc at the begining of each
line to no avail.
View 6 Replies
View Related
Mar 7, 2011
How can I have a function parameter in a function?
Something lke setTimeout();
setTimeout(function() {
how can I do it like this?
[code]....
View 4 Replies
View Related
Jul 30, 2009
does anyone know if the setTimeout() function in js has been just recently supported? i created an online demonstration of a product that uses this function to delay the playing of .wav files after various second intervals. i know that Opera doesn't support this function because when I click my button, all of the .wav files that i have in the function that runs behind the button play at once. i have probably 10 wav files that are played throughout the function, at various conditional statements. does anyone know if earlier (like REALLY old) versions of IE do not support this function? or maybe ie8 doesn't support it? i developed this and tested it in all major browsers except IE8 and any version earlier than IE6.
View 5 Replies
View Related
Jun 6, 2009
I did search the forums but couldn't seem to find anything on this specifically. I basically need to pass a key event and a 'name' to nameCheck() after 3 seconds. This works fine in Firefox but Internet Explorer gives the error: Member not found. I'm more of a PHP guy than a JS one
<input type="text" onkeyup="nameCheckTimer(this.value, event)" value="" />
function nameCheckTimer(name, evt) {
setTimeout(function(){return nameCheck(name,evt)}, 3000);
}
function nameCheck(name, evt) {
//need name and the key event to be available here. I have code to handle the key codes which works fine
}
View 6 Replies
View Related
Jan 16, 2010
I am trying to use the window.setTimeout feature so that a message pop-up with yes/no appears on the screen asking whether to extend the session.*If yes is clicked, the current page reloads.*If no is clicked, nothing happens. (the session will expire anyway).
View 5 Replies
View Related
Oct 10, 2009
how can i write a function that accepts a callback function?[URL].. i want myFunction to load some data via(an unordored list actually) load method end then somehow to return the wrapped elements for the callback function, exactly like load() does.
View 6 Replies
View Related
Feb 22, 2011
I have written the following code (quite meaningless. Just to check why setTimeout is not working in a similar real-life code) to enable the user to input a given time interval (hh:mm:ss) when a p is clicked, and then alerting the user with the time entered in the seconds portion one second after the div is clicked. But it is not working. I think the setTimeout is the culprit, the way I am passing parameters to the function inside it, but don't know where exactly am I erring.
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
[Code]....
View 3 Replies
View Related
Oct 31, 2010
I have a button that when you click it displays the results of my db in a div. What I am trying to do is to get the results to update every five seconds.
I thought setTimeout was the best way to achieve this. However I am getting the error message that ID is not defined on the setTimeout line. I thought it would automatically input ID into the fields marked ID when the onloadXMLDocRefres ('File.php','txtHint') button is clicked?
The button works to load the script, but the refreshing the div is not.code...
View 4 Replies
View Related
Feb 2, 2011
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.Why is an object reference assigned to what was previously a string?
View 6 Replies
View Related
Oct 11, 2010
I used this tut to make a horizontal accordion.. but are trying to extend it to hide and show content like this example..(click the black "knowledge" box and the sample will slide up)but eventho the setup should be the same for expanding and opasity there is a opasity "blink" when hover over the expanded element but no collapsing. So the espanding/collapsing setup works, but not the Opasity part? [code]
View 4 Replies
View Related
