I am trying to load flexslider in easytabs. I have two flexsliders on the page. One in under photos which loads with the page and the other is under Features. The flexslider on the Features tab will not load because it is initially hidden.
I am looking for some js code to execute the second flexslider when the tab is clicked.
Any help is appreciated
Note: I have already made adjustments and confirmed that both flexsliders work on the page without tabs.
I went with pikachoose instead of flexslider and it worked.
I found this worked for what I wanted to do.
$(document).ready(function(){
$('.flexslider').flexslider({
animation: 'slide',
animationLoop: false,
prevText: '',
nextText: '',
controlNav: false,
keyboard: false,
slideshow: false,
start: function(){
// This is your easytabs install
$('.tab-container').easytabs({
updateHash: false,
animate: false
});
}
});
});
Basically it only initialises easytabs when flexslider is done.
Related
I am trying to make a slider using flexsider but it is not loading on production. It is working well on development. I am getting this error:
Uncaught TypeError: $(...).flexslider is not a function
Here is the link to website: https://mybagicha.herokuapp.com/
jQuery(window).load(function(){
$('.flexslider').flexslider({
animation: "fade",
slideshowSpeed: 4000,
animationSpeed: 600,
controlNav: false,
directionNav: true,
controlsContainer: ".flex-container" // the container that holds the flexslider
});
});
That means jQuery is not defined. If you load jQuery twice that's also happened the error, try figure out that.
And try to the following added $ to the
jQuery(window).load(function($) {
$('.flexslider').flexslider({
//Code here
});
});
Hope to help
I'm trying to use the FlexSlider extension (1.50) on my Typo3 script. FlexSlider needs jQuery, so I added it by the extension T3 jQuery. Unfortunately the FlexSlider does not work. I get the following error:
"Uncaught TypeError: undefined is not a function".
It refers to the second line of this code block:
<script type="text/javascript">
$(window).load(function() {
$('#fs-182.flexslider').flexslider(
{
animation: "fade",
slideDirection: "horizontal",
slideshow: false,
slideshowSpeed: 7000,
animationDuration: 600,
controlNav: true,
directionNav: false,
keyboardNav: false,
mousewheel: false,
prevText: "Previous",
nextText: "Next",
pausePlay: false,
pauseText: "Pause",
playText: "Play",
randomize: false,
animationLoop: true,
pauseOnHover: false
});
});
</script>
Does anyone has an idea how to solve this problem?
Edit: jQuery is added two times to the file. In the header and in the body. I think the one in the header is added by T3 jQuery - it's the same version I choosed in the properties of T3 jQuery (2.1.0). The one in the body is an older version (1.10.2).
This means that jQuery is not defined so you just need to figure out why it's not defined. Loading it twice is not a good thing.
You should only need to load jQuery once, and make sure it's loaded before this script is.
Other than that you could try replacing $ with the actual text jQuery.
jQuery(window).load(function($) {
Or you could try wrapping it in an anonymous function
(function() {
})();
I have a 2 small script in the footer of my page, that produce a script error in IE8. IEtester says that this script error is created from the document ready (but i believe it's just cuz it's the start). I used jQuery so that it was cross browser compatible. :(
<script type="text/javascript">
$(document).ready(function(){
//flexslider
$(".flexslider").flexslider({
animation : "slide",
slideshow : true,
animationDuration: "750",
slideshowSpeed: 5000,
pauseOnAction: true,
});
//text slider overer
$("#videos li").on({
mouseenter: function() {
$(this).animate({"padding-left": "50px"}, "normal");
},
mouseleave: function() {
$(this).stop(true).animate({"padding-left": "0px"}, "slow");
}});
});
Does anyone know how to correct this script error? If so, could you explain why this error is created in the first place?
first script html page: http://designobvio.us/fonts/
Second script html page: http://designobvio.us/fonts/middle.php
Here's one issue that's sure to trip up IE8:
$(".flexslider").flexslider({
animation : "slide",
slideshow : true,
animationDuration: "750",
slideshowSpeed: 5000,
pauseOnAction: true, // <-- Trailing comma
});
IE8 and lower hate trailing commas.
Remove the , from this line: pauseOnAction: true,
IE doesn't support commas on the end of the last line in an array or object.
I am using Slidesjs to use a simple scroller on my site. However, I cannot hide the pagination that shows the 1 and 2 bullet points.
The link for the project is www.barterscloset.com
I have tried trying to hide it in css and in a Jquery.hide function.
Thanks in advance!
There's an option built in, add these lines to where you fire the plugin:
pagination: false,
generatePagination: false
so your whole call would look like this (if you had no other otpions set, that is)
$(function(){
$("#slides").slides({
pagination: false,
generatePagination: false
});
});
(I am using cycler jquery malsup.
I have links in the content area of my jquery cycler area (where a photo often is) (links called 'read more') that I want to go to a url within my website.
I can't get the links to work.
My development page is: http://new.bishopchatard.org/New2011
The css is: http://new.bishopchatard.org/New2011/cycler.css
The pertinenet js is:
$('#scroller')
.cycle({
fx: 'scrollLeft',
speed: '800',
timeout: 4500,
pager: '#scrollernav',
pagerEvent: 'mouseover',
pauseOnPagerHover: true,
next: '#scroller'
});
Thank you for your help.