I'm using jquery-ui tabs and jeditable to inline edit the tab title. But navigating with the cursors in the editable text leads jquery-ui to navigate to the tab next to it.
How can i prevent the jquery default behaviour (disable keyboad navigation in tabs).
Cheers,
Broncko
Solved it by:
$.widget( "ui.tabs", $.ui.tabs, {
options: {
keyboard: true
},
_tabKeydown: function(e) {
if(this.options.keyboard) {
this._super( '_tabKeydown' );
} else {
return false;
}
}
});
A better solution from here http://www.daveoncode.com/2013/09/18/how-to-disable-keyboard-navigation-in-jquery-ui-tabs/ :
jQuery('.foo').tabs({
activate: function(e, ui) {
e.currentTarget.blur();
}
});
It's possible to unbind keydown events when tabs are initialized:
$('#tabs').tabs({
create : function() {
var data = $(this).data('tabs');
data.tabs.add(data.panels).off('keydown');
}
});
Just had to do this myself. This is what worked for me:
$.widget("ui.tabs", $.ui.tabs, {
_tabKeydown: function (event) {
if (event.keyCode !== 38 && event.keyCode !== 40) {
this._super(event);
}
}
});
You can substitute any combination of keys using event.keyCode and even make it customizable with something like:
$.widget("ui.tabs", $.ui.tabs, {
options: {
overrideKeyCodes: [],
},
_tabKeydown: function (event) {
var isOverride = false;
if (Object.prototype.toString.call(this.options.overrideKeyCodes) === '[object Array]') {
for (i = 0; i < this.options.overrideKeyCodes.length; i++) {
if (event.keyCode === this.options.overrideKeyCodes[i]) {
isOverride = true;
break;
}
}
}
if (!isOverride) {
this._super(event);
}
}
});
$('#MyTabs').tabs({ overrideKeyCodes: [ 38, 40 ] });
Or even better you can add your own custom behaviors:
$.widget("ui.tabs", $.ui.tabs, {
options: {
overrideKeyCodes: {},
},
tabKeydown: function (event) {
if (this.options.overrideKeyCodes.hasOwnProperty(event.keyCode)) {
if (typeof this.options.overrideKeyCodes[event.keyCode] === 'function') {
this.options.overrideKeyCodes[event.keyCode](event, this._super(event));
}
}
else {
this._super(event);
}
}
});
$('#MyTabs').tabs({
overrideKeyCodes: {
40: function (event, callback) {
console.log(event.keyCode);
},
38: function (event, callback) {
console.log(event.keyCode);
if (callback) {
callback();
}
},
32: null //just let the space happen
}
});
Related
plotOptions: {
series: {
events: {
afterAnimate: function () {
for (let item of this.chart.legend.allItems) {
item.legendItem.on('mouseover', function (e) {
/**
* Register a callback based on the legend selected
*/
}).on('mouseout', function (e) {
/**
* Degerister a callback
})
}
}
},
I wish to add functionality when I mouseover the legend item but the above removes the default transparency functionality. How can I easily re-invoke?
You can add a part of default code for the events functions:
plotOptions: {
series: {
events: {
afterAnimate: function() {
const legend = this.chart.legend,
boxWrapper = legend.chart.renderer.boxWrapper;
for (let item of legend.allItems) {
let isPoint = item instanceof Highcharts.Point,
activeClass = 'highcharts-legend-' +
(isPoint ? 'point' : 'series') + '-active';
item.legendItem.on('mouseover', function(e) {
if (item.visible) {
legend.allItems.forEach(function(inactiveItem) {
if (item !== inactiveItem) {
inactiveItem.setState('inactive', !isPoint);
}
});
}
item.setState('hover');
if (item.visible) {
boxWrapper.addClass(activeClass);
}
}).on('mouseout', function(e) {
legend.allItems.forEach(function(inactiveItem) {
if (item !== inactiveItem) {
inactiveItem.setState('', !isPoint);
}
});
boxWrapper.removeClass(activeClass);
item.setState();
})
}
}
}
}
}
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/5000/
i am new to jquery,i need to disable[grey out] the 'Cancel SUP' button which is an jquery BUTTON WIDGET.Below is my code..please some one help me in sorting out this issue
var buttons = {
'Exi1': function() {
$(this).dialog('close');
}
};
if(batch.SUPDELIVERYMETHOD === 'Email' && details.STATUS === 'VALID') {
buttons['Re-send SUP'] = resendPass;
}
if(details.STATUS === 'VALID') {
buttons['Cancel SUP'] = function() {
$('#dialog-confirm-cancelsup').dialog('open');
};
}
Found an older answer here: How can I disable a button on a jQuery UI dialog?
You would use it like so:
https://jsfiddle.net/Twisty/ksk5skxy/
JavaScript
var btns = {
"Exi1": function(e) {
$(this).dialog('close');
}
};
if (batch.SUPDELIVERYMETHOD === 'Email' && details.STATUS === 'VALID') {
btns["Re-send SUP"] = resendPass;
}
if (details.STATUS === 'VALID') {
btns["Cancel SUP"] = function(e) {
$('#dialog-confirm-cancelsup').dialog('open');
};
}
$(function() {
$("#diag").dialog({
buttons: btns,
width: "400px"
});
$(".ui-dialog-buttonset button:contains('Cancel SUP')").button("disable");
});
I'm looking to combine sortable and selectable and want to create something something similar to handle for selectable. So in other words, if I have a list and a div inside the list elements I would be able to select the list item by just clicking on the div. So just like the handle option for sortable.
Sortable code:
$("#list3").sortable({
handle:'.PageTreeListMove',
connectWith: ".droptrue",
helper: function (e, li) {
this.copyHelper = li.clone().insertAfter(li);
$(this).data('copied', false);
return li.clone();
},
stop: function () {
var copied = $(this).data('copied');
if (!copied) {
this.copyHelper.remove();
}
this.copyHelper = null;
}
});
$("#list4").sortable({
dropOnEmpty: true,
receive: function (e, ui) {
var i=0;
ui.sender.data('copied', true);
ui.item.html('' + ui.item.text() + '<span class="PageTreeListDelete"> </span>');
ui.item.attr('id',ui.item.id);
ui.item.removeAttr('style');
ui.item.addClass("added");
var identicalItemCount = $("#list4").children('li#'+ui.item.attr('id')).length;
if (identicalItemCount > 1) {
$("#list4").children('li#'+ui.item.attr('id')).first().remove();
}
}
}).disableSelection();
**Selectable code:
$("#list3").selectable({
selecting: function(e, ui) {
var curr = $(ui.selecting.tagName, e.target).index(ui.selecting);
selectedItems.push("<li id="+$(ui.selecting).attr('id')+" class='added'><a href>"+$(ui.selecting).text()+"</a><span class='PageTreeListDelete'> </span></li>");
if(e.shiftKey&&prev>-1) {
$(ui.selecting.tagName, e.target).slice(Math.min(prev, curr), 1 + Math.max(prev, curr)).addClass('ui-selected');
} else {
prev = curr;
}
},
cancel:'ui-selected'
});
I'm trying to get a custom slider up and running using the directives concept.
I have an issue when updating the slider from the input field.
The directive part below and a working example on jsfiddle.
Why is this line $privateScope.sliderElement.slider('value', value); throwing an error and how could I solve it?
app.directive('slider', function ($parse) {
var $privateScope = {};
return {
restrict: 'A',
template: '<div class="slider"></div><div class="input-append"><input class="span1" type="text" ng-model="percentage"><span class="add-on">%</span></div>',
scope: {
slider: '#',
percentage: '='
},
controller: ['$scope', '$element', '$attrs', '$transclude', function ($scope, $element, $attrs, $transclude) {
// Why this doesn't work?
// $attrs.$observe('percentage', function (value) {
// console.log('$attrs.$observe.percentage', value);
// });
// Slider API: http://api.jqueryui.com/slider/
$privateScope.sliderElement = $('.slider', $element).slider({
value: $scope.percentage
});
}],
link: function ($scope, $element, $attrs) {
var changedBySlider = false;
$scope.$watch('percentage', function (value) {
// console.log('$scope.$watch.percentage', value);
if (changedBySlider !== true) {
console.log('change the slider');
// This throws an error
// $privateScope.sliderElement.slider('value', value);
} else {
console.log('don\'t change the slider');
changedBySlider = false;
}
});
$privateScope.sliderElement.on('slidechange', function (event, ui) {
$scope.$apply(function () {
// Why this doesn't work?
// $parse($attrs.percentage).assign($scope, ui.value);
$scope.percentage = ui.value;
changedBySlider = true;
});
});
$scope.$on('$destroy', function (event) {
console.log('on destroy');
});
}
}
});
using Highchart, how can we change the zIndex for a line according to its state, or dynamically from a click event ?
I tried :
plotOptions: {
series: {
states: {
select: {
lineWidth: 2,
zIndex:10
}
},
with : this.setState(this.state === 'select' ? '' : 'select'); in the Click event but it doesn't work.
Alright, it's definitely not pretty, but I couldn't find a way to actually set the zIndex, so I had to do some maneuvering to fake it and bring each series to the front in a certain order. Here's the snippet to include:
Highcharts.Series.prototype.setState = (function (func) {
return function () {
if (arguments.length>0){
if (arguments[0] !== ''){
if (typeof this.options.states[arguments[0]]['zIndex'] !== 'undefined'){
this.options.oldZIndex = this.group.zIndex;
this.group.zIndex = this.options.states[arguments[0]]['zIndex'];
}
}else{
if (typeof this.options['oldZIndex'] !== "undefined"){
this.group.zIndex = this.options['oldZIndex'];
}
}
var order = [], i = 0;
$.each(this.chart.series, function(){
order.push({id:i,zIndex:this.group.zIndex,me:this});
i++;
});
order.sort(function(a,b){return (a.zIndex>b.zIndex) ? 1 : -1;});
$.each(order, function(){
this.me.group.toFront();
});
func.apply(this, arguments);
}
};
} (Highcharts.Series.prototype.setState));
And here's the JSFiddle demonstrating:
http://jsfiddle.net/G9d9H/9/
Let me know if that's what you needed.
I think a better solution is to set the series.group.toFront() method on click (I prefer to use it on mouseover)
plotOptions: {
series: {
events: {
click: function () {
this.group.toFront();//bring series to front when hovered over
}
}
}
}