I’m trying to add more complex CSS to jquery paginate links I intent to use, I’ve tried adding different classes to the javascript yet nothing works.
The whole code is;
<style>
a {
float: left;
padding: 0 14px;
line-height: 34px;
text-decoration: none;
border: 1px solid #ddd;
border-left-width: 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<input type='hidden' id='current_page' />
<input type='hidden' id='show_per_page' />
<div id='content'>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
<li>Vestibulum consectetur ipsum sit amet urna euismod imperdiet aliquam urna laoreet.</li>
<li>Curabitur a ipsum ut elit porttitor egestas non vitae libero.</li>
<li>Pellentesque ac sem ac sem tincidunt euismod.</li>
<li>Duis hendrerit purus vitae nibh tincidunt bibendum.</li>
<li>Nullam in nisi sit amet velit placerat laoreet.</li>
<li>Vestibulum posuere ligula non dolor semper vel facilisis orci ultrices.</li>
<li>Donec tincidunt lorem et dolor fringilla ut bibendum lacus fringilla.</li>
<li>In non eros eu lacus vestibulum sodales.</li>
<li>Duis ultrices metus sit amet sem adipiscing sit amet blandit orci convallis.</li>
<li>Proin ullamcorper est vitae lorem mollis bibendum.</li>
<li>Maecenas congue fringilla enim, tristique laoreet tortor adipiscing eget.</li>
<li>Duis imperdiet metus et lorem venenatis nec porta libero porttitor.</li>
<li>Maecenas lacinia lectus ac nulla commodo lacinia.</li>
<li>Maecenas quis massa nisl, sed aliquet tortor.</li>
<li>Quisque porttitor tellus ut ligula mattis luctus.</li>
<li>In at mi dolor, at consectetur risus.</li>
<li>Etiam id erat ut lorem fringilla dictum.</li>
<li>Curabitur sagittis dolor ac nisi interdum sed posuere tellus commodo.</li>
<li>Pellentesque quis magna vitae quam malesuada aliquet.</li>
</div>
<div id='page_navigation'></div>
<script type="text/javascript">
$(document).ready(function(){
var show_per_page = 2;
var number_of_items = $('#content').children().size();
var number_of_pages = Math.ceil(number_of_items/show_per_page);
$('#current_page').val(0);
$('#show_per_page').val(show_per_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);
$('#page_navigation .page_link:first').addClass('active_page');
$('#content').children().css('display', 'none');
$('#content').children().slice(0, show_per_page).css('display', 'block');
});
function previous(){
new_page = parseInt($('#current_page').val()) - 1;
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}
}
function next(){
new_page = parseInt($('#current_page').val()) + 1;
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}
}
function go_to_page(page_num){
var show_per_page = parseInt($('#show_per_page').val());
start_from = page_num * show_per_page;
end_on = start_from + show_per_page;
$('#content').children().css('display', 'none').slice(start_from, end_on).css('display', 'block');
$('.page_link[longdesc=' + page_num +']').addClass('active_page').siblings('.active_page').removeClass('active_page');
$('#current_page').val(page_num);
}
</script>
Ideally I’d like to use this along with the foundation framework pagination its code is
CSS
/* Pagination ---------------------- */
ul.pagination { display: block; height: 24px; margin-left: -5px; }
ul.pagination li { float: left; display: block; height: 24px; color: #999; font-size: 14px; margin-left: 5px; }
ul.pagination li a { display: block; padding: 1px 7px 1px; color: #555; }
ul.pagination li:hover a, ul.pagination li a:focus { background: #e6e6e6; }
ul.pagination li.unavailable a { cursor: default; color: #999; }
ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus { background: transparent; }
ul.pagination li.current a { background: #2ba6cb; color: white; font-weight: bold; cursor: default; }
ul.pagination li.current a:hover, ul.pagination li.current a:focus { background: #2ba6cb; }
HTML
<ul class="pagination">
<li class="arrow unavailable"><a href="">«</a></li>
<li class="current"><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li class="unavailable"><a href="">…</a></li>
<li><a href="">12</a></li>
<li><a href="">13</a></li>
<li class="arrow"><a href="">»</a></li>
</ul>
I’m cluess in going about it - is it even possible?