Develop Reference

Scripts not loading after loading new page using AJAX (Barba.js)

I'm exploring the option of using AJAX to give elegant page transitions.
I've tried two methods, the first being a manually coded option taken from this page (https://codyhouse.co/gem/animated-page-transition) and the second option using Barba.js (http://barbajs.org).
With both options the scripts on the website work when the first page is loaded, but when a link is clicked and a different page is loaded via AJAX, none of the scripts work.
Originally I had my scripts loaded into the end of each page using an embedded html file (I'm using ExpressionEngine). After reading a number of posts on this site I thought it might help to put the scripts into their own JS file so that this is cached and each page can then use these scripts but this didn't work either.
Is there a way to tell AJAX or Barba.js to run the scripts each time it changes the page?
Here's my code to start Barba:
<script type="text/javascript">
$(document).ready(function () {
// START BARBA.JS
Barba.Pjax.start();
// BARBA.JS PAGE TRANSITIONS
Barba.Pjax.start();
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
/**
* This function is automatically called as soon the Transition starts
* this.newContainerLoading is a Promise for the loading of the new container
* (Barba.js also comes with an handy Promise polyfill!)
*/
// As soon the loading is finished and the old page is faded out, let's fade the new page
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function() {
/**
* this.oldContainer is the HTMLElement of the old Container
*/
return $(this.oldContainer).animate({ opacity: 0 }).promise();
},
fadeIn: function() {
/**
* this.newContainer is the HTMLElement of the new Container
* At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden)
* Please note, newContainer is available just after newContainerLoading is resolved!
*/
var _this = this;
var $el = $(this.newContainer);
$(this.oldContainer).hide();
$el.css({
visibility : 'visible',
opacity : 0
});
$el.animate({ opacity: 1 }, 400, function() {
/**
* Do not forget to call .done() as soon your transition is finished!
* .done() will automatically remove from the DOM the old Container
*/
_this.done();
});
}
});
/**
* Next step, you have to tell Barba to use the new Transition
*/
Barba.Pjax.getTransition = function() {
/**
* Here you can use your own logic!
* For example you can use different Transition based on the current page or link...
*/
return FadeTransition;
};
});
</script>
And here's the script that I'm trying to get to work:
// DROPDOWN MENU
$(function(){
$("ul.dropdown li").hover(function(){
$(this).addClass("hover");
$('ul:first',this).css('visibility', 'visible');
}, function(){
$(this).removeClass("hover");
$('ul:first',this).css('visibility', 'hidden');
});
$("ul.dropdown li ul li:has(ul)").find("a:first").addClass("arrow");
});
Thanks in advance,
Tom

I don't meet barba.js, but in jquery when we use $(function{...}); is like use $(document).ready(function(){...}); It's launched when document is ready. Probably is not launched when your animation ends. I'm not sure, but you can try creating different views, and write your custom javascript code inside onEnter callback method:
view:
<div class="barba-container" data-namespace="homepage">
javscript:
var Homepage = Barba.BaseView.extend({
namespace: 'homepage',
onEnter: function() {
// The new Container is ready and attached to the DOM.
YOUR JS !!!!
},
onEnterCompleted: function() {
// The Transition has just finished.
},
onLeave: function() {
// A new Transition toward a new page has just started.
},
onLeaveCompleted: function() {
// The Container has just been removed from the DOM.
}
});
// Don't forget to init the view!
Homepage.init();
http://barbajs.org/views.html

you question is quit unclear,
basically ajax is used to render loaded page, if your page is already loaded then
just add this script to your root web page, and check if it is working or not after ajax call.

Trigger Bootstrap 4 dropdown on resolution/mobile

I have a header with some links. When the header gets short enough, it goes into mobile view (collapse style).
I want the dropdown to be shown initially, but can be toggled to hide and show again like normal. Basically what I want is: When the page loads/resizes and the navbar goes into mobile, toggle the dropdown so it's visible.
You can toggle a dropdown by doing:
$("#element").dropdown("toggle");
Play around with my example here: https://codepen.io/anon/pen/ZKbJJV

