Develop Reference

jQuery resizable() image working in draggable() div

currently i have image upload form in which we can upload multiple image and drag this image inside the div .
Please see my form
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input name="user_file[]" id="user_file" style="position: relative;overflow: hidden" multiple="" type="file">
<div class="new-multiple"></div>
$( function() {
var inputLocalFont = document.getElementById("user_file");
inputLocalFont.addEventListener("change",previewImages,false);
function previewImages(){
var fileList = this.files;
var anyWindow = window.URL || window.webkitURL;
for(var i = 0; i < fileList.length; i++){
var objectUrl = anyWindow.createObjectURL(fileList[i]);
$('.new-multiple').append('<div class="img-div"><img src="' + objectUrl + '" class="newly-added" /></div>');
window.URL.revokeObjectURL(fileList[i]);
}
$( ".img-div" ).draggable();
$( ".newly-added" ).resizble();
}
});
Here i when i upload images it will show on new-multiple div . Also i can drag these images.
js fidle: https://jsfiddle.net/vd11qyzv/1/
But resizble is not working . Please help .

First:
$( ".newly-added" ).resizble();
This will fail and you will see:
TypeError: $(...).resizble is not a function
This is fixed by using the proper function name:
$( ".newly-added" ).resizable();
Second, there is a lot you can do to clean up and improve your code.
JavaScript
$(function() {
var inputLocalFont = $("#user_file");
inputLocalFont.change(previewImages);
function previewImages(e) {
var fileList = this.files;
var anyWindow = window.URL || window.webkitURL;
$.each(fileList, function(key, val) {
var objectUrl = anyWindow.createObjectURL(val);
var $newDiv = $("<div>", {
id: "img-div-" + key,
class: "img-div"
})
.draggable()
.appendTo($('.new-multiple'));
var $newImg = $("<img>", {
src: objectUrl,
id: "img-" + key,
class: "newly-added"
})
.resizable()
.appendTo($newDiv);
window.URL.revokeObjectURL(val);
});
}
});
Running this test code (https://jsfiddle.net/Twisty/vd11qyzv/2/), you ge the following HTML output:
<div class="new-multiple">
<div id="img-div-0" class="img-div ui-draggable ui-draggable-handle" style="position: relative;">
<img src="blob:https://fiddle.jshell.net/d2298075-5b2a-47b5-ac71-cc6c07bb1133" id="img-0" class="newly-added ui-resizable" style="margin: 0px; resize: none; position: static; display: block; height: 0px; width: 0px;">
</div>
</div>
You can see draggable and resizable are both defined for their respective elements.
UPDATE
Found a minor issue in the assignment. Swap .resizable() and .appendTo() as resizable appears to have an issue with being assigned before being appended.
Working example: https://jsfiddle.net/Twisty/vd11qyzv/3/
I also added a bit of styling to help ensure that draggable and resizable do not conflict.

Drag and drop do not send the data as expected

Note:I'm new to javascript.
I have the following code which allows the user to preview an image before uploading it.
The input element works fine and the selected image is displayed as expected.
However, the drag and drop throws an error that,
Uncaught TypeError: Cannot read property 'files' of undefined
I think I am taking the dropped file object in a wrong way any help would be greatly appreciated.
(function($){
$(document).ready(function(){
function renderImage(file)
{
var reader = new FileReader();
reader.onload = function(event) {
the_url = event.target.result
$('#preview').html("<img width='150px' height = '100px'src='" + the_url + "' />")
}
reader.readAsDataURL(file);
}
//This is for the input and works fine.
$('#file').change( function (){
renderImage(this.files[0])
});
//The drag is the one with problem.
//it produces the following error
/*
*Uncaught TypeError: Cannot read property 'files' of undefined
*/
$("#drop").on('dragenter', function (e){
e.preventDefault();
$(this).css('background', '#BBD5B8');
});
$("#drop").on('dragover', function (e){
e.preventDefault();
});
$("#drop").on('drop', function (e){
$(this).css('background', '#D8F9D3');
e.stopPropagation();
e.preventDefault();
var dt = e.target.files || (e.dataTransfer && e.dataTransfer.files);
var files = dt.files;
renderImage(files);
});
});
})(jQuery)
#drop
{
width:300px;
height:100px;
border:dotted 1px;
border-radius:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id = "upload">
<div id = "drop">
</div>
<input type ="file" id = "file">
<div id = "preview">
</div>
</div>

My proposal is, where I corrected also the "Uncaught TypeError: Cannot read property 'files' of undefined" (only for FF it's necessary to double the input field):
(function($){
$(document).ready(function() {
function renderImage(file)
{
var reader = new FileReader();
reader.onload = function(event) {
the_url = event.target.result
$('#preview').html("<img width='150px' height = '100px'src='" + the_url + "' />")
}
reader.readAsDataURL(file);
}
//This is for the input and works fine.
$('input[type^="file"]').change( function (){
renderImage(this.files[0])
});
//The drag is the one with problem.
//it produces the following error
/*
*Uncaught TypeError: Cannot read property 'files' of undefined
*/
$("#drop").on('dragenter', function (e){
event.target.style.background = '#BBD5B8';
});
$("#drop").on('dragover', function (e){
e.preventDefault();
});
$("#drop").on('drop', function (e){
event.target.style.background = '#D8F9D3';
e.stopPropagation();
e.preventDefault();
var dt = (e.originalEvent.target.files && e.originalEvent.target.files.length > 0) || (e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files);
var files = dt[0];
renderImage(files);
});
});
})(jQuery);
#drop
{
width:300px;
height:100px;
border:dotted 1px;
border-radius:5px;
}
#drop input {
position: absolute;
top: 0;
right: 0;
cursor: pointer;
opacity: 0.0;
filter: alpha(opacity=0);
font-size: 300px;
height: 100px;
}
#drop label {
position: absolute;
top: 40px;
width: 250px;
text-align: center;
}
<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<div id="upload">
<div id="drop">
<label id="fileLbl">Drop a file here</label>
<input type ="file" id = "file1">
</div>
<input type ="file" id = "file2">
<div id = "preview">
</div>
</div>

I believe the issue is with your HTML. Try moving your input inside of your #drop div
<div id = "upload">
<div id = "drop">
<input type ="file" id = "file">
</div>
<div id = "preview">
</div>
</div>

show image on link click and hide it when clicked outside

I am trying to show images on a link click and hiding that image if clicked outside. After trying so many solutions for this I have came up with like below code.
<script>
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
</script>
<div id="wrapper" style="margin-top: -5px; text-align:center" align="center" onclick="javascript:setImageVisible('popup1', false)">
<div id="Btn7"></div>
<img id="popup1" class="img_popup1" src="../screenshots/pop-up.png" style="visibility:hidden" />
</div>
The above code is working fine. But when I add other image like below, its not working. When I clicked outside then images are not hiding.
<script>
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
$(document).click(function() {
var img1 = document.getElementById('popup1');
var img2 = document.getElementById('popup2');
img1.style.visibility = 'hidden';
img2.style.visibility = 'hidden';
});
</script>
<div id="wrapper" style="margin-top: -5px; text-align:center" align="center">
<div id="Btn7"></div>
<img id="popup1" class="img_popup1" src="../screenshots/pop-up.png" style="visibility:hidden" />
<div id="Btn8"></div>
<img id="popup2" class="img_popup2" src="../screenshots/pop-up2.png" style="visibility:hidden" />
</div>
Can anyone please suggest what should I do ?

You don't need jQuery to do this.
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
function hideAll() {
var img1 = document.getElementById('popup1');
var img2 = document.getElementById('popup2');
img1.style.visibility = 'hidden';
img2.style.visibility = 'hidden';
}
function click(e) {
e.stopImmediatePropagation();
var id, el = this;
while (el) {
el = el.nextSibling;
if (el.nodeName === 'IMG') { // finds the next sibling img element
id = el.id;
el = null;
}
}
hideAll(); // hide all images
setImageVisible(id, true); // show the right one
};
document.addEventListener('click', hideAll);
var btns = document.querySelectorAll('.btn'),
i = 0,
len = btns.length;
for (; i < len; i++) {
btns[i].addEventListener('click', click);
}
img {
width: 100px;
height: 100px;
border: 1px solid black;
}
<div id="wrapper" style="margin-top: -5px; text-align:center" align="center">
<div class="btn" id="Btn7">Image 1</div>
<img id="popup1" class="img_popup1" src="../screenshots/pop-up.png" style="visibility:hidden" />
<div class="btn" id="Btn8">Image 2</div>
<img id="popup2" class="img_popup2" src="../screenshots/pop-up2.png" style="visibility:hidden" />
</div>

Sure, as you have added a tag jquery, I am asking you to do it in a simple way like this:
Snippet:
$(function () {
$(".imgPreview").hide();
$(".unstyled li a").click(function () {
$(".imgPreview").show().find("img").attr("src", $(this).attr("href"));
return false;
});
$("body").click(function () {
$(".imgPreview").hide();
});
});
* {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none;}
body {margin: 10px;}
li {margin: 5px;}
.unstyled, .imgPreview {float: left; width: 50%;}
.unstyled, .imgPreview img {max-width: 100%;}
p {margin: 5px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Click on a link to show the respective image. Click outside to hide it!</p>
<p>Also you can right click and open it to open the image in a new tab!</p>
<ul class="unstyled">
<li>350x150</li>
<li>750x150</li>
<li>350x150</li>
<li>100x100</li>
<li>350x150</li>
</ul>
<div class="imgPreview">
<img src="" alt="" />
</div>

Try this simple demo
<!DOCTYPE html>
<html>
<head>
<script src = "jquery-1.10.2.min.js"></script>
</head>
<body>
Click to show image
<img id="image" style="display:none;height:500px; width:500px;">
<script type="text/javascript">
$('#imageLink').click(function (e){
e.stopPropagation();
$('#image').show();
});
$('body').click(function () {
$('#image').hide();
})
</script>
</body>
</html>

Remove inline event handler and write for common click event ,
1) bind the click event for all a tag inside wrapper id and then show the images when link is clicked
2) bind the click event for document and hide the all images when clicking outside of link
$("#popup1,#popup2").hide();
$("#Btn7,#Btn8").click(function (e) {
e.stopPropagation();
$(this).next().show();
})
$(document).click(function () {
$("#popup1,#popup2").hide();
})
DEMO

