How to toggle hover event for another selector on click? - javascript

Please take a look at this fiddle
Would anyone please tell me how to enable a hover event for the table cells on clicking the button #edit_mode and disable it on another click?
<button id='enable_mode'>Enable</button>
<table>
<tbody>
<tr><td>Package</td><td>1</td></tr>
<tr><td>Cost</td><td>900</td></tr>
</tbody>
</table>
jQuery:
$('#enable_mode').click(function(){
$(this).text(function(i, text){
return text === "Enable" ? "Enable" : "Disable";
})
var see = $(this).text()
if($(this).text() == "Enable"){
hoverme($('table tbody tr td:nth-child(2)'));
}else{
????
}
});
function hoverme(para) {
$(para).hover(
function() {
$(this ).append('<div id="edit">Edit</div>' );
}, function() {
$( this ).find('#edit').remove();
}
);
}

This might be what you want to achieve: JSFiddle
And here's the corresponding code. HTML and CSS code stays the same, I've just added a few more rows for clarity, and some padding and margin.
JS:
$('#enable_mode').click(function () {
//Check the text of the button
$(this).text(function (i, text) {
if (text === "Enable") {
//Enable hover state with events on mouseenter and mouseleaves
$("tr").hover(function () {
//On mouseenter, change background color (= hover state)
$(this).css("background-color", "#DDD");
}, function () {
//On mouseleave, change background color to default
$(this).css("background-color", "white");
});
} else if (text === "Disable") {
//Remove mouseenter and mouseleave events.
$("tr").unbind('mouseenter mouseleave');
}
//Toggle the text in the button
return text === "Enable" ? "Disable" : "Enable";
});
});
You can modify this code to do practically anything on hover, including appending things (like you wanted to do).

I have modified your code little bit to achieve your what DEMO
Code:
var para = $('table tbody tr td:nth-child(2)');
$('#enable_mode').click(function()
{
var that = $(this);
if($(this).text() == "Enable")
{
para.bind('mouseover', mouseOver).bind('mouseout', mouseOut);
that.text("Disable");
}
else
{
para.unbind('mouseover mouseout');
that.text("Enable");
}
});
function mouseOver() {
$(this).append('<div id="edit">Edit</div>' );
}
function mouseOut() {
para.find('#edit').remove();
}

Related

Need to toggle CSS slide-in function with click on different div?

I have this JSfiddle and i need to slide in, when clicking on a div, and not when page is loaded. Simultaneously it should be possible to close by clicking anywhere outside the slide-in box.
$( document ).ready(function() {
$(function(){
$(".slide-in").addClass("active");
console.log($(".slide-in"));
});
});
I think the solution could be some kind of toggle system, but i can't figure out how to?
Thank you!
Opens the slider on click of .button. Closes it on click anywhere outside the slider (including the button)
var isOpened = false;
$(document).click(function(e) {
if(isOpened && e.target.className=='slide-in') {
$(".slide-in").removeClass("active");
isOpened = false;
} else if(!isOpened && e.target.className=='button'){
$(".slide-in").addClass("active");
isOpened = true;
}
});
Better is to use IDs. So your code would be:
<div id="slide-in"></div>
<div id="button"></div>
and the javascript:
var isOpened = false;
$(document).click(function(e) {
if(isOpened && e.target.id!='slide-in') {
$("#slide-in").removeClass("active");
isOpened = false;
} else if(!isOpened && e.target.id=='button'){
$("#slide-in").addClass("active");
isOpened = true;
}
});
You'll also need to change the CSS from classes to IDs
Try this.
var someDiv = document.getElementById('yourDiv');
someDiv.style.cursor = 'pointer';
someDiv.onclick = function() {
//do something
}
how to make div click-able?
https://jsfiddle.net/zer00ne/jne1rasb/
$(document).ready(function() {
$('.button').on('click dblclick', function(e) {
$('.slide-in').toggleClass('active');
e.stopPropagation();
});
$(document).on('click', function() {
$(".slide-in").removeClass("active");
});
});
I think this should do the trick.
Edit:
$( document ).ready(function() {
$(".button").on("click",function(){
if($(".slide-in").hasClass("active")){
$(".slide-in").removeClass("active");
}else{
$(".slide-in").addClass("active");
}
});
});

jQuery .on() tr click event using .not() on tr checkbox click?

