|
JavaScript - Progress Bar !
Hello,
can this upload progress windowsbar be made to close or stop at 100%? In the upload page the javascript code: Code: <script language="JavaScript">
function input(ok)
{
var M1=ok.upload_author.value;
if (M1=="") {
alert("Author is empty!");
return false;
}
M1=ok.upload_title.value;
if (M1=="") {
//alert("File Description is empty!");
//return false;
}
if (ok.UploadedFile.value=="") {
alert("File is empty!");
return false;
}
var sCheckType="%checktype";
if(sCheckType=="1")
{
M1=ok.UploadedFile.value.toLowerCase();
var pos=M1.lastIndexOf('.',M1.length);
var sExt;
if(pos>-1)
sExt=M1.substr(pos+1);
var sType="%filetype";
pos=sType.indexOf(sExt);
if(pos>-1)
{
alert("This type of file cannot be uploaded!");
return false;
}
}
ok.uploadid.value=Math.round(Math.random()*100000000);
return true;
}
function onstopupload() {
if(document.post.uploadid.value=="") return;
window.("uploadstop.ghp?uploadid="+document.post.uploadid.value+"&vfolder="+document.tempform.vfoldername.value) ;
}
function onshowprogress() {
if(document.post.uploadid.value=="") return;
window("showprogress.ghp?uploadid="+document.post.uploadid.value+"&vfolder="+document.tempform.vfoldername.value) ;
}
</script>
Then the "Show progress" button which on clik opens in a new window. Code: <input name="Upload" type="submit" class=button value="Upload">
</font>
<input name="stopupload" type="button" class=button id="stopupload" value="Stop" onClick="onstopupload()">
<input name="showprogress" type="button" class=button id="showprogress" value="Show upload progress" onClick="onshowprogress()">
And here;s the code from the Progress window. Code: <strong>Incarcare %filename...
<br>
%progress%
<br>
<table width="50%" border=1 align="center" cellpadding=0 cellspacing=0>
<tr>
<td bgcolor="#FF0000" width="%used%" height=15 style="border:0"> </td>
<td bgcolor=white width="%left%" height=15 style="border:0"> </td>
</tr>
</table>
<br>
<a href="showprogress.ghp?uploadid=%uploadid&vfolder=%vfolder">Actualizeaza</a>
<a href="uploadstop.ghp?uploadid=%uploadid&vfolder=%vfolder">Stop</a>
Plese if anyone knows how to resolve this to pop-up in a window and when it reachis 100% to stop redirecting, or to close it self or by user. Thanks in advance. Cira Marius Similar TutorialsHey guys! I have a progress bar written in javascript. Its pretty simple, consisting of a couple divs, where the inside one grows with the given percentage. Anyways, the problem we are having is that sometimes the percentage that is dynamically calculated is over 100% (we are using it as an job completion progress bar, so if more hours are spent than estimated the bar will be over 100%. I guess thats fine, except the inside div goes right off the container and keeps growing. Can we make the inside div max out at 100% somehow? Hoping someone can help me out with this, im not sure how this can be done! I should add that the original script with example I found he alpinemeadow.com/stitchery/weblog/HTML-morsels.html Here is the original code: Code: <script language="javascript">
function drawPercentBar(width, percent, color, background)
{var pixels = width * (percent / 100);
if (!background) { background = "none"; }
document.write("<div style=\"position: relative; line-height: 1em; background-color: "
+ background + "; border: 1px solid #979797; width: "
+ width + "px\">");
document.write("<div style=\"height: 1.5em; width: " + pixels + "px; background-color: "
+ color + ";\"></div>");
document.write("<div style=\"position: absolute; text-align: center; padding-top: .25em; width: "
+ width + "px; top: 0; left: 0\">" + percent + "%</div>");
document.write("</div>"); }
</script>
Called for he Code: <script language="javascript">drawPercentBar(171, <%=totaltotal/EstHours*100%>, '#aadba2', '#F2F2F2'); </script> All, Say I have a four part process to add something to my website. I'd like to have a bar at the top of my page (if you need an example, something simliar to FedEx to show where you package is along the way) that will get updated upon each page move so the user knows how far along they are in the process and how much farther they have to go? Any type of tutorials or ideas (whether it's PHP and jQuery or any other combination) I'd greatly appreciate them. Thanks in advance for any guidance. Thanks. Hi! I use the :: Form field Progress Bar from DynamicDrive: Form field Progress Bar Now I trided to change the text when the textarea is full "Limit:100%" to "Your max. characters is reached" I trided it but with no luck. This is the main code.. Code: <script type="text/JavaScript">
function textCounter1(field,counter,maxlimit,linecounter) {
// text width//
var fieldWidth = 137;
var charcnt = field.value.length;
// trim the extra text
if (charcnt > maxlimit) {
field.value = field.value.substring(0, maxlimit);
}
else {
// progress bar percentage
var percentage = parseInt(100 - (( maxlimit - charcnt) * 100)/maxlimit) ;
document.getElementById(counter).style.width = parseInt((fieldWidth*percentage)/100)+"px";
document.getElementById(counter).innerHTML="Limiet: "+percentage+"%"
// color correction on style from CCFFF -> CC0000
setcolor(document.getElementById(counter),percentage,"background-color");
}
}
function setcolor(obj,percentage,prop){
obj.style[prop] = "rgb(80%,"+(100-percentage)+"%,"+(100-percentage)+"%)";
}
</script>
This is the place where the text is set. Code: ((fieldWidth*percentage)/100)+"px"; document.getElementById(counter).innerHTML="Limiet: "+percentage+"%" Help would be highly appreciated ! greetings Jardin Hi, I have searched the web for many tools to upload a file and shows it progress, but they all seem to use, flash, codebehindfiles, php etc. I was looking for one that used pure Javascript was wondering if anyone could help? Thanks Marcel. I want to update the variables in the progress bar HTML5 has to offer. Here is the function I have so far (It has been modified and shortened for the means of this post): Code: function calcProgress()
{
var num1 = Number(document.form.num1.value);
var num2 = Number(document.form.num2.value);
Number(document.form.progress.value) = num1
Number(document.form.progress.max) = num2;
}
This is the form: Code: <form name="form"> <input name="num1" onChange="calcProgress()" type="text" value="0" /> / <input name="num2" type="text" value="0" onChange="calcProgress()" size="1"> <br> <progress name="progress" id="progress" min="0" value="0" max=""></progress> </form> I'm in the process of building a blog that will be using some pretty neat jQuery effects to spotlight its content. One thing I've been looking at doing is trying to lessen the amount of different pages the visitor has to load by using things like sliders and accordions to hide and display content. Overall I'm not concerned that the pages will take more than 3-4 seconds on any decent connection to load, however I was thinking about visitors who are potentially running slower connections. To avoid losing those slower-connected users I've been looking for a way to display a page loader, much like what you see on flash websites, except completely without flash. I was hoping there might be some AJAX algorithm or jQuery function I wasn't aware of that might help me accomplish this. If anyone could point me in the direction of a tutorial, I'd really appreciate it! Thanks in advance. Hello, I have a tool in my app where a user can perform a search, and it will use AJAX to deliver the results into a small box, in JSON format. When a user submits a search, a spinning gif will appear as the query is running. A javascript function is then meant to remove the gif and display the results once ready. In IE, however, this fails to happen, and the gif is locked in place, preventing the results from being displayed. I have no experience with javascript and am a bit unsure what to do. Tried to use IE's script debugger, but got totally confused. The script is much longer than this, but I think this is the problematic area: Code: 'beforeSend': function(r) {
ul.find('li').remove();
ul.html('<li class="center"><img src="/images/ajax-loader.gif" /></li>');
},
'success': function(r) {
ul.find('li').remove();
h = ''
$(r).each(function(k,r0){
h = h + '<li data-id="'+r0.value+'" data-icon_url="'+r0.icon_url+'">'+r0.label+'</li>';
});
For some reason, in IE only, it will clear the contents and display the gif upon submitting a search. But then it won't clear the gif and display the results. Any ideas? I would be so appreciative. Thank you. Greg |
|||||||