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!
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.
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?
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?
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>
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.
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
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:
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?
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:
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]...
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.
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.
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:
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.
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.
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 }
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).
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.
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.
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...
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?
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]
