EN
Jump link to a paginated page
2
answers
1
points
1.- I have a page in English using pagination demo (jumplink1.png) and wantto make a jumplink at the right bottom corner (Translation Here)
2. The code of simple pagination is using (jumplink2.png)
3.- Translation page (jumplink3.png). When open it display the 111th page defaultly
4.- I would like to jump to (display) the 5th page like jumlink4.png The pop up (_blank) 5th page (in Vietnamese) is the explaination for the 5th (English version) from jmplink1.png
I used the method: http://mypage.net/translation.html#page-1 but that doesn't work
Source code
Code in the 5th page (English)
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/simplePagination.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.simplePagination.js"></script>
</head>
<body>
...
<div class="pagination-holder clearfix">
<div id="light-pagination" class="pagination"></div>
</div>
<script>
$(function(){
$(".pagination").pagination({
items: 5,
displayedPages: 3,
currentPage: 5,
cssStyle: 'light-theme',
onPageClick: function(currentPageNumber){
showPage(currentPageNumber);
}
})
});
function showPage(currentPageNumber){
var page="#page-" + currentPageNumber;
$('.selection').hide();
$(page).show();
}
</script>
</body>
</html>
css/simplePagination.css file:
.selection {
display: none;
}
#page-5 {
display: block;
}
Code in the 5th page (Vietnamese)
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/simplePagination.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.simplePagination.js"></script>
</head>
<body>
...
<div class="pagination-holder clearfix">
<div id="light-pagination" class="pagination"></div>
</div>
<script>
$(function(){
$(".pagination").pagination({
items: 111,
displayedPages: 12,
currentPage: 111,
cssStyle: 'light-theme',
onPageClick: function(currentPageNumber){
showPage(currentPageNumber);
}
})
});
function showPage(currentPageNumber){
var page="#page-" + currentPageNumber;
$('.selection').hide();
$(page).show();
}
</script>
</body>
</html>
css/simplePagination.css file:
.selection {
display: none;
}
#page-111 {
display: block;
}
| This post was formatted by moderator. |
2 answers
7
points
In the below you can find the solution that uses jquery.simplePagination.js.
To use English and Vietnamese languages you can use 2
htmlfiles, e.g.:
english-index.htmlvietnamese-index.html
Web browser:
Source code:
<!doctype html>
<html>
<head>
<style>
/* page */
div.page {
border: 1px solid silver;
}
div.page.hidden {
display: none;
}
div.page.visible {
display: block;
}
</style>
<link type="text/css" rel="stylesheet" href="/css/simplePagination.css"/>
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/jquery.simplePagination.js"></script>
</head>
<body>
<div id="page-1" class="page hidden">
1st page content here ...
</div>
<div id="page-2" class="page hidden">
2nd page content here ...
</div>
<div id="page-3" class="page hidden">
3rd page content here ...
</div>
<div id="page-4" class="page hidden">
4th page content here ...
</div>
<div id="page-5" class="page hidden">
5th page content here ...
</div>
<!-- put next pages here ... -->
<br />
<div class="pagination-holder clearfix">
<div id="light-pagination" class="pagination"></div>
</div>
<script>
var pagesCount = 5;
var defaultPage = 1; // default selected page number
var visibleContent = null;
var $paginationControl = null;
function getPageNumber() {
var currentHash = location.hash;
if (currentHash === '#') {
return defaultPage;
}
var pageNumber = parseInt(currentHash.substring(6));
if (pageNumber > 0 && pageNumber < pagesCount + 1) {
return pageNumber;
}
return defaultPage;
}
function getPageContent(pageNumber) {
var pageContent = document.querySelector('#page-' + pageNumber);
if (pageContent === null) {
return document.querySelector('#page-' + defaultPage);
}
return pageContent;
}
function prepareButtons(pageNumber) {
$paginationControl.pagination({
items: pagesCount,
displayedPages: 3,
currentPage: pageNumber,
cssStyle: 'light-theme',
onPageClick: function(pageNumber) {
location.hash = '#page-' + pageNumber;
}
})
}
function displayContent(pageNumber) {
var pageContent = getPageContent(pageNumber);
if (visibleContent !== null) {
visibleContent.classList.remove('visible');
visibleContent.classList.add('hidden');
}
pageContent.classList.remove('hidden');
pageContent.classList.add('visible');
visibleContent = pageContent;
}
function selectButton(pageNumber) {
$paginationControl.pagination('selectPage', pageNumber);
}
window.addEventListener('hashchange', function(event) {
var pageNumber = getPageNumber();
displayContent(pageNumber);
selectButton(pageNumber);
});
$(function() {
$paginationControl = $('.pagination');
var pageNumber = getPageNumber();
displayContent(pageNumber);
prepareButtons(pageNumber);
});
</script>
</body>
</html>
References
- Download jQuery | jQuery
- simplePagination.js - A simple jQuery pagination plugin and 3 CSS themes. (flaviusmatis.github.io)
Files
1 comments
Add comment
Thank you very much! I used the jquery.simplePagination.js files and the code given above. My work was solved properly. Thank you💗💗💗
3
points
I am not sure if the below source code is the solution for your problem.
It looks like you want to use hash parameter to store information about current page.
Hint: check this articles too:
Web browser:
Source code:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
/* page */
div.page {
border: 1px solid silver;
}
div.page.hidden {
display: none;
}
div.page.visible {
display: block;
}
/* pager */
div.pager {
padding: 6px;
border: 1px solid silver;
}
div.pager a.button {
padding: 3px 6px;
background: #e3e3e3;
}
</style>
</head>
<body>
<div id="page-1" class="page hidden">
1st page content here ...
</div>
<div id="page-2" class="page hidden">
2nd page content here ...
</div>
<div id="page-3" class="page hidden">
3rd page content here ...
</div>
<div id="page-4" class="page hidden">
4th page content here ...
</div>
<div id="page-5" class="page hidden">
5th page content here ...
</div>
<!-- put next pages here ... -->
<script>
var visibleElement = null;
function displayPage() {
var currentPage = location.hash.substring(1);
if (currentPage == '') {
currentPage = 'page-1';
}
var currentElement = document.querySelector('#' + currentPage);
if (currentElement == null) {
currentElement = document.querySelector('#page-1');
}
if (visibleElement != null) {
visibleElement.classList.remove('visible');
visibleElement.classList.add('hidden');
}
currentElement.classList.remove('hidden');
currentElement.classList.add('visible');
visibleElement = currentElement;
}
window.addEventListener('hashchange', function(event) {
displayPage();
});
displayPage();
</script>
<br />
<div class="pager">
<a class="button" href="#page-1">1</a>
<a class="button" href="#page-2">2</a>
<a class="button" href="#page-3">3</a>
<a class="button" href="#page-4">4</a>
<a class="button" href="#page-5">5</a>
</div>
</body>
</html>
2 comments
Thank you so much for your explanations, that is wonderful! With this method I can easily make a jump link from this page to another page (hash parameter method?)
But the page that I have already have is using simple pagination demo, that might be controlled by the simplePagination.css, jquery.js and jquery.simplePagination.js file? That is why even I click on the English page (jumplink1.png) but I can not go to the Vietnamese page (jumplink4.png)?
Anyway, thank you so much for teaching me. I will learn your method (hash parameter method?) for the further develop.
Thank you very much! I used the jquery.simplePagination.js files and the code given above. My work was solved properly. Thank you💗💗💗