I have an issue with jQuery not firing on the else statement and I'm pretty sure its pretty simple why it's not but unable to solve it myself due to the lack of my JavaScript knowledge, I'm hoping that someone can tell me the issue.
My jQuery script has two sets of actions, one for above 639px and one set below. It works on the page load but if you reduce the size from 1600px to 600px, the height remains of the element remains the height of the window despite going under 639px it does not change it to height-min: auto.
$(function() {
$(window).resize(function() {
if (window.innerWidth >= 639) {
windowHeight = $(window).innerHeight();
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
$("body.home").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
} else {
// This works but only if the page is loaded with the viewpoint less of 639px
// The min-height auto doesn't work.
$('.nanoContainer, .flexAligner .vegas-container').css('min-height', 'auto');
$(".home .intro").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
}
}).resize();
});
The min-height declaration does not work because you have a typo: the selectors in your if-else conditions are not the same:
In the if block: $('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
In the else block: $('.nanoContainer, .flexAligner .vegas-container')
A comma is missing from the latter, and without your markup I cannot tell which one is the intended selector.
With regards to the issue with .vegas() not working as it should, that is because you are only initialising the plugin at different breakpoints, but never destroying the other instance. In this case, I refer you to the code: the plugin appears to expose a destroy function, which you can call to destroy the instance when switching between breakpoints, e.g. $selector.vegas('destroy').
Here is a code that might work: no guarantees since you have not provided an MCVE and I am unable to test it:
$(function() {
$(window).resize(function() {
if (window.innerWidth >= 639) {
// Set min-height
windowHeight = $(window).innerHeight();
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', windowHeight);
// Create new Vegas instance
$("body.home").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
// Destroy other Vegas instance
$(".home .intro").vegas('destroy');
} else {
// This works but only if the page is loaded with the viewpoint less of 639px
// The min-height auto doesn't work.
$('.nanoContainer, .flexAligner, .vegas-container').css('min-height', 'auto');
// Create new Vegas instance
$(".home .intro").vegas({
delay: 8000,
transition: 'fade',
transitionDuration: 8e3,
timer: false,
slides: [
{ src: "/wp-content/uploads/slide2-0.jpg" },
{ src: "/wp-content/uploads/slide2-1.jpg" },
{ src: "/wp-content/uploads/slide2-2.jpg" }
],
animation: "kenburns"
});
// Destroy other Vegas instance
$("body.home").vegas('destroy');
}
}).resize();
});
Related
I'm trying to make a website that allows for page transitions across each webpage, without having the browser reload each time it changes pages. I am currently using barba.js to make it possible to change pages while using transitions. I was wondering if there was a way to do this in Vanilla JS, as all I want to do is run transitions, and have pages with static data on said pages, and don't feel I need the extra functionality barba.js provides.
Here is my current barba.js code if it is of any use:
barba.init({
sync: true,
views: [
{ namespace: 'about' },
{ namespace: 'projects' },
{ namespace: 'stories' }
],
transitions: [{
name: 'opacity-transition',
sync: true,
async enter(data) {
// Entrance Transition settings
return gsap.from(data.next.container, {
left: '20%',
filter: 'brightness(0.4)',
duration: 0.9,
ease: 'power1.inOut',
});
},
async leave(data) {
// Exiting Transition settings
return gsap.to(data.current.container, {
left: '-100%',
duration: 0.9,
filter: 'brightness(0.6)',
ease: 'power1.inOut',
});
},
}]
});
The greensock stuff can be removed and turned in to CSS animations if it's possible to do this without barba.js
I am using cubeportfolio.js as part of a bootstrap template. It seems to be working but the custom .js part of the template is causing an error in the console.
The template I am using can be seen here, which is working without errors.
The error is 'Uncaught Error: cubeportfolio is already initialized. Destroy it before initialize again!'
For confidentiality reasons I can't post all the code but I have called the jquery.cubeportfolio.min.js at the bottom of the with the custom .js underneath.
Here is the custom .js
(function($, window, document, undefined) {
'use strict';
var gridContainer = $('#grid-container'),
filtersContainer = $('#filters-container'),
wrap, filtersCallback;
/*********************************
init cubeportfolio
*********************************/
gridContainer.cubeportfolio({
layoutMode: 'grid',
rewindNav: true,
scrollByPage: false,
defaultFilter: '*',
animationType: 'slideLeft',
gapHorizontal: 0,
gapVertical: 0,
gridAdjustment: 'responsive',
mediaQueries: [{
width: 800,
cols: 3
}, {
width: 500,
cols: 2
}, {
width: 320,
cols: 1
}],
caption: 'zoom',
displayType: 'lazyLoading',
displayTypeSpeed: 100
});
/*********************************
add listener for filters
*********************************/
if (filtersContainer.hasClass('cbp-l-filters-dropdown')) {
wrap = filtersContainer.find('.cbp-l-filters-dropdownWrap');
wrap.on({
'mouseover.cbp': function() {
wrap.addClass('cbp-l-filters-dropdownWrap-open');
},
'mouseleave.cbp': function() {
wrap.removeClass('cbp-l-filters-dropdownWrap-open');
}
});
filtersCallback = function(me) {
wrap.find('.cbp-filter-item').removeClass('cbp-filter-item-active');
wrap.find('.cbp-l-filters-dropdownHeader').text(me.text());
me.addClass('cbp-filter-item-active');
wrap.trigger('mouseleave.cbp');
};
} else {
filtersCallback = function(me) {
me.addClass('cbp-filter-item-active').siblings().removeClass('cbp-filter-item-active');
};
}
filtersContainer.on('click.cbp', '.cbp-filter-item', function() {
var me = $(this);
if (me.hasClass('cbp-filter-item-active')) {
return;
}
// get cubeportfolio data and check if is still animating (reposition) the items.
if (!$.data(gridContainer[0], 'cubeportfolio').isAnimating) {
filtersCallback.call(null, me);
}
// filter the items
gridContainer.cubeportfolio('filter', me.data('filter'), function() {});
});
/*********************************
activate counter for filters
*********************************/
gridContainer.cubeportfolio('showCounter', filtersContainer.find('.cbp-filter-item'), function() {
// read from url and change filter active
var match = /#cbpf=(.*?)([#|?&]|$)/gi.exec(location.href),
item;
if (match !== null) {
item = filtersContainer.find('.cbp-filter-item').filter('[data-filter="' + match[1] + '"]');
if (item.length) {
filtersCallback.call(null, item);
}
}
});
})(jQuery, window, document);
You have to destroy it before init:
gridContainer.cubeportfolio('destroy');
/*********************************
init cubeportfolio
*********************************/
gridContainer.cubeportfolio({
layoutMode: 'grid',
rewindNav: true,
scrollByPage: false,
defaultFilter: '*',
animationType: 'slideLeft',
gapHorizontal: 0,
gapVertical: 0,
gridAdjustment: 'responsive',
mediaQueries: [{
width: 800,
cols: 3
}, {
width: 500,
cols: 2
}, {
width: 320,
cols: 1
}],
caption: 'zoom',
displayType: 'lazyLoading',
displayTypeSpeed: 100
});
It is initialized somewhere else and therefore it throws an error because it doesn't know with which cubeportfolio() instance has to deal.
From the error output I’m pretty sure that you instantiate Cube Portfolio twice for the same element.
If you want to instantiate again the plugin call on that element the method destroy
jQuery('#my-grid').cubeportfolio('destroy');
and then the init method to instantiate again
jQuery('#my-grid').cubeportfolio(options);
If you need further help please send me a link to your website to check your code.
I have a short reveal.js presentation hosted here on GitHub pages.
I want to wait for the page to fully load before auto-starting the presentation. If the connection is slow, awesomefonts don't get rendered in time, and the user can only see an empty block.
Is it possibile to wait some time before start?
Okay, so after a minute of browsing your code, I noticed that you probably need an onload block in your script before initializing Reveal.js. Try putting the
Reveal.initialize({
controls: false,
progress: true,
history: true,
center: true,
autoSlide: 2200,
transition: 'slide', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true }
]
});
Inside of:
object.onload=function(){myScript};
Hope this helps. The presentation looks great btw.
put your init code inside window.onload() function
if you need multiple things to be loaded asyncronously, just create a myLoad() function and a objToBeLoaded counter, then each time an obj has loaded, make it call somethingHasLoad() function that will check for that counter and eventually call myLoad()
So, i'm trying to run 2 animation at the same time on mouseover
However, after using queue:false they still running one after another :(
here's what i got:
$(document.body).on('mouseover', '.j-ad-slide', function(e) {
e.preventDefault();
$('.j-ad-slide').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.side-nav, .sub-menu').animate({
top: '422'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
Any idea on what I'm doing wrong? BTW: .side-nav and .sub-menu elements are position:fixed - I think that's the problem. I'm not sure how to work around that :(
Your code should work fine. Here is a fiddle for you.
$(document.body).on('mouseover', '.animate', function(e) {
e.preventDefault();
$('.animate').animate({
height: '370px'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
$('.animate2').animate({
left: '100'
}, {
duration: 500,
queue: false,
complete: function() { /* Animation complete */ }
});
});
fiddle with fixed position
I have such code in one .js file:
var ready;
ready = function() {
var galleries = $('.car-gallery').adGallery({
loader_image: '../assets/loader.gif',
slideshow: {
enable: false,
autostart: false,
speed: 5000,
start_label: 'Start',
stop_label: 'Stop',
// Should the slideshow stop if the user scrolls the thumb list?
stop_on_scroll: true,
// Wrap around the countdown
countdown_prefix: '(',
countdown_sufix: ')',
onStart: function() {
// Do something wild when the slideshow starts
},
onStop: function() {
// Do something wild when the slideshow stops
}
}});
};
$(document).ready(ready);
$(document).on('page:load', ready);
but in my rails 4 app i use turbolinks, and sometimes is so,that images are not loaded, but document is ready and i can't start ('.car-gallery').adGallery
maybe there are any ways to don't reload page, and use window.load with turbolinks? and how?
Apart from JQueryTurbolinks, as shown in the comments, it seems your JQuery is not binding to the page load events as it should
I would recommend this code (if you want to keep a native solution):
var galleries = function() {
$('.car-gallery').adGallery({
loader_image: '../assets/loader.gif',
slideshow: {
enable: false,
autostart: false,
speed: 5000,
start_label: 'Start',
stop_label: 'Stop',
// Should the slideshow stop if the user scrolls the thumb list?
stop_on_scroll: true,
// Wrap around the countdown
countdown_prefix: '(',
countdown_sufix: ')',
onStart: function() {
// Do something wild when the slideshow starts
},
onStop: function() {
// Do something wild when the slideshow stops
}
});
};
$(document).on('page:load ready', galleries);
Can you try adding this:
var alert = function(){
alert("loaded");
};
$(document).on("page:load ready", alert);
Update
After a conversation, we found this was the solution which worked best:
#JS
$('.car-gallery').adGallery({
loader_image: '../assets/loader.gif',
slideshow: {
enable: false,
autostart: false,
speed: 5000,
start_label: 'Start',
stop_label: 'Stop',
// Should the slideshow stop if the user scrolls the thumb list?
stop_on_scroll: true,
// Wrap around the countdown
countdown_prefix: '(',
countdown_sufix: ')',
onStart: function() {
// Do something wild when the slideshow starts
},
onStop: function() {
// Do something wild when the slideshow stops
}
});
#view
<%= link_to "link", path, data: { no-turbolink: true } %>