Adding animation to slides built with slick.js - javascript

I am attempting to add animation to the text on my slides built with slick.js. I attempted to use some code form this post(Slick Carousel target active slide to add and remove animation classes) but it is not adding any classes.
I feel like there is something wrong with my callback functions since I do not see these classes being added. Anyone have an idea?
<script>
$(document).ready(function(){
$('.featured-wrap').slick({
infinite: true,
speed: 400,
autoplaySpeed: 6000,
autoplay: true,
fade: true,
slide: 'div',
cssEase: 'linear',
dots: true,
arrows: true,
pauseOnHover: false,
adaptiveHeight: true
});
});
</script>
<script>
$(document).ready(function(){
$('.featured-wrap').on('afterChange', function(event, slick, currentSlide){
$('.slick-active .display').removeClass('hidden');
$('.slick-active .display').addClass('animated fadeInDown');
});
$('.featured-wrap').on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.slick-active .display').removeClass('animated fadeInDown');
$('.slick-active .display').addClass('hidden');
});
});
</script>

html code
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.1/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css"/>
<script type="text/javascript" src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<script src="app2.js"></script>
<style>
body {
background-color: lightblue;
}
#slickslide {
height: 200px;
background: lightgray;
}
#content {
margin: auto;
padding: 20px;
width: 80%;
}
</style>
</head>
<body>
<button onclick="myFunction()">Try it</button>
<div id="demo"></div>
<div id=content>
<div id="slickslide" slick="">
<div><h1>1</h1></div>
<div><h1>2</h1></div>
<div><h1>3</h1></div>
<div><h1>4</h1></div>
<div><h1>5</h1></div>
</div>
</div>
</body>
</html>
JavaScript code
function myFunction() {
$(document).ready(function(){
$('#slickslide').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
slidesToScroll: 1
});
});
}

Related

Slick slider showing only text

When I try to implement this Slick slider I get only a list of the numbers like in the image:
https://codepen.io/AntFArm/pen/JNEgJE
html code:
<div class="main">
<div class="slider slider-for">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="slider slider-nav">
<div><h3>1</h3></div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
<div><h3>5</h3></div>
</div>
<div class="action">
go to slide 3
go to slide 4
go to slide 5
</div>
</div>
js code:
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider-nav').slick('slickGoTo', slideno - 1);
});
I get this:
I have the exact same code as on the codepen.io site..
Also I don't have any errors.
What am I doing wrong? THanks in advance.
My script includes:
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<script src="/js/slick.min.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>
<script type="text/javascript" src="/assets/slick/slick.min.js"></script>
<script>
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '.slider-nav'
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slider-for',
dots: true,
focusOnSelect: true
});
$('a[data-slide]').click(function(e) {
e.preventDefault();
var slideno = $(this).data('slide');
$('.slider-nav').slick('slickGoTo', slideno - 1);
});
</script>
I load the necessary files in head:
Javascript is run as it is seen. Seeing as your code doesn't work I have to assume that you are adding your script in the <head> or at least before where you define <div class="main">. The rendering engine has not yet rendered your relevant slider elements so it cannot find them and does... nothing.
Either wrap your script in an onload (or a $(function() {/* your code here */})) or put your script at the bottom of your page
Seems like slick default styles are not applied double check you have them and the path to them is correct.
<link rel="stylesheet" type="text/css" href="/assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="/assets/slick/slick-theme.css"/>
In your codepen, slick is not loaded so you get the default DOM display of your divs (one under each other). There must be something wrong with your loading of the scripts.

jquery dialog not load iframe

I have this code:
<div id="dialog">
<iframe id="myIframe" src=""></iframe>
</div>
<style>
#myIframe{
width: 100%;
height: 100%;
}
</style>
function showModalSettings(id){
alert(id);
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
$('#myIframe').src = 'https://www.onet.pl';
},
height: '600',
width: '800',
resizable: true,
title: 'Settings'
});
$('#dialog').dialog('open');
}
showModalSettings(12);
I need to open in the jquery dialogbox https://www.onet.pl (in iframe).
The current code shows me the dialogbox correctly - but without the onet.pl website. Iframe is empty
how to fix it?
With jQuery we use the attr() method to modify the attributes of an HTML element.
Your code after the fix will looks like this:
function showModalSettings(id){
alert(id);
$("#dialog").dialog({
autoOpen: false,
show: "fade",
hide: "fade",
modal: true,
open: function (ev, ui) {
//$("#myIframe").src = "https://www.onet.pl";
$("#myIframe").attr("src", "https://www.onet.pl");
},
height: '600',
width: '800',
resizable: true,
title: 'Settings'
});
$('#dialog').dialog('open');
}
showModalSettings(12);
#myIframe{
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html>
<head>
<title>Hello, world!</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<div id="dialog">
<iframe id="myIframe"></iframe>
</div>
</body>
</html>
Read more about the attr() from the following link: https://api.jquery.com/attr/
Side Note: next time please reveal the libraries or frameworks you're using (e.g. jQuery UI in this question) , this help whoever want to answer your question.

slippry.js plugin is not working

I am learning Web Design using many plugins. slippry.js is one of them but I could not figure what is wrong with my codes given bellow. I get nothing on page. Thank you
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/slippry.min.js"></script>
<link rel="stylesheet" href="css/slippry.css"/>
<script>
JQuery(document).ready(function() {
JQuery('#pictures-demo').slippry({
slippryWrapper: '<<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
}); });
</script>
HTML Code (index.html)
<div class="sy-box pictures-slider">
<div class="sy-slides-wrap">
<div class="sy-slides-crop">
<ul id="pictures-demo">
<li title="And this is some very long caption for slide 3. Yes, really long.">
<img src="images/MainBackground.png" alt="demo1_3">
</li>
<li title="And this is some very long caption for slide 4.">
<img src="images/MainBackground2.png" alt="demo1_4">
</li>
</ul>
</div>
</div>
You mistake is parameter of
slippryWrapper
hastwo
starting angular bracket
here :
<script>
JQuery(document).ready(function() {
JQuery('#pictures-demo').slippry({
slippryWrapper: '<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
}); });
</script>
There are some typos like "JQuery" (it must be: "jQuery") or a double < for the property slippryWrapper.
The updated code:
jQuery(document).ready(function () {
jQuery('#pictures-demo').slippry({
slippryWrapper: '<div class="sy-box pictures-slider"/>',
adaptiveHeight: false,
captions: false,
pager: false,
// controls
controls: false,
autoHover: false,
// transitions
transition: 'kenburns', // fade, horizontal, kenburns, false
kenZoom: 140,
speed: 2000 // time the transition takes (ms)
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/booncon/slippry/master/dist/slippry.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/booncon/slippry/master/dist/slippry.css"/>
<div class="sy-box pictures-slider">
<div class="sy-slides-crop">
<ul id="pictures-demo">
<li title="And this is some very long caption for slide 3. Yes, really long.">
<img src="http://slippry.com/assets/img/image-3.jpg" alt="demo1_3">
</li>
<li title="And this is some very long caption for slide 4.">
<img src="http://slippry.com/assets/img/image-4.jpg" alt="demo1_4">
</li>
</ul>
</div>
</div>

jQUery Dialog Box when Clicking Navigation Bar Link not Working

I'm trying to set up a jQuery Dialog box from clicking a list element in my navigation bar. I have the code working for a separate project when clicking a canvas element but it wont work for this application. My code is as follows:
Clickable Div in Nav-Bar List:
<nav id="nav_bar">
<ul>
<li><a class="fancypdf" href="img/resume.pdf">Resume</a></li>
<li><a>Youtube</a></li>
<li class="contact" style="cursor:pointer;">Contact</li>
</ul>
</nav>
Div that Should Show up in Dialog Box:
<div class='dialog'>
Hello
</div>
jQuery:
<script>
$(function(){
$(".contact").click(function(event){
$(".dialog").dialog({
width:490,
height:500,
draggable:false,
blur:true,
show:{
effect:"blind",
duration:100
},
hide: {
effect: 'blind',
duration: 100
}
});
});
});
</script>
My "imports":
http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
http://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"> </script>
<script type="text/javascript" src="js/libs/fancybox-2.1.4/jquery.fancybox.pack.js"> </script>
<link rel="stylesheet" href="css/fancybox/jquery.fancybox-buttons.css">
<link rel="stylesheet" href="css/fancybox/jquery.fancybox-thumbs.css">
<link rel="stylesheet" href="css/fancybox/jquery.fancybox.css">
Here is all of my main script tags:
<script>
$(".fancypdf").click(function(){
$.fancybox({
type: 'html',
autoSize: false,
content: '<embed src="'+this.href+'#nameddest=self&page=1&view=FitH,0&zoom=80,0,0" type="application/pdf" height="99%" width="100%" />',
beforeClose: function() {
$(".fancybox-inner").unwrap();
}
}); //fancybox
return false;
}); //click
</script>
<!-- Grab Google CDN's jQuery, fall back to local if offline -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </script>
<script>window.jQuery || document.write('<script src="js/libs/jquery- 1.7.1.min.js"><\/script>');</script>
<!-- FancyBox -->
<script src="js/fancybox/jquery.fancybox.js"></script>
<script src="js/fancybox/jquery.fancybox-buttons.js"></script>
<script src="js/fancybox/jquery.fancybox-thumbs.js"></script>
<script src="js/fancybox/jquery.easing-1.3.pack.js"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.fancybox').fancybox({
beforeShow : function(){
this.title = this.title + " - " + $(this.element).data("caption");
}
});
}); // ready
</script>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'elastic',
closeEffect : 'none',
beforeShow : function(){
this.title = $(this.element).data("caption");
}
});
});
</script>
<script>
var jquery = jQuery.noConflict();
jquery(function(){
jquery(".contact").click(function(event){
console.log("clicked");
jquery(".dialog").dialog({
width:490,
height:500,
draggable:false,
blur:true,
show:{
effect:"blind",
duration:100
},
hide: {
effect: 'blind',
duration: 100
}
});
});
});
</script>
It looks like you forgot to include jQuery UI or the order of jQuery and jQuery UI loaded are wrong.
Your code is working fine.
Tested in jsBin
Just make sure all js are included properly:
<link href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>

Can somebody tell me why this Jquery tooltip is not showing up?

<link rel="stylesheet" type="text/css" href="jquery-tooltip/jquery.tooltip.css"/>
<script type="text/javascript" src="jquery-tooltip/jquery.tooltip.js"></script>
<div id="baby" title="My tootip">The text</div>
<script type="text/javascript">
$(function(){
$('#baby').tooltip({
track: true,
delay: 0,
showURL: false,
showBody: " - ",
extraClass: "pretty",
fixPNG: true,
opacity: 0.95,
left: -120
});
});
</script>
The files are found, and they are not 404.
Can't confirm your problem. Your code copy/pasted works just fine
Demo http://jsbin.com/iwojo3

Categories

Resources