I have built an slickgrid with two checkbox columns. I use a slick formatter to built second checkbox column:
(function ($) {
// register namespace
$.extend(true, window, {
"Slick": {
"Formatters": {
"Checkbox": Checkbox
}
}
});
function Checkbox(row, cell, value, columnDef, dataContext) {
return '<input type="checkbox" >';
}
})(jQuery);
And this is the jsFiddle example: http://jsfiddle.net/9mb4T/10/
The problem is that if I click on second checkbox, this checkbox does not get marked. Slickgrid may be hiding the event.
Any idea?
Thanks in advance!
Edit: This is only happening when I build Slickgrid inside Jquery dialog.
This is a z-index problem. The cells containing your checkboxes have an explicit z-index of 1 from SlickGrid, while the jQuery UI dialog has a (dynamically calculated) one of 1002. For this reason, your clicks aren't getting through to the checkboxes.
You can fix by tweaking the SlickGrid style, either in the referenced slick.grid.css or specifically for your example case, shown here:
#grid .slick-cell {
z-index: auto;
}
Here's a forked fiddle demonstrating this approach: http://jsfiddle.net/bargar/JPqpa/
Related
I'm trying to manually close a tooltip. The tooltip is created on a table using the items option to select some td's. When the td is clicked, it should close the tooltip. This doesn't seem to work.
<table id="thingtable">
<tr><td class="thing one">One</td></tr>
<tr><td class="thing">Two</td></tr>
</table>
$("#thingtable").tooltip({
items: ".thing",
content: "Thing"
});
$(".one").click(function (e) {
$("#thingtable").tooltip("close");
});
If I instead add the tooltips directly to the td's, then it works.
$(".thing").each(function (index) {
$(this).tooltip({
items: ".thing",
content: "Thing"
});
});
$(".one").click(function (e) {
var td = $(e.target);
td.tooltip("close");
});
Here is a fiddle. Clicking on One in the fiddle doesn't close the tooltip, but clicking on Three does.
Having to add a tooltip to each td seems wrong, especially when the table approach works other than this manual close issue. Is that the route I must take?
In the click event, you need to use the close and the disable methods. The caveat is if you want them to be enabled for use later. Here is a way to do that.
Working example: https://jsfiddle.net/Twisty/hn4tqzrL/2/
JavaScript
$(".one").click(function() {
console.log("Thing One clicked.");
$("#thingtable").tooltip("close").tooltip("disable");
}).hover(function() {
$("#thingtable").tooltip("enable");
}, function() {
$("#thingtable").tooltip("enable");
});
Making use of .hover() we can detect when the mouse has moved in and out and trigger the enable method. Technically, we do not need to take any action with the handlerIn function.
I have a need to capture an event (like a click) on a object that is elsewhere on the page and not a child of the select2 object while the select2 object has focus and is showing results. When the select2 results object is focused, I cannot click on a button/anchor elsewhere on the page and have it perform its action. It merely closes the select2 object.
Is there a way to do this? Here is a demo that shows this behavior: http://codepen.io/anon/pen/JoJobW
<!-- Javascript snippet -->
$(document).ready(function() {
$("#e1").select2();
$("#e2").click(function(){
alert("click!");
e.preventDefault();
});
});
<!-- HTML snippet -->
<select id="e1"></select>
Click here when select2 is focused
Using select2 v3.5.2 and jQuery 1.11.0
Select2 places a "mask" element behind the drop-down that captures the mouse click. Others have complained about this.
Here is a jsfiddle that shows the mask element.
You could try to remove the mask element when the drop-down is opened.
$('#e1').select2().on('select2-open', function() {
$('.select2-drop-mask').remove();
});
Of course, this means the drop-down will not close when the user clicks off of it, but you could add an event handler on the document (or body) to do that.
$(document).click(function() {
$("#e1").select2('close');
});
You have to make sure the click event on the other element does not propagate to the document in that case.
$('#e2').click(function() {
alert('click!');
return false; // Prevent default action and stop propagation.
});
jsfiddle
I would like to add an animation to collapsible set with jQuery Mobile.
Let me show a simple example of this:
<div id="tiles" data-role="collapsible-set" data-iconpos="right">
<div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
<div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
<div class="tile" data-role="collapsible" data-iconpos="right">blablabla</div>
</div>
jQuery Mobile handles this perfectly and shows me collapsible set of 3 items. What I want is ANIMATION, however I seem not to find anything in the docs.
I haven't tested yet how simple CSS animation(animating height property) would work, however is there a jQuery Mobile way of doing it like turning some internal flag ?
EDIT
I have tested out a simple jQuery animate method and it actually works. Just in case anyone else needs this. It runs smoothly even on my 528MHz Android phone on a default browser. A snippet I have added is really simple:
$( ".ui-collapsible-heading" ).live( "click", function(event, ui) {
$(this).next().css('height', '0').animate({
height: '100px'
});
});
Here ya go:
$('[data-role="collapsible"]').bind('expand collapse', function (event) {
$(this).find('p').slideToggle(500);
return false;
});
I liked the idea you were going for so I played around with it a bit. This hooks into the way jQuery Mobile controls collapsible widgets so it's a bit less hacky then binding to the heading element.
The return false; stops the default behavior and the other line toggles the content in/out of view using the jQuery slideUp/slideDown animations. You could also use .fadeToggle() or roll your own animations. If you check event.type you can animate based on the event fired.
Here is a demo: http://jsfiddle.net/VtVFB/
Please note that in jQuery Mobile 1.4 and up you need to bind to the collapsibleexpand and collapsiblecollapse events instead of expand and collapse. So the complete code becomes
$('[data-role="collapsible"]').on('collapsibleexpand collapsiblecollapse', function(event) {
$(this).find('p').slideToggle(500);
return false;
});
The code is not entirely right.
It overrides the default jquery mobile implementation of the expand collapse events,
but does not handle the change of the expand collapse icons.
A better code will be:
$('[data-role="collapsible"] h3:first').bind('click', function (event) {
$(this).next('p').slideToggle(500);
return false;
});
The accepted answer doesnt account for that it doesnt change the collapsible cursor because of return false, so this is my answer working:
In my Project it was the contents relative to the [date-role="collapsible"] are $(this).find('>*:not(h3)')
/* animate collapsible-set */
$('[data-role="collapsible"]').on('expand', function (event) {
$(this).find('>*:not(h3)').each(function() {
if (!$(this).is(':visible')) {
$(this).stop().slideToggle();
}
});
}).on('collapse', function (event) {
$(this).find('>*:not(h3)').each(function() {
if ($(this).is(':visible')) {
$(this).stop().slideToggle();
}
});
});
I am working on drag and drop tool using jQuery UI's sortable widget.
I'd like to add a message into an empty div where something can be dragged into, like: "drag here". I'd like to remove this message as soon as something is in that div. There will be times when the page loads with something already in that div, so it can't be only on action, but onload needs to check it too.
How do I go about it?
Here's my code:
$("#divFrom, #divTo").sortable({
connectWith: '.connectedSortable'
}).disableSelection();
You should be able to set up a draggable, and droppable and tap into droppable's drop event handler, which is fired when an item is dropped:
$("#target").droppable({
drop: function() {
// Empty the droppable div:
$(".message").remove();
}
});
Demo here: http://jsfiddle.net/andrewwhitaker/rUgJF/2/
As for doing something similar on load, if you provided your markup it would make providing a solution a little easier (is there a specific element inside the droppable div that you could check for?)
Hope that helps.
I'm using the Accordion widget from jQuery UI.
Whenever I click a header to expand a section, that header (actually, the link inside the h3 element) is highlighted. In Chrome it has a blue highlight as if it were the currently selected field in a form.
I need to get rid of the blue highlight, so I hacked together the code below, and it seems to work so far.
However, I'm wondering if there's a better/cleaner way to do this in jQuery. Is this right??
$(function() {
$( "#mainnav" ).accordion().blur($('#mainnav'));
});
I didn't need jQuery to fix the problem after all (.blur() didn't seem to work).
jQuery was adding a class = "ui-state-focus" to the html, so I used CSS to indicate that this class shouldn't be outlined/highlighted, like so...
#mainnav .ui-state-focus {
outline: none;
}
For me works this for JQuery UI 1.9.2, Tabs widget:
#mainnav .ui-tabs-anchor {
outline: none;
}