I try to use multiple filters inside portfolio-like page which uses Isotope.js. Please take a look at this page: http://decart-design.com/avancia-wp/vi-tilbyr/. Single filter works fine but not multiple filters don't :( Here's a piece of JS code I use:
jQuery('.filtering li').on('click', 'a', function(e) {
e.preventDefault();
if ( jQuery(this).parent().hasClass('selected') ) {
return;
}
var filters = {},
optionSet = jQuery(this).parents('.option-set');
jQuery(this).parent().parent().find('li').removeClass('selected');
jQuery(this).parent().addClass('selected');
var group = optionSet.data('filter-group');
filters[group] = jQuery(this).data('filter');
var isoFilters = [];
for ( var prop in filters ) {
isoFilters.push( filters[prop] );
}
var selector = isoFilters.join('');
var portfolioItems = jQuery(this).parent().parent().parent().parent().find('.filterable-items');
portfolioItems.isotope({ filter: selector });
console.log(selector);
return false;
});
For some reason (I don't why) but isoFilters.push( filters[prop] ); just doesn't work. After I click a second filter the items array just replaced with new value instead of adding it to this array. As you can see in console it just replaced with new value instead of adding it to the array. It's so strange...
Here's a working example from author's website: http://isotope.metafizzy.co/demos/combination-filters.html.
Could please someone help me to figure out what I make wrong?
Thank you in advance! Hope someone can help me to solve this problem.
Best regards,
Alex
I've found a way to solve this issue. Here's a proper code:
jQuery('.filtering li').on('click', 'a', function(e) {
e.preventDefault();
if ( jQuery(this).parent().hasClass('selected') ) {
return;
}
jQuery(this).parent().parent().find('li').removeClass('selected');
jQuery(this).parent().addClass('selected');
var isoFilters = [];
var elems = jQuery(this).parents('.filter-wrap').find('li.selected a');
jQuery.each(elems, function(i, e){
isoFilters.push(jQuery(e).attr('data-filter'));
});
var selector = isoFilters.join('');
var portfolioItems = jQuery(this).parent().parent().parent().parent().find('.filterable-items');
portfolioItems.isotope({ filter: selector });
console.log(selector);
return false;
});
Hope this will help someone who stuck with similar problem.
Related
I am getting a list of options for a select from a server and populating an observableArray. Then I would like to set the selected item to a predefined value. I have a very simple jsFiddle that emulates pulling data from a server with a button click.
http://jsfiddle.net/JonathanN/hev1rqeu/
Here's the Javascript with the basic attempt:
(function() {
var vm = (function() {
var self = this;
self.array = ko.observableArray([]);
self.selectedValue = ko.observable();
self.useSetTimeout = ko.observable(false);
self.array.subscribe(function(newValue) {
self.selectedValue('b');
});
self.populate = function() {
self.array(['a','b','c']);
};
}());
ko.applyBindings(vm);
}());
And here's my workaround, which replaces "self.selectedValue('b');":
var waitForSelectToPopulate = function() {
self.selectedValue('b');
if(self.selectedValue() != 'b') {
setTimeout(waitForSelectToPopulate, 10);
}
};
waitForSelectToPopulate();
I am not very fond of this as a workaround. It seems like there should be a reasonable way to handle this, but just setting the value on subscribe trigger doesn't seem to work.
You need optionsAfterRender. Here's a fiddle:
http://jsfiddle.net/sifriday/hev1rqeu/4/
HTML -
<select data-bind="options: array, value: selectedValue, optionsAfterRender: setVal">
JS addition -
self.setVal = function() {
self.selectedValue('b');
}
Docs - http://knockoutjs.com/documentation/options-binding.html - and scroll down to Note 2
Once the populate event has gone and got the json and placed it into your array, why not just set the value right after? as soon as you set the data inside of self.array it will update.
(function() {
var vm = (function() {
var self = this;
self.array = ko.observableArray([]);
self.selectedValue = ko.observable();
self.populate = function() {
// magical assmagic goes and get's json, and converts it to ['a','b','c']
self.array(['a','b','c']); // dropdown is now populated
self.selectedValue('c'); // therefore we can set it to a valid value
};
}());
ko.applyBindings(vm);
}());
see the following:
http://jsfiddle.net/hev1rqeu/5/
My problem is when I check one of the checkboxs and then I search it, the checkbox will change to uncheck. and I don`t know what's wrong with my livesearch, it is not working.
please check this link to test.
http://jsfiddle.net/v921/KmVHf/4/
is is my javascript
var tr = $(".AvailableGroupLab").clone().html();
function filter(element) {
$('.AvailableGroupLab').html(tr);
var value = $(element).val().toLowerCase();
$(".AvailableGroupLab tr").each(function () {
if ($(this).text().toLowerCase().search(value) == -1){
$(this).remove();
}
});
}
Try
function filter(element) {
var $trs = $('.AvailableGroupLab tr').hide();
var regexp = new RegExp($(element).val(), 'i');
var $valid = $trs.filter(function () {
return regexp.test($(this).children(':nth-child(2)').text())
}).show();
$trs.not($valid).hide()
}
$('input:text').on('keyup change', function () {
filter(this);
})
Demo: Fiddle
I'm using a kendo grid.
I want to add a slide-down animation - when I click on a row in the grid it expands with animation
(the expansion happens with grid.ExpandRow function - kendo inner).
I think that I need the animation on k-detail-row element.
But I still cant find the proper place/way to do that.
Anyone did that already, and can help me with that.
Unfortunately animations are not supported for table rows. Here is a related question: How to Use slideDown (or show) function on a table row?
I had the same question, and although this is an old post, I figured someone might need it.
Unfortunately Kendo does not support this functionality as yet, however there is a solution.
Kendo uses the jquery toggle() to show and hide the detail row, thus by performing a conditional override on the jQuery you can insert animation.
jQuery(function($) {
var _oldShow = $.fn.show;
var _oldHide = $.fn.hide;
$.fn.show = function(speed, oldCallback) {
return $(this).each(function(index, item) {
var obj = $(item);
_oldShow.apply(obj, [speed, oldCallback]);
if (obj.hasClass("k-detail-row")) {
obj.find(".k-grid.k-widget").each(function () {
var grid = $(this);
grid.slideDown(300);
});
}
});
}
$.fn.hide = function (speed, oldCallback) {
return $(this).each(function () {
var obj = $(this);
if (obj.hasClass("k-detail-row")) {
obj.find(".k-grid.k-widget").each(function () {
$(this).slideUp(300, function () { _oldHide.apply(obj, [speed, oldCallback]); });
});
} else {
_oldHide.apply(obj, [speed, oldCallback]);
}
});
}
});
I ran into this issue today and managed to solve it using the detailExpand function of the grid. You can then use the Kendo Fx slidedown effect to make the detail row slide down. For example:
detailExpand: function (e) {
var detailRow = e.detailRow;
setTimeout(function () {
kendo.fx(detailRow).slideIn("down").duration(375).play();
}, 0);
}
For more information, please check:
Detailexpand documentation
Kendo Fx documentation
A while back I found some code that allows you to filter the contents of a SELECT by typing in a text element. It works well however, over time the performance degrades pretty badly. I'm not sure if it is the filter code or the way in which I am activating it.
The SELECT shows up in a modal dialog (bootstrap) so I have the following code:
$('#myModal').on('shown', function () {
$(".focusable").val("").focus();
var select = $('#myModal').find(".modal-body").find("select");
var text = $('#myModal').find(".modal-body").find("input[type='text']");
select.filterByText(text, true);
});
And here is the filter code:
jQuery.fn.filterByText = function (textbox, selectSingleMatch) {
return this.each(function () {
var select = this;
var options = [];
$(select).find('option').each(function () {
options.push({value:$(this).val(), text:$(this).text(), data:$(this).data("short-name")});
});
$(select).data('options', options);
$(textbox).bind('change keyup', function () {
var options = $(select).empty().data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search, 'gi');
$.each(options, function (i) {
var option = options[i];
if (option.text.match(regex) !== null) {
var copyOption = $('<option>').text(option.text).val(option.value);
copyOption.data("short-name", option.data);
$(select).append(copyOption);
}
});
if (selectSingleMatch === true &&
$(select).children().length === 1) {
$(select).children().get(0).selected = true;
}
});
});
};
Can anyone shed some light on where my performance issue(s) might be and how to solve it?
reading through the comments I would suggest to add the following:
$(textbox).bind('change keyup', function(event) {
console.log(event);
// your code
});
Is the event triggered more than once on a single keyup after some times the dialog is shown?
$('#myModal').on('hidden', function () {
$('#myModal').find(".modal-body").find("input[type='text']").off("change keyup");
});
Dialog windows for CKEditor by default appear in the middle of the page but if the page is an iframe with a big height the dialogs appear way down the page.
Is it possible to configure CKEditor to position the dialogs in a different quadrant of the page? For example top middle?
Yes, the link MDaubs gives will guide you to do what you want.
I've had to do this in the past and the following snippet will demonstrate a solution for your problem:
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
dialogDefinition.onShow = function() {
this.move(this.getPosition().x,0); // Top center
}
})
You can place this in the config file or the ready function for jQuery.
The solution by zaf works in that it helps to position the dialog, but I've found it to produce a bunch of side effects as to how the dialog functions (failing to display the URL of the image in the image dialog is one example).
It turned out that the original onShow() method that is being overridden returns a meaningful value that we should keep. This could be due to a plugin or something, but here's the code that ultimately worked for me:
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
var onShow = dialogDefinition.onShow;
dialogDefinition.onShow = function() {
var result = onShow.call(this);
this.move(this.getPosition().x, $(e.editor.container.$).position().top);
return result;
}
});
This may be way you're looking for:
Programatically set the position of CKEditor's dialogs
I just had the same issue as Yehonatan and found this question really fast via Google. But after using the answer provided by zaf I still didn't get a dialog to appear in the proper position when the editor is loaded within an iframe.
In stead of the position() method I used the offset() method to place a dialog right under the toolbar. Together with the response of jonespm I came to this code that seems to work very good, also with existing dialogs.
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
var onShow = dialogDefinition.onShow;
dialogDefinition.onShow = function() {
this.move(this.getPosition().x, jQuery(this.getParentEditor().container.$).offset().top);
if (typeof onShow !== 'undefined' && typeof onShow.call === 'function')
{
return onShow.call(this);
}
}
});
Hopefully this code can help others with the same issue as me.
Correct syntax is:
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
var dialog = dialogDefinition.dialog;
if (dialogName == 'image2') {
dialogDefinition.onShow = CKEDITOR.tools.override(dialogDefinition.onShow, function(original) {
return function() {
original.call(this);
CKEDITOR.tools.setTimeout( function() {
/*do anything: this.move(this.getPosition().x, $(e.editor.container.$).position().top);*/
}, 0);
}
});
}
});