We Keep Coding

Element won't show() according to variable value and if statement

I am trying to make a blue square show if fullScreenCropStatus = true and a red square show if fullScreenCropStatus = false once the 'Done' button is clicked.
The variable is correct and is showing the correct value, but the blue square does not show when 'Done' is clicked. I tried show()/hide() and also the current format of setting the display value in css but neither make the blue square appear.
The red square successfully hide() or display:none. I am really baffled on this.
The code is below and this is the JSbin
JS:
var fullScreenCrop = false;
var fullScreenCropStatus = false;
$('#cropping--modes').click(function() {
fullScreenCrop = !fullScreenCrop;
console.log("fullScreenCrop = " + fullScreenCrop);
});
$("#done").click(function() {
fullScreenCropStatus = fullScreenCrop;
console.log("fullScreenCropStatus = " + fullScreenCropStatus);
if (fullScreenCropStatus === true) {
$(".done--title__container").css("display", "none");
$(".done--title__container--fullscreen").css("display", "block");
} else if (fullScreenCropStatus === false) {
$(".done--title__container").css("display", "block");
$(".done--title__container--fullscreen").css("display", "none");
}
});
HTML:
<button id="cropping--modes">Toggle variable (true/false)</button>
<button id="done">Done</button>
<div class="done--title__container">
<div class="done--title__container--fullscreen">
CSS:
.done--title__container { display:none; width:50px; height:50px; background-color:red; position:relative; }
.done--title__container--fullscreen { display:none;width:50px; height:50px; background-color:blue; position:relative; }
#cropping--modes { display:block; width:200px; height:30px; }
#done { display:block; width:200px; height:30px; }

Close the div tags and you're fine:
<button id="cropping--modes">Toggle variable (true/false)</button>
<button id="done">Done</button>
<div class="done--title__container"></div>
<div class="done--title__container--fullscreen"></div>

Function prepend() jquery hover and counter click