UPDATE:
$(document).ready(function() {
$(window).resize(function() {
if($(window).width()<=768) {
$("#element").removeClass("dropdown-menu");
}else{
$("#element").addClass("dropdown-menu");
}
});
if($(window).width()<=768) {
$("#element").removeClass("dropdown-menu");
}else{
$("#element").addClass("dropdown-menu");
}
});
Now I've tried again with remove and add classes and it works.
http://codepen.io/julianschmuckli/pen/ybYzQe
You can do execute the code, after the page was finished loading:
$(document).ready(function() {
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
$("#element").dropdown("toggle");
}
});
To detect if it is mobile, I copied the snippet from here: What is the best way to detect a mobile device in jQuery?
Or you can also try this version to define it with a specific width of page:
$(document).ready(function() {
if($(window).width()<=768) {
$("#element").dropdown("toggle");
}
});

How can I enable/disable(in real time) javascript plugins on a webpage?

I need to enable/disable .js plugins in real time. When user re-sizes his browser window, desktop version becomes mobile. The thing is I need to disable some javascript (fullpage.js) and add some css.
And there is no problems if you reload the page or use full-screen window on your pc, from start to the end. The question is : how can I disable fullpage.js on width < 800 ?
I've tried this things :
Added this function to body onresize event (no result without reloading) :
function checkWidth() {
if($(window).width() <= 760 ){
$('#menu-header-button').click(function(){
$('#navigation').toggleClass('navbar-v');
$('#logo-mobile').toggleClass('visible');
$('#menu-header-button').addClass('disabled');
setTimeout(function(){
$('#menu-header-button').removeClass('disabled');
}, 500);
});
} else if($(window).width() > 760 ){
$('#fullpage').fullpage({
menu: '#menu',
anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage'],
css3: true,
afterLoad: function(anchorLink, index){
if( anchorLink == 'firstPage'){
$('#navigation').removeClass('navbar-v');
}
},
onLeave: function(index, nextIndex, direction){
setTimeout(function(){
$('#navigation').addClass('navbar-v');
}, 500);
}
});
}
}
This was working only sometimes :
$(window).onresize= checkWidth();
function checkWidth() {
if($(window).width() == 761 ){
location.reload(true);
}
//...
}
This wasn't working at all :
$(window).onresize= checkWidth();
function delayCheckWidth(){
setTimeout(function(){
checkWidth();
}, 50); //I thought some delay time can be useful here
}
function checkWidth() {
if($(window).width() == 761 ){
location.reload(true);
}
//...
}
Related themes i checked out :
Throttling
How to disable / Enable plugins?
Enable / Disable JavaScript code
How to disable / Enable plugins?
Enable and disable jquery knob dynamically
Disable and enable jQuery context menu
Lots of others.
Nothing about real time or nothing interesting/helpful .
Do you have any advises? Maybe i don't need to go this exactly this way ?

Have you tried the responsive option of fullPage.js?
Not sure if that's what you want or your really need to destroy fullPage.js completely.
From fullPage.js documentation:
responsive: (default 0) A normal scroll (autoScrolling:false) will be used under the defined width in pixels. A class fp-responsive is added to the plugin's container in case the user wants to use it for his own responsive CSS. For example, if set to 900, whenever the browser's width is less than 900 the plugin will scroll like a normal site.
The normal scrolling in fullPage.js will keep sections heightas well as the events assigned to the menu, or the control arrows for the horizontal sliders, but it will scroll normally as any website. You can see a demo of that mode here.
In any case, if you really want to destroy fullPage.js for any reason, you would need to use the provided method for it.
From the docs:
$.fn.fullpage.destroy(type)
Destroys the plugin events and optinally its HTML markup and styles. Ideal to use when using AJAX to load content. ()
type: can be 'empty' or 'all'. If all is passed, the HTML markup and styles used by fullpage.js will be removed. This way the original HTML markup, the one used before any plugin modification is made, will be maintained.
//destroy any plugin event (scrolls, hashchange in the URL...)
$.fn.fullpage.destroy();
//destroy any plugin event and any plugin modification done over your original HTML markup.
$.fn.fullpage.destroy('all');

jQuery image slider stops working after page sliding

