Guest So Called Posted June 1, 2012 Share Posted June 1, 2012 (edited) I don't aspire to become good at JS because I don't generally need it, and I'm not planning on making a career out of web design. What I'm looking for in this topic is a quick way to get this job done. This is a site configuration page where all the settings are in a form, and the form is organized as a table. When it posts the script validates the changes, and then sets $updated = true if everything is good. That enables the following to display a confirmation message: if ($updated) echo ' <tr class="something"> <td colspan="3" class="confirmation"><div id="message" class="confirmation">Updated</div></td> </tr>'; At the present time the message displays, and I usually just navigate to another page. But it would be better if the message would disappear in perhaps 3 seconds, more professional looking. I know I can do that with JS and CSS. I think I'll want an onload= in my <BODY> tag to start a timer, and then at the end of 3 seconds issue a command to set class "something" (the TR) to display=none, which I think will cause the row to just disappear. Can you help me find the simplest, easiest, quickest way to do this? Or would it be easier or better to have the message appear in an overlayed box, then have the box disappear, so that the page doesn't have to reflow? I'm just looking for a clean, simple, professional looking way to get my confirmation message. Edited June 2, 2012 by So Called Link to comment Share on other sites More sharing options...
birbal Posted June 1, 2012 Share Posted June 1, 2012 you can bound a function in onload event in that div element where you can use setTimeOut() to execute something after sometime where it will remove the node itself using DOM methods Link to comment Share on other sites More sharing options...
Guest So Called Posted June 2, 2012 Share Posted June 2, 2012 Perhaps some members have presumed my ability in PHP means I'm proficient in JavaScript, but in fact nothing could be further from the truth. If you can't offer more specific suggestions then maybe you can offer some hints on what I should google. Here's what I have so far and I know it's not nearly close enough to even try to execute: <TR class="some_class" id="some_id" onLoad="setTimeout(function() {object.style.display='none';},3000);"> I'm sure that "object." needs some definition. Note that some_class and some_id are anything I want it to be, neither are yet defined. It would be nice if I can get the timeout function to just change the display property of "some_id" to none. Link to comment Share on other sites More sharing options...
Ingolme Posted June 2, 2012 Share Posted June 2, 2012 I'm quite sure that there is no onload event except on the window and on image elements. In short, the idea is this: Have an element with an ID that you call your dialog box: <div id="dialog"><!-- Any amount of HTML elements and text inside here for styling --></div> Starting off, this element will have the CSS display property set to "none" When you want to show the box, call a function which sets the display to "block" ( document.getElementById("dialog").style.display = "block" ) and at the same time starts a timer which calls another function that will set the display to "none" again. Optionally, you can add a parameter to the function that makes the box visible that will set the text that's inside it. You can use the innerHTML property of an element to set the text that's in it. Link to comment Share on other sites More sharing options...
birbal Posted June 2, 2012 Share Posted June 2, 2012 (edited) https://developer.mo...event_referenceelement can also have a onload event. you can find it in the list in the middle of the page "load" another way using css. it will let an element visible for 3 second and 3 second to fade out and disappear. you have to use proper prefix for different browser where applicable eg -webkit-. it is though is not applicable in all browser as it is part of css3. You have to just simply alter the .animate class to use when applicable/* Animated */.animate { -moz-animation-duration: 6s; -moz-animation-name: eraser; -moz-animation-fill-mode:forwards; } @-moz-keyframes eraser { from { opacity:1.0; } 50%{opacity:1.0; } to { opacity:0; display:none; } } https://developer.mo.../CSS_animations <=resource Edited June 2, 2012 by birbal Link to comment Share on other sites More sharing options...
dsonesuk Posted June 2, 2012 Share Posted June 2, 2012 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js"></script><script type="text/javascript">/*<![CDATA[*//*---->*/$(document).ready(function(){ // on document load begin$(".something").delay(3000).queue(function(){ // for class '.something wait 3000 millsec (3 sec) then apply hide () (display:none)$(this).hide();});});/*--*//*]]>*/</script> Link to comment Share on other sites More sharing options...
Guest So Called Posted June 2, 2012 Share Posted June 2, 2012 (edited) How about this then? <BODY onLoad="setTimeout(function() {document.getElementById('some_id').style.display='none';},3000);"> <TR id="some_id"> .... </TR> The table row isn't going to be there unless confirmation is active because of PHP if ($updated) echo, so I don't really see any point in starting it out as display:none. If the code above works it would display the confirmation message in the form table for 3 seconds, and then the row would disappear, right? ETA: I just tried it and it works fine! The confirmation TR shows up when the page renders, and then 3 seconds later it disappears. Thank you all for your help! Edited June 2, 2012 by So Called Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now