$(document).ready(function () {
$("#linkbutton_id").click(function () {
alert("The paragraph was clicked.");
if($("#image").hide())
{
$("#image").show();
return false;
}
});
});
$(document).ready(function () {
$("#div_id").click(function(){
$("#image").hide();
});
});
Code plus output link
https://jsfiddle.net/umxrn0Lg/2/
fullscreen output link
https://jsfiddle.net/umxrn0Lg/3/embedded/result/

create an array with values of selected images

Im trying to gather the images selected, take their values, put them into an array, and then push them to a mysql database.
Here is my current code
$(document).ready(function() {
var startfind = $("body").find('.on').val();
var awnsers = $('.on').map(function() {
return $(startfind).text();
}).get().join(',');
$("img").click(function() {
$(this).toggleClass("on");
});
$('button').click(function() {
alert(awnsers);
});
});
#seasoning {
margin: 8px;
font-size: 16px;
height: 100px;
width: 100px;
}
.on {
padding: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.imgur.com/7HyU4yh.jpg" id="seasoning" value="0">
<br>
<img src="https://i.imgur.com/OEHCjCK.jpg" id="seasoning" value="1">
<br>
<button>Submit</button>
I can't get the alert to show the values of the items selected.

You can trigger an event when you click on an image
Then listen on that event, an update the answer
use answer when you need it
an I change a little in your html code, that change img's value attr to data-value
============Here is the code and jsFiddle=======================
$(function(){
//catch this values, because you will use these for more than one time
var answers = [];
function getAnswers(){
answers = []; //empty old answers so you can update it
$.map($('.on'), function(item){
answers.push($(item).data('value'));
});
}
//init the answers in case you use it before click
getAnswers();
$(document).on('click', 'img', function(e){
e.preventDefault();
$(this).toggleClass('on');
//trigger the state change when you click on an image
$(document).trigger('state-change');
});
//get answers when event was triggered
$(document).on('state-change', function(e){
getAnswers();
});
$('#btn-show').click(function(){
alert(answers.join(',') || 'nothing was selected');
});
});
#seasoning {
margin: 8px;
font-size: 16px;
height: 100px;
width: 100px;
}
.on {
padding: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://i.imgur.com/7HyU4yh.jpg" id="seasoning" data-value="0">
<br>
<img src="https://i.imgur.com/OEHCjCK.jpg" id="seasoning" data-value="1">
<br>
<button id="btn-show">Submit</button>

Please check this code.
$("img").on('click',function() {
$(this).toggleClass("on");
});
$(document).on('click', 'button', function() {
var awnsers = $('.on').map(function() {
return $(this).attr('value');
}).get().join(',');
alert(awnsers);
});
Working fiddle - http://jsfiddle.net/Ashish_developer/6ezf363a/

How do I play the same sound on multiple clicks, using jQuery and Javascript

Currently, I have an explosion sound firing when my bubble's pop, using the explode effect from jQuery. I'm wanting to be able to click on one bubble after another, without having to pause waiting for the other sound to finish. I've tried using a variable to change to a different audio object with no luck. Any help would be appreciated!
The same problem is happening in jsfiddle: jsfiddle.net/xbrjp/1/
My HTML
<body style="background:black;">
<style>
.circleBase {
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
behavior: url(PIE.htc);
}
.type1 {
padding:20px;
background: white;
border:1px solid black;
color:black;
}
</style>
<div class="circleBase type1" style="display:table-cell; vertical-align:middle;">
<div align="center">Bubble 1</div></div>
<div class="circleBase type1" style="display:table-cell; vertical-align:middle;">
<div align="center">Bubble 2</div></div>
<div class="circleBase type1" style="display:table-cell; vertical-align:middle;">
<div align="center">Bubble 3</div></div>
</body>
<script>
$( ".type1" ).click(function() {
$( this ).toggle( "explode", {pieces: 50 }, 2000);
});
$(document).ready(function() {
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'http://www.soundjay.com/mechanical/sounds/explosion-01.mp3');
//audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
var audioElement2 = document.createElement('audio');
audioElement2.setAttribute('src', 'http://www.soundjay.com/mechanical/sounds/explosion-01.mp3');
//audioElement.load()
$.get();
audioElement2.addEventListener("load", function() {
audioElement2.play();
}, true);
var x = 0;
if(x == 0) {
$('.type1').click(function() {
audioElement.play();
});
x = 1;
}
if(x == 1) {
$('.type1').click(function() {
audioElement2.play();
});
x = 0;
}
$('.pause').click(function() {
audioElement.pause();
});
});
</script>

I would actually take the route of creating an <audio> element for each bubble:
http://jsfiddle.net/8qc9V/
$(document).ready(function () {
$(".type1").click(function () {
$(this).toggle("explode", {
pieces: 50
}, 2000);
$(this).find('audio').get(0).play();
});
$('.type1').each(function() {
$('<audio/>')
.attr('src','http://www.soundjay.com/mechanical/sounds/explosion-01.mp3')
.appendTo(this);
});
});