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... Link to comment https://forums.phpfreaks.com/topic/63018-solved-how-to-make-an-animated-gif-progress-bar/ 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 } Link to comment https://forums.phpfreaks.com/topic/63018-solved-how-to-make-an-animated-gif-progress-bar/#findComment-314397 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. Link to comment https://forums.phpfreaks.com/topic/63018-solved-how-to-make-an-animated-gif-progress-bar/#findComment-314593 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. Link to comment https://forums.phpfreaks.com/topic/63018-solved-how-to-make-an-animated-gif-progress-bar/#findComment-315199 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 Link to comment https://forums.phpfreaks.com/topic/63018-solved-how-to-make-an-animated-gif-progress-bar/#findComment-315319 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... Link to comment https://forums.phpfreaks.com/topic/63018-solved-how-to-make-an-animated-gif-progress-bar/#findComment-317175 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... Link to comment https://forums.phpfreaks.com/topic/63018-solved-how-to-make-an-animated-gif-progress-bar/#findComment-317251 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.