We Keep Coding

CSS Transition not working with Javascript on web component

i'm new on Javascript and i'm trying to create a web component, precisely some kind of list view. The goal would be it can expand and collapse when I click an item, and I'd like it to do with transitions.
I already put the transition on the template, but for some reason, it doesn't work, just grow or collapse instantly without the animation.
Rarely, if I do a const listView = document.querySelector(".list-view") and then listView.collapse() it works.
The summary code is:
class ListItem extends HTMLElement {
constructor(items = []) {
super();
//Template and its variables
const listItemTemplate = document.createElement("template");
listItemTemplate.innerHTML = `
<style>
.listitem{
//some other properties
transition: height 0.3s cubic-bezier(0.65, 0, 0.35, 1);
height: ${this.initialHeight};
}
//Other styles...
</style>
changedItem(itemSelected){
//More stuff
this.refreshDOMItems();
this.collsapse();
}
`;
expand() {
let height = 10;
Array.from(this.itemsHTML).forEach((item) => {
height += item.clientHeight;
});
this.listItem.style.height = height / 16 + "rem";
}
collapse() {
this.listItem.style.height = this.initialHeight;
}
Edit: Here is a Codepen.
https://codepen.io/salvabarg/pen/zYqJNMj
What i am doing wrong? Hope the code is not much caotic. Thank you in advance!

You are overriding the height transition with transition: background .5s ease; on .listitem:hover, so removing this line solves the problem:
.listitem:hover{
/*transition: background .5s ease;*/
background: rgba(255,255,255,.65);
}
class ListItem extends HTMLElement {
constructor(items = []) {
super();
//Template and its variables
this.initialHeight = "3.75rem";
this.initialBorderRadius = stringToNumber(this.initialHeight) / 2 + "rem";
const listItemTemplate = document.createElement("template");
listItemTemplate.innerHTML = `
<style>
ul{
box-sizing: border-box;
margin: 0px;
padding: 0px;
list-style: none;
}
.ul{
display: flex;
align-items: center;
flex-direction: column;
height: 3.75rem;
}
.listitem{
font-family: 'Nunito', sans-serif;
display: inline-block;
overflow: hidden;
box-sizing: border-box;
background-color: white;
border-radius: ${this.initialBorderRadius};
padding: 0px 1rem;
cursor: pointer;
box-shadow: 0px 0px 1.25rem rgba(4,25,106,.14);
transition: height 0.3s cubic-bezier(0.65, 0, 0.35, 1);
height: ${this.initialHeight};
}
li.item{
box-sizing: border-box;
min-height: ${this.initialHeight};
display: flex;
align-items: center;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
supported by Chrome, Edge, Opera and Firefox */
}
.img{
width: 2rem;
margin-right: 0.625rem;
border-radius: 50%;
}
.name{
font-size: 1.125rem;
font-weight: 700;
color: var(--autores);
margin-right: 0.6rem;
}
.listitem:hover{
/*transition: background .5s ease;*/
background: rgba(255,255,255,.65);
}</style>
<div class="listitem">
<ul class="ul">
</ul>
</div>
`;
//Constructor
this.attachShadow({
mode: "open"
});
this.shadowRoot.appendChild(listItemTemplate.content.cloneNode(true));
this.items = items;
this.listItem = this.shadowRoot.querySelector(".listitem");
this.itemsHTML = this.shadowRoot
.querySelector(".listitem")
.querySelector(".ul").children;
const ul = this.shadowRoot.querySelector(".listitem").querySelector(".ul");
this.ul = ul;
}
connectedCallback() {
//Do
//Carga de items por defecto
const item = {
name: "Item",
avatar: "images/users.svg",
selected: false
};
const item_two = {
name: "Item 2",
avatar: "images/users.svg",
selected: false
};
const item_three = {
name: "Item 3",
avatar: "images/users.svg",
selected: false
};
this.addItem(item);
this.addItem(item_two);
this.addItem(item_three);
this.refreshDOMItems();
//event listeners for each item;
const itemClick = this.shadowRoot.querySelector(".listitem");
itemClick.addEventListener("click", (event) => {
event.preventDefault();
let targetStr = "";
const trgtCls = event.target.classList;
if (
trgtCls.contains("name") ||
trgtCls.contains("img") ||
trgtCls.contains("item")
) {
if (trgtCls.contains("name")) {
targetStr = event.target.innerText;
}
if (trgtCls.contains("img")) {
targetStr = event.target.nextElementSibling.innerText;
}
if (trgtCls.contains("item")) {
targetStr = event.target.querySelector(".name").innerText;
}
}
if (targetStr === this.items[0].name) {
this.expand();
} else {
this.changedItem(targetStr);
}
});
}
addItem(item = Object) {
this.items.push(item);
this.items.forEach((item) => {
item.selected = false;
});
this.items[0].selected = true;
console.log(item.selected);
}
refreshDOMItems() {
removeChildNodes(this.ul);
this.items.forEach((item) => {
const itemTemplate = document.createElement("template");
itemTemplate.innerHTML = `
<li class="item">
<svg viewBox="0 0 512 512" width="100" title="user-alt" class="img">
<path d="M256 288c79.5 0 144-64.5 144-144S335.5 0 256 0 112 64.5 112 144s64.5 144 144 144zm128 32h-55.1c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16H128C57.3 320 0 377.3 0 448v16c0 26.5 21.5 48 48 48h416c26.5 0 48-21.5 48-48v-16c0-70.7-57.3-128-128-128z" />
</svg>
<p class="name">${item.name}</p>
</li>
`;
this.ul.appendChild(itemTemplate.content.cloneNode(true));
});
}
getItems() {
return this.items;
}
changedItem(itemSelected) {
let arr = Array.from(this.items);
this.items.forEach(function(item, index) {
if (item.name == itemSelected) {
arr = moveElementArray(arr, index, 0);
}
});
this.items = arr;
this.items.forEach((item) => {
item.selected = false;
});
this.items[0].selected = true;
this.refreshDOMItems();
this.collapse();
}
selected() {
let selected;
this.items.forEach((item) => {
if (item.selected === true) {
selected = item;
}
});
return selected;
}
value() {
let selected;
this.items.forEach((item) => {
if (item.selected === true) {
selected = item;
}
});
return selected.name;
}
expand() {
let height = 10;
Array.from(this.itemsHTML).forEach((item) => {
height += item.clientHeight;
});
this.listItem.style.height = height / 16 + "rem";
}
collapse() {
this.listItem.style.height = this.initialHeight;
}
}
window.customElements.define("c-list-item", ListItem);
const lsim = document.querySelector(".list");
function removeChildNodes(element = HTMLElement) {
while (element.childElementCount > 0) {
element.removeChild(element.firstChild);
}
}
function stringToNumber(string = String) {
let newNumber = "";
let afterComma = "";
let comma = false;
Array.from(string).forEach((char) => {
if (char === "." || char === ",") {
comma = true;
}
if (comma === false) {
if (Number(char)) {
newNumber += Number(char);
}
} else {
if (Number(char)) {
afterComma += Number(char);
}
}
});
if (afterComma != "") {
newNumber += "." + afterComma;
}
return Number(newNumber);
}
function moveElementArray(array = Array, from = Number, to = Number) {
const fromArr = array[from];
if (from > to) {
for (let index = from; index >= to; index--) {
array[index] = array[index - 1];
if (index == to) {
array[index] = fromArr;
}
}
} else {
for (let index = from; index <= to; index++) {
array[index] = array[index + 1];
if (index == to) {
array[index] = fromArr;
}
}
}
return array;
}
function replaceElementArray(array = Array, from = Number, to = Number) {
const fromArr = array[from];
const toArr = array[to];
array[from] = toArr;
array[to] = fromArr;
return array;
}
<body style="background-color: #f0f0f0;">
<c-list-item class="list"></c-list-item>
</body>

How to achieve this typing & deleting effect?

I’d like to replicate this website’s typing & deleting effect: http://www.cantercompanies.com.
I’ve been trying to figure this out using code blocks, HTML, CSS, and JS. However, I can’t seem to get this to work after hours and days of trying.
It’s obviously on my end, as I am fairly new to coding.
I really want this exact typing & deleting effect with blinking cursor. I of course will be using my own logo and fixed text, but need some guidance and help to replicate Canter's example above in the link provided… :-)

You don't need any library,
HTML
<div class="flex">
<p class="header-sub-title" id="word"></p><p class="header-sub-title blink">|</p>
</div>
CSS
#import 'https://fonts.googleapis.com/css?family=Roboto';
html, body {
background-color: #000;
}
h2, a, p {
color: #fff;
font-family: Roboto;
text-decoration: none;
}
p>a {
color: #fd084a;
}
.blink {
animation: blink 0.5s infinite;
}
#keyframes blink{
to { opacity: .0; }
}
.flex {
display: flex;
}
.header-sub-title {
color: #fff;
font-family: "Courier";
font-size: 20px;
padding: 0.1em;
}
JS
const words = ["CSS3.", "HTML5.", "javascript."];
let i = 0;
let timer;
function typingEffect() {
let word = words[i].split("");
var loopTyping = function() {
if (word.length > 0) {
document.getElementById('word').innerHTML += word.shift();
} else {
deletingEffect();
return false;
};
timer = setTimeout(loopTyping, 500);
};
loopTyping();
};
function deletingEffect() {
let word = words[i].split("");
var loopDeleting = function() {
if (word.length > 0) {
word.pop();
document.getElementById('word').innerHTML = word.join("");
} else {
if (words.length > (i + 1)) {
i++;
} else {
i = 0;
};
typingEffect();
return false;
};
timer = setTimeout(loopDeleting, 200);
};
loopDeleting();
};
typingEffect();
Reference:https://codepen.io/haaswill/pen/VKzXvZ

How to split a sentence by clicking on de space

I want to split the sentence when i click on the space. He has to make 2 parts of the sentence. I want that i click another time on a space and then to make 3 parts of the sentence.
I've tried to search on google, stackoverflow, etc. But i don't see my answer.
So this is my code.
$(function() {
$(document).data("text", $("#editor").text())
.on("mousedown", function() {
$("#editor")
.html($(this)
.data("text"))
})
.on("mouseup", function() {
that = $("#editor");
var sel = window.getSelection ? window.getSelection() : document.selection();
var o = that.text();
var before = sel.baseOffset;
var after = o.length - before;
var a = o.slice(0, before);
var b = after === 0 ? "" : o.slice(-after);
var n = "<data>||</data>";
var html = (after === "" ? a + n : a + n + b);
that.html(html);
});
})
#editor {
font-family: Sans;
font-size: 28px;
letter-spacing: 8px;
white-space: pre;
}
#editor > data {
color: red;
max-width: .1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editor">Hello! I am a Text!</div>
So i hope i've i have the sentence: Hello this is a test. And then click between 'is' and 'a':
Hello this is a test.

