How can I navigate xml nodes using jQuery without using hide() and show() methods. Only replacing the nodes with next and previous sibilings using next, previous buttons like THIS
I have my demo here created in PLUNKER DEMO
I used hide() and show(). I can see in the debugger displaying it as display none and block which I dont like to use. I want to use navigation like w3schools DEMO. Any help would be great!
Check this Plunker
JS:
$(document).ready(function() {
var loadVar, numbOfElements=0, count, elementsPerPage = 5,
currentPage, numberOfPage;
$.ajax({
type: "GET",
url: "data.xml",
dataType: "xml",
contentType:"text/xml",
async:false,
success: function(xml) {
loadVar = xml;
loadImages("ADOBE");
showImages();
disableEnableBtns();
},
error: function() {
alert("An error occurred while processing XML file.");
}
});
$("#adobe").click(function() {
loadImages("ADOBE");
showImages();
disableEnableBtns();
});
$("#mac").click(function() {
loadImages("MAC");
showImages();
disableEnableBtns();
});
var sTitle, countEach;
function loadImages(loadNodeValues) {
$("#thumbnails").empty();
numbOfElements=0
$(loadVar).find(loadNodeValues).each(function(i,item) {
var sTitle = "<section class='small count"+(i+1)+"'><h2>" + $(item).find("CAPTION").text() + "</h2><span>" +$(item).find("LINK").text() + "</span></section>";
$("#thumbnails").html($("#thumbnails").html()+sTitle);
numbOfElements++;
});
numberOfPage = numbOfElements / elementsPerPage;
}
function showImages() {
$('.small').hide();
for (i = 1; i <= elementsPerPage; i++) {
$('.small').each(function() {
if ($(this).hasClass('count' + i)) {
$(this).show();
}
});
}
currentPage = 0;
}
function disableEnableBtns() {
if (thumbnails.children.length <= elementsPerPage) {
$("#rightBtn").prop("disabled", true);
$("#leftBtn").prop("disabled", true);
} else {
$("#rightBtn").prop("disabled", false);
$("#leftBtn").prop("disabled", false);
}
$("#leftBtn").prop("disabled", true);
}
$("#rightBtn").click(function() {
currentPage++;
$('.small').hide();
var limit = elementsPerPage * (currentPage + 1) > numbOfElements ? numbOfElements : elementsPerPage * (currentPage + 1);
for (i = (currentPage * elementsPerPage) + 1; i <= limit ; i++) {
$('.small').each(function() {
if ($(this).hasClass('count' + i)) {
$(this).show();
}
});
if(i == numbOfElements)
{
$("#rightBtn").prop("disabled", true);
$("#leftBtn").prop("disabled", false);
}
else
{
$("#rightBtn").prop("disabled", false);
$("#leftBtn").prop("disabled", false);
}
}
});
$("#leftBtn").click(function() {
currentPage--;
$('.small').hide();
for (i = (currentPage * elementsPerPage) + 1; i <= elementsPerPage * (currentPage + 1); i++) {
$('.small').each(function() {
if ($(this).hasClass('count' + i)) {
$(this).show();
}
});
if(i == 5)
{
$("#rightBtn").prop("disabled", false);
$("#leftBtn").prop("disabled", true);
}
else
{
$("#rightBtn").prop("disabled", false);
$("#leftBtn").prop("disabled", false);
}
}
});
});
