Develop Reference

passing varibel with onchange function jquery

I have this script for show/hide divs
var folder;
$(function() {
$('#teamleag').change(function() {
if ($('#teamleag').val() == 'footballal') {
$('#selectleag').show();
$('#selectleag1').hide();
$('#selectleag2').hide();
folder = "basket";
} else if ($('#teamleag').val() == 'footballleomit') {
$('#selectleag').hide();
$('#selectleag1').show();
$('#selectleag2').hide();
folder = "footballal";
} else if ($('#teamleag').val() == 'basketball') {
$('#selectleag').hide();
$('#selectleag1').hide();
$('#selectleag2').show();
folder = "football_leomit";
}
});
});
Inside the div I have select option tag that show image when selected
$(document).ready(function() {
$("#hometeam").change(function() {
var src = $(this).val();
$("#imagePreview").html(src ? '<img class=home src="img/teamslogo/' + folder + '/' + src + '">' : '');
});
});
$(document).ready(function() {
$("#awayteam").change(function() {
var src = $(this).val();
$("#imagePreview1").html(src ? '<img class=home src="img/teamslogo/' + folder + '/' + src + '">' : '');
});
});
The images are coming from different folders. How can I pass a variable with the folder name and link it to the div selected. I tried to put folder global variable and pass it between them but I get undefined

Take hidden field like below
<input id="folderName" type="hidden" value="">
$(function() {
$('#teamleag').change(function() {
if ($('#teamleag').val() == 'footballal') {
$('#selectleag').show();
$('#selectleag1').hide();
$('#selectleag2').hide();
$('#folderName').val('basket');
} else if ($('#teamleag').val() == 'footballleomit') {
$('#selectleag').hide();
$('#selectleag1').show();
$('#selectleag2').hide();
$('#folderName').val('footballal');
} else if ($('#teamleag').val() == 'basketball') {
$('#selectleag').hide();
$('#selectleag1').hide();
$('#selectleag2').show();
$('#folderName').val('football_leomit');
}
});
});
$(document).ready(function() {
$("#awayteam").change(function() {
var src = $(this).val();
var folder = $("#folderName").val();
$("#imagePreview1").html(src ? '<img class="home" src="img/teamslogo/' + folder + '/' + src + '">' : '');
});
});
Hope this code work fine ....

How to remove image from selected list use javascript?

I have a html form which is used for uploading file. I can preview images and have delete option from preview itself. However, it isn't deleted from image list which used for uploading the image into server. Please help me to delete the selected image from list
Javascript code:
$(document).ready(function() {
if (window.File && window.FileList && window.FileReader) {
$("#files").on("change", function(e) {
var files = e.target.files,
filesLength = files.length;
for (var i = 0; i < filesLength; i++) {
var f = files[i]
var fileReader = new FileReader();
fileReader.onload = (function(e) {
var file = e.target;
$("<span class=\"pip\">" +
"<img class=\"imageThumb\" src=\"" +
e.target.result + "\" title=\"" + file.name + "\"/>" +
"<br/><span class=\"remove\">Remove image</span>" +
"</span>").insertAfter("#files");
$(".remove").click(function(){
$(this).parent(".pip").remove();
});
});
fileReader.readAsDataURL(f);
}
});
} else{
alert("Your browser doesn't support to File API")
}
});

Change the remove action to this, this will remove all the files
$(".remove").click(function(){
$(this).parent(".pip").remove()
$("#files").val('') // this is new
})
you can't remove only one file as e.target.files is read-only.

load image automtacily to html page withe javascript(not php)

I need to build a gallery in HTML and load images from a local directory.
I can't use PHP, only JavaScript, HTML, and CSS.
This is my code so far, but it is not working.
$(document).ready(function() {
var dir = "G:\\Arml\\Automation\\System\\Pic\\test\\"; // folder location
var fileextension = ".jpg"; // image format
var i = "1";
$(function imageloop() {
$("<img />").attr('src', dir + i + fileextension).appendTo(".testing");
if (i == 10) {
alert('loaded');
} else {
i++;
imageloop();
};
});
});

1-Could you try to change the variable dir by another name witch could be used by another javascript library
2- give the img width and height like this for example:
$("<img width='100' height='50' />").attr('src', dir + i + fileextension ).appendTo(".testing");

this is the javaScript was work:
$(document).ready(function(){
var dir = "path"; // folder location
var fileextension = ".jpg"; // image format
var i = "1";
$(function imageloop(){
$('.gallary').prepend('<li><img id="' + i + '" alt="description" /><img id="1' + i + '" alt="description" class="preview" /></li>')
if (i==11){
}
else{
$("#"+i).attr('src', dir + i + fileextension );
$("#1"+i).attr('src', dir + i + fileextension );
i++;
imageloop();
};
});
});

modal images generate wrong code under FF and IE