$(function() {
jQuery.fn.reverse = [].reverse;
// Add element around all characters
var text = $("#editor").text();
var newText = "";
for (var i = 0; i < text.length; i++) {
newText += `<span>${text[i]}</span>`;
}
$("#editor").html(newText);
// If you click on a space
$("#editor").on("click", "span", function() {
if ($(this).text() == " ") {
var before = $(this).prevAll().reverse();
var after = $(this).nextAll()
$("#editor").html("");
before.each(function() {
if (!$(this).hasClass("white")) {
$("#editor").append(`<span class="yellow">${$(this).text()}</span>`);
} else {
$("#editor").append(`<span class="white">${$(this).text()}</span>`);
}
});
$("#editor").append(`<span class="white"> </span>`);
after.each(function() {
if (!$(this).hasClass("white")) {
$("#editor").append(`<span class="yellow">${$(this).text()}</span>`);
} else {
$("#editor").append(`<span class="white">${$(this).text()}</span>`);
}
});
}
});
})
#editor {
font-family: Sans;
font-size: 28px;
letter-spacing: 8px;
white-space: pre;
}
#editor .br {
color: red;
max-width: .1em;
}
#editor .yellow {
background-color: yellow;
}
#editor .white {
background-color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editor">Hello! I am a Text</div>
--- Old answer below
This should be a good start. You can do whatever you want with the variables before and after - so that is suits your case.
$(function() {
jQuery.fn.reverse = [].reverse;
// Add element around all characters
var text = $("#editor").text();
var newText = "";
for (var i = 0; i < text.length; i++) {
newText += `<span>${text[i]}</span>`;
}
$("#editor").html(newText);
// If you click on a space
$("#editor").on("click", "span", function() {
if ($(this).text() == " ") {
var before = $(this).prevAll().reverse();
var after = $(this).nextAll()
$("#editor").html("");
before.each(function() {
$("#editor").append(`<span>${$(this).text()}</span>`);
});
$("#editor").append(`<span class="br">|</span>`);
after.each(function() {
$("#editor").append(`<span>${$(this).text()}</span>`);
});
}
});
})
#editor {
font-family: Sans;
font-size: 28px;
letter-spacing: 8px;
white-space: pre;
}
#editor .br {
color: red;
max-width: .1em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="editor">Hello! I am a Text</div>

