Skip to content

Instantly share code, notes, and snippets.

@lukasborawski

lukasborawski/functions.js

Created February 17, 2012 08:56
Show Gist options
  • Save lukasborawski/1851998 to your computer and use it in GitHub Desktop.
Save lukasborawski/1851998 to your computer and use it in GitHub Desktop.
Download ZIP
CSS3 and jQuery Pagination - www.blog.lukasborawski.pl/demos/pagination/
Raw
functions.js
$(document).ready(function(){
$('ol.pagination_list li').addClass('gradient');
$('ol.pagination_list li').click(function(){
$('li').removeClass('active');
if ( $(this).hasClass("active")) {
$(this).removeClass("active");
}
else {
$(this).addClass("active");
}
});
$('.site_field input[type="text"]').click(function(){
$('.site_field input[type="text"]').removeAttr("value");
});
$('.more').click(function(){
$('.site_field').fadeIn('slow');
if ( $('.site_field').css('display','block')) {
$('ol.pagination_list li').not(document.getElementsByClassName('more')).click(function(){
$('.site_field').fadeOut('slow');
$('.site_field input[type="text"]').attr('value','enter page number')
});
}
});
});
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>CSS3 Pagination - My Loved Creation</title>
<link rel="stylesheet" href="style.css"/>
<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache" />
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="functions.js"></script>
</head>
<body>
<article>
<section>
<ol class="pagination_list border_radius gradient_light gradient">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li class="more">...</li>
<li>7</li>
<li>8</li>
<li>9</li>
</ol>
<div class="site_field">
<div class="input_container border_radius_bottom gradient">
<input class="border_radius" type="text" alt="enter_site" value="enter page number"/>
</div>
</div>
</section>
</article>
</body>
</html>
Raw
style.css
body {
margin: 0;
font-weight: normal;
font-size:22px;
width: 100%;
font-family: "Trebuchet MS", sans-serif;
position: relative;
height: 100%;
background: url('http://mylovedcreation.pl/demos/pagination/circles.png') repeat 0 0;
}
article {
width:100%;
height:100%;
}
/* default class */
.border_radius {
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
}
.border_radius_bottom {
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
-webkit-border-radius: 0px 0px 4px 4px;
border-radius: 0px 0px 4px 4px;
}
.gradient_light {
background: #e5e5e5; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1ZTVlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNiZmJmYmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #e5e5e5 0%, #bfbfbf 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#bfbfbf)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e5e5e5 0%,#bfbfbf 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e5e5e5 0%,#bfbfbf 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e5e5e5 0%,#bfbfbf 100%); /* IE10+ */
background: linear-gradient(top, #e5e5e5 0%,#bfbfbf 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#bfbfbf',GradientType=0 ); /* IE6-8 */
}
/* main class */
section {
width:800px;
height: auto;
margin: 0 auto;
padding-top: 30px;
text-align: center;
position: relative;
}
section:nth-of-type(1) {
height: 225px;
overflow: visible;
}
section header {
font-family: 'Alfa Slab One', cursive;
font-size: 50px;
padding-bottom: 5px;
margin: 0 auto;
text-shadow: 0 2px 0 #fff;
color:#aaa;
width:450px;
}
section ol.pagination_list {
list-style: none;
position: relative;
border: 1px solid #999999;
display: inline-block;
padding: 0;
margin-bottom: 0;
z-index: 1;
-webkit-box-shadow: 0 2px 0 #fff, inset 0 -1px 1px #ddd, inset 0 1px 1px #fff, 0 0 5px #fff, 0 -2px 0 #ddd;
-moz-box-shadow: 0 2px 0 #fff, inset 0 -1px 1px #ddd, inset 0 1px 1px #fff, 0 0 5px #fff, 0 -2px 0 #ddd;
box-shadow: 0 2px 0 #fff, inset 0 -1px 1px #ddd, inset 0 1px 1px #fff, 0 0 5px #fff, 0 -2px 0 #ddd;
}
section ol.pagination_list li {
display: block;
float:left;
padding: 4px 0;
vertical-align: middle;
line-height: 21px;
border-right: 1px solid #999999;
font-size: 18px;
font-weight: bold;
text-align: center;
width:40px;
color: #535252;
cursor: pointer;
text-shadow: 0 1px 0 #fff;
-webkit-box-shadow: 1px 0 0 #fff;
-moz-box-shadow: 1px 0 0 #fff;
box-shadow: 1px 0 0 #fff;
}
section ol.pagination_list li:hover, section ol.pagination_list li.active {
background: #c4c3c3; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2M0YzNjMyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkM2QzZDMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #c4c3c3 0%, #d3d3d3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#c4c3c3), color-stop(100%,#d3d3d3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #c4c3c3 0%,#d3d3d3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #c4c3c3 0%,#d3d3d3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #c4c3c3 0%,#d3d3d3 100%); /* IE10+ */
background: linear-gradient(top, #c4c3c3 0%,#d3d3d3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c4c3c3', endColorstr='#d3d3d3',GradientType=0 ); /* IE6-8 */
-webkit-box-shadow: inset -1px 0 0 #ddd, inset 0 4px 5px #bbb;
-moz-box-shadow: inset -1px 0 0 #ddd, inset 0 4px 5px #bbb;
box-shadow: inset -1px 0 0 #ddd, inset 0 4px 5px #bbb;
text-shadow: 1px 1px #999;
color: #f4f2f2;
}
section ol.pagination_list li:last-child {
border: none;
box-shadow: none;
}
section .site_field {
position: relative;
margin-top: -5px;
z-index: 2;
display: none;
height: 30px;
}
section .site_field .input_container {
display: inline-block;
padding: 3px 5px 5px;
border: 1px solid #999999;
border-top: 2px solid #cccccc;
background: #e0e0e0; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIyMiUiIHN0b3AtY29sb3I9IiNlMGUwZTAiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjYmNiY2JjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top, #e0e0e0 22%, #bcbcbc 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(22%,#e0e0e0), color-stop(100%,#bcbcbc)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e0e0e0 22%,#bcbcbc 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e0e0e0 22%,#bcbcbc 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e0e0e0 22%,#bcbcbc 100%); /* IE10+ */
background: linear-gradient(top, #e0e0e0 22%,#bcbcbc 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#bcbcbc',GradientType=0 ); /* IE6-8 */
}
section .site_field input[type="text"] {
-webkit-box-shadow: inset 0 0 7px #aaa;
-moz-box-shadow: inset 0 0 7px #aaa;
box-shadow: inset 0 0 7px #aaa;
border: 1px solid #999999;
padding: 5px;
color: #ccc;
text-align: center;
outline: 0 none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment