JavaScript - Progress Bar To Keep Track Of A Process

Is there anything wrong with the code below?
- it doesnt seem to track the links, (which it suppose to do inside img.php)

Code:

// IMAGERY SYSTEM
function Imagery(img) 
{
    ajax = ajaxFunction();
    var url = base_url+"application/imagery/img.php?img="+img;
    ajax.open("GET",url,true);
    ajax.send(null);
}

Link
Code:

<a href="http://google.com" onClick="Imagery('545');">

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>

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'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

Hi All,

I have to know whether we can track the direct browser closing event by Javascript.
I have tried with window.unload & window.onbeforeunload, but I was not get full satisfaction with those ones.
Please let me know if anybody have any kind of solutions other than those specified above.

advance thanks...

without outside extensions, how does one debug javascript events on a webpage that primarily relies on unobtrusive JS events?

for instance, i have a website i log into that has a "submit" button. the button itself only has this code:

Code:

<input type="image" class="png" tabindex="5" value="Go" src="login.png">

obviously, the only way that it can submit the form is to use javascript. and it's obviously unobtrusive in this case.

consider the fact that it isn't my webpage, and i don't want to try to put random breakpoints everywhere blindly.

any help!?

I need to automate a repeated process that fills out a form and submits it automatically. Can someone lead me to the right direction on accomplishing this? - Thanks!

The way I have my code now inorder to create .XX places I use
Code:

var valueY=Math.round(valueX*100)/100;

That way if valueX=15.6898 it would give valueY=15.69.

but the problem arises when I want it

valueX=15.6 to display valueY=15.60

I did some research and people said to use .toFixed(2) but i can't get it to add in the zero if it isn't already there.

Any help I would be very helpful.

I need for the form to do the following:
when age is greater than or equal to 65 enter "yes" in the hidden field
when age is less than 65 enter "no" in the hidden filed
return true

Create a page processAge.htm that
Writes the message on the page
Hi name. At age # you may retire.
or
Hi name. At age # you are not ready to retire. Get to work.
name is the name entered on the form.
# is the age entered on the form.

Java:
Code:

<script type="text/javascript">
/* <![CDATA[ */
function validateSubmission() {
  var retValue = true;
  if (document.forms[0].name.value == "") {
      window.alert("You did not fill in one of the following required fields: Name or Age.");
      retValue = false;
      }
}
function checkForNumber(fieldValue) {
  var numberCheck = isNaN(fieldValue);
  if (numberCheck == true) {
    window.alert("You must enter a numeric value!");
    return false;
    }
} 
/* ]]> */
</script>

Body:
Code:

<form action="processAge.htm" method="get" onsubmit="makeList(); return validateSubmission(); ">
<table frame="border" rules="cols" >
<tr>
<td valign="top">
<h2>Retirement</h2>
<p>Name<br />
<input type="text" name="name" size="40" /></p>
<p>Age<br />
<input type="text" name="age" size="40" onchange="return checkForNumber(this.value);" /></p>
<p style="text-align: center"><input type="submit" value="Send" /><input type="reset" />
<input type="hidden" name="Retirement" /></p>
</td></tr>
</table>
</form>

Process Page:
Code:

<script type="text/javascript">
/* <![CDATA[ */
document.write("<h1>Your form has been submitted!</h1><h2>You entered the following data:</h2>");
var formData = location.search;
formData = formData.substring(1, formData.length);
while (formData.indexOf("+") != -1) {
  formData = formData.replace("+", " ");
}
formData = unescape(formData);
var formArray = formData.split("&");
for (var i=0; i < formArray.length; ++i) {
  document.writeln(formArray[i] + "<br />");
}
/* ]]> */
</script>

Thanks for any help!

Is it possible to make an app that creates a gif that shows the process of a finished drawing?

Im a kid and love drawing and gif .
i wanna make app that shows a replay of my initial start of my drawing till the finish product of my drawing in a gif file.

thinking to approach this with javascript? would it be possible?

I have a form that I've made in the XHTML comprised of text boxes and radio buttons. I want to put a button on the page that when clicked, takes the values in the data, processes it client-side and then outputs it to the same page that it took the data from.

I'm having difficulty know exactly how to reference the data in each form element. So far, it seems like I can use getElementById, but my efforts so far have stymied me.