My modal images seems to be working only under Chrome. In Firefox and Internet Expoler modal images generate code with errors:
<img src="" http:="" localhost="" ceramikakornak="" images="" realizacje="" klasyczne="" 3.jpg""="" class="img-responsive">
In Chrome modal windows is ok and looks:
<img src="images/realizacje/1.jpg" class="img-responsive">
JavaScript which i use to generate Modal Window:
$(document).ready(function() {
$('.realizacje-fota').each(function(){
var checkClass = $(this);
var image_url = checkClass.css('background-image'),
image;
// Remove url() or in case of Chrome url("")
image_url = image_url.match(/^url\("?(.+?)"?\)$/);
if (image_url[1]) {
image_url = image_url[1];
image = new Image();
// just in case it is not already loaded
$(image).load(function () {
// alert(image.width + 'x' + image.height);
var ratio = image.width/image.height;
if (ratio > 1) {
checkClass.addClass("realizacje-fota-pion");
}
else if (ratio <= 1) {
checkClass.addClass("realizacje-fota-poziom");
}
});
image.src = image_url;
}
});
});
$(document).ready(function(){
$('.lazy div').on('click',function(){
var src = $(this).css('background-image');
var src = src.substring(4, src.length);
var src = src.substring(0, src.length - 1);
var img = '<img src="' + src + '" class="img-responsive"/>';
var index = $(this).parent('div').index();
var html = '';
html += img;
html += '<div style="clear:both;display:block;">';
html += '<a class="controls next" href="'+ (index+1) + '">next »</a>';
html += '<a class="controls previous" href="' + (index) + '">« prev</a>'
html += '</div>';
$('#myModal').modal();
$('#myModal').on('shown.bs.modal', function(){
$('#myModal .modal-body').html(html);
//new code
$('a.controls').trigger('click');
})
$('#myModal').on('hidden.bs.modal', function(){
$('#myModal .modal-body').html('');
});
});
})
$(document).on('click', 'a.controls', function(){
var index = $(this).attr('href');
var src = $('.row div:nth-child('+ index +') img').attr('src');
$('.modal-body div').str('scr', src);
var newPrevIndex = parseInt(index) - 1;
var newNextIndex = parseInt(newPrevIndex) + 2;
if($(this).hasClass('previous')){
$(this).attr('href', newPrevIndex);
$('a.next').attr('href', newNextIndex);
}else{
$(this).attr('href', newNextIndex);
$('a.previous').attr('href', newPrevIndex);
}
var total = $('.row div').length + 1;
//hide next button
if(total === newNextIndex){
$('a.next').hide();
}else{
$('a.next').show()
}
//hide previous button
if(newPrevIndex === 0){
$('a.previous').hide();
}else{
$('a.previous').show()
}
return false;
});

Get number of files dropped in html5 file upload

i am a newbie with jquery and i was playing with this plugin. i am using it with asp.net and I want to get number of file dropped in it. I tried a bit but failed to get. Any idea?
Here is the code of script.js:
$(function () {
var dropbox = $('#dropbox'),
message = $('.message', dropbox);
dropbox.filedrop({
paramname: 'pic',
maxfiles: 100,
maxfilesize: 100,
//url: '/Uploader.asmx/Upload',
url: '/Default.aspx',
uploadFinished: function (i, file, response) {
$.data(file).addClass('done');
var count = file.size;
alert(count);
},
error: function (err, file) {
switch (err) {
case 'BrowserNotSupported':
showMessage('Your browser does not support HTML5 file uploads!');
break;
case 'TooManyFiles':
alert('Too many files! Please select 5 at most! (configurable)');
break;
case 'FileTooLarge':
alert(file.name + ' is too large! Please upload files up to 2mb (configurable).');
break;
default:
break;
}
},
//Called before each upload is started
// beforeEach: function (file) {
//if (!file.type.match(/^image\//)) {
//alert('Only images are allowed!');
// alert(file.name);
// Returning false will cause the
// file to be rejected
// return true;
// }
//},
uploadStarted: function (i, file, len) {
createImage(file);
},
progressUpdated: function (i, file, progress) {
$.data(file).find('.progress').width(progress);
}
});
var template = '<div class="preview">' +
'<span class="imageHolder">' +
'<img style="" />' +
'<p class="background: rgba(0, 0, 0, 0.75);"></p>' +
'<span class="uploaded"></span>' + // background: rgba(0, 0, 0, 0.75);
'</span>' +
'<div class="progressHolder">' +
'<div class="progress"></div>' +
'</div>' +
'</div>';
function createImage(file) {
var preview = $(template),
image = $('img', preview),
paragraph = $('p', preview);
var reader = new FileReader();
image.width = 100;
image.height = 100;
reader.onload = function (e) {
// e.target.result holds the DataURL which
// can be used as a source of the image:
//alert(e.target.result);
// $('p#filename').removeAttr('id');
// $('p').attr('id', 'filename' + num + '');
// $('p#filename').text(file.name);
paragraph.attr('id', 'filename').text(file.name);
image.attr('src', '../assets/img/fileicon.png');
num = num + 1;
};
// Reading the file as a DataURL. When finished,
// this will trigger the onload function above:
reader.readAsDataURL(file);
message.hide();
preview.appendTo(dropbox);
// Associating a preview container
// with the file, using jQuery's $.data():
$.data(file, preview);
}
function showMessage(msg) {
message.html(msg);
}
});

It's in the input element. I had a fiddle that uses it in a change event, in which case it's in event.target.files.
edit: should include the fiddle: http://jsfiddle.net/jorgthuijls/uh95y/3/ try it by attaching PDF's.
The relevant code here. This loops over the files and creates "preview" boxes for PDF's but you can just count it as well. files below is an array.
var filesInput = document.getElementById("files");
filesInput.addEventListener("change", function (event) {
var files = event.target.files; //FileList object
var output = document.getElementById("result");
for (var i = 0; i < files.length; i++) {
var file = files[i];
var reader = new FileReader();
reader.addEventListener("load", function (event) {
//stick some rubbish here to check the type of
//file loaded and adjust "type" below. See the
// 'reader' object, it has all that.
var div = document.createElement("div");
div.innerHTML
= '<object data="'
+ reader.result
+ '" type="application/pdf">'
+ '<embed src="'
+ reader.result
+ '" type="application/pdf" />'
+ '</object>';
output.insertBefore(div, null);
});
//Read the image
reader.readAsDataURL(file);
}
});