I'm having a trouble with a jQuery image slider that works only the first time i open its page !
I have one main page, that includes via Ajax three page portions (Home, Presentation and Contact), the home portion contains the image slider !
To move through the pages, i use another jQuery page slider which includes the right portion and plays a sliding animation to show it !
So when i go for example from the home page to the presentation page, and then comeback to home ... the image slider isn't working anymore, and sometimes doesn't even appear !
What does it mean ?
How can i make sure the script is reloaded after the page slider finishes the transition, cause i think the problem comes from it ?
$(document).ready(function() {
$('#slides').slidesjs({
width: 700,
height: 300,
play: {
active: false,
auto: true,
interval: 3000,
swap: true
}
});
$(".menuButton").click(function() {
var page = $(this).attr("id");
var cont = $("#container");
var cont1 = $("#container1");
cont1.load("parts/"+page+".html", function() {
cont.hide("slide", {direction:"right"}, function() {
cont1.show("slide", {direction:"left"});
});
});
});
});
Thank you.

If the script is included in the portions loaded by ajax, it won't run (ajax loaded scripts are not ran by default). So basically, after the success event, just call the functions from the script.

BJQS Slider pause on click

I am using a BJQS slider on my website.
I am also using fancybox on the same website.
I would like BJQS to pause when the fancybox is open and resume when closed.
Does anyone know how I could create a pause/play toggle button for BJQS?
Thanks

fancybox comes with some callbacks, so you should be able to do something like:
Adopting Lee and Edwards idea about virtual hovering..
$(".fancybox").fancybox({
padding : 0,
openEffect : 'elastic',
closeEffect: 'elastic',
beforeLoad: function(){
$(".banner").trigger("mouseover");
},
afterClose: function(){
$(".banner").trigger("mouseout");
}
});

Without editing the source file to provide either a method to pause the slider, or add in a button you can hide and trigger a click on, the quickest method is to trigger the mouse events that cause the slider to pause.
Looking at the demo, you can see that when you mouseover the slider, the slider stops animating until you move your mouse outside of it. Therefore you can simulate these events.
Assuming your slider div is #slider like the demo on the BJQS site, you would do:
On fancybox open
$('#slider').trigger('mouseover');
On fancybox close
$('#slider').trigger('mouseout');
Go here: http://fancybox.net/api to see how to define open/close callbacks (see near bottom of first table, the "on" options)

I check the plugin but I cant' find any method to pause/play the slider.
I see an option called:
hoverpause : true, // enable/disable pause slides on hover
So we can "hack" in this way using it by triggering the over state on the slider itself:
var stopbjqs = false;
$(function () {
$('#dialog').bjqs({
'showmarkers': false,
'responsive': true,
'automatic': true
});
$("#btn").click(function () {
if (!stopbjqs) {
$("#dialog").trigger("mouseover");
stopbjqs=true;
} else {
$("#dialog").trigger("mouseout");
stopbjqs=false;
}
});
});
But it will be definitely better to have some methods to manipulate the slider.
Demo: http://jsfiddle.net/IrvinDominin/P8UgQ/

Came across this whilst trying add a play/pause button to the plugin. #Irvin Dominin's suggestion relating to hoverpause is good but it will fail as soon as you hover the banners as the mouseover/mouseout is triggered.
I decided to extend the plugin with a new setting and turn off hoverpause.
First add the setting to the defaults object e.g.
// slider default settings
var defaults = {
enableplaypause: false // shows play/pause button
};
Next you'll want to set the click binding to your button, this is done in the init() function e.g.
// run through options and initialise settings
var init = function () {
// configurations only avaliable if more than 1 slide
if (state.slidecount > 1) {
//enable play/pause button using setting we defined earlier
if (settings.enableplaypause) {
conf_enableplaypause();
}
}
};
Now for the conf_enableplaypause(); function which handles the state + button bindings:
var conf_enableplaypause = function () {
$('#btn').click(function () {
if (!state.paused) {
clearInterval(state.interval);
state.paused = true;
$('#btn').text('PAUSED');
} else {
state.interval = setInterval(function () {
go(vars.fwd, false);
}, settings.animspeed);
state.paused = false;
$('#btn').text('PLAYING');
}
});
};
Pretty straightforward and is essentially a copy of what hoverpause does except on a button click along with updating the button text.
Hopefully this helps someone