We Keep Coding

JQUERY - Drag & Drop file input replaces previous added files

Im making an user generated music playlist. The user drops files / adds files with the button.
However, whenever more files are dropped / added, the previously added files are replaced.
How to modify code to append the files with the previously added files?
PS:
I have used jquery to build the app. I have used jquery, cos i want to work with audio time duration(to find total playtime of the playlist, etc) and its a bit difficult to accomplish that with vanillaJS.
var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
var inputFile = dropZone.find("input");
var finalFiles = {};
var objectUrl;
// Function
$(function() {
var ooleft = dropZone.offset().left;
var ooright = dropZone.outerWidth() + ooleft;
var ootop = dropZone.offset().top;
var oobottom = dropZone.outerHeight() + ootop;
document.getElementById(dropZoneId).addEventListener("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
dropZone.addClass(mouseOverClass);
var x = e.pageX;
var y = e.pageY;
if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
inputFile.offset({
top: y - 15,
left: x - 100
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
}, true);
if (buttonId != "") {
var clickZone = $("#" + buttonId);
var oleft = clickZone.offset().left;
var oright = clickZone.outerWidth() + oleft;
var otop = clickZone.offset().top;
var obottom = clickZone.outerHeight() + otop;
$("#" + buttonId).mousemove(function(e) {
var x = e.pageX;
var y = e.pageY;
if (!(x < oleft || x > oright || y < otop || y > obottom)) {
inputFile.offset({
top: y - 15,
left: x - 160
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
});
}
document.getElementById(dropZoneId).addEventListener("drop", function(e) {
$("#" + dropZoneId).removeClass(mouseOverClass);
}, true);
// FILE
inputFile.on('change', function(e) {
finalFiles = {};
$('#filename').html("");
var fileNum = this.files.length,
initial = 0,
counter = 0;
$.each(this.files, function(idx, elm) {
finalFiles[idx] = elm;
});
for (initial; initial < fileNum; initial++) {
counter = counter + 1;
// Object URL
var file = e.currentTarget.files[initial];
objectUrl = URL.createObjectURL(file);
$("#filename").prop("src", objectUrl);
//console.log('Object URL: ', objectUrl);
//console.log('FILE: ', file);
// Object URL End
//$('#filename').append('<div class="playlist draggable" id="file_' + initial + '"><span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span> ' + this.files[initial].name + ' <span class="fa fa-times-circle fa-lg closeBtn" onclick="removeLine(this)" title="remove"></span></div>');
//$('#filename').append('<div class="playlist draggable" id="file_' + initial + '"><span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span> ' + this.files[initial].name + ' <span class="fa fa-times-circle fa-lg closeBtn" onclick="removeLine(this)" title="remove"></span></div>');
$('#filename').append('<div class="playlist draggable" id="file_' + initial + '"><span class="fa-stack fa-lg"><i class="fa fa-file-audio-o"></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + '</strong></span> ' + '<audio controls controlsList="nodownload noplaybackrate" preload="auto" id="audioFiles" >' + '<source src="' + objectUrl + '" type="audio/mpeg" />' + '</audio>' + '<span class="fa fa-times-circle fa-lg closeBtn" onclick="removeLine(this)" title="remove"></span> ' + this.files[initial].name + '</div>');
//$('#filename').append('<div class="playlist draggable" id="file_' + initial + '">' + '<audio controls id="audioFiles" >' + '<source src="' + objectUrl + '/' + this.files[initial].name + '" type="audio/mpeg" />' + '</audio>' + '</div>');
console.log('NAME: ', this.files[initial].name);
//console.log('INITIAL: ', this.files[initial]);
// Audio Duration
var Duration;
$(audioFiles).on("canplay", function() {
console.log('THIS DURATION: ', this.duration);
Duration = this.duration;
});
// Audio Duration End
}
// Total File Count
var count = $('#filename').children().length;
console.log('Number of files: ', count);
$('#totalFiles').css("display", "initial");
$('#totalFiles').html('<font style="color:#06a7e5">Files Uploaded: ' + '<b>' + count + '</b>' + '</font>');
// End Total File Count
});
})
function removeLine(obj) {
inputFile.val('');
var jqObj = $(obj);
var container = jqObj.closest('div');
var index = container.attr("id").split('_')[1];
container.remove();
delete finalFiles[index];
//console.log(finalFiles);
URL.revokeObjectURL(objectUrl);
// Total Files
var count = $('#filename').children().length;
console.log('Number of files: ', count);
$('#totalFiles').html('<font style="color:#06a7e5">Files Uploaded: ' + '<b>' + count + '</b>' + '</font>');
if (count == 0) {
$('#totalFiles').css("display", "none");
} else {}
}
// Draggable Items
$(function() {
$('.draggable, .droppable').sortable({
connectWith: '.playlists'
});
});
#import url('https://fonts.googleapis.com/css?family=Source+Code+Pro');
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: visible;
font-family: 'Source Code Pro', monospace;
}
.dropper {
padding: 10px;
}
#drop-zone {
width: 100%;
min-height: 150px;
border: 3px dashed rgba(0, 0, 0, .3);
border-radius: 5px;
font-family: 'Source Code Pro', monospace;
text-align: center;
position: relative;
font-size: 20px;
color: #7E7E7E;
}
#drop-zone input {
position: absolute;
cursor: pointer;
left: 0px;
top: 0px;
opacity: 0;
}
/*Important*/
#drop-zone.mouse-over {
border: 3px dashed rgba(0, 0, 0, .3);
color: #7E7E7E;
}
/*If you dont want the button*/
#clickHere {
display: inline-block;
cursor: pointer;
color: white;
font-size: 1rem;
width: 200px;
border-radius: 0px;
background-color: #000000;
padding: 10px;
}
#clickHere:hover {
background-color: #376199;
}
.uploadedFiles {
padding: 0;
margin: 10px 50px;
}
#filename {
margin-top: 10px;
margin-bottom: 10px;
padding: 10px;
font-size: 14px;
line-height: 1.5em;
border: 1px solid;
min-height: 200px;
max-height: 400px;
overflow-y: scroll;
color: #240aff;
}
#filename span {
font-size: 1.5rem;
line-height: 1.2rem;
height: 1.5rem;
width: 1.5rem;
}
/* File Info */
#totalFiles {
border: 1px solid #06a7e5;
padding: 5px;
display: none;
}
.file-preview {
background: rgb(99, 8, 8);
border: 5px solid #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
font-size: 14px;
margin-top: 5px;
}
.closeBtn {
color: black;
display: inline-block;
vertical-align: -20%!important;
}
.closeBtn:hover {
color: red;
display: inline-block;
cursor: pointer;
}
.playlist {
border: 1px solid black;
padding: 10px;
margin: 5px;
background: #e9eaf9;
}
.playlist:hover {
cursor: move;
}
/* AUDIO CONTROLS */
#audioFiles {
vertical-align: middle;
margin: 0px 10px 0px 0px;
}
audio {
/*
filter: sepia(20%) saturate(70%) grayscale(1) contrast(99%) invert(12%);
*/
width: 25%;
height: 35px;
}
audio::-webkit-media-controls-enclosure {
border-radius: 5px;
background-color: #cfcfcf;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Upload & Draggable</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="./images/favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.js" integrity="sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
<div class="dropper">
<div id="drop-zone">
<p>Drop files here</p>
<div id="clickHere">or click here <i class="fa fa-upload"></i>
<input type="file" name="file" id="file" multiple accept="audio/*" />
</div>
</div>
</div>
<div class="uploadedFiles">
<p>Uploaded Files are Draggable. <span id="totalFiles"></span></p>
<div id="filename" class="playlists droppable"></div>
</div>
<!--
<audio id="audio2"></audio>
<p>
<label>File Size:</label>
<span id="filesize"></span>
<input type="hidden" id="size" name="size" value="" />
</p>
<p>
<label>Total Duration:</label>
<span id="duration"></span>
<input type="hidden" id="timelength" name="time" value="" />
</p>
-->
<script src="./script.js" async defer></script>
</body>
</html>

It worked well when i removed the following line of jquery code:
$('#filename').html("");

Change the color of new added element by jQuery

this is my code:
jQuery(document).on('change', 'input[type=color]', function(picker) {
var color_chng = jQuery(this).closest('.input-group').attr('id');
jQuery('.card-txt[id=p' + color_chng + ']').css('color', picker.currentTarget.value);
});
jQuery(document).ready(function() {
var img_url = jQuery("#pro-image").attr('src');
jQuery(".edit-image").css('background', 'url(' + img_url + ')');
jQuery(".hide-img").attr('src', img_url);
jQuery(".edit-btn").find(".elementor-button-link").click(function() {
jQuery(".edit-box").show();
});
//input keyup
jQuery(document).on('keydown, keyup', '.input-group input[type="text"]', function() {
var texInputValue = jQuery(this).val();
var input_id = jQuery(this).parent().attr('id');
jQuery('.edit-image span[id=p' + input_id + ']').html(texInputValue);
});
// Draggable
(function(jQuery) {
jQuery.fn.drags = function(opt) {
opt = jQuery.extend({
handle: "",
cursor: "move"
}, opt);
if (opt.handle === "") {
var jQueryel = this;
} else {
var jQueryel = this.find(opt.handle);
}
return jQueryel.css('cursor', opt.cursor).on("mousedown", function(e) {
if (opt.handle === "") {
var jQuerydrag = jQuery(this).addClass('draggable');
} else {
var jQuerydrag = jQuery(this).addClass('active-handle').parent().addClass('draggable');
}
var z_idx = jQuerydrag.css('z-index'),
drg_h = jQuerydrag.outerHeight(),
drg_w = jQuerydrag.outerWidth(),
pos_y = jQuerydrag.offset().top + drg_h - e.pageY,
pos_x = jQuerydrag.offset().left + drg_w - e.pageX;
jQuerydrag.css('z-index', 1000).parents().on("mousemove", function(e) {
jQuery('.draggable').offset({
top: e.pageY + pos_y - drg_h,
left: e.pageX + pos_x - drg_w
}).on("mouseup", function() {
jQuery(this).removeClass('draggable').css('z-index', z_idx);
});
});
e.preventDefault(); // disable selection
}).on("mouseup", function() {
if (opt.handle === "") {
jQuery(this).removeClass('draggable');
} else {
jQuery(this).removeClass('active-handle').parent().removeClass('draggable');
}
});
}
})(jQuery);
jQuery('.draggble').drags();
// Duplicate
var buttonAdd = jQuery(".addtxt");
var buttonRemove = jQuery(".removetxt");
var className = ".input-group";
var className2 = ".card-txt";
var count = 0;
var field = "";
var field2 = "";
var maxFields = 5;
function totalFields() {
return jQuery(className).length;
}
function addNewField() {
count = totalFields() + 1;
field2 = jQuery("#ptxtgrp1").clone();
field2.attr("id", "ptxtgrp" + count);
field2.html("");
field2.attr('style', '');
jQuery(field2).drags();
field = jQuery("#txtgrp1").clone();
field.attr("id", "txtgrp" + count);
field.find("input").val("");
jQuery(className + ":last").after(jQuery(field));
jQuery(className2 + ":last").after(jQuery(field2));
count++;
}
function removeLastField() {
if (totalFields() > 1) {
jQuery(className + ":last").remove();
jQuery(className2 + ":last").remove();
}
}
function enableButtonRemove() {
if (totalFields() === 2) {
buttonRemove.removeAttr("disabled");
buttonRemove.addClass("shadow-sm");
}
}
function disableButtonRemove() {
if (totalFields() === 1) {
buttonRemove.attr("disabled", "disabled");
buttonRemove.removeClass("shadow-sm");
}
}
function disableButtonAdd() {
if (totalFields() === maxFields) {
buttonAdd.attr("disabled", "disabled");
buttonAdd.removeClass("shadow-sm");
}
}
function enableButtonAdd() {
if (totalFields() === (maxFields - 1)) {
buttonAdd.removeAttr("disabled");
buttonAdd.addClass("shadow-sm");
}
}
buttonAdd.on("click", function() {
addNewField();
enableButtonRemove();
disableButtonAdd();
});
buttonRemove.on("click", function() {
removeLastField();
disableButtonRemove();
enableButtonAdd();
});
// Hide Show Texts
jQuery(document).on('click', '.show', function() {
var txt_id = jQuery(this).parent().attr('id');
jQuery(".card-txt[id=p" + txt_id + "]").toggle();
jQuery(this).toggleClass("hide");
});
// Font Size Change
jQuery(".input-group").each(function() {
jQuery(document).on('click', '.font-up', function() {
var ftxt_id = jQuery(this).parent().attr('id');
var size = jQuery('.card-txt[id=p' + ftxt_id + ']').css("font-size");
size = parseInt(size, 10);
if ((size + 2) <= 70) {
jQuery('.card-txt[id=p' + ftxt_id + ']').css("font-size", "+=2");
}
});
jQuery(document).on('click', '.font-down', function() {
var ftxt_id = jQuery(this).parent().attr('id');
var size = jQuery('.card-txt[id=p' + ftxt_id + ']').css("font-size");
size = parseInt(size, 10);
if ((size - 2) >= 12) {
jQuery('.card-txt[id=p' + ftxt_id + ']').css("font-size", "-=2");
}
});
});
});
.edit-box {
width: 600px;height:300px;
margin: 0 auto;
display: block;
border: 2px solid #dddddd;
border-radius: 10px;
background: #eee;
}
body {
height: 3000px;
}
/***************************/
.edit-image {
background-size: cover;
width: max-content;
display: block;
background: red;
margin: 40px auto;
position: relative;width:200px;height:200px;backgrounf:red;
}
.edit-contents {
width: 80%;
display: block;
margin: 20px auto;
background: #fff;
padding: 20px;
}
.card-txt {
position: absolute;
top: 50%;
left: 50%;
}
.show,
.font-up,
.font-down {
background: green;
width: 20px;
height: 20px;
display: inline-block;
color: #fff;
margin: 0 5px;
font-size: 16px;
cursor: pointer;
}
.addtxt,
.removetxt {
margin: 10px;
display: inline;
}
.show.hide {
background: red;
}
[type='color'] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
padding: 0;
width: 15px;
height: 15px;
border: none;
}
[type='color']::-webkit-color-swatch-wrapper {
padding: 0;
}
[type='color']::-webkit-color-swatch {
border: none;
}
.color-picker {
padding: 10px 15px;
border-radius: 10px;
border: 1px solid #ccc;
background-color: #f8f9f9;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="edit-box">
<div class="edit-image">
<img class="hide-img" src="" style="visibility: hidden;" />
<span class="card-txt draggble" id="ptxtgrp1"></span>
</div>
<div class="edit-contents">
<button type="button" class="addtxt">Add</button>
<button type="button" class="removetxt">remove</button>
<div class="input-group" id="txtgrp1">
<input class="inptxt" type="text">
<i class="show"></i>
<i class="font-up">+</i>
<i class="font-down">-</i>
<span class="color-picker">
<label for="colorPicker">
<input type="color" value="#1DB8CE" class="colorPicker" >
</label>
</span>
</div>
</div>
</div>
as you can see I need to add new texts dynamically to the "edit-image" box and I need users to change the size and color of added texts.
the first input box that already exists in DOM change color works fine
but when I add another input box by jquery codes the change color function doesn't work for it
I would be thankful if you can help me to find out the reason and resolve the issue

Uncaught ReferenceError: removeLine is not defined

I am using the following code from this SO answer, however it does work on here but when I try to remove an image on my side I get:
Uncaught ReferenceError: removeLine is not defined at
HTMLSpanElement.onclick (https://example.com/test/createst/?myDates=2017&myCountry=Italia:1)
NOTE
One other bit I need to do is to create a preview of the uploaded images, I've found the following code by asking another question on SO where I actually had the opposite situation, managed to have a preview but not the remove
var dropZoneId = "drop-zone";
var buttonId = "clickHere";
var mouseOverClass = "mouse-over";
var dropZone = $("#" + dropZoneId);
var inputFile = dropZone.find("input");
var finalFiles = {};
$(function() {
var ooleft = dropZone.offset().left;
var ooright = dropZone.outerWidth() + ooleft;
var ootop = dropZone.offset().top;
var oobottom = dropZone.outerHeight() + ootop;
document.getElementById(dropZoneId).addEventListener("dragover", function(e) {
e.preventDefault();
e.stopPropagation();
dropZone.addClass(mouseOverClass);
var x = e.pageX;
var y = e.pageY;
if (!(x < ooleft || x > ooright || y < ootop || y > oobottom)) {
inputFile.offset({
top: y - 15,
left: x - 100
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
}, true);
if (buttonId != "") {
var clickZone = $("#" + buttonId);
var oleft = clickZone.offset().left;
var oright = clickZone.outerWidth() + oleft;
var otop = clickZone.offset().top;
var obottom = clickZone.outerHeight() + otop;
$("#" + buttonId).mousemove(function(e) {
var x = e.pageX;
var y = e.pageY;
if (!(x < oleft || x > oright || y < otop || y > obottom)) {
inputFile.offset({
top: y - 15,
left: x - 160
});
} else {
inputFile.offset({
top: -400,
left: -400
});
}
});
}
document.getElementById(dropZoneId).addEventListener("drop", function(e) {
$("#" + dropZoneId).removeClass(mouseOverClass);
}, true);
inputFile.on('change', function(e) {
finalFiles = {};
$('#filename').html("");
var fileNum = this.files.length,
initial = 0,
counter = 0;
$.each(this.files,function(idx,elm){
finalFiles[idx]=elm;
});
for (initial; initial < fileNum; initial++) {
counter = counter + 1;
$('#filename').append('<div id="file_'+ initial +'"><span class="fa-stack fa-lg"><i class="fa fa-file fa-stack-1x "></i><strong class="fa-stack-1x" style="color:#FFF; font-size:12px; margin-top:2px;">' + counter + '</strong></span> ' + this.files[initial].name + ' <span class="fa fa-times-circle fa-lg closeBtn" onclick="removeLine(this)" title="remove"></span></div>');
}
});
})
function removeLine(obj)
{
inputFile.val('');
var jqObj = $(obj);
var container = jqObj.closest('div');
var index = container.attr("id").split('_')[1];
container.remove();
delete finalFiles[index];
//console.log(finalFiles);
}
#drop-zone {
width: 100%;
min-height: 150px;
border: 3px dashed rgba(0, 0, 0, .3);
border-radius: 5px;
font-family: Arial;
text-align: center;
position: relative;
font-size: 20px;
color: #7E7E7E;
}
#drop-zone input {
position: absolute;
cursor: pointer;
left: 0px;
top: 0px;
opacity: 0;
}
/*Important*/
#drop-zone.mouse-over {
border: 3px dashed rgba(0, 0, 0, .3);
color: #7E7E7E;
}
/*If you dont want the button*/
#clickHere {
display: inline-block;
cursor: pointer;
color: white;
font-size: 17px;
width: 150px;
border-radius: 4px;
background-color: #4679BD;
padding: 10px;
}
#clickHere:hover {
background-color: #376199;
}
#filename {
margin-top: 10px;
margin-bottom: 10px;
font-size: 14px;
line-height: 1.5em;
}
.file-preview {
background: #ccc;
border: 5px solid #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
font-size: 14px;
margin-top: 5px;
}
.closeBtn:hover {
color: red;
display:inline-block;
}
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="drop-zone">
<p>Drop files here...</p>
<div id="clickHere">or click here.. <i class="fa fa-upload"></i>
<input type="file" name="file" id="file" multiple />
</div>
<div id='filename'></div>
</div>

