I'm following this flickity slide fade docs
FlickityFade Installation
Here is the css cdn package
<link rel="stylesheet" href="https://unpkg.com/flickity#2/dist/flickity.min.css">
<link rel="stylesheet" href="https://unpkg.com/flickity-fade#2/flickity-fade.css">
Here is the carousel html and the script set up
<div class="testimonial-carousel">
....carousels div....
</div>
<script src="https://unpkg.com/flickity#2/dist/flickity.pkgd.min.js"></script>
<script src="https://unpkg.com/flickity-fade#2/flickity-fade.js"></script>
<script>
$('.testimonial-carousel').flickity({
// options
fade: true,
cellAlign: 'left',
contain: true,
prevNextButtons: false
});
</script>
i don't figure out why this slide fade not working, only run in the dom like i am using normal flickity package
but, it shown error like link below
Error screenshot from my console log
Found the solution here Flickity issues
Related
I have a table using datatables plug-in.
I'm trying to make my table header fixed, and follow this link : here
$('.device-table').DataTable( {
"fixedHeader": {
header: true,
},
"bLengthChange": false,
"Filter": false,
"Info": false,
} );
I don't see the effect. I've included both js files of datatables and fixedHeader:
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js" type="text/javascript"></script>
How would one go about and debug this?
For the fixedHeader plugin to work you also need the css file:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.2/css/fixedHeader.dataTables.min.css">
Check this update:
https://jsfiddle.net/s2xbf9d0/6/
Your fiddle seems to be missing the dataTables.fixedHeader plugin as well as the fixedHeader.dataTables CSS file which was causing you the page from rendering properly (with the fixed headers).
Working DEMO: - https://jsfiddle.net/s2xbf9d0/7/
Hope this helps!
I am trying to add a fullwidth owl carousel slider to my page, but I cannot get it to work.
I am thinking it could be a conflict with the template I am using.
This is how I added everything:
(After including all owl carousel files of course)
First I included all files:
<!-- Important Owl stylesheet -->
<link rel="stylesheet" href="owl-carousel/owl.carousel.css">
<!-- Default Theme -->
<link rel="stylesheet" href="owl-carousel/owl.theme.css">
<!-- jQuery 1.7+ -->
<script src="assets/js/jquery-1.9.1.min.js"></script>
<!-- Include js plugin -->
<script src="assets/owl-carousel/owl.carousel.js"></script>
Then I added called owl carousel in my header:
<script>
$(document).ready(function() {
$("#owl-example").owlCarousel();
});
</script>
And finally I added the html code:
<!-- slider -->
<div id="owl-example" class="owl-carousel">
<div class="owl-slide"><img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png"> Slide 1 </div>
<div class="owl-slide"><img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png"> Slide 2 </div>
<div class="owl-slide"><img src="http://cumbrianrun.co.uk/wp-content/uploads/2014/02/default-placeholder.png"> Slide 3 </div>
</div>
<!-- end slider -->
But this is the result I get:
This is where I want to add the slider: URL (shortened url because I don't want this to affect SEO)
You have an error loading you owl.carousel.js file make sure you put the correct path. you have the items styled well but without carousel running because no javascript applied yet!
EDIT
now after putting the correct link you have to add more slides to let the carousel works because all of your slides are appearing now or you can use one slide at once like using the following js :
$(document).ready(function() {
$("#owl-demo").owlCarousel({
navigation : true, // Show next and prev buttons
slideSpeed : 300,
paginationSpeed : 400,
singleItem:true
// "singleItem:true" is a shortcut for:
// items : 1,
// itemsDesktop : false,
// itemsDesktopSmall : false,
// itemsTablet: false,
// itemsMobile : false
});
});
I have a flexslider pano on my index page, to get it work properly I have to use 'jQuery' version '1.6.2-1.7.2'. If I change the version to 1.7.3 or higher, the slider has a glitchy animation. The problem is that I have a drop down menu that only functions using versions 1.7.3 or higher in the same page.
I am trying to figure out how to make flexslider run on version 1.7.2 or lower, without affecting the rest of the site.
Here's the script for the flexslider:
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "fade",
animationLoop: true,
controlNav: false
});
});
</script>
I took some suggestions on overflow but they don't seem to work on Shopify.
Such as using jQuery.noConflict();
Here's my version:
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type='text/javascript'>
var $jq = jQuery.noConflict();
</script>
<script type='text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$j(window).load(function() {
$j('.flexslider').flexslider({
animation: "fade",
animationLoop: true,
controlNav: false
});
});
</script>
The website is enrou.co, I currently disabled the jQuery so you can see that the pano is glitchy when you switch between images. The only way for me to disable the animations is to run jQuery version 1.7.2 or earlier, but that disables the functionality of other plugins.
I am using fullpage.js in my website. I want the horizontal slides to slide automatically. For that I am using following code. But I am getting error in console:
Uncaught typeError:undefined is not a function.
The code:
<script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
anchors: ['home', 'about', 'why-us','services','team','contact'],
autoScrolling: true,
css3: true,
afterRender: function () {
setInterval(function () {
$.fn.fullpage.moveSlideRight();
}, 3000);
}
});
});
</script>
You are not including the needed files correctly.
Make sure they are in the location you are specifying.
As pointed in the docs and as you can see in the examples provided, this is the structure you have to follow to add the needed files.
<link rel="stylesheet" type="text/css" href="jquery.fullPage.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- This following line is needed in case of using the default easing option or when using another
one rather than "linear" or "swing". You can also add the full jQuery UI instead of this file if you prefer -->
<script src="vendors/jquery.easings.min.js"></script>
<!-- This following line needed in the case of using the plugin option `scrollOverflow:true` -->
<script type="text/javascript" src="vendors/jquery.slimscroll.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
I'm trying to get fancyBox (FB from now on) working and can't get it. I'll explain below what I do. The first is, of course, include the FB scripts and styles as follow:
<!-- fancyBox styles -->
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.css" rel="stylesheet">
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.css" rel="stylesheet">
<!-- fancyBox JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.1.1.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-buttons.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-media.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/helpers/jquery.fancybox-thumbs.js"></script>
<script src="/app_dev.php/js/bmain_registro_2.js" type="text/javascript"></script>
In my HTML code I have this:
Register
<div id="register"></div>
It's empty because the content is loaded trough AJAX call made on bmain_registro_2.js as you'll see below. Then in bmain_registro_2.js I write this:
var $register = $("#register");
if ($register.length) {
$register.load(Routing.generate('datos-basicos'));
}
$("#tabs").tabs();
$('.getregistered').on("click", function() {
console.log("click");
$("#register").fancybox({
openEffect: 'elastic',
closeEffect: 'elastic',
autoSize: false,
closeClick: false
});
});
Routing.generate('datos-basicos') comes from Symfony2 and FOSJsRoutingBundle but it's working fine because I get the content I want to show on the modal. The problems?
The modal content isn't hide (see the image below) and I think should be hide by default
When I click on Register link the console.log() code is executed but the modal never show up
What I'm missing here and is my code right?
You just need to add the 'fancybox' class to the link as following:
<a href="#" class="fancybox" >Register</a>
Regards..