My hybrid app wont change pages when checking li item which contains a string

For a project im working on i want to make my hybrid app (phonegap) switch screens when the app detects the BluetoothLE signal from an Arduino. For this I made the code loop trough a couple of list items and check of the content of the li item is the same as "TEST123"(the name i gave the Arduino). If these would be the same, the app should switch to another page. I edited the code called "cordova-plugin-ble-central made by Don Coleman on GitHub) to reach this goal.
I made the code so it would scroll trough the li items within a ul, read the content and called the connect function if the string was the same as "TEST123", but my pages do not seem to switch.
Thanks for your help!
HTML:
<body>
<div class="app">
<h1>BluefruitLE</h1>
<div id="mainPage" class="show">
<ul id="deviceList">
</ul>
<button id="refreshButton">Refresh</button>
</div>
<div id="detailPage" class="hide">
<div id="resultDiv"></div>
<div>
<input type="text" id="messageInput" value="Hello"/>
<button id="sendButton">Send</button>
</div>
<button id="disconnectButton">Disconnect</button>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
CSS:
body {
font-family: "Helvetica Neue";
font-weight: lighter;
color: #2a2a2a;
background-color: #f0f0ff;
-webkit-appearance: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none; -webkit-user-select: none;
}
button {
margin: 15px;
-webkit-appearance:none;
font-size: 1.2em;
}
#mainPage {
text-align:center;
width: 100vw;
height: 100vh;
}
#detailPage {
text-align:center;
font-size: 2em;
width: 100vw;
height: 100vh;
background-color: red;
}
button {
-webkit-appearance: none;
font-size: 1.5em;
border-radius: 0;
}
#resultDiv {
font: 16px "Source Sans", helvetica, arial, sans-serif;
font-weight: 200;
display: block;
-webkit-border-radius: 6px;
width: 100%;
height: 140px;
text-align: left;
overflow: auto;
}
#mainPage.show{
display: block;
}
#mainPage.hide{
display: none;
}
#detailPage.show{
display: block;
}
#detailPage.hide{
display: none;
}
And ofcourse my JavaScript:
'use strict';
// ASCII only
function bytesToString(buffer) {
return String.fromCharCode.apply(null, new Uint8Array(buffer));
}
// ASCII only
function stringToBytes(string) {
var array = new Uint8Array(string.length);
for (var i = 0, l = string.length; i < l; i++) {
array[i] = string.charCodeAt(i);
}
return array.buffer;
}
// this is Nordic's UART service
var bluefruit = {
serviceUUID: '6e400001-b5a3-f393-e0a9-e50e24dcca9e',
txCharacteristic: '6e400002-b5a3-f393-e0a9-e50e24dcca9e', // transmit is from the phone's perspective
rxCharacteristic: '6e400003-b5a3-f393-e0a9-e50e24dcca9e' // receive is from the phone's perspective
};
var app = {
initialize: function() {
this.bindEvents();
detailPage.hidden = true;
//ale paginas hidden behalve login
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
refreshButton.addEventListener('touchstart', this.refreshDeviceList, false);
sendButton.addEventListener('click', this.sendData, false);
disconnectButton.addEventListener('touchstart', this.disconnect, false);
deviceList.addEventListener('touchstart', this.connect, false); // assume not scrolling
},
onDeviceReady: function() {
app.refreshDeviceList();
},
refreshDeviceList: function() {
deviceList.innerHTML = ''; // empties the list
if (cordova.platformId === 'android') { // Android filtering is broken
ble.scan([], 5, app.onDiscoverDevice, app.onError);
} else {
ble.scan([bluefruit.serviceUUID], 5, app.onDiscoverDevice, app.onError);
}
},
onDiscoverDevice: function(device) {
var listItem = document.createElement('li'),
html = '<b>' + device.name + '</b><br/>' +
'RSSI: ' + device.rssi + ' | ' +
device.id;
listItem.dataset.deviceId = device.id;
listItem.innerHTML = html;
deviceList.appendChild(listItem);
},
ulScroll: function() {
var ul = document.getElementById("deviceList");
var items = ul.getElementsByTagName("li");
for (var i = 0; i < items.length; i++) {
if ((items.textContent || items.innerText) == "TEST123"){
connect: function(e) {
var deviceId = e.target.dataset.deviceId,
onConnect = function(peripheral) {
app.determineWriteType(peripheral);
// subscribe for incoming data
ble.startNotification(deviceId, bluefruit.serviceUUID, bluefruit.rxCharacteristic, app.onData, app.onError);
sendButton.dataset.deviceId = deviceId;
disconnectButton.dataset.deviceId = deviceId;
resultDiv.innerHTML = "";
app.showDetailPage();
};
ble.connect(deviceId, onConnect, app.onError);
},
}
}
}
disconnect: function(event) {
var deviceId = event.target.dataset.deviceId;
ble.disconnect(deviceId, app.showMainPage, app.onError);
},
showMainPage: function() {
document.getElementById("mainPage").className = "show";
document.getElementById("detailPage").className = "hide";
},
showDetailPage: function() {
document.getElementById("detailPage").className = "show";
document.getElementById("mainPage").className = "hide";
},
onError: function(reason) {
alert("ERROR: " + reason);
}
};
P.S. Very sorry for the unorganized code

