I got this code for my js file:
var flkty = new Flickity( '.main-gallery', {
cellAlign: 'left',
contain: true,
wrapAround: true,
prevNextButtons: false,
autoPlay: 5000
});
I saved it and when my site is loading it's correctly showing up in the head tag. However nothing happens. When I open the console of the browser developer tool and paste the code there, then it's working correctly. What can cause this and how can I fix this?
That's because this is never called. Put this in window.onload(which will execute this function when page loads)
window.onload = function() {
var flkty = new Flickity( '.main-gallery', {
cellAlign: 'left',
contain: true,
wrapAround: true,
prevNextButtons: false,
autoPlay: 5000
});
};
Or if you are using jquery. This will also work.
$(document).ready(function() {
var flkty = new Flickity( '.main-gallery', {
cellAlign: 'left',
contain: true,
wrapAround: true,
prevNextButtons: false,
autoPlay: 5000
});
});
Related
I have a swiper positioned inside a tab on a wordpress site, thus it is not initiated on page load, so the navigation function does not work. You can see it here by clicking on the "görüşler" tab.
I did a research and I found out that it's a common issue and it can be initiated with some custom jquery. I've added the following code as an external javascript, however I can't get it to work. If anyone can help me out, I'd appreciate it as it is driving me insane. Many thanks in advance.
jQuery(document).on("pageinit", function($) {
var swiper = new Swiper('.swiper-container', {
parallax: true,
autoHeight: true,
setWrapperSize: true,
slidesPerView: 1,
spaceBetween: 30,
centeredSlides: true,
autoplay: {
delay: 2500,
disableOnInteraction: false,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
observer: true,
observeParents: true,
});
swiper.init();
});
I ended up using this code, posting it here in case anyone needs it.
// Call On Page Load
var observer = new IntersectionObserver( (entries, observer) => {
entries.forEach(entry => {
if (entry.intersectionRatio > 0) {
window.dispatchEvent(new Event('resize'));
observer.unobserve(entry.target);
if (entry.target.swiper) {
entry.target.swiper.slideTo(0);
}
};
});
}, null);
observer.observe(document.querySelector('#yepss .swiper-container'));
Sorry if this is a dumb question. I'm using the Swiper javascript slider, developed by iDangerous. It comes with an initialization field that I have in my HTML file, in it are the initialization options for the slider.
I'm in a situation where I need to search the webpage for a certain element called #editor-content. If the element is found, I need the simulateTouch option of the Swiper initialization to be set to false. If the element is not found, the stimulateTouch option should be set to true.
I am using jQuery to accomplish the finding-the-element. I'm using if(($('#editor-content').length)){...} to accomplish this. This part works just fine.
Here is what the Swiper initialization looks like...
<script>
swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
// This is the option that needs to be set to true/false depending on whether the #editor-content element exists in the webpage or not...
stimulateTouch = false;***
autoplay: {
delay: 2500,
disableOnInteraction: true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
</script>
So far, I've tried to initialize the slider differently based on outcome. If it finds the element, initialize the swiper with the option disabled. If it doesn't, initialize the swiper with the option enabled. That didn't work (see code below--and I'm very sorry for the indentation mess):
<script>
var swiper = undefined;
function initSwiper() {
// If the jQuery detects an #editor-content element (meaning you're in the editor...)
if((jQuery('#editor-content').length)){
swiper = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
// Element found, so initialize the slider with option below set to false
simulateTouch = false,
autoplay: {
delay: 2500,
disableOnInteraction: true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
} else {
var swiper2 = new Swiper('.swiper-container', {
spaceBetween: 30,
centeredSlides: true,
// Element not found, so initialize the slider with option below set to true
simulateTouch = true,
autoplay: {
delay: 2500,
disableOnInteraction: true,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
}
}
// Initialize the function
initSwiper();
</script>
I'm expecting the slider to have the stimulateTouch option set to false when the #editor-content does exist, and have it set the option to true when the element in the body does not exist. But so far my attempted code is just making the entire slider js not function. Help?
If you run your code through a Javascript validator (such as this: http://esprima.org/demo/validate.html) you'll find you have a syntax error on line 12.
stimulateTouch = false,
needs to be
stimulateTouch: false,
as per the other properties.
Just FYI, you may want to look into using Chrome Developer Tools or some other debugging tool to pick up small issues like this. The console will let you know if you have any syntax errors, and you can use the debugger to set breakpoints and step through your code line by line so you can find the exact spot where things start to go pear-shaped.
Sorry if this is a noob question (I'm a JS noob). Im working on a website in which the homepage consists of a preloader and a slideshow.
I've managed to set up both the preloader and the slideshow. However, I've noticed that both of them are being loaded at the same time. I need to find a way to first load the preloader and once the preloading is done, then start the slideshow.
I'm using (window).load on both functions but I would like to know if there's a way to prioritize how things area loaded.
Here's my working code:
jQuery(window).load(function() {
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
}
});
jQuery(window).load(function() {
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
});
Regards,
Johann
You can combine them both inside a single jQuery(window).load, and choose to run the royalSlider setup function inside the wptime_plugin_remove_preloader function, after removing the preloader:
jQuery(window).load(function() {
//set up the preloader
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
//Remove the preloader
jQuery('#wptime-plugin-preloader').remove();
//Set up the slider after removing the preloader
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
}
});
Activate the preloader on window.onload and call the slideshow function from inside the preload function (Note: Untested!):
jQuery(window).load(function() {
jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow");
setTimeout(wptime_plugin_remove_preloader, 3000);
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
}
slideshow();
});
function slideshow() {
$('#slideshow.royalSlider').royalSlider({
arrowsNav: true,
loop: true,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: false,
numImagesToPreload: 0,
transitionSpeed: 600,
thumbsFitInViewport: false,
navigateByClick: false,
startSlideId: 0,
transitionType:'fade',
globalCaption: false,
});
}
Put your the code that loads the slideshow inside
function wptime_plugin_remove_preloader() {
jQuery('#wptime-plugin-preloader').remove();
//slideshow code here
}
$(window).load would wait for the page to load all the elements, which you do need for your javascript to work, because you have to make sure the elements you are referencing in your code already exist in the DOM. To chain functions call each next function from the last block of the one preceeding
I can't seem to get Ads to play when calling load(). I'm using playAd() in a onBeforeStart(). When I use load() the video won't start, and either will the ad. It loads it all, and I can click start, but the video never starts automatically. I even tried $interval(jwplayer.play, 500) hehe.
It goes into IDLE mode, when I load the video - which its supposed to do(docs), but it can't start. When I remove the playAd() function, it works perfect with autostart ect.
Is it even possible? I can't find any examples of it anywhere.
Code;
jwplayer('video-player').setup({
autostart: false,
controls: true,
// stagevideo: true,
debug: {
'levels' : 'all'
},
primary: 'flash',
androidhls: true,
icons: false,
flashplayer: '/assets/scripts/jwplayer.flash.swf',
html5player: '/assets/scripts/jwplayer.html5.js',
skin: '/assets/skin/skin.xml',
file: clip.videoUrl,
image: clip.thumbnail640,
wmode: 'transparent',
height: "100%",
width: "100%",
repeat: "false",
advertising: {
client: "vast"
},
plugins: {
"/assets/scripts/borsenticker.js": {
'ticker1': tickerStringUpper,
'ticker2': stockString,
'ticker2_nofont': stockString_nofont,
'date': dateFiltered
}
},
});
load it;
jwplayer('video-player').load([{
file: clip.videoUrl,
image: clip.thumbnail640,
}]);
jwplayer('video-player').play();
and setups are;
jwplayer('video-player').onBeforePlay(function (){
if(!videoPlayerAdLoaded) {
jwplayer('video-player').playAd(Preroll.getVastTag());
videoPlayerAdLoaded = true;
}
});
Fixed it by updating to 6.11 from 6.10. :)
I am trying to implement the ResponsiveSlides (http://responsiveslides.com/) to my local drupal instance but anyway I configure the JS code I get a "TypeError: $ is not a function $(function () {" I tried to put the JS code right in the html.tpl.php or as a separate file but it keeps throwing an error, here is the code:
// JavaScript Document
$(function () {
// Slideshow 1
$("#slider1").responsiveSlides({
maxwidth: 800,
speed: 800
});
// Slideshow 2
$("#slider2").responsiveSlides({
auto: false,
pager: true,
speed: 300,
maxwidth: 540
});
// Slideshow 3
$("#slider3").responsiveSlides({
manualControls: '#slider3-pager',
maxwidth: 540
});
// Slideshow 4
$(".slider4").responsiveSlides({
auto: false,
pager: false,
nav: true,
speed: 500,
namespace: "callbacks",
before: function () {
$('.events').append("<li>before event fired.</li>");
},
after: function () {
$('.events').append("<li>after event fired.</li>");
}
});
});
So any help on why this is throwing this console error will be most appreciative.
the correct use is this:
(function ($) {
// code goes here
})(jQuery)
Read this: http://jquery-howto.blogspot.it/2008/12/what-heck-is-function-jquery.html
M.