here i am trying to make animation in which 1st image should slide and next second image and then third image and so on but now all of them are being animated at a time any help what to do.?
<script>
$(window).load(function(){
$(".frame-container").each(function(){
var frameheight=$(this).innerHeight();
var framewidth=$(this).innerWidth();
var refRatio = framewidth/frameheight;
var imgH = $(this).children("img").height();
var imgW = $(this).children("img").width();
if ( (imgW/imgH) < refRatio ) {
// $(this).addClass("portrait");
var moveImage = (imgH - frameheight)/2;
//alert(moveImage);
$(this).children("img").css({'position':'relative','top':'-'+moveImage+'px'});
$(this).children("img").animate({ top: '-100px',position:'relative' }, 5000 );
} else {
// alert(refRatio+"#####"+(imgW/imgH));
// $(this).addClass("landscape");
var moveImage = (imgW - framewidth)/2;
//alert(moveImage);
$(this).children("img").css({'position':'relative','left':'-'+moveImage+'px'});
$(this).children("img").animate({ left: '-100px','position':'relative' }, 5000 );
}
});
});
</script>
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="box1 frame-container">
<img src="images/8.JPG"/>
</div>
</div>
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="box2 frame-container"><img src="images/9.JPG" /></div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="box3 frame-container"><img src="images/10.JPG" /></div>
</div>
<div class="col-md-6 col-xs-6 col-sm-6">
<div class="box4 frame-container"><img src="images/11.jpg" /></div>
<div class="box5 frame-container"><img src="images/12.JPG" /></div>
</div>
</div>
Instead of sliding all the images at once using this code:
$(this).children("img").animate({ top: '-100px',position:'relative' }, 5000 );
Slide next after the first has completed it's slide animation, using this code:
var images = $(this).children("img");
var counter = 0;
function slideImage()
{
if(counter < images.length)
{
$(images[counter]).animate(
{ top: '-100px',position:'relative' },
5000,
function(){
slideImage();
}
);
counter++;
}
}
slideImage();
EDIT:
To mainatain the animation, add the following code after counter++;:
if(counter >= images.length)
counter = 0;
Related
Here is my Markup. I want to update/replace class name col-sm-3
to col-md-6 on widow resize (ex: width < 800)
<div class="llotherlogos-userthumb">
<div class="col-sm-3">
<div class="logo-thumb">
<img class="img-fluid" src="images/logos/logo-seven.jpg" alt="">
<div class="logo-caption">
<div class="ll-category">Business</div>
<div class="ll-price"><span>1000BDT</span>5000 BDT</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="logo-thumb">
<img class="img-fluid" src="images/logos/logo-eight.jpg" alt="">
<div class="logo-caption">
<div class="ll-category">Business</div>
<div class="ll-price"><span>1000BDT</span>5000 BDT</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="logo-thumb">
<img class="img-fluid" src="images/logos/logo-nine.jpg" alt="">
<div class="logo-caption">
<div class="ll-category">Business</div>
<div class="ll-price"><span>1000BDT</span>5000 BDT</div>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="logo-thumb">
<img class="img-fluid" src="images/logos/logo-ten.jpg" alt="">
<div class="logo-caption">
<div class="ll-category">Business</div>
<div class="ll-price"><span>1000BDT</span>5000 BDT</div>
</div>
</div>
</div>
</div>
JavaScript
var otherlogos = function(){
var ww = document.body.clientWidth;
var myLogos = document.querySelectorAll(".llotherlogos-userthumb .col-sm-3");
if(ww < 800){
myLogos.className.replace(col-sm-3, col-md-6);
}
}
window.onresize = otherLogos;
You need this:
myLogos.className.replace(col-sm-3, col-md-6);
To be:
myLogos[0].classList.replace('col-sm-3', 'col-md-6');
(querySelectorAll returns an array of elements, even if only one element matches, hence the need for myLogos[0].)
To do this for multiple elements, you'd need something like this (explicit for loop, because I think foreach doesn't work here):
for (let i = 0; i < myLogos.length; ++i)
myLogos[i].classList.replace('col-sm-3', 'col-md-6');
with jQuery you could do something like this
<script>
$(window).resize(function () {
if($(window).width()<800){
$('.llotherlogos-userthumb').children().removeClass('col-sm-3').addClass('col-md-6');
}else{
$('.llotherlogos-userthumb').children().removeClass('col-md-6').addClass('col-sm-3');
}
});
</script>
You just require to use toggle for achieving the goal. The example is given below:
myLogos.classList.toggle('col-sm-3');
myLogos.classList.toggle('col-md-6');
or
var myLogos = document.querySelectorAll(".llotherlogos-userthumb .col-sm-3");
var classes = myLogos.classList;
var result = classes.replace("col-sm-3", "col-md-6");
console.log(result);
For more info on above access this link
try this jquery code:
enter$( window ).resize(function() {
var ww = document.body.clientWidth;
<==========now select id or element==============>
$("#a1").addClass( "my-hidden").removeClass("my-disply");
// code here
});
On page scroll i am trying to remove a class at particular height of a block.but while adding 30% of page scroll and removing at some height some kind of fluctuation happening
I want to make a existing div sticky on page scroll of 30% and remove sticky at default height of that block.
See below
var lastScrollTop = 0;
$(window).on('scroll', function() {
var scrollTop = $(window).scrollTop();
var docHeight = $(document).height();
var winHeight = $(window).height();
var scrollPercent = (scrollTop) / (docHeight - winHeight);
console.log(scrollPercent);
var scrollPercentRounded = Math.round(scrollPercent * 100);
var footerperc = scrollPercentRounded - percentage;
console.log(footerperc);
st = $(this).scrollTop();
if (st < lastScrollTop) {
if (scrollPercentRounded > 30 && scrollPercentRounded < 70) {
$('.article-page .footer-block-top').addClass('sticky').animate('slow');
} else {
$('.article-page .footer-block-top').removeClass('sticky');
}
} else {
if (scrollPercentRounded > 30) {
$('.article-page .footer-block-top').addClass('sticky');
}
if (scrollPercentRounded > 72) {
$('.article-page .footer-block-top').removeClass('sticky');
}
}
lastScrollTop = st;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="footer-block col-md-12 col-sm-12 col-xs-12 no-padding ">
<div class="footer-block-top col-md-12 col-sm-12 col-xs-12 no-padding ">
<div class="container-fluid">
<div class="article-slide col-xs-12">
<div class="col-xs-6">
<div class="arw arw-left col-xs-1 no-padding-left">
</div>
<div class="common-list col-md-11 col-sm-11 col-xs-11 no-padding">
<div class="list-img col-lg-4 col-md-4 hidden-sm hidden-xs no-padding">
</div>
<!--event-list-title-->
<div class="list-content col-lg-8 col-md-8 col-sm-12 col-xs-12 no-padding">
</div>
</div>
</div>
<div class="col-xs-6 pull-right">
<div class="common-list col-md-11 col-sm-11 col-xs-11 no-padding">
<div class="list-content col-lg-8 col-md-8 col-sm-12 col-xs-12 no-padding">
Valuation</a>
</p>
</div>
<div class="list-img col-lg-4 col-md-4 hidden-sm hidden-xs no-padding">
</div>
<!--event-list-title-->
</div>
<div class="arw arw-right col-xs-1 no-padding-right">
</div>
</div>
</div>
</div>
</div>
Like this?
If you want to add attributes for a specific height have a look at Mediaqueries :)
var lastScrollTop = 0;
$(window).on('scroll', function() {
var scrollTop = $(window).scrollTop();
var docHeight = $(document).height();
var winHeight = $(window).height();
var scrollPercent = (scrollTop) / (docHeight - winHeight);
console.log(scrollPercent);
var scrollPercentRounded = Math.round(scrollPercent*100);
var footerperc=scrollPercentRounded;// - percentage;
console.log(footerperc);
var st = $(this).scrollTop();
if(st < lastScrollTop) {
if (scrollPercentRounded > 30 && scrollPercentRounded < 70 ) {
$('.article-page .footer-block-top').addClass('sticky').animate('slow');
console.log("set sticky");
}
else {
$('.article-page .footer-block-top').removeClass('sticky');
}
}
else {
if (scrollPercentRounded > 30) {
$('.article-page .footer-block-top').addClass('sticky');
console.log("set sticky");
}
if (scrollPercentRounded > 72 ) {
$('.article-page .footer-block-top').removeClass('sticky');
}
}
lastScrollTop = st;
});
.sticky {
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article-page">
<div class="footer-block-top">
Some Content
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
Short Version
$(window).on('scroll', function() {
let height = $(document).height() -$(this).height();
let scroll = $(this).scrollTop();
let percent = Math.round( scroll / height *100 );
if( percent > 30 && percent < 70 ) {
$('.article-page').addClass('sticky');
} else {
$('.article-page').removeClass('sticky');
}
});
.sticky {
position: sticky;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="article-page">
<div class="footer-block-top">
Some Content
</div>
</div>
A
<br><br><br><br><br><br>
B
<br><br><br><br><br><br><br><br><br>
C
<br><br><br><br><br><br><br><br><br>
Hello All these codes working ok for me except one thing - I'd like to stop it when is come to last slide ( 6th slide ) but he is going to clone 1 , 2 and 3 more slides (depends of resolution) and after that it's stops. I am beginner in java script and cannot find solution..Please anyone:
HTML
<div id="package" class="carousel carousel-showmanymoveone slide row" data-ride="carousel">
<div class="carousel-inner">
<div class="item active">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=1" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=2" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=3" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=4" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=5" class="img-responsive"></div>
</div>
<div class="item">
<div class="col-xs-6 col-sm-4 col-xl-3"><img src="http://placehold.it/500/0054A6/fff/&text=6" class="img-responsive"></div>
</div>
</div>
<a class="left carousel-control" href="#package" data-slide="prev"><i class="glyphicon glyphicon-chevron-left strel"></i></a>
<a class="right carousel-control" href="#package" data-slide="next"><i class="glyphicon glyphicon-chevron-right strel"></i></a>
</div>
JAVASCRIPT
(function(){
// setup your carousels as you normally would using JS
// or via data attributes according to the documentation
// http://getbootstrap.com/javascript/#carousel
$('#package').carousel({ interval: false, pause:true });
}());
(function(){
$('.carousel-showmanymoveone .item').each(function(){
var itemToClone = $(this);
for (var i=1;i<4;i++) {
itemToClone = itemToClone.next();
// wrap around if at end of item collection
if (!itemToClone.length) {
itemToClone = $(this).siblings(':first');
}
// grab item, clone, add marker class, add to collection
itemToClone.children(':first-child').clone()
.addClass("cloneditem-"+(i))
.appendTo($(this));
//listener for after slide
jQuery('.carousel-showmanymoveone').on('slid.bs.carousel', function(){
//Each slide has a .item class to it, you can get the total number of slides like this
var totalItems = jQuery('.carousel-showmanymoveone .item').length;
//find current slide number
var currentIndex = jQuery('.carousel-showmanymoveone .item div.active').index() + 1;
//if slide number is last then stop carousel
if(totalItems == currentIndex){
clearInterval(jQuery('.carousel-showmanymoveone .item').data('bs.carousel').interval);
} // end of if
});
}
});
}());
Setting the wrap option to false makes the carousel to stop cycling automatically.
$('#package').carousel({
interval: 1000,
wrap: false
});
Also, you can use data-wrap="false" in the carousel's HTML
EDIT
You can detect first and last slide with this code:
$('#package').on('slid.bs.carousel', '', function() {
var $this = $(this);
if($('.carousel-inner .item:first').hasClass('active')) {
console.log('first slide');
} else if($('.carousel-inner .item:last').hasClass('active')) {
console.log('last slide');
}
});
I'm using the following code for a simple carousel. I'd like to make it repeat after you get to the third quote-item.
Can anyone help? Thank you.
Here's the JS:
<script>
show()
$(function() {
var currentCarousel = 0;
function changeCarousel() {
$('.quote-item').hide();
$('.quote-item:eq('+ currentCarousel +')').show();
currentCarousel = currentCarousel + 1;
setTimeout(function(){ changeCarousel(); }, 8000);
}
changeCarousel();
$('.quote-change').click(function(e) {
e.preventDefault();
changeCarousel();
});
});
</script>
And this is the HTML:
<div class="quote" >
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1">
</div>
<div class="quote-text">
quote text one
</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1">
</div>
<div class="quote-text">
quote text Two...
</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1">
</div>
<div class="quote-text">
quote text THREE...
</div>
</div>
next
</div>
Try this:
$(function () {
var currentCarousel = 0;
var timeoutID = null;
var timeoutDuration = 2000;
var quoteChange = $('.quote-change');
var quoteItems = $('.quote-item');
var numQuotes = quoteItems.length;
function changeCarousel() {
quoteItems.hide();
quoteItems.eq(currentCarousel).show();
currentCarousel += 1;
if (currentCarousel === numQuotes) { currentCarousel = 0; }
clearTimeout(timeoutID);
timeoutID = setTimeout(function () {
changeCarousel();
}, timeoutDuration);
}
changeCarousel();
quoteChange.click(function (e) {
e.preventDefault();
changeCarousel();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="quote">
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 1" />
</div>
<div class="quote-text">quote text one</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 2" />
</div>
<div class="quote-text">quote text Two...</div>
</div>
<div class="quote-item">
<div class="quote-image">
<img src="" alt="quote 3" />
</div>
<div class="quote-text">quote text THREE...</div>
</div>
next
</div>
Also you were missing a clearTimeout(); since you have a click handler calling the same changeCarousel() function as well. There is a conflict.
So imagine that by default, your setTimeout keeps calling changeCarousel() recursively and assuming it was right in the middle of another loop (4 seconds) when you decide to click on next button and jump to next carousel item by yourself. Because of that, your newly displaying carousel item will now only stay visible for the remaining 4 seconds but instead it should have had a full 8 seconds stay. Making sense?
Hope you find it useful.
Update your changeCarousel so if currentCarousel >= slides.length it resets to 0
function changeCarousel() {
$('.quote-item').hide();
$('.quote-item:eq('+ currentCarousel +')').show();
if(currentCarousel >= slides.length ){
currentCarousel = 0;
} else{
currentCarousel++;
}
setTimeout(function(){ changeCarousel(); }, 8000);
}
I've edited the code provided from here to cater for two carousel without it being id dependent, which works fine, except that I can't get the tabs to work properly upon click. (E.g, removing the class "synced" and adding them onto the clicked tab properly.) Think I'm not doing something right with both function syncPosition and function left.
Where did I miss out, or did wrong?
HTML:
<!--Carousel 1-->
<div class="tabslider">
<div class="owl-carousel tabthumb">
<div class="item" >1</div>
<div class="item" >2</div>
<div class="item" >3</div>
<div class="item" >4</div>
<div class="item" >5</div>
</div>
<div class="owl-carousel tabcontent">
<div class="item">Content 1</div>
<div class="item">Content 2</div>
<div class="item">Content 3</div>
<div class="item">Content 4</div>
<div class="item">Content 5</div>
</div>
</div>
<!--Carousel 2-->
<div class="tabslider">
<div class="owl-carousel tabthumb">
<div class="item" >1</div>
<div class="item" >2</div>
<div class="item" >3</div>
<div class="item" >4</div>
</div>
<div class="owl-carousel tabcontent">
<div class="item">Content 1</div>
<div class="item">Content 2</div>
<div class="item">Content 3</div>
<div class="item">Content 4</div>
</div>
Script:
<script>
$(document).ready(function() {
$('.tabslider').each(function(){
var sync1 = $(this).children(".tabcontent");
var sync2 = $(this).children(".tabthumb");
sync1.owlCarousel({
singleItem : true,
slideSpeed : 1000,
pagination:false,
afterAction : syncPosition,
responsiveRefreshRate : 200,
});
sync2.owlCarousel({
items : 3,
itemsDesktop : [1199,3],
itemsDesktopSmall : [979,3],
itemsTablet : [768,2],
itemsMobile : [479,2],
pagination:false,
navigation: false,
navigationText: [
"<i class='icon-arrow-left7'></i>",
"<i class='icon-uniE6E2'></i>"
],
responsiveRefreshRate : 100,
afterInit : function(el){
el.find(".owl-item").eq(0).addClass("synced");
}
});
function syncPosition(el){
var current = this.currentItem;
// $(".tabthumb")
$(this).find(".tabthumb")
.find(".owl-item")
.removeClass("synced")
.eq(current)
.addClass("synced")
if($(this).children(".tabthumb").data("owlCarousel") !== undefined){
left(current)
console.log(this)
}
}
$(this).children(".tabthumb").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
sync1.trigger("owl.goTo",number);
});
function left(number){
var sync2visible = sync2.data("owlCarousel").owl.visibleItems;
var num = number;
var found = false;
for(var i in sync2visible){
if(num === sync2visible[i]){
var found = true;
}
}
if(found===false){
if(num>sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", num - sync2visible.length+2)
}else{
if(num - 1 === -1){
num = 0;
}
sync2.trigger("owl.goTo", num);
}
} else if(num === sync2visible[sync2visible.length-1]){
sync2.trigger("owl.goTo", sync2visible[1])
} else if(num === sync2visible[0]){
sync2.trigger("owl.goTo", num-1)
}
}
})
});
</script>
JS:
//remove the following(and its closing tag of course) :
$('.tabslider').each(function(){
//modify this part:
$(this).children(".tabthumb").on("click", ".owl-item", function(e)
{
//we modify our trigger to only apply to our current gallery, not all of them
e.preventDefault();
var number = $(this).data("owlItem");
//The navigation with the thumbnails
var $thumbnailNavWrapper = $(this).closest('your-thumbnail-navigation-class');
//the slider with the big images .prev or .next depending on
whether we find our slider before or next to the thumbnail navigation
$sync1 = $thumbnailNavWrapper.prev();
sync1.trigger("owl.goTo",number);
});
If the above is not enough and you need a thumbnail nav with a "centerized" style.
function center(number){
var sync2visible = $sync2.data("owlCarousel").owl.visibleItems;
var num = number;
if(num === sync2visible[0])
{
$sync2.trigger("owl.goTo", num-1);
}
else if(sync2visible.length <= 2)
{
$sync2.trigger("owl.goTo", num+1);
}
else
{
$sync2.trigger("owl.goTo", num-1);
}
}
Not sure if this will 100% help. Just made mine with the same issue.