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
Related
i have created Custom easing.after finally run the code i am getting error. please anybody help.
JS:
$('.bxslider').bxSlider({
mode: 'horizontal',
useCSS: false,
hideControlOnEnd: true,
easing: 'easeOutElastic',
speed: 2000
});
Add infiniteLoop: false to your options.
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 stripped everything down to just the plugin and put it on a random old test site:
Demo
This is the main part of the code and the links are correct.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/slippry.min.js"></script>
<script>
$(function() {
$("#slideshow").slippry({
transition: 'fade',
useCSS: true,
speed: 2000,
pause: 6000,
auto: true,
preload: 'visible'
});
});
</script>
The common issues of wrong links or two instances of jquery being called can't be the problem. It's been driving me crazy.
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.
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.