So my title may be confusing, but it has the right details. I have a table with clickable rows. When clicking the row, the row highlights. The table also has a checkbox column. Clicking the checkbox should NOT highlight or remove highlight from the row. How can I properly use .not() or :not in the .on('click', 'tr', function(){ ... }) ? http://jsfiddle.net/vmu0p2oe/
$('table').on('click', 'tr', function () {
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
//$(this).find(":checkbox").prop("checked", false);
}
else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
//$(this).find(":checkbox").prop("checked", true);
}
});
Add this to the beginning of the handler:
if($(e.target).is('input[type=checkbox]')) {
return;
}
This will stop the handler from running if the element clicked is a checkbox.
Fiddle: http://jsfiddle.net/vmu0p2oe/1/
Add a handler for the checkbox that uses stopPropagation() to prevent the click from bubbling out to the tr:
$('table').on('click', ':checkbox', function(e) {
e.stopPropagation();
});
DEMO
How about this:
$('table').on('click', 'tr', function (e) {
var el = e.target;
if ( el.type !== "checkbox"){
if ($(this).hasClass('selected')) {
$(this).removeClass('selected');
//$(this).find(":checkbox").prop("checked", false);
} else {
$('tr.selected').removeClass('selected');
$(this).addClass('selected');
//$(this).find(":checkbox").prop("checked", true);
}
}
});
fiddle

Tick a checkbox in a table cell by clicking anywhere in the table cell and change background color of that cell