I have a little problem with prepend() because if I "copy" my div and if click on counter the count change in whole divs the same is with hover. Is this possible change number count and hover only in clicked or hovered div?
Thank you for help and time:)
HTML
<div class="Wrap">
<div class="container">
<div class="count">My Counter</div>
<div class="background"></div>
<div class="hover"></div>
</div>
</div>
<button class=AddDiv>AddDiv</button>
And javascript
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
});
var count = 0;
$(".count").click(function() {
count++;
$(".count").html(+count);
});
$(".background").on("mouseover", function() {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function() {
$(".hover").fadeOut(200);
});
FIDDLE

Yes sure, use the current clicked element object $(this) :
$(this).html(+count);
Instead of :
$(".count").html(+count);
And use event delegation on() to attach click event to the new elements added dynamically to the DOM :
$("body").on('click',".count",function() {
count++;
$(this).html(+count);
});
To increment count separatelly for every div you should get the current count then add 1 to it, like :
$("body").on('click',".count",function() {
var count = parseInt( $(this).text() );
if( isNaN(count) ){
count = 1; //For the first click
}else{
count++;
}
$(this).text(count);
});
Hope this helps.
$('.AddDiv').on('click', function(){
$('.Wrap').prepend($('<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
});
$("body").on('click',".count",function() {
var count = parseInt( $(this).text() );
if( isNaN(count) ){
count = 1; //For the first click
}else{
count++;
}
$(this).text(count);
});
$(".background").on("mouseover", function () {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function () {
$(this).fadeOut(200);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="count"> Click Me
</div>
<div class="background">
</div>
<div class="hover">
</div>
</div>
</div>
<button class=AddDiv>AddDiv</button>

Here we are creating dynamic id for each prepend. And by sending that div id to the javascript function and using same count logic as #Zakaria Acharki used to maintain count value.
var divNumber = 1;
$('.AddDiv').on('click', function() {
$('.Wrap').prepend($('<div class="container"><div class="count" id="div'+divNumber+'" onclick="makeCount(this.id);">My Counter</div><div class="background"></div><div class="hover"></div></div>'));
divNumber++;
});
function makeCount(id){
var count = parseInt( $("#"+id).text());
if( isNaN(count) ){
count = 1; //For the first click
}else{
count++;
}
$("#"+id).text(count);
}
$(".background").on("mouseover", function() {
$(".hover").fadeIn(500);
});
$(".hover").on("mouseout", function() {
$(".hover").fadeOut(200);
});
.Wrap
{
width:650px;
height:800px;
}
.container
{
position:relative;
top:5px;
left:5px;
width:200px;
height:200px;
background-color:red;
float:left;
margin-left:5px;
margin-top:5px;
}
.AddDiv
{
position:absolute;
top:0px;
}
.count
{
position:absolute;
width:100px;
height:100px;
position:absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;
background-color:white;
text-align:center;
line-height:100px;
cursor:pointer;
}
.background
{
width:20px;
height:20px;
background-color:green;
position:absolute;
left:170px;
top:10px;
}
.hover
{
width:200px;
height:200px;
background-color:rgba(255,255,255,0.8);
position:absolute;
z-index:1001;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="Wrap">
<div class="container">
<div class="count" id="div0" onclick="makeCount(this.id);">My Counter</div>
<div class="background"></div>
<div class="hover"></div>
</div>
</div>
<button class=AddDiv>AddDiv</button>

Try .insertBefore() function:
check: https://jsfiddle.net/mpqtrjzx/
$( '<div class="container"><div class="count">My Counter</div><div class="background"></div><div class="hover"></div></div>' ).insertBefore( ".container:first" );

JS remove class from div, when text field in empty?

I have a search bar where the results are displayed centered of the page with a fixed div. And an absolute div covers the page behind the results with a semi transparent black. How could I remove the class ".coverOn" added on the keyup function, If I just deleted what I put into the search field without refreshing the page?
Thanks.
<styles>
.coverOn {
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.7);
z-index:8;
}
#output { /* holds search results */
position:fixed;
left:0;
right:0;
top:130px;
width:400px;
margin:0 auto;
-webkit-border-radius:15px;
-moz-border-radius:15px;
border-radius:15px;
z-index:12;
}
</styles>
<body>
<div id="cover"></div>
<div id="Search">
<input type="text" name="search" onkeyup="searchq();" value="" required class="SearchField" />
<div id="output"></div>
</div>
</body>
<script>
function searchq() {
var searchTxt = $("input[name='search']").val();
$.post("../php/productSearch.php", {searchVal: searchTxt}, function(output) {
$("#output").html(output);
document.getElementById("cover").className = "coverOn";
});
}
</script>

Remove class if searchTxt string is empty:
function searchq() {
var searchTxt = $("input[name='search']").val().trim();
$.post("../php/productSearch.php", {searchVal: searchTxt}, function (output) {
$("#output").html(output);
document.getElementById("cover").className = searchTxt ? "coverOn" : "";
});
}
or since you are using jQuery it can be simpler:
$("#cover").toggleClass("coverOn", searchTxt);

use removeClass('selector');
$('input').on('keyup', function() {
$('.red').removeClass('red');
})
.red {
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" />
<div class="red">red</div>

What you could do, rather than operating with classes, is instead of
.coverOn {
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.7);
z-index:8;
}
do
#output:not(:empty) {
position:absolute;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.7);
z-index:8;
}
So long as when you do an empty search, it returns an empty result.
Your resulting javascript would be
function searchq() {
var searchTxt = $("input[name='search']").val();
$.post("../php/productSearch.php", {searchVal: searchTxt}, function(output) {
$("#output").html(output);
});

jQuery: Issue with Dropdown Menu Script

So I have a drop down menu:
JSFiddle Link:
http://jsfiddle.net/cGt4h/3/
HTML:
<div id="container">
<ul>
<li>
<a class='sign-in' href='#'>Login</a>
<div id="loginForm" class='log-content'>
<div>
User name:
<input type='text' />
</div>
<div>
Password:
<input type='text' />
</div>
<div>
<input type='button' value='Login' />
</div>
</div>
</li>
</ul>
</div>
SCRIPT:
$('.sign-in').click(function(e) {
e.preventDefault();
$('#loginForm').toggle();
});
$("#loginForm").mouseup(function() {
return false;
});
$(document).mouseup(function(e) {
if ($(e.target).parent(".sign-in").length == 0) {
$('#loginForm').hide();
}
});
CSS:
#container {margin: 0 auto;width:400px; position:relative; }
#loginForm {
width:200px;
background-color:gray;
color:white;
padding:10px;
display:none;
}
li {list-style: none;}
.sign-in {
background-color:gray;
color:white;
text-decoration:none;
}
.sign-in:hover {background-color:red;}
.open-menu {
display:block !important;
left:0;
}
It works fine but when I click on the .sign-in selector the dropdown doesn't close after it has been opened.

That's because your document.mousedown function is causing the form to hide, then your .sign-in click handler is toggling the form, causing it to show. This line:
if ($(e.target).parent(".sign-in").length == 0) {
evals to true, causing the form to hide, add an AND condition:
if ($(e.target).parent(".sign-in").length == 0 && $(e.target).attr("class") != "sign-in") {
Demo: http://jsfiddle.net/cGt4h/4/

Try this:
$('.sign-in').click(function(e) {
e.stopPropagation();
e.preventDefault();
$('#loginForm').toggle();
});
$("#loginForm").mouseup(function() {
return false;
});
$(document).mouseup(function(e) {
if ($(e.target).parent(".sign-in").length == 0 && $(e.target).attr("class") != "sign-in") {
$('#loginForm').hide();
}
});

Jquery Div hide

I have a div tag which includes input controls. This div is opened when the user clicks on a menu item. I want to hide this tag when the click is outside that div area.
Currently I am able to hide the div when clicking outside it, but my div hides when I click any of the input controls that are in the div. How can I solve this?
My code is:
$(document).click(function (e) {
var elem = $(e.target).attr('id');
console.log(e.target);
if (elem !== 'btnLogin') {
// if (elem != 'TxtUserName' && elem != 'TxtPassword')
HideLoginDetails();
}
if (elem !== 'hpUseFul') {
// if(elem !== 'y')
}
});

Demo: http://jsfiddle.net/3fbpA/
var aboveDiv = false;
$('#yourDiv').click(function () {
aboveDiv = true;
});
$(document).click(function () {
if (!aboveDiv) $('#yourDiv').hide();
aboveDiv = false;
});

jQuery(document).ready(function()
{
$('the div you want').hover(function(){
mouse_inside=true;
}, function(){
mouse_inside=false;
});
$("body").mouseup(function(){
if(! mouse_inside) $('the div you want').hide();
});
});
Also check "Use jQuery to hide a DIV when the user clicks outside of it".

I have done complete bins for above issue. you can check demo link here...
Demo http://codebins.com/bin/4ldqp71
HTML
<div id="loginDialog">
<div class="field">
<label>
User Name:
</label>
<span class="input">
<input type="text" value="" id="txtuser" size="15"/>
</span>
</div>
<div class="field">
<label>
Password:
</label>
<span class="input">
<input type="password" value="" id="txtpassword" size="15"/>
</span>
</div>
<div class="field">
<input type="button" id="btn_ok" value="Login" />
</div>
</div>
<div>
<a href="javascript:void(0);" id="btnLogin">
Login
</a>
<a href="javascript:void(0);" id="btnMenu1">
Menu1
</a>
<a href="javascript:void(0);" id="btnMenu2">
Menu2
</a>
</div>
JQuery
$(function() {
$("#btnLogin").click(function() {
$("#loginDialog").show(500);
});
$(document).click(function(e) {
e.preventDefault();
var elem = $(e.target).attr('id');
if ($(e.target).parents("#loginDialog").length) {
$("#loginDialog").show();
} else {
if ($(e.target).attr('id') !== "btnLogin") {
$("#loginDialog").hide(300);
}
}
});
});
CSS
#loginDialog{
border:1px solid #333;
padding:4px;
background:#2A2A2A;
width:250px;
color:#dfdfdf;
display:none;
}
#loginDialog input{
border:1px solid #efefef;
}
#loginDialog input[type=button]{
background:#ababab;
}
#loginDialog input[type=button]:hover{
background:#cfcfcf;
}
#loginDialog .field{
text-align:center;
margin-bottom:5px;
}
#loginDialog label{
display:inline-block;
width:100px;
}
a{
display:inline-block;
margin-left:8px;
}
Demo http://codebins.com/bin/4ldqp71