Password strength JavaScript

Can you help me find out why my code isn't working?
I have to chceck if password is
a)4-6 characters long (one or more numbers must be included) for password to be medium
b)7 and more characters (one or more numbers must be included) for strong. c)Anything else than a) and b) is weak.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<p>
<input type="password" id="password" />
<button onlick="spr()">check</button>
</p>
</form>
<div id="result"></div>
<script>
function spr()
{
var str = document.getElementById("password");
var medium = /^[A-Za-z0-9]{4,6}$/;
var strong = /^[A-Za-z0-9]{7,}$/;
if(medium.test(str))
document.getElementById("result").innerHTML="medium";
else if(silne.test(str))
document.getElementById("result").innerHTML="strong";
else
document.getElementById("result").innerHTML="weak";
return false;
}
</script>
</body>
</html>

follow this https://jsfiddle.net/umesh1990/hxjf74cz/35/#
i have done this using javascript
function password_validate(txt) {
var val1 = 0;
var val2 = 0;
var val3 = 0;
var val4 = 0;
var val5 = 0;
var counter, color, result;
var flag = false;
if (txt.value.length <= 0) {
counter = 0;
color = "transparent";
result = "";
}
if (txt.value.length < 8 & txt.value.length > 0) {
counter = 20;
color = "red";
result = "Short";
} else {
document.getElementById(txt.id + "error").innerHTML = " ";
txt.style.borderColor = "grey";
var regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
// document.getElementById("pass_veri").style.display="block";
var fletter = /[a-z]/;
if (fletter.test(txt.value)) {
val1 = 20;
} else {
val1 = 0;
}
//macth special character
var special_char = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/;
if (special_char.test(txt.value)) {
val2 = 30;
} else {
val = 0;
}
/*capital_letter*/
var cap_lett = /[A-Z]/;
if (cap_lett.test(txt.value)) {
val3 = 20;
} else {
val = 0;
}
/*one numeric*/
var num = /[0-9]/;
if (num.test(txt.value)) {
val4 = 20;
} else {
val4 = 0;
}
/* 8-15 character*/
var range = /^.{8,50}$/;
if (range.test(txt.value)) {
val5 = 10;
} else {
val5 = 0;
}
counter = val1 + val2 + val3 + val4 + val5;
if (counter >= 30) {
color = "skyblue";
result = "Fair";
}
if (counter >= 50) {
color = "gold";
result = "Good";
}
if (counter >= 80) {
color = "green";
result = "Strong";
}
if (counter >= 90) {
color = "green";
result = "Very Strong";
}
}
document.getElementById("prog").style.width = counter + "%";
document.getElementById("prog").style.backgroundColor = color;
document.getElementById("result").innerHTML = result;
document.getElementById("result").style.color = color;
}
body {
font-family: 'Rajdhani', sans-serif;
background-color: #E4E4E4;
}
/* tooltip*/
.hint {
width: 258px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: absolute;
left: 0px;
border: 1px solid #CC9933;
background-color: #FFFFCC;
display: none;
padding: 20px;
font-size: 11px;
}
.hint:before {
content: "";
position: absolute;
left: 100%;
top: 24px;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 1px solid transparent;
border-left: 22px solid #CC9933;
}
.hint:after {
content: "";
position: absolute;
left: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 14px solid transparent;
border-bottom: 1px solid transparent;
border-left: 20px solid #FFFFCC;
}
.parent {
position: relative;
}
.progress {
height: 7px;
}
#progres {
display: block;
}
p {
margin: 0px;
font-weight: normal;
}
.form-control {
width: none;
margin-left: 260px;
margin-top: 25px;
width: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group col-lg-12 parent ">
<label class="hint" id="pass-hint">
Password Strength:<span id="result"></span>
<br>
<div class="progress" id="progres">
<div class="progress-bar progress-bar-danger" role="progressbar" id="prog">
</div>
</div>
<p> passowrd must have atleast 8 charatcer</p>
</label>
<input type="password" class="form-control" data-toggle="tooltip" data-placement="left" id="pass" onfocus="document.getElementById('pass-hint').style.display='block'" onblur="document.getElementById('pass-hint').style.display='none'" placeholder="**********"
oninput="password_validate(this);document.getElementById('progres').style.display='block';">
<i class=" form-control-feedback" id="passsuccess" aria-hidden="true"></i>
<span id="passerror" class="help-block error"></span>
</div>
it may help you

On hover main image, width is not applying on zoom image please refer my attached image below

On hover main image, the zoom image should display its properties like the specified width and height. Code is working but, the problem in zoom image on hover main image.
/* This is my script. I have used this for my code in this, marksize indicates id="mark" in my html main image and zoomImg indicates width and height for on hover the main image. */
$(function(){
$("#show").simpleZoom({
zoomBox : "#zoom",
markSize : \[120, 169\],
zoomSize : \[800, 400\],
zoomImg : \[480, 677\]
});
});
(function($){
$.fn.simpleZoom = function(options){
var defs = {
markSize : \[200, 100\],
zoomSize : \[400, 400\],
zoomImg : \[800, 800\]
};
var opt = $.fn.extend({}, defs, options);
return this.each(function(){
var markBox = $(this);
var zoomBox = $(opt.zoomBox);
var zoom_img = $(opt.zoomBox).find("img");
var markBoxSize = \[markBox.width(), markBox.height(), markBox.offset().left, markBox.offset().top\];
var markSize = opt.markSize;
var zoomSize = opt.zoomSize;
var zoomImg = opt.zoomImg;
var mark_ele = "<i id='mark'></i>";
var mark_css = {position:"absolute", top:0, left:0, width:markSize\[0\]+"px", height:markSize\[1\]+"px", backgroundColor:"#000", opacity:.5, filter:"alpha(opacity=50)", display:"none", cursor:"crosshair"};
var show_w = markBoxSize\[0\]-markSize\[0\];
var show_h = markBoxSize\[1\]-markSize\[1\];
//created mark element and add cascading style sheets
zoomBox.css({width:zoomSize\[0\]+"px", height:zoomSize\[1\]+"px"});
markBox.append(mark_ele);
$("#mark").css(mark_css);
markBox.mouseover(function(){
$("#mark").show();
zoomBox.show();
}).mouseout(function(){
$("#mark").hide();
zoomBox.hide();
}).mousemove(function(e){
var l = e.pageX-markBoxSize\[2\]-(markSize\[0\]/2);
var t = e.pageY-markBoxSize\[3\]-(markSize\[1\]/2);
if(l < 0){
l = 0;
}else if(l > show_w){
l = show_w;
}
if(t < 0){
t = 0;
}else if(t > show_h){
t = show_h;
}
$("#mark").css({left:l+"px", top:t+"px"});
var z_x = -(l/show_w)*(zoomImg\[0\]-zoomSize\[0\]);
var z_y = -(t/show_h)*(zoomImg\[1\]-zoomSize\[1\]);
zoom_img.css({left:z_x+"px", top:z_y+"px"});
});
});
}
})(jQuery);
#show {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
left: 0;
}
#show_mark {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
background-color: #000;
opacity: .5;
filter: alpha(opacity=50);
cursor: crosshair;
border: 1px solid #999;
display: none;
}
#zoom {
position: absolute;
left: 250px;
top: 0;
z-index: 99;
/*width: 400px;*/
height: 400px;
display: none;
overflow: hidden;
border: 1px solid #eee;
}
#zoom img {
position: absolute;
left: 0;
top: 0;
}
#show_pic{
display: block !important;
width: 60% !important;
height: 400px !important;
margin: 0 0 0 21%;
}
<div class="main">
<div id="show">
<img src="<?php echo 'data:image;base64,'.$productimage; ?>" id="show_pic" />
</div>
<div id="zoom">
<img src="<?php echo 'data:image;base64,'.$productimage; ?>"/>
</div>
</div>
The above shown is my image. Please refer and help me out soon.

