whirlpool6 Posted August 2, 2007 Share Posted August 2, 2007 this sounds very easy and may be very easy but i don't know how to do this... here is what i made. when a button is clicked, it calls a function a. function a(){ -shows a hidden div containing the gif progress bar -call a function which is the real action for this button -hide the div } now this real action is purely javascript... supposed to change some parts of the layout. but unfortunately, the progress bar div does not show. and when i commented the hide div part, the progress bar div only shows after the doing the real action for the button... can anybody please help me on this... i am using ie 7. pls help... Quote Link to comment Share on other sites More sharing options...
nogray Posted August 2, 2007 Share Posted August 2, 2007 you should hide the div in the function that does the real action so function a(){ -show div -real action } function real action(){ -do something -if ajax hide on the status is ready -otherwise hide here } Quote Link to comment Share on other sites More sharing options...
whirlpool6 Posted August 3, 2007 Author Share Posted August 3, 2007 you should hide the div in the function that does the real action so function a(){ -show div -real action } function real action(){ -do something -if ajax hide on the status is ready -otherwise hide here } actually there is no AJAX involved on this real action.... this real action only changes the contents of the main display by changing the innerHTML of things... is there a way to do this guys... thanks a lot. Quote Link to comment Share on other sites More sharing options...
nogray Posted August 3, 2007 Share Posted August 3, 2007 in that case, it'll happen so fast you won't even notice the loading screen. You can use a setTimeout() functino to hide the screen after so and so seconds. Quote Link to comment Share on other sites More sharing options...
emehrkay Posted August 4, 2007 Share Posted August 4, 2007 use an object var loader = { show: function(){ //show loader }, hide: function(){ //hide loader } } to use just do loader.show(); loader.hide(); now the tricky part is placing the loader, you do this with css. create an absolutly positioned div. give it a fixed with and height. put the image in there. give it these css attributes: left: 50%; margin-left: -(half of it's width)px; top: (however many px from the top you want it)px; display: none; in the show method, just set its display to block and none in the hide method Quote Link to comment Share on other sites More sharing options...
php_tom Posted August 7, 2007 Share Posted August 7, 2007 Not sure I understand the original question. Are you trying to make a JS that animates a progress bar? If so this may help: <html> <head> <script type='text/javascript'> var i; var w = 0; function init() { i = setInterval("setWidth();", 50); } function setWidth() { if(w>200) clearInterval(i); w++; document.getElementById('img1').style.width = w+'px'; } </script> </head> <body> <img src='bar.jpg' width='0' height='10' id='img1' /> <input type='button' value='Progress Bar' onclick='init();' /> </body> </html> Maybe you can explain more of what you want to do... Quote Link to comment Share on other sites More sharing options...
whirlpool6 Posted August 7, 2007 Author Share Posted August 7, 2007 thanks for all your response guys... the problem is solved now. actually the problem is like this. when i click a button, i want to show a loading sign first, then do the functions it is supposed to do, and hide the loading sign when everything is done. now, when i do a direct show loading sign (through css), perform task, then hide load, it doesn't work. its like the loader is only shown after the task is performed. what i did was, i showed the loader. then i set a timeout which performs the task and hides the loader afterwards... it works perfectly... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.