i need to show number of list and loop the remain number when i click on see more appear 6 of list and slice the rest and back to slice when i click prev button ..
https://codepen.io/hesham-farag/pen/Ngadvj
<div class="comment-box-container">
<div class="comment-box">
<div class="user-comment-box">0</div>
<div class="user-comment-box">1</div>
<div class="user-comment-box">2</div>
<div class="user-comment-box">3</div>
<div class="user-comment-box">4</div>
<div class="user-comment-box">5</div>
<div class="user-comment-box">6</div>
<div class="user-comment-box">7</div>
<div class="user-comment-box">8</div>
<div class="user-comment-box">9</div>
<div class="user-comment-box">10</div>
<div class="user-comment-box">11</div>
<div class="user-comment-box">12</div>
<div class="user-comment-box">13</div>
<div class="user-comment-box">14</div>
<div class="user-comment-box">15</div>
<div class="user-comment-box">16</div>
<div class="user-comment-box">17</div>
<div class="user-comment-box">18</div>
<div class="user-comment-box">19</div>x">
<button class="see-more">See More...</button>
</div><!--comment-box end-->
</div><!-- comment-box-container end-->
.user-comment-box { display:none;
}
$(function(){
// select the first 5 hidden divs
$( ".comment-box" ).each(function( index ) {
$(this).children(".user-comment-box").slice(-5).show();
});
$(".see-more").click(function(e){ // click event for load more
e.preventDefault();
var done = $('<div class="see-more=done">done</div>');
$(this).siblings(".user-comment-box:hidden").slice(-5).show(); // select next 5 hidden divs and show them
if($(this).siblings(".user-comment-box:hidden").length == 0){ // check if any hidden divs
$(this).replaceWith(done); // if there are none left
}
});
});
Thanks!
Here's the working code:
$(function(){
// select the first 5 hidden divs
var count = 5;
var currentCount = 0;
$( ".comment-box" ).each(function( index ) {
$(this).children(".user-comment-box").slice(0,count).show();
currentCount = count;
});
$(".see-more").click(function(e){ // click event for load more
e.preventDefault();
$( ".comment-box" )children(".user-comment-box").slice(0,count).hide();
var done = $('<div class="see-more=done">done</div>');
$(this).siblings(".user-comment-box").hide();
$(this).siblings(".user-comment-box:hidden").slice(currentCount,currentCount + count).show(); // select next 5 hidden divs and show them
currentCount +=count;
if($(this).siblings(".user-comment-box").length == currentCount){ // check if any hidden divs
$(this).replaceWith(done); // if there are none left
}
});
});
i found the answer and put in this link for anyone search for
link
$(document).ready(function() {
var $pagination = $(".pagination");
var $lis = $pagination.find("li:not(#prev, #next)");
$lis.filter(":gt(3)").hide();
$lis.filter(":lt(5)").addClass("active");
var $next = $("#next").click(function() {
var idx = $lis.index($lis.filter(".active:last")) || 0;
var $toHighlight = $lis.slice(idx + 1, idx + 6);
$(".prev").show();
if ($toHighlight.length == 0) {
$prev.show();
return;
}
$next.show();
$lis.filter(".active").removeClass("active").hide();
$toHighlight.show().addClass("active");
});
var $prev = $("#prev").click(function() {
var idx = $lis.index($lis.filter(".active:first")) || 0;
var start = idx < 4 ? 0 : idx - 3;
var $toHighlight = $lis.slice(start, start + 5);
if ($toHighlight.length == 0) {
$prev.hide();
return;
}
$next.show();
$lis.filter(".active").removeClass("active").hide();
$toHighlight.show().addClass("active");
});
}); // close jquery
Related
I work with big quantity of data, and all data are not fering in screen, was decided to change data depends of time interval. When my page is load in array i received 18 items, which i put in to div's.
So i need show in page first 8 items, after 10 second, another 8 items, and in the end show 2 items (because i have only 18 items.).
So i create script which show one by one div's, but i need show 8 in 10 second
var current = 0;
setInterval(function () {
var divs = $(".cards").hide();
divs.eq(current).fadeIn("normal");
console.log(divs.eq(current))
if (current < divs.length - 1)
current++;
else
current = 0;
}, 1000);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="cards">1</div>
<div class="cards">2</div>
<div class="cards">3</div>
<div class="cards">4</div>
<div class="cards">5</div>
<div class="cards">6</div>
<div class="cards">7</div>
<div class="cards">8</div>
<div class="cards">9</div>
<div class="cards">10</div>
<div class="cards">11</div>
<div class="cards">12</div>
<div class="cards">13</div>
<div class="cards">14</div>
<div class="cards">15</div>
<div class="cards">16</div>
<div class="cards">17</div>
<div class="cards">18</div>
So how it's must works:
First 10 sec show div's from 1-8
After 10 sec show items from 9-16
And in the end show rest 2 div's
But for this exmple i have 18, but this data will be dynamicaly, and i dont know how many div's i will have
A solution:
var current = 0;
$(".cards").hide();
setInterval(function () {
var divs = $(".cards").hide();
var i = 0;
while (i < 8) {
divs.eq(current).fadeIn("normal");
console.log(divs.eq(current))
if (current < divs.length) {
i++;
current = current + 1;
} else {
i = 0;
current = 0;
}
}
}, 10000);
Solution was found:
script:
$(document).ready(function () {
var elements = $(".cards");
var index = 0;
var showNext = function (index) {
if (index >= elements.length) {
index = 0;
}
console.log(index);
elements.hide().slice(index, index + 8).show();
setTimeout(function () {
showNext(index + 8)
}, 10000);
}
showNext(0);
});
I have created a website for a friend which includes a slideshow with his most recent Instagram posts. The slideshow has a right and left arrow cursor.
The right cursor is working how I want it to; it shows each image from the array upon each click, and keeps going regardless of how many times the user clicks the right cursor. When it reaches the last image in the array, it starts at the first image again due to an if statement put in place.
However, I am having trouble with the left cursor and I suspect it is the counter variable? With the current code, what happens is when I click the left cursor (with the page refreshed and without even clicking on the right cursor), it goes to the second image in the array index1, rather than the last. Then I click the left cursor again without any change happening, then when I click it the third time it goes to the last image in the array and works as it should until it reaches the second image in the array again - because after that it does not go to the first image, it skips the first image after another click of nothing happening and then goes to the last image in the array. Repeats itself in that manner (sorry for going so in-detail, but I want people to get an idea of whats happening here if the code doesn't help).
var sliderImages = [];
var counter = 1;
sliderImages[0] = "images/i1.png";
sliderImages[1] = "images/i2.png";
sliderImages[2] = "images/i3.png";
sliderImages[3] = "images/i4.png";
sliderImages[4] = "images/i5.png";
$("#right-arrow").click(function() {
$(".active").attr("src", sliderImages[counter]);
counter++;
$('#count').text(counter);
if (counter >= sliderImages.length) {
counter = 0;
}
});
$("#left-arrow").click(function() {
$(".active").attr("src", sliderImages[counter]);
counter--;
if (counter <= 0) {
counter = sliderImages.length
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="instagram-feed">
<div class="container">
<h2>INSTAGRAM GALLERY</h2>
<div class="insta-gallery">
<img src="images/left-arrow.png" class="arrow" id="left-arrow">
<img src="images/i1.png" class="active">
<img src="images/right-arrow.png" class="arrow" id="right-arrow">
</div>
</div>
<div class="clear"></div>
</section>
When your page loads, you set counter to 1. When you click the left-arrow button, the first thing you do is set the image to the counter value, and so you set the image to 1. (Remember, arrays are 0-indexed, meaning 1 refers to the second item).
You'd be better off if counter was referring to the current image, not trying to assume the upcoming one. See my comments in the modified code below for more information.
var sliderImages = [];
var counter = 0; //Start with first image instead of second
sliderImages[0] = "images/i1.png";
sliderImages[1] = "images/i2.png";
sliderImages[2] = "images/i3.png";
sliderImages[3] = "images/i4.png";
sliderImages[4] = "images/i5.png";
$("#right-arrow").click(function() {
counter++; //Moving forward by one
if (counter > sliderImages.length-1) counter = 0; //Wrap-around if we exceed length-1
$(".active").attr("src", sliderImages[counter]); //Update img src
});
$("#left-arrow").click(function() {
counter--; //Moving backward by one
if (counter < 0) counter = sliderImages.length-1; //Wrap-around if negative
$(".active").attr("src", sliderImages[counter]); //Update img src
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="instagram-feed">
<div class="container">
<h2>INSTAGRAM GALLERY</h2>
<div class="insta-gallery">
<img src="images/left-arrow.png" class="arrow" id="left-arrow">
<img src="http://via.placeholder.com/350x150" class="active">
<img src="images/right-arrow.png" class="arrow" id="right-arrow">
</div>
</div>
<div class="clear"></div>
</section>
Use a counter as if you're handling indexes, so set it initially at 0.
Here's the basic logic:
var sliderImages = [
"//placehold.it/100x100/0bf?text=O",
"//placehold.it/100x100/f0b?text=1",
"//placehold.it/100x100/0fb?text=2",
"//placehold.it/100x100/fb0?text=3",
"//placehold.it/100x100/b0f?text=4"
];
var n = sliderImages.length; // Total slides
var c = 0; // Counter
function anim () {
$("#mainImage").attr("src", sliderImages[c]);
}
$("#prev").on("click", function() {
--c; // Pre-decrement
if ( c < 0 ) { c = n-1; } // If lower than 0 - go to last slide
anim(); // animate
});
$("#next").on("click", function() {
++c; // Pre-increment
if ( c > n-1 ) { c = 0; } // If greater than num of slides - go to first slide
anim(); // animate
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="mainImage" src="//placehold.it/100x100/0bf?text=O">
<br>
<button id="prev">←</button>
<button id="next">→</button>
<span id="count"></span>
Or here's a neater extracted formula of the above:
var sliderImages = [
"//placehold.it/100x100/0bf?text=O",
"//placehold.it/100x100/f0b?text=1",
"//placehold.it/100x100/0fb?text=2",
"//placehold.it/100x100/fb0?text=3",
"//placehold.it/100x100/b0f?text=4"
];
var n = sliderImages.length; // Total slides
var c = 0; // Counter
function anim () {
c = c<0 ? n-1 : c%n; // Fix counter
$("#mainImage").attr("src", sliderImages[c]); // Animate (or whatever)
}
$("#prev, #next").on("click", function() {
c = this.id==="next" ? ++c : --c; // Increement or decrement
anim(); // Animate
});
// If you have bullets than you can simply do like:
$(".bullet").on("click", function() {
c = $(this).index();
anim();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="mainImage" src="//placehold.it/100x100/0bf?text=O">
<br>
<button id="prev">←</button>
<button id="next">→</button>
<span id="count"></span>
Updated your code a bit :
var sliderImages = [];
var counter = 0;
sliderImages[0] = "images/i1.png";
sliderImages[1] = "images/i2.png";
sliderImages[2] = "images/i3.png";
sliderImages[3] = "images/i4.png";
sliderImages[4] = "images/i5.png";
$("#right-arrow").click(function() {
counter++;
$(".active").attr("src", sliderImages[counter]);
$('#count').text(counter);
if (counter >= sliderImages.length) {
counter = 0;
}
});
$("#left-arrow").click(function() {
counter--;
$(".active").attr("src", sliderImages[counter]);
if (counter <= 0) {
counter = sliderImages.length - 1;
}
});
var n=0;
var images=["FullSizeRender (1).jpg","IMG_1875.JPG","IMG_4665.JPG","IMG_5213.JPG"];
$(document).ready(function() {
// Change image
$("#himg").click(function(){
n++;
if(n==images.length){
n=0;
};
document.getElementById("himg").src=images[n];
$("#himg").find('img[src="' + images[n] + '"]').fadeOut();
$("#himg").find('img[src="' + images[n+1] + '"]').hide().fadeIn();
});
<div class="col-xs-2">
<div id="handbags">
<h4>Handbags</h4>
<img id="himg" src="FullSizeRender (1).jpg" />
</div>
</div>
I have made an array where images change on click, but I am trying to make the images fade on click instead of sharply changing. I've tried selecting the images by source using the index from the array, but it's not working.
Try this:
$(document).ready(function() {
var n = 0;
var images = ["FullSizeRender(1).jpg","IMG_1875.JPG","IMG_4665.JPG","IMG_5213.JPG"];
var image = $('#himg');
image.on('click', function() {
var newN = n+1;
if (newN >= images.length) { newN = 0 };
image.attr('src', images[n]);
image.fadeOut(300, function () {
image.attr('src', images[newN]);
image.fadeIn();
n = newN;
});
});
});
what i am trying to do is make the first 12 elements hidden and show the next 12 elements and reverse, its like a next page and previous page in a search result.
Got this code from Jquery hide first 12 elementes, show next 12 elements
DEMO
<div class="inner-content">
<div class="front-pro">151</div>
<div class="front-pro">151</div>
<div class="front-pro">151</div>
<div class="front-pro">151</div>
<div class="front-pro">151</div>
<div class="front-pro">151</div>
<div class="front-pro">151</div>
<div class="front-pro">151</div>
<div class="front-pro">151</div>
<div class="front-pro">151</div>
<div class="front-pro">151</div>
<div class="front-pro">151</div>
<div class="front-pro">152</div>
<div class="front-pro">152</div>
etc...
</div>
<div>next</div>
var x = $(".inner-content div").hide();
$("div:contains(next)").click(function() {
var cnt = $(this).data("cnt") || 0;
if((cnt * 12) > x.length){ cnt = 0; }
x.hide().filter(":eq("+ (cnt * 12) + "), :lt(" + ((cnt * 12) + 12) + "):gt(" + (cnt * 12) + ")").show();
$(this).data("cnt", ++cnt);
});
This code works but i want to reverse it with a previous button
You could try this :
JQuery
$(".next").click(function() {
var childEls = $('.inner-content').find('.front-pro').not(".visible") ; // array
var count = 1;
$.each(childEls, function() {
if (count <= 12) {
$(this).toggleClass('visible');
}
count++;
});
});
$(".prev").click(function() {
var count = 1;
$($('.inner-content').find('.visible').get().reverse()).each(function() {
if (count <= 12) {
$(this).toggleClass('visible');
}
count++;
});
})
Here's a link to demonstrate - JsFiddle
Something along these lines would have been my approach.
Since you retrieve all of the elements that you are working with in x.
I would look into the Jquery Slice() method where you can ask for a subset of the selector results. Not complete per say, but I hope it helps you get to where you want.
var x = $(".inner-content div").hide();
var $nextdiv = $("div:contains(next)");
var $previousdiv = $("div:contains(previous)");
var pageNum = 0;
var numOfPages = Math.ceil(x.length / 12);
$nextdiv.click(function() {
if (pageNum < numOfPages) {
var toshow = x.slice(pageNum * 12, pageNum * 12 + 12).show(); // show next 12
x.not(toshow).hide(); // hide all others
pageNum++;
}
});
$previousdiv.click(function() {
if (pageNum > 0) {
pageNum--;
var toshow = x.slice((pageNum - 1) * 12, (pageNum - 1) * 12 + 12).show(); // show last pages 12 records
x.not(toshow).hide(); // hide all others
}
});
https://jsfiddle.net/3rk53h7L/5/
HTML:
<div class="promo_tumbs col_12">
<div data-dir="prev" class="prev"></div>
<div data-dir="next" class="next"></div>
<div class="promo_tumbs_centar">
<div class="promo_tumb promo_tumb_current">Test</div>
<div class="promo_tumb">Test</div>
<div class="promo_tumb">Test</div>
<div class="promo_tumb">Test</div>
<div class="promo_tumb">Test</div>
<div class="promo_tumb">Test</div>
<div class="promo_tumb">Test</div>
</div>
</div>
JavaScript:
function Slider(container, nav) {
this.container = container;
this.nav = nav;
this.li = this.container.find('li');
this.li_width = this.li.first().width();
this.li_len = this.li.length;
this.thumbs = this.nav.find('a');
this.current = 0;
}
Slider.prototype.transition = function(coords) {
this.container.stop().animate({
'margin-left': coords || -(this.current * this.li_width)
})
}
Slider.prototype.set_current = function(dir) {
var pos = this.current;
if (dir === 'next') {
pos++
}
else if (dir === 'prev') {
pos--
}
this.current = (pos < 0) ? this.li_len - 1 : pos % this.li_len;
return pos;
}
var slider = new Slider($('div.promo_inner ul'), $('div.promo_tumbs'));
slider.nav.find('div').on('click', function() {
if ($(this).attr("data-dir") === undefined) {
var index = slider.thumbs.index($(this).parent('a'));
console.log(index)
} else {
slider.set_current($(this).data('dir'));
}
slider.transition();
})
Fiddle link
When I click on element I am getting two values - index of clicked element and -1. What is going on here? How can I loose -1 and get only index value?
Call event.stopPropagation(); in order to stop the propagation of event Demo on JsFiddle
This will give you more idea what elements causing double event Reason for multiple events JsFiddle
nav.find() also matches <div class="promo_tumbs_centar">. Try find(".promo_tumb")
When clicking on a .promo_tumb div, you're also clicking on .promo_tumbs_centar.
You should use this :
slider.nav.find('.promo_tumb')
instead of
slider.nav.find('div')