SitePoint Sponsor

User Tag List

Results 1 to 1 of 1

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    need Progress Bar help

    hi
    i have a problem with this code
    i want to create a progress bar with


    Code javascript:
    function creatediv(percent,string){  
           var newdiv = document.createElement('div');
           newdiv.className="progress_container"; //    
           var progress = document.createElement('div');
           progress.setAttribute('id',"progress");
           progress.style.width=percent+"%";
            if (string) {
                  progress.innerHTML = "00:00:4";	   
           }
           var timediv = document.createElement('div');
           timediv.setAttribute('id',"blue");
           timediv.className="blue"; 
           timediv.style.width="100%";   
           timediv.appendChild(progress);
           newdiv.appendChild(timediv);
     
             document.body.appendChild(newdiv);   
     
             document.body.appendChild(timer("progress","http://www.google.com"));
     
    }

    and add a down counter with


    Code javascript:
    function timer(data, lnk)
    {
     	   dat=document.getElementById(data);
     	    var time=(dat.innerHTML).split(":"); var done=0;
     	    if (time[2]>0) time[2]--;
    	     else
     	    {
              	time[2]=59;
    	  	        if (time[1]>0) time[1]--;
    	          	else
    	          	{
    	            		time[1]=59;
    	           		if (time[0]>0) time[0]--;
    		           	else 
    		           	{ 
    		    	        	clearTimeout(id[data]);
    		    		        if(lnk.length)
    		    		        	window.location.href=lnk; 
    		    		         done=1;
    	            		}
    	          	}
    	         }
             	if (!done)
             	{
    	          	dat.innerHTML=time[0]+":"+time[1]+":"+time[2];
    	          	id[data]=setTimeout("timer('"+data+"', '"+lnk+"')", 1000);
               	}
        }

    that in first code i call timer function and in html document i use

    <input type="button" onclick= "creatediv(60,'test')"/>

    and css code is


    Code css:
    .blue {
    	 color: white;
     	background-color: #6A93D4;
    	 border-width: 1px;
    }
     
    /* progress container */
    .progress_container {
    	 border: 2px double #ccc; 
    	 width: 100px; 
    	 margin: 1px;
    	 padding: 0px;
    	 text-align: left;
    }
     
    /* progress bar */
    div#progress {
    	 color: white;
     	background-color: #FF8D40; 
    	 height: 12px;
     	padding-bottom: 2px;
    	 font-size: 12px;
     	text-align: center;
    	 overflow: hidden;
    }


    but counter doesn't work
    anybody can help me plz
    Last edited by Mittineague; Apr 5, 2012 at 15:57. Reason: reformatting bbcode tags


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •