We Keep Coding

hide an element on mousemove, if mouse enters a particular region

$(document).ready(function() {
var mx, my, anime = false;
var e_top = $('.panel-dock').css('top').split('px')[0]
var e_bottom = $('.panel-dock').css('height').split('px')[0]
e_top = parseFloat(e_top)
e_bottom = parseFloat(e_bottom)
$(document).mousemove(function(e) {
if (anime) {
return;
}
mx = parseFloat(e.clientX);
my = parseFloat(e.clientY);
console.log(my, e_top, e_bottom)
if (mx <= 80) {
//if (my >= e_top && my <= e_bottom) {
anime = true;
$('.panel-dock').animate({
left: 0,
}, 'fast', function() {
anime = false;
});
//}
} else if (mx > 80) {
//if (my < e_top && my > e_bottom) {
anime = true;
$('.panel-dock').animate({
left: -60,
}, 'slow', function() {
anime = false;
});
//}
}
});
});
.panel-menu,
.g-tip,
h4,
h5,
p {
font-family: 'Ubuntu', sans-serif;
font-size: 11pt;
}
.panel-dock {
position: fixed;
top: calc(10em - 20px);
margin: 0;
background: #333;
opacity: 0.9;
border-radius: 0 6px 6px 0;
width: 3em;
height: max-content;
padding: 0.5em;
z-index: 1;
color: white;
box-shadow: 8px 4px 20px rgba(0, 0, 0, 0.3);
float: left;
}
#media (max-height: 600px) {
.gadget-dock {
position: fixed;
top: calc(7em - 20px);
}
}
.panel-dock .panel-menu {
cursor: pointer;
width: 100%;
/* background: transparent; */
text-align: center;
z-index: 2;
padding: 2%;
letter-spacing: 0.06em;
margin-bottom: 10%;
margin-top: 10%;
border-radius: 3px;
}
.panel-dock .panel-menu:nth-child(n) {
border: 1px solid transparent;
border-top: 1px solid #585858;
border-bottom: 1px solid #585858;
}
.panel-dock .panel-menu:hover {
background: white;
}
.panel-dock .panel-icons {
background: -webkit-linear-gradient(250deg, #6da741 40%, #00a489 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 30px;
height: 30px;
display: inline-block;
}
.panel-dock .g-icon {
max-width: auto;
max-height: 30px;
}
.panel-dock .g-icon i {
margin-top: 25%;
}
.panel-dock .g-tip {
position: absolute;
left: 55px;
color: #6da741;
line-height: 1.3;
min-height: 30px;
box-shadow: 2px 2px 6px #e0e0e0;
z-index: 1;
letter-spacing: 0.006em;
padding: 5% 5% 0 5%;
border: 2px solid #eee;
border-radius: 8%;
text-align: center;
width: 125px;
background: #fff
}
.panel-dock .g-tip h5 {
display: inline-block;
text-transform: none;
text-shadow: 2px 3px 3px #e0e0e0;
letter-spacing: 0.06em;
color: #6da741;
}
.panel-dock .g-tip:before {
content: '';
position: absolute;
top: 25%;
left: -13%;
border: 8px solid #fff;
border-left: 8px solid transparent;
border-bottom: 8px solid transparent;
border-top: 8px solid transparent;
}
.t1 {
position: absolute;
top: 15px;
}
.t2 {
position: absolute;
top: 50px;
}
.t3 {
position: absolute;
top: 85px;
}
.t4 {
position: absolute;
top: 120px;
}
.t1,
.t2,
.t3,
.t4 {
display: none;
}
.tgl {
left: -80px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="panel-dock" id="g">
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg1"><i class="fa fa-th"></i></span>
</div>
<div class="g-tip t1">
<h5>Library</h5>
</div>
</div>
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg2"><i class="fa fa-plus"></i></span>
</div>
<div class="g-tip t2">
<h5>Create a post</h5>
</div>
</div>
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg3"><i class="fa fa-bookmark"></i></span>
</div>
<div class="g-tip t3">
<h5>Bookmarks</h5>
</div>
</div>
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg4"><i class="fa fa-heart"></i></span>
</div>
<div class="g-tip t4">
<h5>Favorites</h5>
</div>
</div>
</div>
Below code is working while I remove the condition if (my>=e_top && my<=e_bottom) and if (my<e_top && my>e_bottom). And, if mouse enters anywhere within mx <= 80 the panel is visible; otherwise, it slowly hides.
I want to show this panel if mouse is within 80px from left and between the start position of panel and it's height.
$(document).ready(function() {
var mx, my, anime = false;
var e_top = $('.panel').css('top').split('px')[0]
var e_bottom = $('.panel').css('bottom').split('px')[0]
$(document).mousemove(function(e) {
if (anime) {
return;
}
mx = e.clientX;
my = e.clientY;
// console.log(my, e_top, e_bottom)
if (mx<=80) {
if (my>=e_top && my<=e_bottom) {
anime = true;
$('.panel').animate({
left: '0',
}, 'fast', function () {
anime = false;
});
}
} else if (mx > 80) {
if (my<e_top && my>e_bottom) {
anime = true;
$('.panel').animate({
left: '-60',
}, 'slow', function () {
anime = false;
});
}
}
});
});
So, any solution?

You've got a couple problems here. First off, you're calculating the e_bottom wrong. You just looked at the height, but the bottom is the height plus the top, and you were trying to do it with strings, not numbers.
var e_top = parseFloat($('.panel-dock').css('top').split('px')[0])
var e_bottom = parseFloat($('.panel-dock').css('height').split('px')[0]) + e_top
And more importantly, your second commented out if statement: if (my < e_top && my > e_bottom) { could never return true, because it's impossible for my to be less than the top AND greater than the bottom. It needs to be an OR.
if (my < e_top || my > e_bottom) {
$(document).ready(function() {
var mx, my, anime = false;
var e_top = parseFloat($('.panel-dock').css('top').split('px')[0])
var e_bottom = parseFloat($('.panel-dock').css('height').split('px')[0]) + e_top
e_top = parseFloat(e_top)
e_bottom = parseFloat(e_bottom)
$(document).mousemove(function(e) {
if (anime) {
return;
}
mx = parseFloat(e.clientX);
my = parseFloat(e.clientY);
console.log(my, e_top, e_bottom)
if (mx <= 80) {
if (my >= e_top && my <= e_bottom) {
anime = true;
$('.panel-dock').animate({
left: 0,
}, 'fast', function() {
anime = false;
});
}
} else if (mx > 80) {
if (my < e_top || my > e_bottom) {
anime = true;
$('.panel-dock').animate({
left: -60,
}, 'slow', function() {
anime = false;
});
}
}
});
});
.panel-menu,
.g-tip,
h4,
h5,
p {
font-family: 'Ubuntu', sans-serif;
font-size: 11pt;
}
.panel-dock {
position: fixed;
top: calc(10em - 20px);
margin: 0;
background: #333;
opacity: 0.9;
border-radius: 0 6px 6px 0;
width: 3em;
height: max-content;
padding: 0.5em;
z-index: 1;
color: white;
box-shadow: 8px 4px 20px rgba(0, 0, 0, 0.3);
float: left;
}
#media (max-height: 600px) {
.gadget-dock {
position: fixed;
top: calc(7em - 20px);
}
}
.panel-dock .panel-menu {
cursor: pointer;
width: 100%;
/* background: transparent; */
text-align: center;
z-index: 2;
padding: 2%;
letter-spacing: 0.06em;
margin-bottom: 10%;
margin-top: 10%;
border-radius: 3px;
}
.panel-dock .panel-menu:nth-child(n) {
border: 1px solid transparent;
border-top: 1px solid #585858;
border-bottom: 1px solid #585858;
}
.panel-dock .panel-menu:hover {
background: white;
}
.panel-dock .panel-icons {
background: -webkit-linear-gradient(250deg, #6da741 40%, #00a489 60%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width: 30px;
height: 30px;
display: inline-block;
}
.panel-dock .g-icon {
max-width: auto;
max-height: 30px;
}
.panel-dock .g-icon i {
margin-top: 25%;
}
.panel-dock .g-tip {
position: absolute;
left: 55px;
color: #6da741;
line-height: 1.3;
min-height: 30px;
box-shadow: 2px 2px 6px #e0e0e0;
z-index: 1;
letter-spacing: 0.006em;
padding: 5% 5% 0 5%;
border: 2px solid #eee;
border-radius: 8%;
text-align: center;
width: 125px;
background: #fff
}
.panel-dock .g-tip h5 {
display: inline-block;
text-transform: none;
text-shadow: 2px 3px 3px #e0e0e0;
letter-spacing: 0.06em;
color: #6da741;
}
.panel-dock .g-tip:before {
content: '';
position: absolute;
top: 25%;
left: -13%;
border: 8px solid #fff;
border-left: 8px solid transparent;
border-bottom: 8px solid transparent;
border-top: 8px solid transparent;
}
.t1 {
position: absolute;
top: 15px;
}
.t2 {
position: absolute;
top: 50px;
}
.t3 {
position: absolute;
top: 85px;
}
.t4 {
position: absolute;
top: 120px;
}
.t1,
.t2,
.t3,
.t4 {
display: none;
}
.tgl {
left: -80px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="panel-dock" id="g">
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg1"><i class="fa fa-th"></i></span>
</div>
<div class="g-tip t1">
<h5>Library</h5>
</div>
</div>
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg2"><i class="fa fa-plus"></i></span>
</div>
<div class="g-tip t2">
<h5>Create a post</h5>
</div>
</div>
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg3"><i class="fa fa-bookmark"></i></span>
</div>
<div class="g-tip t3">
<h5>Bookmarks</h5>
</div>
</div>
<div class="panel-menu">
<div class="panel-icons">
<span class="g-icon tg4"><i class="fa fa-heart"></i></span>
</div>
<div class="g-tip t4">
<h5>Favorites</h5>
</div>
</div>
</div>

Javascript image upload and resize issue

I have an image uploader which previews an image you select, allows you to resize, and then shows the resized version.
The original code allowed you to resize a static image, so I've added the ability to upload an image to replace this static one. (#image-3).
However, when you upload and resize, it still shows the static image on the resized version.
I'm not entirely certain with Javascript, and would appreciate any help! Thank you.
$(document).ready(function() {
$('#image-3').rcrop({
minSize: [500, 500],
preserveAspectRatio: true,
preview: {
display: true,
size: [100, 100],
wrapper: '#custom-preview-wrapper'
}
});
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function(e) {
$('#image-3').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
$('#image-3').on('rcrop-changed', function() {
var srcOriginal = $(this).rcrop('getDataURL');
var srcResized = $(this).rcrop('getDataURL', 50, 50);
$('#cropped-original').append('<img src="' + srcOriginal + '">');
$('#cropped-resized').append('<img src="' + srcResized + '">');
});
}
}
$("#imgInp").change(function() {
readURL(this);
});
});
body {
margin: 0;
padding: 0px
}
main {
min-height: 500px;
display: block
}
pre {
overflow: auto;
}
.demo {
padding: 20px;
}
.image-wrapper {
max-width: 600px;
min-width: 200px;
}
img {
max-width: 100%;
}
#image-4-wrapper .rcrop-outer-wrapper {
opacity: .75;
}
#image-4-wrapper .rcrop-outer {
background: #000
}
#image-4-wrapper .rcrop-croparea-inner {
border: 1px dashed #fff;
}
#image-4-wrapper .rcrop-handler-corner {
width: 12px;
height: 12px;
background: none;
border: 0 solid #51aeff;
}
#image-4-wrapper .rcrop-handler-top-left {
border-top-width: 4px;
border-left-width: 4px;
top: -2px;
left: -2px
}
#image-4-wrapper .rcrop-handler-top-right {
border-top-width: 4px;
border-right-width: 4px;
top: -2px;
right: -2px
}
#image-4-wrapper .rcrop-handler-bottom-right {
border-bottom-width: 4px;
border-right-width: 4px;
bottom: -2px;
right: -2px
}
#image-4-wrapper .rcrop-handler-bottom-left {
border-bottom-width: 4px;
border-left-width: 4px;
bottom: -2px;
left: -2px
}
#image-4-wrapper .rcrop-handler-border {
display: none;
}
#image-4-wrapper .clayfy-touch-device.clayfy-handler {
background: none;
border: 0 solid #51aeff;
border-bottom-width: 6px;
border-right-width: 6px;
}
label {
display: inline-block;
width: 60px;
margin-top: 10px;
}
#update {
margin: 10px 0 0 60px;
padding: 10px 20px;
}
#cropped-original,
#cropped-resized {
padding: 20px;
border: 4px solid #ddd;
min-height: 60px;
margin-top: 20px;
}
#cropped-original img,
#cropped-resized img {
margin: 5px;
}
<script src="https://rawgit.com/aewebsolutions/rcrop/master/dist/rcrop.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" runat="server">
<input type="file" id="imgInp" />
</form>
<div class="demo">
<div class="image-wrapper">
<img id="image-3" src="https://raw.githubusercontent.com/aewebsolutions/rcrop/master/demos/images/demo.jpg">
<div id="custom-preview-wrapper"></div>
<div id="cropped-resized">
<h3>Images resized (50x50)</h3>
</div>
<div id="cropped-original">
<h3>Images not resized (original size)</h3>
</div>
</div>
</div>

I think you need this
http://jcrop.org/demos/preview
easy implementation.

CSS classes conflicting with each other

I have an input field and a button. On clicking the button, it will be checked that whether input field has some data or not. If there is no data, then the input field will be highlighted. On focus of on the input field, error message will be shown. On keyup event, the input will no longer be highlighted, but the error message will remain.
Below is the code that I have tried:
$(document).ready(function(){
$('#btnclick').click(function(){
if($('[name="tName"]').val() == "")
{
$('[name="tName"]').addClass('validationInput');
$('[name="tName"]').closest('div').addClass('wrap');
}
else
alert('Success');
});
$('[name="tName"]').on('focus', function () {
if ($(this).hasClass('validationInput')) {
$(this).next("span.vspan").html("Please enter Name");
$(this).next("span.vspan").css("display", "inline-block");
}
});
$('[name="tName"]').on('keyup', function () {
$(this).removeClass("validationInput");
$(this).closest('div').removeClass("wrap");
});
});
.validationInput,
.validationInput:focus,
.validationInput:hover {
background-color: #FFFFE0!important;
border: 1px solid red!important;
height: 30px
}
.wrap>span {
display: inline-block;
position: relative;
overflow: hidden;
width: 100%
}
.wrap>span:after {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 0;
height: 0;
border-width: 5px;
border-color: red;
border-style: solid;
transform: rotate(45deg);
box-shadow: 0 0 0 1px #FFFFE0
}
input[type=text].vtooltips {
position: relative;
display: inline;
}
input[type=text].vtooltips + span.vspan {
position: absolute;
display:none;
font-size:12px;
font-family: Arial;
color:white;
border-radius:3px;
background: #DC000C;
width:50%;
border: 1px solid #6D6D6D;
line-height: 0px;
text-align: center;
border-radius: 4px;
box-shadow: 2px 2px 0px #AFB1B1;
margin-left:5px;
line-height:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3">
<span>
<input class="mandatoryText vtooltips form-control textbox" style="width: 100%;vertical-align:top;border-radius:4px;" maxlength="100" name="tName" type="text">
<span class="vspan"></span>
</span>
</div>
<br><br>
<input id="btnclick" value="Click" type="button">
Here is a Demo of the same.
But, the CSS is conflicting in some manner. The error message shall be shown on focus event, but it is shown after the keyup event is fired. This happens because of wrap class (found out after lots of analysis), but I do not know why this happens. What have I done wrong?
Any help will be much appreciated. Thanks!

Hi add below code inside your button click event,
$('[name="tName"]').focus();
and also change <span> tags to <div> tags like in snippet.
Then whole code looks like below,
$('#btnclick').click(function(){
if($('[name="tName"]').val() == "")
{
$('[name="tName"]').addClass('validationInput');
$('[name="tName"]').closest('div').addClass('wrap');
$('[name="tName"]').focus()
}
else
alert('Success');
});
Code snippet,
$(document).ready(function(){
$('#btnclick').click(function(){
if($('[name="tName"]').val() == "")
{
$('[name="tName"]').addClass('validationInput');
$('[name="tName"]').closest('div').addClass('wrap');
$('[name="tName"]').focus();
}
else
alert('Success');
});
$('[name="tName"]').on('focus', function () {
if ($(this).hasClass('validationInput')) {
$(this).next("span.vspan").css("display", "inline-block").html("Please enter Name");
}
});
$('[name="tName"]').on('keyup', function () {
$(this).removeClass("validationInput");
$(this).closest('div').removeClass("wrap");
});
});
.validationInput,
.validationInput:focus,
.validationInput:hover {
background-color: #FFFFE0!important;
border: 1px solid red!important;
height: 30px
}
.wrap>span:first {
display: inline-block;
position: relative;
overflow: hidden;
width: 100%
}
.wrap>span:after {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 0;
height: 0;
border-width: 5px;
border-color: red;
border-style: solid;
transform: rotate(45deg);
box-shadow: 0 0 0 1px #FFFFE0
}
input[type=text].vtooltips {
position: relative;
display: inline;
}
input[type=text].vtooltips + span.vspan {
position: absolute;
display:none;
font-size:12px;
font-family: Arial;
color:white;
border-radius:3px;
background: #DC000C;
width:50%;
border: 1px solid #6D6D6D;
line-height: 0px;
text-align: center;
border-radius: 4px;
box-shadow: 2px 2px 0px #AFB1B1;
margin-left:5px;
line-height:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3">
<span class="caret">
<input class="mandatoryText vtooltips form-control textbox" style="width: 100%;vertical-align:top;border-radius:4px;" maxlength="100" name="tName" type="text">
<span class="vspan"></span>
</span>
</div>
<br><br>
<input id="btnclick" value="Click" type="button">

I hope this help you. I just did make a function to add and remove the css class and display or not the message:
jQuery.fn.myValidate = function(){
if(this.val() == ""){
this.next("span.vspan").html("Please enter Name");
this.next("span.vspan").css("display", "inline-block");
this.addClass('validationInput');
this.closest('div').addClass('wrap');
return false;
}else{
this.next("span.vspan").css("display", "none");
this.closest('div').removeClass("wrap");
this.removeClass('validationInput');
this.next("span.vspan").css("display", "none");
return true;
}
}
$(document).ready(function(){
$('#btnclick').click(function(){
if ($('[name="tName"]').myValidate())
alert('Success');
});
$('[name="tName"]').on('focusout keyup', function (evt) {
$(this).myValidate();
});
});
.validationInput,
.validationInput{
background-color: #FFFFE0;
border: 1px solid red;
outline: none;
height: 30px
}
.wrap>span {
display: inline-block;
position: relative;
width: 100%
}
.wrap>span:after {
content: '';
position: absolute;
top: -5px;
right: -5px;
width: 0;
height: 0;
border-width: 5px;
border-color: red;
border-style: solid;
transform: rotate(45deg);
box-shadow: 0 0 0 1px #FFFFE0
}
input[type=text].vtooltips {
position: relative;
display: inline;
}
input[type=text].vtooltips + span.vspan {
position: absolute;
display:none;
font-size:12px;
font-family: Arial;
color:white;
border-radius:3px;
background: #DC000C;
width:50%;
border: 1px solid #6D6D6D;
line-height: 0px;
text-align: center;
border-radius: 4px;
box-shadow: 2px 2px 0px #AFB1B1;
margin-left:5px;
line-height:15px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-3">
<span>
<input class="mandatoryText vtooltips form-control textbox" style="width: 100%;vertical-align:top;border-radius:4px;" maxlength="100" name="tName" type="text">
<span class="vspan"></span>
</span>
</div>
<br><br>
<input id="btnclick" value="Click" type="button">

Dynamically Generate id, and assign to label

$(document).ready(function() {
$("body").tooltip({
selector: '[data-toggle=tooltip]'
});
});
var unique_id=0;
$('#update').on('click', function() {
if ($('#myText').val().length == 0) {
alert('Are you Kidding ? ;)')
return
}
unique_id++;
$('#result').append('<li>' + '<input id="checkboxFourInput" type="checkbox" class="todo-item" /> <label for="checkboxFourInput"></label>' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');
// $('#myText').val("").attr("disabled", "disabled");
// update value
$('#myText').val('').change();
});
$('#myText').on("focus click", function() {
$('#update').removeClass("gray_text");
$('#update').addClass("show");
});
$('#edit').on('mouseup', function() {
console.log($('#myText'));
$('#myText').prop("disabled", false).focus().select();
});
$('#myText').on("focus click", function() {
$('#update').removeClass("gray_text");
$('#update').addClass("show");
})
$('.hide').on("click", function() {
$('.hide').removeClass("show");
});
$('#result ').on('click', 'li .glyphicon-remove', function() {
// alert('Clicked');
$(this).closest('li').remove();
});
.editable_text{
margin: 20px;
/*padding: 15px;*/
border: 1px solid #ccc;
width: 300px;
border-radius: 5px;
background: white;
display: inline-block;
text-align: left;
}
ul#result{
padding: 0;
margin: 0;
position: relative;
top: -40px;
border-top: 1px solid #ccc;
}
#result li {
padding: 15px 25px;
border-bottom: 1px solid #ccc;
list-style: none;
font-size: 18px;
font-weight: 100;
color: #555;
letter-spacing: 1px;
width: 100%;
}
#myText{
margin: 0;
padding: 20px 30px 20px 40px;
border: transparent;
border-bottom: 1px solid #ccc;
position: relative;
/*left: -16px;*/
width: 100%;
top: -40px;
}
.btns{
width:100%;
position: relative;
padding: 20px 0;
}
.plus {
padding: 0 20px;
cursor: pointer;
position: relative;
right: 2px;
z-index: 1;
}
.okay{
float: right;
position: relative;
right: -2px;
top: 0px;
padding: 0 20px;
cursor: pointer;
z-index: 1;
}
.gray_text{
opacity: 0.2;
color: #222;
}
.show{
opacity: 1;
color: blue;
}
input[type=checkbox] {
visibility: hidden;
}
#result label {
cursor: pointer;
position: absolute;
width: 24px;
height: 24px;
top: 15px;
left: 15px;
background: #fff;
border: 1px solid #4AADF1;
border-radius: 100%;
}
#result label:focus{
background: #4AADF1;
}
#result label:after {
opacity: 0.2;
content: '';
position: absolute;
width: 12px;
height: 5px;
left: 5px;
top: 7px;
background: transparent;
border: 2px solid white;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/**
* Create the hover event of the tick
*/
#result label:hover::after {
opacity: 0.5;
}
/**
* Create the checkbox state for the tick
*/
#result input[type=checkbox]:checked + label:after {
opacity: 1;
}
#result input[type=checkbox]:checked + label{
background: #4AADF1;
}
.todo-item-del{
text-align: right;
float: right;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Google JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<div class="editable_text">
<div class="btns">
<a id="edit" class="pull-left plus" data-toggle="tooltip" data-placement="bottom" title="Click to Add">
<i class="glyphicon glyphicon-plus"></i>
</a>
<a id="update" class="gray_text okay" data-toggle="tooltip" data-placement="right" title="Click to Okay">
<i class="glyphicon glyphicon-ok"></i>
</a>
</div>
<input type='text' id="myText" placeholder="Add new goals"/>
<ul id="result"></ul>
</div>
</div>
Hi there,
I'm trying to implement a To-Do-List for my Admin Dashboard, where I got strucked up, in this I was appending a li in my To-Do-List as an item, for the very first time its is working fine, am getting checkbox which is working too, but when am creating the second To-Do, it is getting error, and the check box isn't working.
here's the code which I was trying but dint get succeeded
$('#result').append('<li>' + '<input "$(this).attr("id",$(this).attr("id")+"_"+(unique_id))" type="checkbox" class="todo-item" /> <label for="(unique_id)"></label>' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');
following is the fiddle link

2 issues:
id for the checkbox needs to be based on unique_id
#result label { ... top: 15px; ... } is causing each checkbox to be fixed at the same y position.
$(document).ready(function() {
$("body").tooltip({
selector: '[data-toggle=tooltip]'
});
});
var unique_id = 0;
$('#update').on('click', function() {
if ($('#myText').val().length == 0) {
alert('Are you Kidding ? ;)')
return
}
unique_id++;
$('#result').append('<li>' + '<input id="checkbox'+unique_id+'Input" type="checkbox" class="todo-item" /> <label for="checkbox'+unique_id+'Input"></label>' + $('#myText').val() + '<i class="glyphicon glyphicon-remove todo-item-del"></i>' + '</li>');
// $('#myText').val("").attr("disabled", "disabled");
// update value
$('#myText').val('').change();
});
$('#myText').on("focus click", function() {
$('#update').removeClass("gray_text");
$('#update').addClass("show");
});
$('#edit').on('mouseup', function() {
console.log($('#myText'));
$('#myText').prop("disabled", false).focus().select();
});
$('#myText').on("focus click", function() {
$('#update').removeClass("gray_text");
$('#update').addClass("show");
})
$('.hide').on("click", function() {
$('.hide').removeClass("show");
});
$('#result ').on('click', 'li .glyphicon-remove', function() {
// alert('Clicked');
$(this).closest('li').remove();
});
.editable_text {
margin: 20px;
/*padding: 15px;*/
border: 1px solid #ccc;
width: 300px;
border-radius: 5px;
background: white;
display: inline-block;
text-align: left;
}
ul#result {
padding: 0;
margin: 0;
position: relative;
top: -40px;
border-top: 1px solid #ccc;
}
#result li {
padding: 15px 25px;
border-bottom: 1px solid #ccc;
list-style: none;
font-size: 18px;
font-weight: 100;
color: #555;
letter-spacing: 1px;
width: 100%;
}
#myText {
margin: 0;
padding: 20px 30px 20px 40px;
border: transparent;
border-bottom: 1px solid #ccc;
position: relative;
/*left: -16px;*/
width: 100%;
top: -40px;
}
.btns {
width: 100%;
position: relative;
padding: 20px 0;
}
.plus {
padding: 0 20px;
cursor: pointer;
position: relative;
right: 2px;
z-index: 1;
}
.okay {
float: right;
position: relative;
right: -2px;
top: 0px;
padding: 0 20px;
cursor: pointer;
z-index: 1;
}
.gray_text {
opacity: 0.2;
color: #222;
}
.show {
opacity: 1;
color: blue;
}
input[type=checkbox] {
visibility: hidden;
}
#result label {
cursor: pointer;
position: absolute;
width: 24px;
height: 24px;
/*top: 15px;*/
left: 15px;
background: #fff;
border: 1px solid #4AADF1;
border-radius: 100%;
}
#result label:focus {
background: #4AADF1;
}
#result label:after {
opacity: 0.2;
content: '';
position: absolute;
width: 12px;
height: 5px;
left: 5px;
top: 7px;
background: transparent;
border: 2px solid white;
border-top: none;
border-right: none;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/**
* Create the hover event of the tick
*/
#result label:hover::after {
opacity: 0.5;
}
/**
* Create the checkbox state for the tick
*/
#result input[type=checkbox]:checked + label:after {
opacity: 1;
}
#result input[type=checkbox]:checked + label {
background: #4AADF1;
}
.todo-item-del {
text-align: right;
float: right;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Google JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="box">
<div class="editable_text">
<div class="btns">
<a id="edit" class="pull-left plus" data-toggle="tooltip" data-placement="bottom" title="Click to Add">
<i class="glyphicon glyphicon-plus"></i>
</a>
<a id="update" class="gray_text okay" data-toggle="tooltip" data-placement="right" title="Click to Okay">
<i class="glyphicon glyphicon-ok"></i>
</a>
</div>
<input type='text' id="myText" placeholder="Add new goals" />
<ul id="result"></ul>
</div>
</div>

An easy way to create a unique id in JS is with the Date object and getTime() which returns the number of milliseconds since 1 January 1970 00:00:00 UTC.
new Date().getTime(); // 1461348496454
However, it looks like this is not the reason the label/checkboxes appear to be missing. They are there; they're just all in the same spot because they are position: absolute. You just need to add position: relative to your li.
On a side note, I recommend using some type of client side templating for this kind of task. It will make it easier to spot problems and keep things clean. Handlebars may be overkill if you aren't doing this much on your site. You may want to look into Underscore for simple things like this. It would be a easy and quick to implement.
http://underscorejs.org/#template
Example:
http://www.bennadel.com/blog/2411-using-underscore-js-templates-to-render-html-partials.htm
You would only need to change a couple things to use underscore templates. First include underscore in your page, then add a script tag for the template partial:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"/>
<script type="text/template" class="template">
<li>
<input id="<%- uid %>" type="checkbox" class="todo-item">
<label for="<%- uid %>"></label><%- labelText %><i class="glyphicon glyphicon-remove todo-item-del"></i>
</li>
</script>
Change your click handler to construct a data object for the template and use the template to create your html string:
// _.template returns a function that is used to produce html string using whatever data you pass.
var todoTemplate = _.template( $( 'script.todoTemplate' ).html() );
$('#update').on('click', function() {
var $myText, labelText, uid, templateData, html;
$myText = $('#myText');
labelText = $myText.val();
if (labelText.length === 0) {
alert('Are you Kidding ? ;)');
return;
}
// create the unique id for the label
uid = new Date().getTime();
// create the template data object
templateData = {
uid: uid,
labelText: labelText
};
// use your template function to produce the html string you will append
html = todoTemplate(templateData);
$('#result').append(html);
// update value
$myText.val('').change();
});
I've created a jsfiddle to test it out if you want to see a working example:
https://jsfiddle.net/n7bwymno/1/

Multiple elements on mouseover event instead of single element

JSFiddle: http://jsfiddle.net/357nf0ht/4/
If you are hovering one of the .item, a menu will appear. Hovering the "X" will show you a button.
I expect, that hovering the button will create a single temporary item, which belongs to the first selected .item. But instead of that, there are multiple temporary items, if you have hovered more then one .item at the beginning. It seems, that this remembers also the events in the past.
I don't understand this behavior.
$(document).on('mouseenter', '.item', function (event) {
var item = $(this);
$('#item_add').css({
"left": '5.5em',
"top": item.offset().top - 15
}).show();
$('#item_add').hover(function () {
var menue = $(this);
menue.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
$(this).find(".body").stop().slideDown(200);
});
}, function () {
var menue = $(this);
menue.find(".body").stop().slideUp(200, function () {
menue.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').hover(function () {
item.after('<div id="item_new"></div>');
}, function () {
$('#item_new').remove();
});
});

This is happening because every time you trigger mouseenter on .item you attach a new event to button.
Quick Solution: You have to remove previous events before attaching a new one, you can do this with .unbind(), here is a working example
$('#item_element_new').unbind();
$('#item_element_new').hover(function () {
$(document).on('mouseenter', '.item', function (event) {
var item = $(this);
$('#item_add').css({
"left": '5.5em',
"top": item.offset().top - 15
}).show();
$('#item_add').hover(function () {
var menue = $(this);
menue.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
$(this).find(".body").stop().slideDown(200);
});
}, function () {
var menue = $(this);
menue.find(".body").stop().slideUp(200, function () {
menue.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').unbind();
$('#item_element_new').hover(function () {
item.after('<div id="item_new"></div>');
}, function () {
$('#item_new').remove();
});
});
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
}
#item_add .body {
display: none;
}
#item_add .arrow {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
<button id="item_element_new">Example</button>
</div>
<div class="arrow"></div>
</div>
Soulution 2: As #Regent pointed out your code have some problems, you can solve a part of them:
Moving event binding outside mouseenter event handler
Caching jQuery objects
Not using .unbind() anymore
var $itemAdd = $('#item_add');
var $menuBody = $itemAdd.find(".body")
var $item = $('.item');
$itemAdd.hover(function () {
$itemAdd.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
$menuBody.stop().slideDown(200);
});
}, function () {
$menuBody.stop().slideUp(200, function () {
$itemAdd.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').hover(function () {
$('.item-hovered').after('<div id="item_new"></div>');
}, function () {
$('#item_new').remove();
});
$item.mouseenter(function (event) {
var $currentItem = $(this);
$currentItem.addClass('item-hovered');
$currentItem.siblings().removeClass('item-hovered');
$itemAdd.css({
"left": '5.5em',
"top": $currentItem.offset().top - 15
}).show();
});
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
}
#item_add .body {
display: none;
}
#item_add .arrow {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
<button id="item_element_new">Example</button>
</div>
<div class="arrow"></div>
</div>

The easiest fix, reason is what #erik-philips said:
$(document).on('mouseenter', '.item', function (event) {
var item = $(this);
$('#item_add').css({
"left": '5.5em',
"top": item.offset().top - 15
}).show();
$('#item_element_new').data('hovering_item', item);
});
$('#item_add').hover(function () {
var menue = $(this);
menue.animate({
"width": '7em',
"left": '0.5em'
}, 200, function () {
menue.find(".body").stop().slideDown(200);
});
}, function () {
var menue = $(this);
menue.find(".body").stop().slideUp(200, function () {
menue.animate({
"width": '2em',
"left": '5.5em'
}, 200);
});
});
$('#item_element_new').hover(function () {
var item = $('#item_element_new').data('hovering_item');
item.after('<div id="item_new"></div>');
}, function () {
var item = $('#item_element_new').data('hovering_item');
$('#item_new').remove();
});
.item {
border: 1px solid #e2e2e2;
margin: 6px;
padding: 0px 10px 0px 10px;
position: relative;
height: 40px;
}
.wrap {
margin-left: 8em;
}
#item_new {
border: 1px dashed #C0C0C0 !important;
background: none repeat scroll 0% 0% #F7F7F7;
display: block;
height: 2.2em;
margin: 6px;
padding: 0px 10px;
position: relative;
}
#item_add {
display: none;
position: absolute;
width: 2em;
border: 1px solid #ddd;
background-color: #f7f7f7;
color: #aaa;
padding: 0px 6px;
}
#item_add .body {
display: none;
}
#item_add .arrow {
width: 0px;
height: 0px;
-webkit-transform:rotate(360deg);
border-style: solid;
border-width: 5px 0 5px 7px;
border-color: transparent transparent transparent #f7f7f7;
top: 5px;
right: -7px;
position: absolute;
}
#item_add button {
background: none repeat scroll 0px center #fff;
padding: 0.2em 2em;
margin: 3px .2em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<div id="item_add">
<header>X</header>
<div class="body">
<button id="item_element_new">Example</button>
</div>
<div class="arrow"></div>
</div>