How i would structure the code:
var app={
devices:[], //thats were the devices are stored
onDeviceReady:refreshDeviceList,
refreshDeviceList: function() {
deviceList.innerHTML = ''; // empties the list
this.devices=[];
if (cordova.platformId === 'android') { // Android filtering is broken
ble.scan([], 5, app.onDiscoverDevice, app.onError);
} else {
ble.scan([bluefruit.serviceUUID], 5, app.onDiscoverDevice, app.onError);
}
//all devices checked, lets search ours:
var my=this.devices.find(device => { device.name=="TEST123"});
if(my){
ble.connect(my.id,app.onconnect,errorhandling);
}else{
alert("my device not found");
}
},
onDiscoverDevice: function(device) {
//add to html
var listItem = document.createElement('li'),
html = '<b>' + device.name + '</b><br/>' +
'RSSI: ' + device.rssi + ' | ' +
device.id;
listItem.innerHTML = html;
deviceList.appendChild(listItem);
//add to devices:
this.devices.push(device);
},
onconnect:function(e){
//your connect function
}
}
Additional notes:
refreshButton etc are undefined. You need to find them:
var refreshButton=document.getElementById("refreshButton");

Pagination Alternatives

I am looking for ideas for pagination alternatives. I am aware of 2 pagination schemes:
Click on pages pagination - my favorite example
Infinite scroll pagination - one implementation here that seems to work
There must be some other less known/popular ways to do it. Bonus points if you can provide a link to a demo
Thanks

