JavaScript - Uploading A File And Displaying Progress Bar

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

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.

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>

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

Ahoy,

Lemme try to explain this as best as I can. Bullet points might help:
When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images
http://gta.kwivia.co.uk/gta-iv/

I will appreciate all solutions to this problem. If you need to know anything, simply ask me.

please i want to know how to Upload video file of any extention and it converts to .flv like U-Tube?

Is there a way I can use JavaScript to compile a list of checkboxes with the value of the url of the file I wish to upload from my computer.

And then with that checklist PHP can grab the files from my computer and upload them to the server.

Doesn't have the be checkboxes but basically a list of locations so the files can be uploaded one after another. Much like Facebook's ability to upload multiple files.
I can't find out how to select multiple files, so I figured just compile a list.

I am developing extension which should upload currently displayed html as a file to a remote web server, unfortunatelly so far i haven't suceeded. I think this should be done through XMLHttpRequest(), but neither I know how to upload files through XMLHttpRequest nor how to convert string to file. The HTML form that uploads a file:

<form method="POST" action="https://woodmin.catsone.com
/api/add_candidate" enctype="multipart/form-data">
<input name="resume" type="file">
</form>

But as I said i need my plugin to do it automatically and file must be made from html code.
Maybe you have some ideas, advices or good links which can help to solve my problem? This is a real headache for me! Thank you in advance.

i want to know how to Upload images or videos through drag and drop (jquery or html5 tools)

Well just came to notice this lack of tools on javascript to manage uploads or downloads while working on my new project.

I've been trying different ways to get the upload progress, stimated time left, upload speed average, but everything I have done was somehow dirty.

I have spent the last two days trying to get a flash file do this for me, and there is always an issue and you have to get a tricky solution to get something that should be a native javascript support at this age of the web.

What do you think guys, isn't the web mature enought to get a decent upload / download progress functions?

What are big guys doing, youtube, google, flickr?

I can get this code to take two separate sections of a file which are not beside each other and write them into another file. It always comes up as a single full line of the code instead of the sections I want. The code includes the student number first name last name and three results of assignments. I want the code to write the student number and three results of all the students into a file and then work out the average of the student results. Can you help?

Code:

 try{                    
               while (in.hasNextLine())
               {
                  String line = in.nextLine();
                  out.println( line);
                  int i=0;
                  if(!Character.isDigit(line.charAt(i)))  { i++; }
                  studentStringNumber = line.substring(0, i);
                  String stringResult = line.substring(i);
                              	
                  studentStringNumber = studentStringNumber.trim();
                  stringResults = stringResults.trim();
                  double stringResultsValue = Double.parseDouble(stringResults.trim());
                  stringResults = in.nextLine();
                              	
                                 
                  studentStringNumber = in.nextLine();
                  studentNumber = Integer.parseInt(studentStringNumber);
                  if(in.hasNextInt())
                  {
                     int value = in.nextInt();
                  }
               						 					   
                  results = Double.parseDouble(stringResults); 
                  if(in.hasNextDouble())
                  {
                     double value = in.nextDouble();
                  } 
               						               	
                            	
                  Scanner lineScanner = new Scanner(line);
                  studentStringNumber = lineScanner.next();
                  while(!lineScanner.hasNextDouble())
                  {
                     studentStringNumber = studentStringNumber+ " " +lineScanner.next();
                  }
                  stringResultsValue = lineScanner.nextDouble();     
               }
            }

Hi,

Can someone tell me what I am doing wrong. Script works on the first attachment but not the other two?

Code:

<script type="text/javascript" language="JavaScript"><!--
function ExtensionsOkay() {
var extension = new Array();
var fieldvalue = new Array();
fieldvalue[0] = document.customApp.attachment_1.value;
fieldvalue[1] = document.customApp.attachment_2.value;
fieldvalue[2] = document.customApp.attachment_3.value;
extension[0] = ".doc";
extension[1] = ".docx";
extension[2] = ".txt";
extension[3] = ".pdf";


// No other customization needed.
for(var f = 0; f < fieldvalue.length; f++) {
var thisext = fieldvalue[f].substr(fieldvalue[f].lastIndexOf('.'));
for(var i = 0; i < extension.length; i++) {
	if(thisext == extension[i]) { return true; }
	}
alert("Your upload field " + f + " contains an unapproved file name.");
return false;
}
}
//--></script>

Hi i am using javascript for the first time and i have a problem .I have 2 files html and javascript file in seperate but i donot know how to make them work .the code is down below .Thanks in advance for help.


HTML
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta name="description" content="Instagram API - usage" />
<meta charset=utf-8 />
<title></title>
</head>
<body>
<input id="lat_input" type="number" value="60.221374"/>
<input id="lng_input" type="number" value="24.805391"/>
<button id="search_location">Search</button><br/>
<button id="get_popular">Get popular</button>
<div id="images"></div>
</body>
</html>



Javascript file


// API DOCUMENTATION:
// Instagram Developer Documentation

var clientId = 'e7538f47e197479d8d32a63ae3ae4cd2';

$('#search_location').click(function () {
getMediaByLocation($('#lat_input').val(), $('#lng_input').val());
});

$('#get_popular').click(function () {
getPopularImages();
});

function getMediaByLocation(lat, lng) {
var o = {
lat: lat,
lng: lng,
client_id: clientId
};

$.getJSON('https://api.instagram.com/v1/media/search?callback=?', o, function (response) {
processImages(response.data);
});
}

function getPopularImages() {
var o = {
client_id: clientId
};

$.getJSON('https://api.instagram.com/v1/media/popular?callback=?', o, function (response) {
processImages(response.data);
});
}


function processImages(array) {
$('#images').empty();
$.each(array, function (index, element) {
var fs = $('<fieldset>').appendTo('#images');

$('<img>').attr('src', element.images.low_resolution.url).appendTo(fs);

if (element.caption) {
$('<pre>').text(element.caption.text).appendTo(fs);
}

$.each(element.comments.data, function (index, comment) {
$('<pre>').text('Comment from ' + comment.from.full_name + ': ' + comment.text).appendTo(fs);
});

});
}

Hello all, I am new here and have a question about a AP Div I am using as a dropin. It drops in when the page loads and I would like it to only drop in if a visitor clicks a link I designate as the dropin link. Can someone please tell me how to accomplish this? I am pasting in the js file and I will also need to know how to set up the "a href" link to call the dropin! Thanks is advance for any help you may give!

Code:

// JavaScript Document

var ie=document.all
var dom=document.getElementById
var ns4=document.layers
var calunits=document.layers? "" : "px"

var bouncelimit=32 //(must be divisible by 8)
var direction="up"

function initbox(){
if (!dom&&!ie&&!ns4)
return
crossobj=(dom)?document.getElementById("dropin").style : ie? document.all.dropin : document.dropin
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossobj.top=scroll_top-250+calunits
crossobj.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropin()",50)
}

function dropin(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossobj.top)<100+scroll_top)
crossobj.top=parseInt(crossobj.top)+40+calunits
else{
clearInterval(dropstart)
bouncestart=setInterval("bouncein()",50)
}
}

function bouncein(){
crossobj.top=parseInt(crossobj.top)-bouncelimit+calunits
if (bouncelimit<0)
bouncelimit+=8
bouncelimit=bouncelimit*-1
if (bouncelimit==0){
clearInterval(bouncestart)
}
}

function dismissbox(){
if (window.bouncestart) clearInterval(bouncestart)
crossobj.visibility="hidden"
}

function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}


window.onload=window.setTimeout(initbox,5000);

Does anyone know how to accomplish this? I got the html file to show but none of the text in the file will show.