I'm not familiare with js and I am trying to make a slider witch contains html divs with animation. This is the js I use:
$(function(){
// find all slides
var slides = $('.main-slide');
// starting index
var i = 0;
// click listener
$('#main-slider-next').click(function(){
// find next index
// i + 1 or 0 if end of slides
i = ++i % slides.length;
// scroll to that index
$('.slider-wrapper').animate(
{'left' : -(slides.eq(i).position().left)},
1000
);
});
});
The code contains a next-slide button, but I am wondering how to make a previous-slide button with js. Does anyone have a clue how I can make that?
quite easy. try:
$('#main-slider-previous').click(function() {
$('.slider-wrapper').animate({
'left': '+=100%'
},1000);
});
You can always use some simple jQuery slider e.g http://www.basic-slider.com/ (or more advanced http://unslider.com/)
All you have to do is to change animation type settings:
animtype : 'fade',
to
animtype : 'slide',
And you're ready to go ;).
Related
I'm pretty new with Jquery. I would like that my animations with Wow.js could run more than once time. For instance: i scroll to the bottom of my page and see all the animations, and if i scroll back to the top i see again the animations like when you scroll down. I hope that I explained myself. I have already seen many websites that repeats the animations on theirs pages but unfortunately I don't remember them and I can't provide a link.
I have already tried this:
$(window).scroll(function(){
new WOW().init();
}
But it repeat the animations also if you scroll a little and it's pretty ugly to see. I try to explain me better: I have a with my animation and if it is focused the animation is triggered, then i scroll down to another div and the previous div is no more visible(not in the window viewport), then again i scroll back to my div with animation and the animation is triggered again.
I'm sorry for this messy question but I really don't know how to explain it.
Thanks in advance!
This example by Benoît Boucart shows how the animation can be "reset" when the user scrolls out of view and back in. The key here is the second function that removes the animation css class when the element scrolls out of view. I wish WOW.js would implement this, but they've indicated that they don't plan to.
http://codepen.io/benske/pen/yJoqz
Snippet:
// Showed...
$(".revealOnScroll:not(.animated)").each(function () {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded > offsetTop) {
if ($this.data('timeout')) {
window.setTimeout(function(){
$this.addClass('animated ' + $this.data('animation'));
}, parseInt($this.data('timeout'),10));
} else {
$this.addClass('animated ' + $this.data('animation'));
}
}
});
// Hidden...
$(".revealOnScroll.animated").each(function (index) {
var $this = $(this),
offsetTop = $this.offset().top;
if (scrolled + win_height_padded < offsetTop) {
$(this).removeClass('animated fadeInUp flipInX lightSpeedIn')
}
});
If a user wants to repeat the animation on both the events i.e.
onScrollUp
onScrollDown
then this will be a good solution for it:
First create an addBox function, it will help to push new elements into the WOW boxes array.
WOW.prototype.addBox = function(element){
this.boxes.push(element);
};
Then use jQuery and scrollspy plugin that helps to detect which element is out of the view and then push WOW as:
$('.wow').on('scrollSpy:exit',function(){
var element = $(this);
element.css({
'visibility' : 'hidden',
'animation-name' : 'none'
}).removeClass('animated');
wow.addBox(this);
});
Solution Courtesy: ugurerkan
Answer by #vivekk is correct I m just adding a working example so that people can easily get this
see the Demo fiddle
<script>
// Repeat demo content
var $body = $('body');
var $box = $('.box');
for (var i = 0; i < 20; i++) {
$box.clone().appendTo($body);
}
// Helper function for add element box list in WOW
WOW.prototype.addBox = function(element) {
this.boxes.push(element);
};
// Init WOW.js and get instance
var wow = new WOW();
wow.init();
// Attach scrollSpy to .wow elements for detect view exit events,
// then reset elements and add again for animation
$('.wow').on('scrollSpy:exit', function() {
$(this).css({
'visibility': 'hidden',
'animation-name': 'none'
}).removeClass('animated');
wow.addBox(this);
}).scrollSpy();
</script>
This is a last ditch attempt to try to achieve what I need from this slider. I have implemented a jquery content slider called 'Super Simple Slider' on my website. I have never used this before and so far it has been super simple. However I need the first slide of the slider to display for slightly longer than all of the other slides. 10 seconds. However after much research I can not find a way to do this. Can anybody see a workaround so I can make this happen? Can I perhaps use pure JavaScript along with the jQuery to make this happen?
Below is the jQuery for the slider
<script>
$(function(){
$('.slider').sss({
slideShow : true, // Set to false to prevent SSS from automatically animating.
startOn : 0, // Slide to display first. Uses array notation (0 = first slide).
transition : 400, // Length (in milliseconds) of the fade transition.
speed : 7000, // Slideshow speed in milliseconds.
showNav : true // Set to false to hide navigation arrows.
});
});
</script>
I think the best way to do it is to make some (easy) changes in the plugin:
1. Add an option (to keep it configurable) : speedOnFirst (for example)
In the plugin settings:
var settings = $.extend({
slideShow : true,
startOn : 0,
speed : 3500,
speedOnFirst : 3500, // <--- HERE
transition : 400,
arrows : true
}, options);
2. Change the timeout in reset_timer function
Check if target == 0 (it means it's the first slide), and then, base your timeout on settings.speedOnFirst instead of settings.speed
reset_timer = settings.slideShow ? function() {
clearTimeout(timer);
speed = (0 !== target) ? settings.speed : settings.speedOnFirst; // <--- HERE
timer = setTimeout(next_slide, speed); // <--- Change second param here
} : $.noop;
3. Call your plugin
$('.slider').sss({
slideShow : true,
startOn : 0,
transition : 400,
speed : 7000,
speedOnFirst : 10000, // <--- Delay for your first slide
showNav : true
});
>> See working demo here
NB: In the demo, the slides changes quickly so as you can see the difference with the first one, juste change the values with whatever you need.
You will need to customize the plugin to accomplish what you need.
Look at the non minified version (sss.js) and add the following logic:
Add an extra option:
var settings = $.extend({
slideShow: true,
startOn: 0,
speed: 3500,
transition: 400,
arrows: true,
firstSlideSpeed:10000 // new setting for first slide speed
}, options);
Change the slide logic:
reset_timer = settings.slideShow ? function () {
clearTimeout(timer);
var slideSpeed = ((target === 0) && settings.firstSlideSpeed) ? settings.firstSlideSpeed : settings.speed; // changed here
timer = setTimeout(next_slide, slideSpeed); // changed here
} : $.noop;
This should do the trick for you.
Hope it helps!
I have created a newsfeed. The feed switches every 2 seconds. You can also manually switch left/right, or click the panel from the squares at the bottom. The switching between slides is down using jQuery UI Slide.
Right now, if you are in the middle of a slide, and you click left/right/squares, then another slide occurs on top of the existing, still going slide and the whole system is messed up.
How can I prevent other actions occurring if a slide/switch is already in progress?
This is my code:
$(document).ready(function(){
newsfeedTimer = setInterval(newsfeed, displayDuration);
// Manual change of feed (LEFT)
$('#newsfeeds_wrapper > .left').click(function(event){
event.stopPropagation();
feedLeft();
clearInterval(newsfeedTimer);
newsfeedTimer = setInterval(newsfeed, displayDuration);
});
// Very similar code for feed right
// Ignore the other method of switching (if it works for above, I can implement it for this one)
});
function newsfeed() {
feedRight();
}
// Feed to the Right
// jump is used to jump multiple newsfeed instead of one at a time
function feedRight(jump)
{
jump = typeof jump !== 'undefined' ? jump : 1;
var current = $('.newsfeed:first');
var next = $('.newsfeed:nth(' + jump + ')');
current.hide('slide',{duration: transitionDuration}, function(){
// Append as many needed
for( var i = 0; i < jump; i++ ) {
$('.newsfeed:first').appendTo('#newsfeeds');
}
next.show('slide',{direction : 'right' , duration: transitionDuration});
}
I don't want to stop() an animation! I want to disable changing the slides IF there is animation happening!!
without seeing the full breadth of the code, I am shooting myself in the foot here. But here is a direction I would take it. You could also have two functions, one to bind, another to unbind. When animation is initiated, you unbind the left/right controls. When stopped, you bind. Or, set a global variable... ala.
var config = {'inProgress': false};
$('#newsfeeds_wrapper > .left').click(function(event){
if(!config.inProgress){
event.stopPropagation();
feedLeft();
clearInterval(newsfeedTimer);
newsfeedTimer = setInterval(newsfeed, displayDuration);
}
});
in your animation function. Seems like when you cut/paste, some of the code is lost, so lets just assume some animation.
when you enter your animation functions, set config.inProgress = true;
function feedRight(jump)
{
config.inProgress = true;
// removed your code, but just using for simplicity sake
// added a callback
next.show('slide',{direction : 'right' , duration: transitionDuration},
function() {
// Animation complete. Set inProgress to false
config.inProgress = false;
});
)
}
I am implementing an image slider in javascript/jquery.
The demo should work like this.
http://londatiga.net/tutorials/scrollable/
Anyway I don't won't to rely on jquery.tools.min.js because this lib is out of date (the last update is about 8 months ago ).
I decide to make the js code by me.
When clicking on next or prev button I would like to shift the images on the list of one item/image.
The script shifts the items but the display is quite crappy, because the next items is not displayed.
The list is made of 4 images. At the beginning only the first two images are displayed, then when clicking on the next button I would like to display the second and the third image.
Actually the script shows just the first and the second image even if I click on the next button.
Here is the demo: http://jsfiddle.net/xRQBS/5/
Here is the code (1)
Any hints how should I fix it?
thanks
(1)
/*global jQuery */
(function ($) {
var imgs = [
'https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSsarNmO4Vdo5QwHfznbyxPmOyiYQ-KmBKUFsgEirvjW6Kbm7tj8w',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfIAfLXj3oK1lso1_0iQploSKsogfJFey3NnR0nSD9AfpWjU7egA',
'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR1dO4FVDDitdS85aLOCsOpQyHHTysDhD4kHQ749bMtNxaj5GMKnA',
'https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRAPO77sVu-Xk80S_txagySoTq8gKHgeiS63a9TYtKbPpGYVI5X'
];
var $list = $('.list-images');
var $slider = $('.slider');
var slideImage = function (direction) {
var unit = 150;
var left = parseInt($slider.attr('left'), 10) || 0;
left = (direction === 'prev') ? left - 150 : left + 150;
$slider.css('left', left + 'px');
};
$(function () {
$.each(imgs, function (i, img) {
$list.append($('<li>').append($('<img>').attr('src', img)));
});
$('body').on('click', '.direction', function () {
slideImage($(this).attr('data-tid'));
});
});
}(jQuery));
With the animate function:
$slider.animate({'left': left + 'px'}, 1000);
http://jsfiddle.net/xRQBS/6/
I'm assuming that you want the shift to be more of an animation. If so, take a look at jQuery's animate. Something like this:
$slider.animate({left: left + 'px'});
That will give it a sliding effect, which what I'm assuming you want :)
I am creating a coverflow plugin but I have a slight problem when it first loads.
The size/styles of the images is set based on their position in the coverflow. When the page first loads the images all resize properly but they do not reposition themselves. If I them use the left and right navigation they work correctly.
I am not sure what is causing this. I thought it might be something to do with the variable that sets the starting position of the coverflow...
Here's my code:
<script type="text/javascript" src="/scripts/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var coverflowPos = Math.round($('#coverflow img').length / 2)
$('#coverflow img').each( function(i) {
$(this).css({'opacity' : 1-(Math.abs(coverflowPos-i)*0.4), 'z-index' : 100-(Math.abs(coverflowPos-i)) }).width(200-(Math.abs(coverflowPos-i)*50)).height(128-(Math.abs(coverflowPos-i)*50));
});
// If I run the testme() function here, it animates to the right place but I want it to start in this position rather than animate to it
$('#moveLeft').click( function() {
if(coverflowPos > 1) {
coverflowPos = coverflowPos-1
}
testme();
});
$('#moveRight').click( function() {
if(coverflowPos < $("#coverflow img").length -1) {
coverflowPos = coverflowPos+1
}
testme();
});
function testme() {
$('#coverflow img').each( function(i) {
$(this).animate({
opacity: 1-(Math.abs(coverflowPos-i)*0.4),
width: 200-(Math.abs(coverflowPos-i)*50),
height: 128-(Math.abs(coverflowPos-i)*50)
}, {
duration: 500,
easing: 'easeInOutSine'
}).css({ 'z-index' : 100-(Math.abs(coverflowPos-i)) });
});
};
});
</script>
And here's a link to a jsfiddle:
http://jsfiddle.net/r8NqP/4/
Calling testme() at the end of the ready() function moves them into place. It does ease them in though, which looks a bit odd, could get rid of the ease in testme() by adding a doease parameter.
Check you fist each :
'z-index' : 100-(Math.abs(coverflowPos-i)) }).width(200-(Math.abs(coverflowPos-i)*50)).height(128-(Math.abs(coverflowPos-i)*50));
I think U mean:
'z-index' : 100-(Math.abs(coverflowPos-i)),
'width' : 200-(Math.abs(coverflowPos-i)*50),
'height': 128-(Math.abs(coverflowPos-i)*50)
Linke In your testme() function ?!
After that, you can also add a "Hack", by executing testme(true); at the end of script.
And add, in your testme() function , a test parameter to set the duration at 0 or simply disable animate and replace by CSS().
But, it just a Hack.
200-(Math.abs(coverflowPos-i)*50) may be less than 0 -- e.g.,
200-(5-0)* 50= 200 - 250 = -50
And the negative width ends up not being applied, leaving the width at its original 200px value. The opacity gets set properly, so all you get is a huge blank space where the image is.
var width = 200-(Math.abs(coverflowPos-i)*50);
if ( width < 0 ) width = 0;
covers the init nicely.
I haven't bothered to check why it's okay once it's animated -- my guess is, that the images were already small, so it's not as noticeable.
The problem came from "Each index", that not correctly used to compute the Width and Height of the first image.
Try this :
$('#coverflow img').each( function(i) {
i++;
$(this).css({...
And remove the Blank.gif...
Here, you find my fork fiddle : http://jsfiddle.net/akarun/FQWQa/