I think that a good alternative to paging is a way, or more than one way, for the user to tell the server something about what it is they're looking for. For some types of content (like, a whole lot of text, say from a research paper or a work of fiction), of course you're probably stuck with paging. But when the content is naturally searchable (like tables of checking account transactions), good, simple filtering tools are probably more useful than pagination schemes. (Actually you may need both.)

I worked on a GWT hybrid technique where it did an "infinite scroll" but only showed a "window/page" of information at a time. So it only loaded a fixed amount of data to the browser at any given time. If you could display 20 items and scrolled it just updated the list 20 items at a time. Paging without paging, scrolling without scrolling.
Of course this is a trivial definition of the actual implementation, which was much smarter than this sounds and very optimized for round trips. And this was a list of results that was already filtered down with search criteria. They go hand in hand.

Take a look at 'logarithmic' pagination, as described in my answer here:
How to do page navigation for many, many pages? Logarithmic page navigation
It's like regular pagination, but solves the problem of getting to pages in the middle of a '...' range without many repeated mouseclicks. i.e. How long would it take to get to page 2456 out of 10380 if these are your links: 1 2 3 4 5 ... 10376 10377 10378 10379 10380 ?
(But, Pointy has, uhm... a point also (!))

Here is the code for a pure JavaScript pagination control I built recently. It is similar to your favorite with these added benefits...
Clicking the ... allows quick jump to any page
No words means no localization (next, prev, first, last buttons aren't
needed in this simple control)
No dependencies (jQuery not required)
var Pagination = {
code: '',
Extend: function(data) {
data = data || {};
Pagination.size = data.size || 300;
Pagination.page = data.page || 1;
Pagination.step = data.step || 3;
},
Add: function(s, f) {
for (var i = s; i < f; i++) {
Pagination.code += '<a>' + i + '</a>';
}
},
Last: function() {
Pagination.code += '<i>...</i><a>' + Pagination.size + '</a>';
},
First: function() {
Pagination.code += '<a>1</a><i>...</i>';
},
Click: function() {
Pagination.page = +this.innerHTML;
Pagination.Start();
},
Prev: function() {
Pagination.page--;
if (Pagination.page < 1) {
Pagination.page = 1;
}
Pagination.Start();
},
Next: function() {
Pagination.page++;
if (Pagination.page > Pagination.size) {
Pagination.page = Pagination.size;
}
Pagination.Start();
},
TypePage: function() {
Pagination.code = '<input onclick="this.setSelectionRange(0, this.value.length);this.focus();" onkeypress="if (event.keyCode == 13) { this.blur(); }" value="' + Pagination.page + '" /> / ' + Pagination.size;
Pagination.Finish();
var v = Pagination.e.getElementsByTagName('input')[0];
v.click();
v.addEventListener("blur", function(event) {
var p = parseInt(this.value);
if (!isNaN(parseFloat(p)) && isFinite(p)) {
if (p > Pagination.size) {
p = Pagination.size;
} else if (p < 1) {
p = 1;
}
} else {
p = Pagination.page;
}
Pagination.Init(document.getElementById('pagination'), {
size: Pagination.size,
page: p,
step: Pagination.step
});
}, false);
},
Bind: function() {
var a = Pagination.e.getElementsByTagName('a');
for (var i = 0; i < a.length; i++) {
if (+a[i].innerHTML === Pagination.page) a[i].className = 'current';
a[i].addEventListener('click', Pagination.Click, false);
}
var d = Pagination.e.getElementsByTagName('i');
for (i = 0; i < d.length; i++) {
d[i].addEventListener('click', Pagination.TypePage, false);
}
},
Finish: function() {
Pagination.e.innerHTML = Pagination.code;
Pagination.code = '';
Pagination.Bind();
},
Start: function() {
if (Pagination.size < Pagination.step * 2 + 6) {
Pagination.Add(1, Pagination.size + 1);
} else if (Pagination.page < Pagination.step * 2 + 1) {
Pagination.Add(1, Pagination.step * 2 + 4);
Pagination.Last();
} else if (Pagination.page > Pagination.size - Pagination.step * 2) {
Pagination.First();
Pagination.Add(Pagination.size - Pagination.step * 2 - 2, Pagination.size + 1);
} else {
Pagination.First();
Pagination.Add(Pagination.page - Pagination.step, Pagination.page + Pagination.step + 1);
Pagination.Last();
}
Pagination.Finish();
},
Buttons: function(e) {
var nav = e.getElementsByTagName('a');
nav[0].addEventListener('click', Pagination.Prev, false);
nav[1].addEventListener('click', Pagination.Next, false);
},
Create: function(e) {
var html = [
'<a>◄</a>', // previous button
'<span></span>', // pagination container
'<a>►</a>' // next button
];
e.innerHTML = html.join('');
Pagination.e = e.getElementsByTagName('span')[0];
Pagination.Buttons(e);
},
Init: function(e, data) {
Pagination.Extend(data);
Pagination.Create(e);
Pagination.Start();
}
};
var init = function() {
Pagination.Init(document.getElementById('pagination'), {
size: 30, // pages size
page: 1, // selected page
step: 2 // pages before and after current
});
};
document.addEventListener('DOMContentLoaded', init, false);
html {
height: 100%;
width: 100%;
background-color: #ffffff;
}
body {
margin: 0;
height: 100%;
width: 100%;
text-align: center;
font-family: Arial, sans-serif;
}
body:before {
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
}
#pagination {
display: inline-block;
vertical-align: middle;
padding: 1px 2px 4px 2px;
font-size: 12px;
color: #7D7D7D;
}
#pagination a,
#pagination i {
display: inline-block;
vertical-align: middle;
width: 22px;
color: #7D7D7D;
text-align: center;
padding: 4px 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
#pagination a {
margin: 0 2px 0 2px;
cursor: pointer;
}
#pagination a:hover {
background-color: #999;
color: #fff;
}
#pagination i {
border: 2px solid transparent;
cursor: pointer;
}
#pagination i:hover {
border: 2px solid #999;
cursor: pointer;
}
#pagination input {
width: 40px;
padding: 2px 4px;
color: #7D7D7D;
text-align: right;
}
#pagination a.current {
border: 1px solid #E9E9E9;
background-color: #666;
color: #fff;
}
<div id="pagination"></div>

There's a cool logarithmic pagination solution here:
http://jobcloud.cz/glPagiSmart.jc
But I'm not sure how many people would actually want to use the hex or binary implementations :)