I'd like to add simple pagination to this existing script:
http://sixrevisions.com/demo/slideshow/final.html
So basically it would count the number of <div class="slide"> instances and then generate a list (e.g. 1 - 2 - 3 - 4) and each has a hyperlink to that specific slide.
I'm not so hot with Javascript so would love some help with this.
Can someone show me how to achieve this?
Many thanks for any pointers :-)
Basically, you want to add a link element for each slide using the variable numberOfSlides, then add closure to the bindings on those links. You can reuse the animation calculation by assigning the counter variable to each link as it's created.
for(i = 0; i < numberOfSlides; i++) {
(function() {
var slideIndex = i;
var slideLabel = i + 1;
var x = $('<a id="slide' + slideLabel + '"href="javascript:void(0);" class="paginatorLink">' + slideLabel + '</a>'); //Format your links here
x.click(function() {
currentPosition = slideIndex;
// Hide / show controls
manageControls(currentPosition);
$('#slideInner').animate({
'marginLeft': slideWidth * -slideIndex
});
});
$('#slideshow').append(x);
})();
}
Here's a fiddle: http://jsfiddle.net/radiatorsounds/aQb6P/
Related
I am using Owl Carousel 2 and creating custom navigation which is currently formatted as < 1 / 10 >. I would like to implement two digit numbering, so for numbers less than 10 I need to add a 0 in front. Ideally the formatting would look like this: < 01 / 10 >. I have attempted an if/then but couldn't get it to work with how the counter is written here. Is there a way to modify this code to achieve this format?
JS/jQuery
<script>
$(function(){
var owl = $('.owl-carousel');
owl.owlCarousel({
items:1,
loop: false,
onInitialized : counter, //When the plugin has initialized.
onTranslated : counter //When the translation of the stage has finished.
});
$(".next").click(function() {
owl.trigger('next.owl.carousel');
});
$(".prev").click(function() {
owl.trigger('prev.owl.carousel');
});
function counter(event) {
var element = event.target;
var items = event.item.count; // Number of items
var item = event.item.index + 1; // Position of the current item
$('.counter').html(item+" / "+items)
}
});
</script>
HTML
<div class="gfoot">
<div><h5><a class="prev">< </a>
<span class="counter"></span>
<a class="next"> ></a></h5></div>
</div>
Try replacing this line:
$('.counter').html(item+" / "+items)
with this line:
$('.counter').html((item < 10 ? '0' : '') + item + " / " + items)
I'm currently building a slider using Slick.JS alongside some SVG illustrations and I was wondering what the process would be to get the elements of the SVG to change fill colour when the relevant slide is active.
JS Fiddle below should show where I am at the moment:
http://jsfiddle.net/twqvchj6/5/
$('.tugslider').on('afterChange', function() {
var dataId = $(this).slick('slickCurrentSlide');
var slideno = $('a[data-slide]').data('slide');
if(dataId == slideno + 1){
}else{
};
});
Currently I have a blank IF statement that I believe is the correct foundation, but I cannot figure out how to target each of the segment elements individually based on their data-slide number. I had a fill change in here previously changing CSS but it only changed the first segment.
Any help appreciated
Cheers!
You are on the right track, only a few points should be adjusted:
1 - Using slick afterChange event inner declaration, you can receive the currentSlide param;
2 - You can use $("[data-slide='" + dataId + "']") to get the element referenced with index that you have (currentSlide), with this, create a control that manipulates your svg based on a class:
var dataId = currentSlide;
var svgs = $('a[data-slide]');
var slideno = $("[data-slide='" + dataId + "']");
svgs.find('.active').removeClass('active');
slideno.find('path').addClass('active');
3 - Slides index start in 0, update your HTML data-slide;
4 - Also, your HTML is not closing </ul> tag.
Final findle: http://jsfiddle.net/sparhawk_odin/u8vfgosp/
I recently asked about it, but seems like the previous answer wasn't about what I was looking for. If I have some code like this:
<br><br><br>...Lots of BRs...<br><br><br>
<div id="thetargetone"></div><div id="show"></div>
<br><br><br>...Lots of BRs...<br><br><br>
<div id="thetargettwo"></div><div id="show"></div>
<br><br><br>...Lots of BRs...<br><br><br>
<div id="thetargetthree"></div><div id="show"></div>
<br><br><br>...Lots of BRs...<br><br><br>
//and so on...
And what I want is, when user scrolls(or pressing "space" or in other way) comes to this specific IDs (id=thetargetone or thetargettwo etc) I will target them with JavaScript code to manipulate the properties. For example, if user scrolls to id="thetargetone" JavaScript will fire opacity of the id="thetargetone". Is this possible to do with only JavaScript? If so, how can I do this, please?
One easy solution would be to use Bootstrap's plugin Scrollspy. You can find documentation on Bootstrap's page there. It's very simple to use:
$('#myScrollspy').on('activate.bs.scrollspy', function () {
// do something…
})
Here is a pure Javascript function:
var targets = document.getElementsByClassName("target");
var theTarget = targets[0];
window.findTarget = function() {
var closest = 10000000;
for(var i=0; i<targets.length; i++) {
var scrolled = document.body.scrollTop;
var fromTop = targets[i].offsetTop;
//console.log(Math.abs(fromTop - scrolled) + " | " + i + " | " + scrolled + " | " + closest);
if(Math.abs(fromTop - scrolled) < closest) {
closest = Math.abs(fromTop - scrolled);
theTarget = targets[i];
//console.log(closest + " | " + i);
}
}
console.log(theTarget.id);
}
window.addEventListener("scroll", findTarget);
Set an arbitrary large number
Calculate the window scroll position
Calculate all the element's position from the top
Get the smallest number and store the corresponding reference (theTarget)
Once you get the reference you would say for example:
theTarget.style.display = "none";
JS Fiddle: https://jsfiddle.net/vr69ngcr/1/
There are console logs that show the id of the closest target changing as you scroll
The application I work with serves 'article pages' consisting of many paragraphs using <p> element, now I want to paginate these paragraphs, suppose 15 paragraphs in three pages, with 5 paragraphs in each page.
What the Bootstrap tutorial explains is based on list elements, I am sure there must have been a way to implement this for other elements?
I came across another good plugin called Pajinate, but it requires list elements explicitly!
Does Bootstrap or any plug in out there offers a solution where we can apply pagination based on any specific HTML element or CSS class? My problem is to find one that I can apply to <p> element.
Rather than using a jquery plugin or server-side paging you can make a fairly simple paging implementation for Bootstrap using jQuery and the Bootstrap pagination class..
var listElement = $('#pageStuff');
var perPage = 2;
var numItems = listElement.children().size();
var numPages = Math.ceil(numItems/perPage);
$('.pager').data("curr",0);
var curr = 0;
while(numPages > curr){
$('<li>'+(curr+1)+'</li>').appendTo('.pager');
curr++;
}
$('.pager .page_link:first').addClass('active');
listElement.children().css('display', 'none');
listElement.children().slice(0, perPage).css('display', 'block');
$('.pager li a').click(function(){
var clickedPage = $(this).html().valueOf() - 1;
goTo(clickedPage,perPage);
});
function previous(){
var goToPage = parseInt($('.pager').data("curr")) - 1;
if($('.active').prev('.page_link').length==true){
goTo(goToPage);
}
}
function next(){
goToPage = parseInt($('.pager').data("curr")) + 1;
if($('.active_page').next('.page_link').length==true){
goTo(goToPage);
}
}
function goTo(page){
var startAt = page * perPage,
endOn = startAt + perPage;
listElement.children().css('display','none').slice(startAt, endOn).css('display','block');
$('.pager').attr("curr",page);
}
Place all of the paragraphs in one container, and id the container as 'listStuff'.
Just change the var perPage = 2 to whatever you want (ie: 5).
Working demo: http://bootply.com/66815
In case you are using jQuery v3, use .length instead of .size() on the third line.
var numItems = listElement.children().length;
How to generate page numbers like the below using javascript/jquery?
If the 5 th page is selected i have to show 3,4 and 6,7 and also 1,last page with prev,next...
Any suggestion....
EDIT:
How to work with json data that use these pagination div? (ie) My json data contains 50 records
I want to 10 in page 1 and so on... How to paginate json data with these numbers...
I want a jquery function to pass currentpageno,lastpagenumber and the function should generate me page numbers like the below for me
If it is the first page
If it is in the middle,
If it is the last page,
Second EDIT:
I have tried this function but doesn't seem to get the desired result
function generatePages(currentPage, LastPage) {
if (LastPage <= 5) {
var pages = '';
for(var i=1;i<=5;i++)
{
pages += "<a class='page-numbers' href='#'>" + i + "</a>"
}
$("#PagerDiv").append(pages);
}
if (LastPage > 5) {
var pages = '';
for (var i = 1; i <= 5; i++) {
pages += "<a class='page-numbers' href='#'>" + i + "</a>"
}
$("#PagerDiv").append(pages);
}
}
I have the lastPage and currentPage values please help me out getting this...
What you are looking for is called "pagination" and there's (as always) a jQuery plugin that does the job for you:
http://d-scribe.de/webtools/jquery-pagination/demo/demo_options.htm
(Download it here)
Edit: Since you don't seem to be able to get it working, here is one way (of several different) how you can use the plugin.
Step 1: Generate markup from your JSON-data like the following:
<div id="display">
<!-- This is the div where the visible page will be displayed -->
</div>
<div id="hiddenData">
<!-- This is the div where you output your records -->
<div class="record">
<!-- create one record-div for each record you have in your JSON data -->
</div>
<div class="record">
</div>
</div>
The idea is to copy the respective record to the display div when clicking on a page-link. Therefore, the plugin offers a pageSelect-callback function. Step 2 is to implement this function, for instance:
function pageselectCallback(pageIndex, jq){
// Clone the record that should be displayed
var newContent = $('#hiddenData div.record:eq('+pageIndex+')').clone();
// Update the display container
$('#display').empty().append(newContent);
return false;
}
This would mean that you have one page per record. If you want to display multiple records per page, you have to modify the above function accordingly.
The third and final step is to initialize the whole thing correctly.
function initPagination() {
// Hide the records... they shouldn't be displayed
$("#hiddenData").css("display", "none");
// Get the number of records
var numEntries = $('#hiddenData div.result').length;
// Create pagination element
$("#pagination").pagination(numEntries, {
num_edge_entries: 2,
num_display_entries: 8, // number of page links displayed
callback: pageselectCallback,
items_per_page: 1 // Adjust this value if you change the callback!
});
}
So, you just have to generate the HTML markup from your JSON data and call the init-function afterwards.
It's not that difficult, is it?
yeah #SLaks is right. nothing too crazy here. You will have 2 variables currentPageNumber and lastPageNumber.
$("div.paginator").append("<a...>prev</a>");
$("div.paginator").append("<a...>1</a>");
for (x = (currentPageNumber - 2; x <= (currentPageNumber + 2); x++) {
$("div.paginator").append("<a...>"+ x +"</a>");
}
$("div.paginator").append("<a...>"+ lastPageNumber +"</a>");
$("div.paginator").append("<a...>next</a>");
// you could apply styles to and a tag in the div.paginator
// you could apply a special class to the a tag that matches the currentPageNumber
// you can also bind some click events to each a tag and use the $(this).text() to grab the number of the page to go to
Use THIS or THAT plugin. They're both easy html pagination plugins. Put everything in the html at once and paginate with one of those.
Add two new hidden inputs
<input type='hidden' id='current_page' />
<input type='hidden' id='show_per_page' />
Next add an empty div to create pagination controls
<!-- An empty div which will be populated using jQuery -->
<div id='page_navigation'></div>
$(document).ready(function(){
//how much items per page to show
var show_per_page = 5;
//getting the amount of elements inside content div
var number_of_items = $('#content').children().size();
//calculate the number of pages we are going to have
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//set the value of our hidden input fields
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
//now when we got all we need for the navigation let's make it '
/*
what are we going to have in the navigation?
- link to previous page
- links to specific pages
- link to next page
*/
var navigation_html = '<a class="previous_link" href="javascript:previous();">Prev</a>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a class="next_link" href="javascript:next();">Next</a>';
$('#page_navigation').html(navigation_html);
//add active_page class to the first page link
$('#page_navigation .page_link:first').addClass('active_page');
//hide all the elements inside content div
$('#content').children().css('display', 'none');
//and show the first n (show_per_page) elements
$('#content').children().slice(0, show_per_page).css('display', 'block');
});
function previous(){
new_page = parseInt($('#current_page').val()) - 1;
//if there is an item before the current active link run the function
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}
}
function next(){
new_page = parseInt($('#current_page').val()) + 1;
//if there is an item after the current active link run the function
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}
}
function go_to_page(page_num){
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());
//get the element number where to start the slice from
start_from = page_num * show_per_page;
//get the element number where to end the slice
end_on = start_from + show_per_page;
//hide all children elements of content div, get specific items and show them
$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
/*get the page link that has longdesc attribute of the current page and add active_page class to it
and remove that class from previously active page link*/
$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
//update the current page input field
$('#current_page').val(page_num);
}