I was handed a script to update a web page for a client (another team member wrote the Jquery)and he handed me all of his test files. Running locally, the jquery drop down (very simple) worked just fine.
I ported over the code to ExpressionEngine, yet it doesn't do anything. I know that Jquery itself is functioning fine because the slider and other elements powered by it work appropriately. The drop down just doesn't do anything.
Curious, I inserted the Jquery function located in the function.js into the command line and it worked..
So, and correct me if I'm wrong here, it appears that its not running the function on load? Any ideas here?
$(window).load(function() {
$('.slider').flexslider({
animation: "slide",
slideshowSpeed: 6000,
animationSpeed: 800,
pauseOnAction: false
});
$('.testimonials .flexslider').flexslider({
animation: "slide",
slideshowSpeed: 600000,
animationSpeed: 800,
pauseOnAction: false,
directionNav: false
});
$('.nav li').hover(function() {
$('.sub-menu', this).stop(true, true).slideDown();
}, function() {
$('.sub-menu', this).slideUp();
});
});
^ Barebones simple. The only code that changed was the html (for the menu), the CSS (for styling sub elements) and this function.JS file.
Here is the 'old' version:
$(window).load(function() {
$('.slider').flexslider({
animation: "slide",
slideshowSpeed: 6000,
animationSpeed: 800,
pauseOnAction: false
});
$('.testimonials .flexslider').flexslider({
animation: "slide",
slideshowSpeed: 600000,
animationSpeed: 800,
pauseOnAction: false,
directionNav: false
});
});
Such a miniscule issue, but it is holding me up. Any thoughts?
This probably wont make a difference, but try to change $(window).load(function() { to $(document).ready(funciton() { or $(function() {
Futher reading:
window.onload vs $(document).ready()
window.onload is the built-in Javascript event, but as its implementation had subtle quirks across browsers (FF/IE6/IE8/Opera)
Also, make sure you surround your jQuery selectors in a if ($(selector).length) check, if they are not present on the page, it will cause an error and scripts will stop processing:
$(function() {
if ($('.slider').length) {
$('.slider').flexslider({
animation: "slide",
slideshowSpeed: 6000,
animationSpeed: 800,
pauseOnAction: false
});
};
if ($('.testimonials .flexslider').length) {
$('.testimonials .flexslider').flexslider({
animation: "slide",
slideshowSpeed: 600000,
animationSpeed: 800,
pauseOnAction: false,
directionNav: false
});
};
if ($('.nav li').length) {
$('.nav li').hover(function() {
$('.sub-menu', this).stop(true, true).slideDown();
}, function() {
$('.sub-menu', this).slideUp();
});
});
});
http://jsfiddle.net/p5JpP/1/
Related
We are using slick slider for a clients project and it has been working perfectly so far, however I have noticed something, I don't know whether it is a bug or something that I am missing something.
When the slick slider is loaded, just before you get the whole slider visible in the viewport it doesnt load properly and stacks at bottom of each other with half of the slider of the page. Then whole slider is visible in the viewport it jumps back to how it should, almost like it has re-slicked its self.
Below is the code for my Slick Slider
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
and Images looks like as in link here
I have read on various places and found this linkGithub link for same issue
But it is not working for me. I am still getting same ugly effect.
Please suggest
Have you tried delaying the function until the dom is loaded?
$( window ).load(function() {
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
});
or, if that doesn't work:
setTimeout(function(){
$('.css_slider').slick({
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
autoplay: true,
autoplaySpeed : 8000,
adaptiveHeight: true,
dots: true
});
}, 2000)
I have some javascript I need to run after a particular template rendered in ng-view finishes loading.
If it's the first page to load this works:
$(window).load(function(){});
The code is being executed in a controller for the template so it is outside of the main html file. I have also tried nesting it in a directive under link: so that it won't run until after the directive is loaded, but that doesn't seem to work either.
Here is the snippet I need to run:
$(window).load(function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
});
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
You can do it by using the following:
$scope.$on("$viewContentLoaded",function() {
// some code to run after ng-view loaded completlly ...
});
I am trying to create a slider with thumbnails that displays 2 images at a time in the slider.
I got everything working thanks to minItems:2
The problem come with the thumbnail navigation.
When you click on the second thumbnail, the slider will move, and display the 3rd image on the slider, although the second image was already being displayed.
Is there a way to create 2 active thumbnails and make them sync to the images being shown in the slider?
The only other similar slider I found that uses this is nastygal in their product page.
Hope their is a way, because is not really user friendly the way it is now.
Thanks!
I am using this on a woocommerce store:
productSlider: {
selector: '#product-nav',
init: function () {
var base = this,
container = $(base.selector),
images = $('#product-images'),
zoom = images.data('zoom');
container.flexslider({
animation: "slide",
controlNav: false,
directionNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 106,
itemMargin: 10,
asNavFor: '#product-images'
});
images.flexslider({
animation: "slide",
controlNav: false,
directionNav: true,
animationLoop: false,
slideshow: false,
minItems: 2,
maxItems: 2,
prevText: '<i class="fa fa-angle-left"></i>',
nextText: '<i class="fa fa-angle-right"></i>',
sync: "#product-nav",
start: function(slider) {
if (zoom) {
$(slider.slides[0]).easyZoom({
preventClicks: false
});
}
},
before: function(slider) {
if (zoom) {
$(slider.slides[slider.animatingTo]).easyZoom({
preventClicks: false
});
}
}
});
}
},
I'm not sure about highlighting multiple thumbnails, but I do know that this slider was built to handle multiple images among many other features:
http://www.owlcarousel.owlgraphic.com/index.html
I have a flexslider with Carousel Nav with the following JS config:
$(function(){
SyntaxHighlighter.all();
});
$(window).load(function(){
$('#carousel').flexslider({
animation: "slide",
controlNav: false,
animationLoop: false,
slideshow: false,
itemWidth: 210,
//pauseOnAction: false, // this is not working
itemMargin: 5,
asNavFor: '#slider'
});
$('#slider').flexslider({
animation: "fade",
controlNav: false,
animationLoop: true,
slideshow: true,
slideshowSpeed: 4600,
animationSpeed: 600,
pauseOnAction: false,
sync: "#carousel",
start: function(slider){
$('body').removeClass('loading');
}
});
});
I do not want the slideshow to stop if a user clicks on the slider, so I added the "pauseOnAction: false" setting. However, if the user clicks on the Carousel items, the slideshow stops. I added the same pauseOnAction config to the Carousel portion, but it does not fix the problem.
https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
Has anyone found a solution to this?
I am trying to make flexslider to loop in one direction contineously in one direction. ones it reachs the last image in the loop then it should start from the first image again.
I have two issue with the example i have set up on jsfiddle
One: I am not able to make it work on jsFiddle
Two: animation is on at the end it then start in the other direction while i want to to move in one direction only Left to Right.
$(window).load(function(){
$('.flexslider').flexslider({
animation: "slide",
animationLoop: false,
easing: "linear",
useCSS: false,
randomize: false,
pauseOnHover: true,
slideshowSpeed: 12,
animationSpeed: 8000,
controlNav: false,
directionNav: false,
itemWidth: 210,
itemMargin: 5,
start: function(slider){
$('body').removeClass('loading');
}
});
First issue
You miss a closing )}; at the end of the script so it is not valid, and you have to set the script section as No wrap - in <head> in the Framework and extension panel.
For the first image you left the full path http://flexslider.woothemes.com/
Second issue
The only loop feature can be set using animationLoop: true for now is the only solution.
Here a request pulled in github for a more smooth animation and loop: https://github.com/woothemes/FlexSlider/issues/287
Code:
$(window).load(function () {
$('.flexslider').flexslider({
animation: "slide",
animationLoop: true,
easing: "linear",
useCSS: false,
randomize: false,
pauseOnHover: true,
slideshowSpeed: 12,
animationSpeed: 8000,
controlNav: false,
directionNav: false,
itemWidth: 210,
itemMargin: 5,
start: function (slider) {
$('body').removeClass('loading');
}
});
});
Docs: https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
Demo: http://jsfiddle.net/IrvinDominin/6TXzC/