We Keep Coding

Pagination works but doesn't reattach javascript / css class on reload

Im building a new personal blog and I'm using ajax to post back to a C# Controller to get the results for pagination.
Page 2 loads with the results however, none of the javascript is reloaded because, I believe, when I partially reload the pagination part of the page, it destroys everything in the DOM and because the full page doesn't reload, the javascript isn't invoked.
So I'm looking for a bit of help on working out how to get the external javascript to run again. What it does is adds css classes, gives some fade effects etc.
success: function (data) {
if (data != null) {
var page = data
$('#blogsContainer').empty();
$('#blogsContainer').replaceWith(page);
So the success works, I clear out the blogsContainer with the new data.
I'm guessing I need to add a function after the replace to then apply everything that is in an external main.js file.
The main.js file looks like this
(function($) {
var contentWayPoint = function() {
var i = 0;
$('.ftco-animate').waypoint( function( direction ) {
if( direction === 'down' && !$(this.element).hasClass('ftco-animated') ) {
i++;
$(this.element).addClass('item-animate');
setTimeout(function(){
$('body .ftco-animate.item-animate').each(function(k){
var el = $(this);
setTimeout( function () {
var effect = el.data('animate-effect');
if ( effect === 'fadeIn') {
el.addClass('fadeIn ftco-animated');
} else if ( effect === 'fadeInLeft') {
el.addClass('fadeInLeft ftco-animated');
} else if ( effect === 'fadeInRight') {
el.addClass('fadeInRight ftco-animated');
} else {
el.addClass('fadeInUp ftco-animated');
}
el.removeClass('item-animate');
}, k * 50, 'easeInOutExpo' );
});
}, 100);
}
} , { offset: '95%' } );
};
contentWayPoint();
}
The first page has the following applied to it on page load:
<div class="col-md-4 d-flex ftco-animate fadeInUp ftco-animated">
<div class="blog-entry justify-content-end">
...
</div>
</div>
But as you can see, when I press page 2, the div is missing some key css
<div class="col-md-4 d-flex ftco-animate">
<div class="blog-entry justify-content-end">
</div>
</div>
How would I apply the missing css after the partial reload with ajax?
I hope this is clear what I am trying to do but if not, please just ask.

I think the solution may be to re-execute the contentWayPoint() function at the end of the success callback. However, its likely out of scope by then. There are two simple ways to ensure its not :
The cleanest would be to ensure that the code that sets up your pagination is inside the same (function($) {}) block in main.js - that way it will "capture" the function.
The other, dirtier way, would be to change var contentWaypoint= function... to window.contentWaypoint = function - then use window.contentWaypoint() whenever you need to invoke it. THere are much better ways to doing this, but that might get you going.

WordPress dropdown menus overlapping - hovering one opens another

So I'm creating a theme for WP, and the menu is acting up. I suppose the dropdowns somehow overlap in the back, sometimes when I hover over one item, its submenu opens, but as I move the curses towards its submenu, the submenu of the item next to it opens instead.
Example:
Any ideas?
EDIT:
I noticed that when I hover over a top-level menu item for more than 2 seconds and then move the curser towards the submenu, the glitch doesn't happen.
What I found after doing a lot of digging is that once I hover over a top-level menu item, there is a class being added to it by my theme (Divi), and when I move the curser to another, the class is removed, but with a certain delay, so when I hover over a new top-level menu item, the previously hovered one still has the class appended to it for about 1 second.
I found the following code in the theme's files and I assume it is to blame, however I tried changing the 200 to 0 and the delay is still taking place (I'm tracking the classes being added and removed as I hover using DevTools on Chrome):
window.et_pb_toggle_nav_menu = function($element, state, delay) {
if ( 'open' === state ) {
if ( ! $element.closest( 'li.mega-menu' ).length || $element.hasClass( 'mega-menu' ) ) {
$element.addClass( 'et-show-dropdown' );
$element.removeClass( 'et-hover' ).addClass( 'et-hover' );
}
} else {
var closeDelay = typeof delay !== 'undefined' ? delay : 200;
$element.removeClass( 'et-show-dropdown' );
$element.removeClass( 'et-touch-hover' );
setTimeout( function() {
if ( ! $element.hasClass( 'et-show-dropdown' ) ) {
$element.removeClass( 'et-hover' );
}
}, closeDelay );
}
};

Have you tried playing with the z-index on hover? Something like:
.item {
z-index: 0;
&:hover {
z-index: 1;
}
}
I'm guessing right now without the code to use as a reference.

Wordpress Customizer content specific controls

i'm struggeling with one challenge to do in my custom theme for Wordpress. I want to have content specific controls in my Theme Customizer. I know there is option "active_callback", but this is not sufficient for my purpose and i read 2 documentation articles about customizer and this https://make.wordpress.org/core/2014/07/08/customizer-improvements-in-4-0/ article, but still have no clue, here is what i want to achieve:
For example, i want to have "show sidebar" checkbox, but this checkbox should be more contextual specifix. For example, when i will be on homepage, there will be just one checkbox as "Show sidebar default" but when i will go into some post, i want there 3 checkboxes:
"Show sidebar default" - id="show_sidebar"
"Show sidebar in Post archive page" - id="show_sidebar_archive_{post_type}"
"Show sidebar for this post" - id="show_sidebar_singular_{post_id}"
So when i want to have this kind of specific IDs for control, just active_callback is not enought, becauce it can just show/hide controls, i can't create new when URL in iframe changes.
There could be 2 sollutions:
1. Better - when i could somehow create/remove controls by context, it would be best solution. If it's somehow possible with customizer API, give me som hint please
2. Not good, but sufficient - is at least possible somehow reload whole /wp-admin/customize.php?url= with new clicked url? this could be enought for a while
thx for any advices!

Ok, i figured out that second solution, here is code. It's enought for me for now.
'use strict';
(function ($) {
/**
* This is important fix for Theme Customizer
* It will change whole customizer url, because we need to load
* all controls ahan for new url, because of hierarchical options
*/
if ( /\/customize\.php$/.test( window.location.pathname ) ) {
wp.customize.bind( 'preview-ready', function() {
var body = $( 'body' );
body.off( 'click.preview' );
body.on( 'click.preview', 'a[href]', function( event ) {
var link, isInternalJumpLink;
link = $( this );
isInternalJumpLink = ( '#' === link.attr( 'href' ).substr( 0, 1 ) );
event.preventDefault();
if ( isInternalJumpLink && '#' !== link.attr( 'href' ) ) {
$( link.attr( 'href' ) ).each( function() {
this.scrollIntoView();
} );
}
/*
* Note the shift key is checked so shift+click on widgets or
* nav menu items can just result on focusing on the corresponding
* control instead of also navigating to the URL linked to.
*/
if ( event.shiftKey || isInternalJumpLink ) {
return;
}
//self.send( 'scroll', 0 );
//self.send( 'url', link.prop( 'href' ) );
var newUrl = link.prop( 'href' );
var currentUrl = window.location.href;
var customizeUrl = currentUrl.substring(0, currentUrl.indexOf("?url=") + 5) + newUrl;
// Reload whole customizer for new url
window.parent.location.replace(customizeUrl);
});
} );
}
})(jQuery);
//# sourceMappingURL=customizer.js.map

How to disable NEXT button on step 1 of FuelUX Wizard

I am creating a wizard control pages using the FuelUX wizard plugin
http://getfuelux.com/javascript.html#wizard
And I am trying to disable the NEXT button only on the STEP1 of the wizard.
Kindly check this image for better understanding:
http://i.imgur.com/xlhwu2j.png
I would love to have some help on this. Let me know if need anything from my side.

Ok. After much research I just have this solution for you. You need to modify the plugin fuelux.js. Take unminified version of fuelux.js and find below line of code
var canMovePrev = ( this.currentStep > 1 ); //remember, steps index is 1 based...
var isFirstStep = ( this.currentStep === 1 );
var isLastStep = ( this.currentStep === this.numSteps );
// disable buttons based on current step
if ( !this.options.disablePreviousStep ) {
this.$prevBtn.attr( 'disabled', ( isFirstStep === true || canMovePrev === false ) );
}
// change button text of last step, if specified
var last = this.$nextBtn.attr( 'data-last' );
if(isFirstStep) //Add this line
{
this.$nextBtn.attr( 'disabled', ( isFirstStep === true || canMoveNext === false ) );
}
The above line you can find it in setState: function() { which is in
Line number 3652
Let me know if you face any issue
EDIT: and to work with you alternate next button you can write it as below
$(document).ready(function(){
$('.btnext').on('click',function(){
$('.wizard').wizard('next');
$nextBtn = $('.wizard').find( 'button.btn-next' );
$nextBtn.removeAttr('disabled');
});
});
Add your alternate button wherever you want and just add a class btnext to it.

I really tried all the suggestions given by peoples. I dont know why none seemed to work for me. May be bacause I didn't provide enough information. Out of several methods I tried. I found this one to be the easiest.
protected void NextButton_Click(object sender, WizardNavigationEventArgs e)
{
//Suppose You have a control on your webpage. Just check if it has
//the information you require. In my case lblpasskeytextbox
//and if the condtion is not fulfilled I am not letting user to move
//next page
if (lblPasskeyInformation.Text[0] == 'I')
{
e.Cancel = true;
return;
}
}

After reading the fuel ux documentation, here seems to be a hack that allows you to disable a specific step without modifying any source fuelux.js code.
$wizard.on('actionclicked.fu.wizard', function (evt) {
//Check the current step
var currentStep = $wizard.wizard('selectedItem').step;
//If current step needs to be disabled, disable it and then return.
if (currentStep === 1)
{
evt.preventDefault();
return;
}
});
Please note that $wizard here is just my way of saying $('#myWizard') as described in the fuel ux documentation.

how to get the height of an element after inserting content via AJAX?

I have a Jquery Mobile page into which I'm loading a form via AJAX. I'm setting the page dimensions using a plugin, which calculates dimensions AFTER the Ajax has run and the layout has been updated (at least the below consoles come in afterwards).
I need to get the height of the element that received the content, but no matter what I try, I'm just getting rubbish ( ~ 169px instead of some 1200px)
Here is my code:
(inside plugin)
some: function(){
var self = this,
o = self.options,
wrap = $('div:jqmData(wrapper="true").ui-page-active').last(),
// elements
panels = wrap.find('.ui-panel.ui-panel-active').filter(':not(.ui-popover)'),
pages = panels.find('.ui-page'),
contents = pages.find('.ui-content');
// maxHeight contents
for ( var i = 0; i < contents.length; i++){
ct = contents.eq(i);
console.log( ct );
console.log( ct.css("height") )
console.log( ct.height() );
console.log( ct.outerHeight() );
// max
if ( ct.css("height") > parseFloat( o._iPadFixHeight ) ){
o._iPadFixHeight = parseFloat( ct.css("height") ) + parseFloat( ct.css('padding-top')) + parseFloat( ct.css('padding-bottom')) ;
};
}
...
If I'm not using any AJAX this works correctly. If I'm adding content dynamically via AJAX, the consoles all fire after the AJAX, but still only return false values.
Question:
How can I reliably get the content element height after an AJAX update? I tried setting a 10sec timeout after Ajax to wait until everything is there. No difference, after 10sec the content element height is still not correct.
Thanks for help!
EDIT:
Although the consoles log AFTER the AJAX load, I think the function is firing before, so it's calcualting based on pre-AJAX dimensions. I'm thinking to re-fire using this:
$(window).on('dimensionchange', function(){
self.ome();
})
And triggering
$(window).trigger('dimensionchange')
in my AJAX success handler. Not perfect, but I guess this will do.
EDIT2:
Got it to work. #HolgerDSchauf was correct. On my first function run, I set the false values and then after AJAX came in, the false value were still set. I'm now fixing it like this:
Ajax Success:
...
// cleanup dimensions
$(window).trigger( 'dimensionclear');
...
window.setTimeout(function() {
target.removeClass('.fade.in');
// recalculate
$(window).trigger('dimensionchange');
},250);
In my plugin:
$(window).on('dimensionchange', function(){
self.ome();
});
$(window).on('dimensionclear', function(){
self.ome("clear");
});
And in OME function:
// cleanup
if ( from == "clear") {
contents.css({'height':'', 'max-height':''})
return;
}
Works like a charm.

I use this function to keep all my div's updated sizes. Use something like this, but do not forget to call it when document is ready.
function framing() {
/*
Pre : ready.js, self
Post : design.js->framing
Author : Enes Ü.
Date : 15:30, 05 May 12
Summary : framing the page widthly/heightly
Bugs/TODOs : Frame heights are anormal and will be fixed. Prior=5
*/
$("#right_menu").width($("#main").width()-$("#left_menu").width());
$("#left_menu").height(getWinHeight());
$("#top_menu").width($("#main").width()-$("#left_menu").width());
$("#right_menu").height(getWinHeight()-$("#top_menu").height());
$("#map_container").height(getWinHeight());
/*
******* lots of lines like above...
*/
setTimeout(framing,100);
}

you used an cache element with "wrap, panels, ct" refresh this cached variable or use it instantly