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
Related
I have a div and when a checkbox is clicked I want to disable all the elements inside the div, including disabling the onClick of one of the elements. Here is the codepen: https://codepen.io/anon/pen/JVwMOq
HTML:
<input type="checkbox" onChange="checkMe(this)">
<div id="test">
<input type="text">
<span class="test">
<img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe()">
</span>
</div>
JS:
function checkMe(element){
if($(element).prop('checked') === true){
$('#test').prop('disabled', true).off("click");
}
else{
$('#test').prop('disabled', false).on("click");
}
}
Any advice? Thanks!
You can use this, disabled with CSS.
you can't add disabled on div, it's working with input, etc..
$('#clickCheckbox').change(function() {
if($(this).is(":checked")) {
$('#test').addClass('disable-button');
}else{
$('#test').removeClass('disable-button')
}
$('#clickCheckbox').val($(this).is(':checked'));
});
.disable-button {
pointer-events: none;
cursor: not-allowed;
text-decoration: none;
color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="checkbox" id="clickCheckbox">
<div id="test">
<input type="text">
<span class="test">
<img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe()">
</span>
</div>
I have a working solution below.
I have added in an additional input field to check it works on multiple items.
I created an checking function to see if your item is checked.
const isChecked = (element) => document.getElementById(element.id).checked ? true : false
Then updated the likeMe function to pass in the current id and returned null if the checkbox is checked.
function likeMe(element) {
if (isChecked(element)) {
return null
} else {
console.log('Calling likeMe()');
}
}
Then I updated your checkMe function to pass in the current element and the targetdiv so this would be more reusable across other parts of your code.
function checkMe(element, targetDiv) {
const targetDivInput = `#${targetDiv} input`
const targetDivClassName = `.${targetDiv}`
if (isChecked(element)) {
$(targetDivInput).prop('disabled', true);
$(targetDivClassName).toggleClass('disabled')
} else {
$(targetDivInput).prop('disabled', false);
$(targetDivClassName).toggleClass('disabled')
}
}
Then made some small changes to the markup to pass in the ids into your functions
<div id="test">
<input type="text">
<input type="text">
<span class="test">
<img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe('test')">
</span>
</div>
and added a disabled state to your css so the user wouldn't see the cursor.
#like{
cursor: pointer;
}
.disabled #like {
cursor: inherit;
}
This is the final result.
#like{
cursor: pointer;
}
.disabled #like {
cursor: inherit;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
const isChecked = (element) => document.getElementById(element.id).checked ? true : false
function likeMe(element) {
if (isChecked(element)) {
return null
} else {
console.log('Calling likeMe()');
}
}
function checkMe(element, targetDiv) {
const targetDivInput = `#${targetDiv} input`
const targetDivClassName = `.${targetDiv}`
if (isChecked(element)) {
$(targetDivInput).prop('disabled', true);
$(targetDivClassName).toggleClass('disabled')
} else {
$(targetDivInput).prop('disabled', false);
$(targetDivClassName).toggleClass('disabled')
}
}
</script>
<input id="textCheck" type="checkbox" onChange="checkMe(this,'test')">
<div id="test">
<input type="text">
<input type="text">
<span class="test">
<img id="like" src="https://cdn4.iconfinder.com/data/icons/game-interface-outline/100/objects-15-512.png" height="40px" onclick="likeMe('test')">
</span>
</div>
I am modifying some jQuery that shows a div when nav links are hovered.
html:
About
<div class="drop" id="drop-about">
<div class="drop-holder">
<div class="grey-block">
<strong class="title">Sub Nav</strong>
<ul>
more links ...
</ul>
</div>
</div>
</div>
jQuery to show dropdowns:
function initSlideDrops() {
var activeClass = 'drop-active';
var animSpeed = 300;
jQuery('#nav ul li').each(function() {
var item = jQuery(this);
var link = item.find('>a[data-drop^="#"]');
//if (!link.length) return;
// Modifications to add hover events to nav menu
if (!link.length) {
jQuery(this).on('mouseover', function (e) {
jQuery("li").removeClass("drop-active");
jQuery('.drop').each(function () {
jQuery(this).stop().animate({
height: 0
}, animSpeed);
});
});
return;
};
var href = link.data('drop');
var drop = jQuery(href).css({
height: 0
});
if(!drop.length) return;
var dropHolder = drop.find('>.drop-holder');
var close = drop.find('.btn-close');
function showDrop(elem) {
elem.stop().animate({
height: dropHolder.innerHeight()
}, animSpeed, function() {
elem.css({
height: ''
});
});
}
function hideDrop(elem) {
elem.stop().animate({
height: 0
}, animSpeed);
}
link.on('click', function(e) {
e.preventDefault();
item.add(drop).toggleClass(activeClass).siblings().removeClass(activeClass);
if(item.hasClass(activeClass)) {
showDrop(drop);
hideDrop(drop.siblings());
} else {
hideDrop(drop);
location.href = link.attr('href');
}
});
close.on('click', function(e) {
e.preventDefault();
item.add(drop).removeClass(activeClass);
hideDrop(drop);
});
// Modifications to add hover events to nav menu
link.on('mouseover', function (e) {
e.preventDefault();
item.add(drop).toggleClass(activeClass).siblings().removeClass(activeClass);
if (item.hasClass(activeClass)) {
showDrop(drop);
hideDrop(drop.siblings());
} else {
hideDrop(drop);
//location.href = link.attr('href');
}
});
drop.on('mouseleave', function (e) {
e.preventDefault();
item.add(drop).removeClass(activeClass);
hideDrop(drop);
});
});
}
This is all working, however the dropdown navigation causes the content to bump down, rather than sliding on top of the site body. I would like the main content to remain where it is, with the navigation showing on top when hovered. I have tried adding z-index during the animate event but could not get it to work. What is the proper way to accomplish this?
Any help is appreciated.
Edit:
SASS:
.drop{
#extend %clearfix;
overflow:hidden;
text-transform:uppercase;
letter-spacing: 1.65px;
.drop-holder{
overflow:hidden;
}
}
Try Adding position:absolute; to .drop-holder. See snippet below.
You will also want to remove overflow:hidden; from .drop.
.drop{
#extend %clearfix;
/* overflow:hidden; - Remove this */
text-transform:uppercase;
letter-spacing: 1.65px;
position:relative; /* add this so .drop is positioned relative to .drop */
}
.drop-holder {
position:absolute;
border:solid 1px teal; /*for demonstration*/
}
About
<div class="drop" id="drop-about">
<div class="drop-holder">
<div class="grey-block">
<strong class="title">Sub Nav</strong>
<ul>
more links ...
</ul>
</div>
</div>
</div>
<div>content <br />content <br />content <br />content <br />content <br />content <br />content <br />
</div>
Positioning property must be specified when using z-index.
Example. Apply
.drop{
#extend %clearfix;
overflow:hidden;
text-transform:uppercase;
letter-spacing: 1.65px;
position:relative; /*Positioning applied here*/
z-index:1;
}
This should fix your problem.
I am trying an animation on the two divs on button click . Here is the demo i have created js fiddle. what i want is
when the user will click on the button the right div will slide to right (it will hide). and the width of left div will become 100%.
on second time when user will click the right div will visible from right to left slide and the width of left div will 50 %
I am trying this code .
my html is
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
my js is
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').css('width','50%');
} else {
$('#tags-left').css('width','100%');
}
});
});
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-12">
<div id="tags-left" class="col-md-6">
div left
</div>
</div>
<div id="tag-div" class="col-md-6">
div right
</div>
</div>
<div class="col-md-12">
<div class="btn-main">
<input id="show-tag" type="button" class="save-btn" value="Show Tag">
<input id="preview" type="button" class="save-btn" value="Preview">
</div>
This one is simple solution without doing much coding see the fiddle: https://jsfiddle.net/uzar3j4q/7/
JS
var action = 1;
$("#show-tag").click(function () {
if ( action == 1 ) {
$("#tag-div" ).animate({'width':'0%',});
$('#tags-left').animate({'width':'90%'});
action = 2;
} else {
$("#tag-div" ).animate({'width':'45%',});
$('#tags-left').animate({'width':'45%'});
action = 1;
}
});
CSS
.col-md-6 {
width:45%;
float:left;
background:red;
height:200px;
margin:3px;
overflow:hidden; /* This property is added just to hide overflowing content */
}
first of all .. put left and right div in same div and in css
CSS
.col-md-12 {
white-space: nowrap;
overflow: hidden;
height:200px;
}
and you can use animate() method in js
JS
$("#show-tag").click(function (e)
{
$( "#tag-div" ).toggle( "slow", function(element) {
//$('#tags-left').css('width','0%');
//e.preventDefault();
if ($('#tag-div').is(":visible") ) {
$('#tags-left').animate({'width':'45%'},500);
} else {
$('#tags-left').animate({'width':'100%'},500);
}
});
});
DEMO HERE
you can just play around that to get the exact action you need
Optimized #Nilesh Mahajan's answer.
Found a problem with it when clicking on the button continuously.
// Caching
var $tagsLeft = $('#tags-left'),
$tagDiv = $('#tag-div');
var tagLeftWidth,
tagDivWidth;
$("#show-tag").on('click', function () {
var $this = $(this);
$this.prop('disabled', true).addClass('disabled'); // Disable the button
tagLeftWidth = $tagDiv.width() ? '90%' : '45%';
tagDivWidth = $tagDiv.width() ? '0%' : '45%';
$tagDiv.animate({
'width': tagDivWidth
}, function() {
$this.prop('disabled', false).removeClass('disabled'); // Enabling button
});
$tagsLeft.animate({
'width': tagLeftWidth
});
});
Demo: https://jsfiddle.net/tusharj/uzar3j4q/11/
Try this html:
<div id="tag-left" class="col-md-6">div left</div>
<div id="tag-right" class="col-md-6">div right</div>
and this javascript:
$("#show-tag").click(function (e) {
if($("#tag-right").width() == 0) {
$("#tag-left").animate({
width: '0'
});
$("#tag-right").animate({
width: '90%'
});
} else {
$("#tag-left").animate({
width: '90%'
});
$("#tag-right").animate({
width: '0'
});
}
});
jsfiddle
I have multiple Divs based rows. Each row contains a check box.
I want to click on that row anywhere, it should check uncheck that specific checkbox.
Here is the what I tried till now DEMO: http://jsfiddle.net/kERYB/19/
JS :
$('.row').click(function ()
{
$(this).closest(":checkbox").attr("checked", checked");
});
HTML:
<div class="row">
<div class="left">
<input type="checkbox" class="cb-element" value="1" />
</div>
<div class="left">
<select><option>choose</option></select>
</div>
<div class="right">
This is First Record
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">
<input type="checkbox" class="cb-element" value="1" />
</div>
<div class="left">
<select><option>choose</option></select>
</div>
<div class="right">
This is Second Record
</div>
<div class="clear"></div>
</div>
<div class="row">
<div class="left">
<input type="checkbox" class="cb-element" value="1" />
</div>
<div class="left">
<select><option>choose</option></select>
</div>
<div class="right">
This is Third Record
</div>
<div class="clear"></div>
</div>
CSS:
.row {
width:300px;
padding:4px;
border:1px solid #000;
margin:2px;
}
.left {
float:left;
width:50px;
}
.right {
float:right;
}
.clear {
clear:both;
}
}
You can do this without if condition.
Working Demo
Jquery
$('.row').click(function ()
{
$(this).find('input[type=checkbox]').prop("checked", !$(this).find('input[type=checkbox]').prop("checked"));
});
Update (with variable) See Demo
jQuery
$('.row').click(function ()
{
var checkbox = $(this).find('input[type=checkbox]');
checkbox.prop("checked", !checkbox.prop("checked"));
});
Update 2: Fixed Bug on Cliking input See Demo
$('input[type=checkbox]').click(function (e)
{
e.stopPropagation();
return true;
});
Update 3: Without jQuery See Demo
Wrap the row with label
<label>
<div class="row">
...
</div>
</label>
Update 4: To exclude select tag See Demo
$('input[type=checkbox], .row select').click(function (e)
{
e.stopPropagation();
return true;
});
Try with this one :
$('.row').click(function ()
{
$(this).find('div:first input:checkbox').prop('checked', true)
}
);
Try in fiddle
Updated:
$('.row').click(function ()
{
if($(this).find('div:first input:checkbox').is(':checked')){
$(this).find('div:first input:checkbox').prop('checked', false)
}
else{
$(this).find('div:first input:checkbox').prop('checked', true)
}
});
Try in fiddle
You can do it simply with HTML.
<input type="checkbox" class="cb-element" id="my-checkbox" value="1" />
<label for="my-checkbox">here you click to check or uncheck.</label>
id of 'input' should be value of 'for' attribute of 'label' tag.
Here checkbox id is 'my-checkbox' and in label --for="my-checkbox")--.
You can see an example: http://jsfiddle.net/kERYB/21/
You can use .find for this.
$(this).find('input[type=checkbox]').prop("checked", true);
http://api.jquery.com/find/
To check uncheck, use this -
$('.row').click(function ()
{
var cb = $(this).find(':checkbox');
if (cb.is(':checked')) {
cb.prop('checked', false);
} else {
cb.prop('checked', true);
}
});
Update Fiddle - http://jsfiddle.net/kERYB/14/
$(document).ready(function (){
$('.row').click(function (e){
var cur = $(this).find('input[type=checkbox]');
if(cur.prop("checked"))
{
$(this).find('input[type=checkbox]').prop("checked", false);
}
else
{
$(this).find('input[type=checkbox]').prop("checked", true);
}
});
});
this will be good for you....
$('.row').click(function ()
{
if ( $(this).find(".cb-element").prop('checked') == true){
$(this).find(".cb-element").prop('checked', false);
}
else{
$(this).find(".cb-element").prop('checked', true);
}
});
http://jsfiddle.net/kERYB/13/
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();
}
});