The code is this:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<title>QuadWay DomQuote</title>
	<meta http-equiv="content-type" 
		content="text/html;charset=utf-8" />

<!-- external script declarations -->		
<script type="text/javascript" src="chkValidityOfNumber.js"></script>
<script type="text/javascript" src="calcQuote.js"></script>
<script type="text/javascript" src="calcGoodsAndServicesTax.js"></script>
<script type="text/javascript" src="calcTotalCostIncludingGST.js"></script>
<script type="text/javascript" src="outPutResultsToPage.js"></script>

</head> 


<body>

        <form action="" name="quadway">
<!-- create fields to enter customer details into -->
                <b>Customer Details</b>
               
                <p>Customers Full Name:
                        <input type="text" id="customersfullname" name="custName" />
                        </p>
                       
                        <p>Contact Telephone Number:
                        <input type="text" id="customerstelephonenumber" name="phoneNumber" />
                        </p>
                       
                        <p>Customers Address:
                        <textarea id="customersaddress" name="custAddress" cols="20" rows="5"></textarea>
                        </p>
               
                                <hr />
<!-- create fields to enter the regularity of service -->              
                <b>Regularity</b>
                        <p>
                        <input type="radio" name="regularity" value="1" />
                        Once only
                        </p>
                       
                        <p>
                        <input type="radio" name="regularity" value="4" checked />
                        Weekly
                        </p>
                       
                        <p>
                        <input type="radio" name="regularity" value="2" />
                        Fortnightly
                        </p>
                       
                        <p>
                        <input type="radio" name="regularity" value="1" />
                        Monthly
                        </p>
               
                                <hr />
 
<!-- create radio buttons to select the contract period -->                            
                <b>Contract Period</b>
                        
                        <p>
                        <input type="radio" name="contractperiod" value="1" />
                        N/A (Once Only)
                        </p>
						
						<p>
                        <input type="radio" name="contractperiod" value="6" />
                        Six Months
                        </p>
                       
                        <p>
                        <input type="radio" name="contractperiod" value="12" />
                        One Year
                        </p>
                       
                        <p>
                        <input type="radio" name="contractperiod" value="24" />
                        Two Years
                        </p>
               
                                <hr />
 
<!-- create radio buttons to select the type of service -->                            
                <b>Type</b>
                        <p>
                        <input type="radio" name="typeOfService" value="1" />
                        Standard
                        </p>
                       
                        <p>
                        <input type="radio" name="typeOfService" value="1.4" />
                        Premium
                        </p>
               
                                <hr />
 
<!-- create fields to enter how many bedrooms, living areas and service areas there are and their area -->                                                             
                <b>Bedrooms</b>
                        <p>Number of bedrooms:
                        <input type="text" name="numBedrooms" size="3" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        </p>
                       
                        <p>Area:
                        <input type="text" name="areaBedrooms" size="3" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        m2
                        </p>
                       
                <b>Living Areas</b>
                        <p>Number of living areas:
                        <input type="text" name="numLivAreas" size="2" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        </p>
                       
                        <p>Area:
                        <input type="text" name="areaLivAreas" size="3" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        m2
                        </p>
                       
                <b>Service Areas</b>
                        <p>Number of service areas:
                        <input type="text" name="numServAreas" size="2" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        </p>
                       
                        <p>Area:
                        <input type="text" name="areaServArea" size="3" maxlength="3" onchange="return chkValidityOfNumber(this)" />
                        m2
                        </p>
		<input type="button" name="calculateQuoteButton" value="Calculate Quote" onClick = "calcQuoteBeforeTax(this.form)"></input>
		
		
			var theForm=document.getElementById("quadway");
			<input type="button" name="tester" value="test" onClick = "alert(document.quadway.getElementById.elements[0].value);"></input>
		
		
		</form>
                                <hr /><hr />

	<b>Quote</b>




</body>
</html>

Right down the bottom, under the word 'Quote is where the output should go.

Any suggestions on how to do this?

Regards


Jenny

Hi,

I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website?

Thanks!

Hi gud mng,

I have one problem...

How to process textbox values/ call textbox values in JS through a Java program.
My text box values are dates. I have to process these dates.

