I'm currently doing something related to planning. So I have a table with time stamp. every row starts with a person's name. My idea is that first you can select one cell. Then you're blocked in that row and you can only select rows within that row unless no cells are selected.
Here's my code. Can someone help to realize it?
var isMouseDown = false, isHighlighted;
$(document).on('mousedown','#werknemers_table tr td',function(){
isMouseDown = true;
$(this).toggleClass("highlighted");
console.log("Click");
console.log($(this).attr('class'));
isHighlighted = $(this).hasClass("highlighted");
return false; // prevent text selection
});
$(document).on('mouseover','#werknemers_table tr td',function(){
if (isMouseDown) {
$(this).toggleClass("highlighted", isHighlighted);
}
});
$(document).mouseup(function () {
isMouseDown = false;
});
When the mouse down event happen add the 'current_row' class in its parent row. Then add highlighted class only the row having the 'current_row' class.
Use the below code:
var isMouseDown = false, isHighlighted;
$(document).on('mousedown','#werknemers_table tr td',function(){
isMouseDown = true;
console.log('mousedown');
$(this).toggleClass("highlighted").closest('tr').toggleClass('current_row');
console.log("Click");
console.log($(this).attr('class'));
isHighlighted = $(this).hasClass("highlighted");
return false; // prevent text selection
});
$(document).on('mouseover','#werknemers_table tr td',function(){
if (isMouseDown && $(this).closest('tr').hasClass('current_row')) {
$(this).toggleClass("highlighted", isHighlighted);
}
});
$(document).mouseup(function () {
isMouseDown = false;
});
});
Quickest solution I can think of, is to add another global indicating the current row.
var currentTR = null;
Then, set this in your mousedown event handler:
currentTR = $(this).closest('tr');
Then, your mouseover event:
if (!isMouseDown) return;
if (!$(this).parents().is(currentTR)) return; // <-- ignore event if we're not a child of the relevant row
$(this).toggleClass("highlighted", isHighlighted);
Another possible solution would be to set your mouseover event handler on just the relevant row in your mosedown event handler, and remove it again in your mouseup event.
Related
initAccordion(){
const thisProduct = this;
const clickTrigger = document.querySelectorAll(select.menuProduct.clickable);
for (let click of clickTrigger) {
click.addEventListener('click', function(){
event.preventDefault();
console.log('click');
thisProduct.element.classList.toggle(classNames.menuProduct.wrapperActive);
const allActiveProducts = document.querySelectorAll(classNames.menuProduct.wrapperActive);
for(let active of allActiveProducts){
if (active !== thisProduct) {
active.classList.remove(classNames.menuProduct.wrapperActive);
}
}
});
}
}
When event is triggerd on one generated element all elements below are getting class active. How can I prevent that?
event.stopImmediatePropagation();
event.stopPropagation();
Add this after event.preventDefault(), it will allow only one selector(which comes first or where you click) to trigger, not all.
I have Dynamic a dynamic table here. I am trying to give drag selected cell count as colspan value to the selected table cells(merge).my fiddle http://jsfiddle.net/kannankds/q35vm6qv/6/
$(document).mouseup(function () {
isMouseDown = false;
mylength = $("td.highlighted").length;
//alert(mylength);
});
$("#mergeme").live('click', function () {
$("td.highlighted").attr("colspan"+ mylength);
alert("colspan" + mylength);
});
You could change this:
$("#mergeme").live('click', function () {
$("td.highlighted").attr("colspan"+ mylength);
alert("colspan" + mylength);
});
for this:
$("#mergeme").click(function () {
var mylength = $(".highlighted").length;
// Add the colspan of already merged columns
$(".highlighted").each(function(index,el){
if($(el).attr("colspan")>1)
mylength += $(this).attr("colspan") - 1;
});
// Get text from highlighted cells
var alltext = $(".highlighted").text();
// Hide non-first highlighted cells
$("td.highlighted:not(:first)")
.hide()
.toggleClass("highlighted");
// Set text to first highlighted cell, unhighlight, and set colspan
$("td.highlighted:first").attr("colspan", mylength)
.text(alltext)
.toggleClass("highlighted");
});
Demo fiddle: http://jsfiddle.net/lparcerisa/9ep1gsr8/1/
Note: you should limit your selection to cells of the same row, or the merge will be a mess.
It should be,
$(document).mouseup(function () {
isMouseDown = false;
mylength = $("td.highlighted").length;
//alert(mylength);
});
$("body").on('click','#mergeme', function () {
$("td.highlighted").attr("colspan", mylength);
alert("colspan" + mylength);
});
I have a function that needs to fire when I click on a chevron tab. However I only need that function to fire that first time we load the page. How can I prevent it form firing every time the tab is clicked?
$('#navi a').bind('click',function(e){
var $this = $(this);
var prevButton = current;
$this.closest('ul').find('li').removeClass('selected');
if ( $(this).attr('id') == 'tab2')
{
//fire function only once
}
});
In case you need only part of your event handler to run once :
$("div").on("click",function(){
if (!$(this).data("fired")) {
console.log("Running once");
$(this).data("fired",true);
}
console.log("Things as usual");
});
Demo
Use the .one binding instead. This will attach it to fire on the first click and remove itself.
Use:
var isalreadyclicked=false;
$('#navi a').bind('click',function(e){
var $this = $(this);
var prevButton = current;
$this.closest('ul').find('li').removeClass('selected');
if ( $(this).attr('id') == 'tab2')
{
if(!isalreadyclicked){
//fire function only once
isalreadyclicked=true;
}
}
});
I'm using twitter bootstrap to display popovers with a click event. I'm requesting the info with the click event but I want to hide the popover after it looses focus so the user isn't required to click it again. Is this possible?
Basically I want to show the popover with a click event but then when the launch point looses focus from the mouse the popover is hidden.
Here is a link to the popover doc from twitter-bootstrap: http://twitter.github.com/bootstrap/javascript.html#popovers
This is what I'm currently doing:
jQuery:
$('.knownissue').on('click', function() {
var el = $(this);
if (el.data('showissue') == 'true') {
el.popover('toggle');
el.data('showissue', 'false');
return;
}
$.post('functions/get_known_issues.php', function(data) {
if (data.st) {
el.attr('data-content', data.issue);
el.popover('toggle');
el.data('showissue', 'true');
}
}, "json");
});
Any thoughts?
The following should work.
$('.knownissue').mouseleave(function() {
$(this).popover('hide');
});
Here is a custom jQuery event I call 'clickoutside'. It gets fired if and only if you click the mouse outside of the target element. It could easily be adapted for other event types (mousemove, keydown, etc). In your case, when fired it could close your modal.
(function ($) {
var count = 0;
$.fn.clickoutside = function (handler) {
// If the source element does not have an ID, give it one, so we can reference it
var self = $(this);
var id = self.attr('id');
if (id === '') {
id = 'clickoutside' + count++;
self.attr('id', id);
}
// Watch for the event everywhere
$('html').click(function (e) {
var source = $(e.target);
// ... but, stop it from propagating if it is inside the target
// element. The result being only events outside the target
// propagate to the top.
if (source.attr('id') == id || source.parents('#' + id).length > 0) {
return;
}
handler.call(this, e);
})
};
})(jQuery);
$('#targetElement').clickoutside(function(){
});
EDIT: Example JSFiddle.
I am trying to create a YUI 2.8.1 DataTable with a checkbox column. When the user selects the row it should highlight, but not when the user checks the checkbox.
I'm trying to suppress the rowClickEvent by setting cancelBubble = true in the checkboxClickEvent, but the YUI library ignores this. How do I prevent the rowClickEvent from firing?
this.testDataTable.subscribe("checkboxClickEvent", function (oArgs)
{
var elCheckbox = oArgs.target;
var oRecord = this.getRecord(elCheckbox);
oRecord.setData("check", elCheckbox.checked);
oArgs.event.cancelBubble = true; //Event bubbles anyway
});
return false from the checkboxClickEvent
I've worked around the issue by setting a flag to suppress row click, but I'd still like to know how to cancel the bubble "properly."
suppressHighlight = false;
this.testDataTable.onEventRowClick = function (oArgs)
{
...
if (!suppressHighlight)
{
...
}
suppressHighlight = false;
};
this.testDataTable.subscribe("rowClickEvent", this.testDataTable.onEventRowClick);
this.testDataTable.subscribe("checkboxClickEvent", function (oArgs)
{
var elCheckbox = oArgs.target;
var oRecord = this.getRecord(elCheckbox);
oRecord.setData("Check", elCheckbox.checked);
suppressHighlight = true;
});