Basically, I have a table with each cell containing a checkbox. I want to be able to tick the checkbox by clicking anywhere within the cell and change the color of that cell which I have done.
Now the problem is that when I tick the checkbox and then untick it, that cell is not getting that cell color back, as in the when the checkbox is unticked its cell color should be back to white. Can anyone help me? Help would be highly appreciated.
Here is my fiddle http://jsfiddle.net/UcDMW/50/
$(function () {
$('table tr td').on('click', function (e) {
if (e.target.type == "checkbox") {
if ($(this).is(':checked')) {
$(this).attr('checked', false);
$(this).css('background-color', 'white');
} else {
$(this).attr('checked', true);
$(this).css('background-color', '#DFF0D8');
}
return;
} else {
if ($(this).find('input:checkbox').is(':checked')) {
$(this).css('background-color', 'white');
$(this).find('input:checkbox').attr('checked', false);
} else {
$(this).find('input:checkbox').attr('checked', true);
$(this).css('background-color', '#DFF0D8');
}
}
});
});
You can simply accomplish your task by the following snippet,
Try,
$('table tr td:has(:checkbox)').on('click', function (e) {
$(this).toggleClass('className');
if($(e.target).is(':checkbox')){ return; }
var checked = $(this).find(':checkbox')[0].checked;
$(this).find(':checkbox')[0].checked = !checked;
});
Cached version
$('table tr td:has(:checkbox)').on('click', function (e) {
$(this).toggleClass('className');
if($(e.target).is(':checkbox')) return;
var checkBox = $(this).find(':checkbox')[0];
checkBox.checked = !checkBox.checked;
});
DEMO
You could restructure like this
$('table tr td').on('click', function(e){
var checkbox = $(this).find('input:checkbox');
if (!$(e.target).is(':checkbox')) {
checkbox.prop('checked', !checkbox.is(':checked'));
}
$(this).css('background-color', checkbox.is(':checked')?'#DFF0D8':'white');
});
DEMO
You can change your js to this:
working demo
EDIT: now working also when clicking on td cells.
$(function(){
bindCells();
});
function bindCells() {
$('table tr td').on('click', function (e) {
var check = (e.target.type=="checkbox") ? e.target : $(this).find("input:checkbox").get(0);
$(check).attr('checked', !check.getAttribute('checked'));
$(this).css('background-color', (check.checked) ? '#DFF0D8' : "#FFFFFF");
});
}
alert($(this).is(':checked')); Use it and check the value. It returns false when you check or uncheck the box. This because you use isChecked on table elements(table,tr,td)
Change
if ($(this).is(':checked')) {
in line 4 to
if ($(e.target).is(':checked')) {

hover/click with list of DIVs

I've a set of DIVs and I need to give them a effect on mouse hover and when one of DIVs being clicked, the clicked DIV should look like it's being hovered (or whatever effect) until another DIV get clicked.
<div class="items" id="item1">AN ITEM</div>
<div class="items" id="item2">AN ITEM</div>
<div class="items" id="item3">AN ITEM</div>
<div class="items" id="item4">AN ITEM</div>
I've tried to achieve this using jQuery but the effect goes away on mouse out.
$('.items').hover(function () {
var div = $(this).attr('id');
if ($(div).css("background-color") == settings.color2) {
return false;
} else {
$("#" + div).css("background-color", settings.color2);
}
}, function () {
var div = $(this).attr('id');
if ($(div).css("background-color") == settings.color2) {
return false;
} else {
$("#" + div).css("background-color", "transparent");
}
}).click(function () {
$(this)
.closest('div')
.css("background-color", "transparent");
$(this).css("background-color", settings.color2);
});
Instead of adding the hover styles using JS, I would suggest adding them via CSS. And add the same styles to an "active" class and toggle that class on click.
Something like this:
CSS:
.items:hover,
.items.active {
background-color: /* whatever */;
}
JS:
$('.items').on('click', function() {
$('.items').removeClass('active');
$(this).addClass('active');
});
Try adding an "active" class on click which has the same styles as hover. When some other div is clicked you remove that class from previously clicked div and add it to the current div.
Try
var $items = $('.items').hover(function () {
$(this).css("background-color", 'red');
}, function () {
if (!$(this).hasClass('clicked')) {
$(this).css("background-color", "transparent");
}
}).click(function () {
$items.filter('.clicked').css("background-color", "transparent").removeClass('clicked')
$(this).addClass('clicked').css("background-color", 'red');
});
Demo: Fiddle
Note: I din't use a class to style the clicked state because it looks like the background color is coming from an option, in that case it will be difficult to assign a class, else the clicked class also needs to be passed as a setting.
A better alternative will be to
var settings = {
color2: 'red',
clicked: 'clicked'
}
var $items = $('.items').hover(function () {
$(this).css("background-color", settings.color2);
}, function () {
if (!$(this).hasClass('clicked')) {
$(this).css("background-color", "transparent");
}
}).click(function () {
$items.filter('.' + settings.clicked).removeClass(settings.clicked)
$(this).addClass(settings.clicked);
});
Demo: Fiddle

Jquery Unable to select and deselect a td on clicking it

I have written 2 jquery functions. Lines 1-11 is the first one which binds mouseover event on mousedown to get the effect of click and drag to select td's(internally checking/unchecking checkboxes).
Second function(12-20) is to click and unclick on single td to check and uncheck a checkbox. I am able to do mousedown and select multiple td's but I am not able to a click and unclick on single td. I am not sure where the problem is ? Any suggestion is appreciated.
Here is the code:
$("#tbl td").mousedown(function() {
$("#tbl td").bind('mouseover', function() {
var checkbox = $(':checkbox', this)[0];
$(this).css({
'background': (checkbox.checked ? 'white' : '#6D7B8D')
});
checkbox.checked = !checkbox.checked;
});
$(this).mouseover();
}).mouseup(function(event) {
$("#td").unbind('mouseover');
event.preventDefault();
event.stopPropagation();
});
$('#tbl td').click(function(e) {
if ($(this).find('input:checkbox').is(':checked')) {
$(this).find('input:checkbox').attr("checked", "");
$(this).css({
background: "white"
});
} else {
$(this).find('input:checkbox').attr("checked", "checked");
$(this).css({
background: "#6D7B8D"
});
}
});​
Thanks
Well, I am not sure if this is what you exactly need but maybe could help.
(Just to know, it will be really helpful if you put the HTML code!)
Live Demo: http://jsfiddle.net/oscarj24/TATg7/
Code:
$('#tbl').on('mousedown, mouseover, mouseup, click', 'td', function(e) {
if(e.type == 'mousedown'){
$(this).mouseover();
} else if(e.type == 'mouseover'){
var checkbox = $('input:checkbox');
$(this).css({'background': (checkbox.is(':checked') ? 'white' : '#6D7B8D')});
checkbox.prop('checked', !checkbox.checked);
} else if(e.type == 'mouseup'){
$(this).unbind('mouseover');
e.preventDefault();
e.stopPropagation();
} else if(e.type == 'click'){
var checked = $('input:checked').is(':checked');
checked ? background = 'white' : background = '#6D7B8D';
$('input:checked').prop('checked', !checked);
$(this).css({background: background});
}
});
​

Categories

Resources