Instead of the above code i have done with this and it's working fine.
HTML code
<div class="bzoom_wrap">
<ul id="bzoom">
<li>
<img class="bzoom_thumb_image" src="saree.jpeg" />
<img class="bzoom_big_image" src="saree.jpeg"/>
</li>
<li>
<img class="bzoom_thumb_image" src="saree1.jpeg"/>
<img class="bzoom_big_image" src="saree1.jpeg"/>
</li>
<li>
<img class="bzoom_thumb_image" src="saree2.jpeg"/>
<img class="bzoom_big_image" src="saree2.jpeg"/>
</li>
</ul>
</div>
Scripts i have used
<script type="text/javascript">
$("#bzoom").zoom({
zoom_area_width: 400,
autoplay_interval: 3000,
small_thumbs: 3,
autoplay: false
});
</script>
<script>
(function ($) {
$.fn.zoom = function (options) {
var _option = {
align: "left",
thumb_image_width: 380,
thumb_image_height: 400,
source_image_width: 450,
source_image_height: 450,
zoom_area_width: 400,
zoom_area_height: "justify",
zoom_area_distance: 10,
zoom_easing: true,
click_to_zoom: false,
zoom_element: "auto",
show_descriptions: true,
description_location: "bottom",
description_opacity: 0.7,
small_thumbs: 3,
smallthumb_inactive_opacity: 1,
smallthumb_hide_single: true,
smallthumb_select_on_hover: false,
smallthumbs_position: "bottom",
show_icon: true,
hide_cursor: false,
// speed: 600,
autoplay: true,
// autoplay_interval: 6000,
keyboard: true,
right_to_left: false,
}
if (options) {
$.extend(_option, options);
}
var $ul = $(this);
if ($ul.is("ul") && $ul.children("li").length && $ul.find(".bzoom_big_image").length) {
$ul.addClass('bzoom clearfix').show();
var $li = $ul.children("li").addClass("bzoom_thumb"),
li_len = $li.length,
autoplay = _option.autoplay;
$li.first().addClass("bzoom_thumb_active").show();
if (li_len < 2) {
autoplay = false;
}
$ul.find(".bzoom_thumb_image").css({width: _option.thumb_image_width, height: _option.thumb_image_height}).show();
var scalex = _option.thumb_image_width / _option.source_image_width,
scaley = _option.thumb_image_height / _option.source_image_height,
scxy = _option.thumb_image_width / _option.thumb_image_height;
var $bzoom_magnifier, $bzoom_magnifier_img, $bzoom_zoom_area, $bzoom_zoom_img;
if (!$(".bzoom_magnifier").length) {
$bzoom_magnifier = $('<li class="bzoom_magnifier"><div class=""><img src="" /></div></li>');
$bzoom_magnifier_img = $bzoom_magnifier.find('img');
$ul.append($bzoom_magnifier);
$bzoom_magnifier.css({top: top, left: left});
$bzoom_magnifier_img.attr('src', $ul.find('.bzoom_thumb_active .bzoom_thumb_image').attr('src')).css({width: _option.thumb_image_width, height: _option.thumb_image_height});
$bzoom_magnifier.find('div').css({width: _option.thumb_image_width * scalex, height: _option.thumb_image_height * scaley});
}
if (!$('.bzoom_zoom_area').length) {
$bzoom_zoom_area = $('<li class="bzoom_zoom_area"><div><img class="bzoom_zoom_img" /></div></li>');
$bzoom_zoom_img = $bzoom_zoom_area.find('.bzoom_zoom_img');
var top = 0,
left = 0;
$ul.append($bzoom_zoom_area);
if (_option.align == "left") {
top = 0;
left = 0 + _option.thumb_image_width + _option.zoom_area_distance;
}
$bzoom_zoom_area.css({top: top, left: left});
$bzoom_zoom_img.css({width: _option.source_image_width, height: _option.source_image_height});
}
var autoPlay = {
autotime: null,
isplay: autoplay,
start: function () {
if (this.isplay && !this.autotime) {
this.autotime = setInterval(function () {
var index = $ul.find('.bzoom_thumb_active').index();
changeLi((index + 1) % _option.small_thumbs);
}, _option.autoplay_interval);
}
},
stop: function () {
clearInterval(this.autotime);
this.autotime = null;
},
restart: function () {
this.stop();
this.start();
}
}
var $small = '';
if (!$(".bzoom_small_thumbs").length) {
var top = _option.thumb_image_height + 10,
width = _option.thumb_image_width,
smwidth = (_option.thumb_image_width / _option.small_thumbs) - 10,
smheight = smwidth / scxy,
ulwidth =
smurl = '',
html = '';
for (var i = 0; i < _option.small_thumbs; i++) {
smurl = $li.eq(i).find('.bzoom_thumb_image').attr("src");
if (i == 0) {
html += '<li class="bzoom_smallthumb_active"><img src="' + smurl + '" alt="small" style="width:' + smwidth + 'px; height:' + smheight + 'px;" /></li>';
} else {
html += '<li style="opacity:1;"><img src="' + smurl + '" alt="small" style="width:' + smwidth + 'px; height:' + smheight + 'px;" /></li>';
}
}
$small = $('<li class="bzoom_small_thumbs" style="top:' + top + 'px; width:' + width + 'px;"><ul class="clearfix" style="width: 485px;">' + html + '</ul></li>');
$ul.append($small);
$small.delegate("li", "click", function (event) {
changeLi($(this).index());
autoPlay.restart();
});
autoPlay.start();
}
function changeLi(index) {
$ul.find('.bzoom_thumb_active').removeClass('bzoom_thumb_active').stop().animate({opacity: 0}, _option.speed, function () {
$(this).hide();
});
$small.find('.bzoom_smallthumb_active').removeClass('bzoom_smallthumb_active').stop().animate({opacity: _option.smallthumb_inactive_opacity}, _option.speed);
$li.eq(index).addClass('bzoom_thumb_active').show().stop().css({opacity: 0}).animate({opacity: 1}, _option.speed);
$small.find('li:eq(' + index + ')').addClass('bzoom_smallthumb_active').show().stop().css({opacity: _option.smallthumb_inactive_opacity}).animate({opacity: 1}, _option.speed);
$bzoom_magnifier_img.attr("src", $li.eq(index).find('.bzoom_thumb_image').attr("src"));
}
_option.zoom_area_height = _option.zoom_area_width / scxy;
$bzoom_zoom_area.find('div').css({width: _option.zoom_area_width, height: _option.zoom_area_height});
$li.add($bzoom_magnifier).mousemove(function (event) {
var xpos = event.pageX - $ul.offset().left,
ypos = event.pageY - $ul.offset().top,
magwidth = _option.thumb_image_width * scalex,
magheight = _option.thumb_image_height * scalex,
magx = 0,
magy = 0,
bigposx = 0,
bigposy = 0;
if (xpos < _option.thumb_image_width / 2) {
magx = xpos > magwidth / 2 ? xpos - magwidth / 2 : 0;
} else {
magx = xpos + magwidth / 2 > _option.thumb_image_width ? _option.thumb_image_width - magwidth : xpos - magwidth / 2;
}
if (ypos < _option.thumb_image_height / 2) {
magy = ypos > magheight / 2 ? ypos - magheight / 2 : 0;
} else {
magy = ypos + magheight / 2 > _option.thumb_image_height ? _option.thumb_image_height - magheight : ypos - magheight / 2;
}
bigposx = magx / scalex;
bigposy = magy / scaley;
$bzoom_magnifier.css({'left': magx, 'top': magy});
$bzoom_magnifier_img.css({'left': -magx, 'top': -magy});
$bzoom_zoom_img.css({'left': -bigposx, 'top': -bigposy});
}).mouseenter(function (event) {
autoPlay.stop();
$bzoom_zoom_img.attr("src", $(this).find('.bzoom_big_image').attr('src'));
$bzoom_zoom_area.css({"background-image": "none"}).stop().fadeIn(400);
$ul.find('.bzoom_thumb_active').stop().animate({'opacity': 0.5}, _option.speed * 0.7);
$bzoom_magnifier.stop().animate({'opacity': 1}, _option.speed * 0.7).show();
}).mouseleave(function (event) {
$bzoom_zoom_area.stop().fadeOut(400);
$ul.find('.bzoom_thumb_active').stop().animate({'opacity': 1}, _option.speed * 0.7);
$bzoom_magnifier.stop().animate({'opacity': 0}, _option.speed * 0.7, function () {
$(this).hide();
});
autoPlay.start();
})
}
}
})(jQuery);
</script>
My style sheet
<style>
.bzoom { direction: ltr; }
.bzoom,
.bzoom_thumb,
.bzoom_thumb_image,
.bzoom_big_image,
.bzoom_zoom_preview,
.bzoom_icon,
.bzoom_hint { display: none }
.bzoom,
.bzoom ul,
.bzoom li,
.bzoom img,
.bzoom_hint,
.bzoom_icon,
.bzoom_description {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
.bzoom,
.bzoom_magnifier div,
.bzoom_magnifier div img,
.bzoom_small_thumbs ul,
ul .bzoom_small_thumbs li,
.bzoom_zoom_area div,
.bzoom_zoom_img { position: relative; }
.bzoom img,
.bzoom li {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
-webkit-user-drag: none;
-moz-user-drag: none;
user-drag: none;
}
.bzoom,
.bzoom_small_thumbs li { float: left; }
.bzoom_right { float: right;}
.bzoom li {
position: absolute;
border: 1px solid #cfcece;
}
.bzoom img {
vertical-align: bottom;
width: 50px;
height: 70px;
border: 1px solid #eaeaea;
}
.bzoom .bzoom_zoom_area,
.bzoom_zoom_area {
background: #fff url(./img/loading.gif) center no-repeat;
border: 1px solid #ddd;
padding: 6px;
-webkit-box-shadow: 0 0 10px #ddd;
-moz-box-shadow: 0 0 10px #ddd;
box-shadow: 0 0 10px #ddd;
display: none;
z-index: 20;
}
.bzoom_zoom_area div { overflow: hidden; }
.bzoom_zoom_area .bzoom_zoom_img { position: absolute; }
.bzoom_wrap .bzoom_magnifier {
background: #fff;
outline: #bbb solid 1px;
display: none;
cursor: move;
}
.bzoom_magnifier div { overflow: hidden; }
.bzoom_wrap .bzoom_small_thumbs { overflow: hidden; }
.bzoom_wrap .bzoom_small_thumbs li {
border: 1px solid #FFF;
margin: 0px 10px 0px 0px;
position: relative;
border: 1px solid #cfcece;
}
.bzoom_wrap ul li.bzoom_smallthumb_active {
-webkit-box-shadow: 0 0 10px #ddd;
-moz-box-shadow: 0 0 10px #ddd;
box-shadow: 0 0 10px #ddd;
border: 1px solid #535353;
}
</style>