Like in online banking we select day to know our transactions. After submitting we get results. remember my files are in my directory only. No need of database.

My files are look like 20100929, 20100930, 20101001

For epoch_classes.js, epoch_styles.css u can download coding from this link : http://www.javascriptkit.com/script/...ch/index.shtml


Code:


Code:

<html>

<table width="900" border="0" cellpadding="10" cellspacing="10" style="padding:0"> 
<tr><td id="leftcolumn" width="170" align="left" valign="top"> 
<div style="margin-left:0px;margin-top:0px"><h3 class="left"><span class="left_h2">Select Option</span></h3> 
<a rel="nofollow" target="_top" href="day_wise.htm" >Day-wise</a><br />  <br />
<a rel="nofollow" target="_top" href="between.htm" >Between Days</a> 

<link rel="stylesheet" type="text/css" href="epoch_styles.css" />


<script type="text/javascript" src="epoch_classes.js"></script>

<script type="text/javascript">

var cal1, cal2;      
window.onload = function () 
{
cal1= new Epoch('epoch_popup','popup',document.getElementById('popup_container1'));
cal2= new Epoch('epoch_popup','popup',document.getElementById('popup_container2'));
};

/*............*/
function confirmation(f) 
{
	
	var startdate = f.fromdate.value
        var enddate = f.todate.value
        var myday=new Date()

        var yr=myday.getFullYear()
        var mn=myday.getMonth()+1
        var dt=myday.getDate()

        var today=""
        var present, ys, ms, ds, ye,me,de, start, end
           
        if(mn < 10) {  mn = "0" + mn }

        if(dt <10) { dt = "0" + dt } 
 
        today= yr + "/" + mn + "/" + dt
	
        present=yr + "/" + mn + "/" +dt

                     
        if (today < startdate ) 
           {
            alert (" Start date should not be exceed to-day's date " + present )
            startdate.focus()
            return false
           } 
  
        if (today < enddate )
           {
            alert (" End date should not be exceed to-day's date " + present )
            enddate.focus()
            return false
           }

         

         if (today == startdate ) 
           { 
            alert(" You are selected to-days date as Starting day" );
           

            }
   
        var answer = confirm("Do you want to continue ?")        

        if (answer)
           {    if( startdate < enddate)         
		 alert("Dates between " + startdate + " to " + enddate + " are confirmed" )
		else
                  alert("Dates between " + enddate + " to " + startdate + " are confirmed" )     
	   }
	
        else
           {
		alert("Date not confirmed")
                window.location="to_date.htm"; 
           }

        ys= startdate.substring(0,4);
	ms= startdate.substring(5,7);
	ds= startdate.substring(8,10);

        start=ys + "" + ms + "" +ds          
  
        ye= enddate.substring(0,4);
	me= enddate.substring(5,7);
	de= enddate.substring(8,10);
 
        end=ye + "" + me + "" +de

      
}
/*.......................................................*/
</script>

<div style="margin-left:100px;">


<body>
<style type="text/css">
#conf
{
margin-left:115px;
} 
</style>


<td align="left" valign="top"> 
<table width="100" border="0" cellpadding="0" cellspacing="0"> 
<td style="padding-top:0px"> 
</table>

<h4>From Date</h4>

<form name= "formbet" id="placeholder" method="post" action="#" >
<input id="popup_container1" type="text" name= "fromdate" maxlength="10" size="20"/>


<td align="left" valign="top"> 
<table width="300" border="0" cellpadding="0" cellspacing="0"> 
<td style="padding-top:20px"> 


<h4>To Date</h4>
<input id="popup_container2" type="text" name= "todate" maxlength="10" size="20"/> <br /> <br />
<input id="conf" type="button" onclick="confirmation(this.form)" value="Submit">
</form>


</body>
</html>

In my coding, ys, ms, ds represents year starting, month starting, starting day...
ye, me, de represents end...

start,end gives file names in the format of yyyymmdd

now i want to process files from 20100101 to 20100930

means from date is 2010/01/01 and to date is 2010/09/30

if i press submit button the files from 20100101 to 20100930 are processes

here ys=2010 ms=01 ds =01 and ye=2010 me=09 de= 30

For this how do i call these textbox values (from date text box and todate) to another program (java)

Thanks in advance.