I've built a custom posts view, with a button for a popup for each item in the view.
it all worked fine until i tried to turn the view into a slider.
this is the JS:
jQuery(document).ready(function( $ ){
//this is for making the modal widow draggable//
$( function() {
$( ".modal-content" ).draggable();
});
//this is for making single radio inputs vertically aligned properly (vs. double radio inputs) - in two different places//
$('.productdetails .alg_variations_table').each(function() {
if($(this).find('tr').length < 2) {
$(this).css("margin-top", "10px");
}
});
$('.relatedproducts .productdetails .alg_variations_table').each(function() {
if($(this).find('tr').length < 2) {
$(this).css("margin-top", "6px");
}
});
//this if for popping up the modal//
$("a[data-toggle=modal]").click(function() {
$(this).parent().find('.modal').toggleClass('seemodal');
});
//this is for closing the modal by pressing the close button//
$(".iziModal-button-close").click(function() {
$(this).closest('.modal').toggleClass('seemodal');
});
//this is for closing the popup when pressing esc//
$(document).keydown(function(e){
if(e.keyCode == 27) {
$('.modal').removeClass('seemodal');
}
});
//basically each item has either 1 image or two images. 2 images are swapped on hover. this is to make sure when there's only 1 image, there want be an attempt to swap//
$(".col-sm-4 .vgw-item-i").mouseover(function() {
function isEmpty( el ){
return !$.trim(el.html())
}
if (isEmpty($(this).find(".second"))) {
$(this).find(".primary_image").css({"opacity": "1", "animation": "none"});
$(this).find(".second img").css({"opacity": "0", "transition": "none", "-o-transition": "none", "-moz-transition": "none"});
$(this).find(".second").css("opacity", "0");
}
});
});
I tried cloning this code and putting it ALSO between:
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
});
It does the job, but WAY too slowly. and sometimes it gets stuck.
you can see here:
hidden link
any ideas on how i'm making this flow more easily?
as a temp solution i built a jquery slider from scratch to allow me to implement two such sliders in one page.
but i still need to figure out how to do it with toolset - it seems like 2 paginated views in 1 page isn't that great.
here's the slider code if anyone needs. customize as you wish:
Mmmm I do nto see any reason why your initial code should take that much to be executed after the Views AJAX pagination has completed. I mean, it is applyign the same as in your first pageload.
However, I see that we can have some room for improvements. In your initial code, you are attaching some calbacks to some events triggered over some elements. When the View paginates, those elements are removed and replaced by new items, hence you seem to need to re-enable those event calbacks on them. Well, you do not really need to, if you attach the events callbacks a little differently. That would at least allow you to avoid the click and mouseover callbacks re-addition: https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements
Now, we can not avoid the part about initializing the draggable thing (which will probably be the most expensive operation in all the code) or the CSS adjustments, but at least avoid some expensive operations.
