jQuery plugins for pagination

Here are two simple-to-use plugins for creating a pagination on your page.

1. jPages

jPages is a client-side pagination plugin but it gives you a lot more features comparing to most of the other plugins for this purpose, such as auto page turn, key and scroll browse, showing items with delay, completely customizable navigation panel and also integration with Animate.css and Lazy Load.

Apart from all its features, the main diference for the other pagination plugins is that with jPages you can create as many navigation panels as you want and you can choose exactly where to place them.

The plugin is very unobtrusive and it won’t apply any extra styles to the items you are paginating. It will only create and insert the links inside the element(s) you are applying the plugin to, in order to turn them into navigation panel(s).

Demo & Documentation

2. Pajinate

Pajinate is a simple and flexible jQuery plugin that allows you to divide long lists or areas of content into multiple separate pages. Not only is it a simpler alternative to server-side implementations, the time between paginated-page loads is almost nil (up to a reasonable page-size of course).

Demo & Documentation

Using @font-face for icons

A new technology used for increasing speed and to improve HTTP response time is embedding icons in a font and use them with the CSS3 @font-face declaration.

After you’ve downloaded an icon-font or you’ve created by yourself a font using the icons you need in your site, you can use this font like a regular one  (you can use the icons with the ability to change size and color, add backgrounds, shadows and rotation, and just about anything else CSS will allow for text).

The CSS will look like:

@font-face{
  font-family: 'WebSymbolsRegular';
  src: url('fonts/websymbols-regular-webfont.eot');
  src: url('fonts/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('fonts/websymbols-regular-webfont.woff') format('woff'),
  url('fonts/websymbols-regular-webfont.ttf') format('truetype'),
  url('fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');
}
.icon {
  font-family: 'WebSymbolsRegular';
  color: red;
}

To reference an icon you will need a style that includes the font-family of “WebSymbolsRegular” (in our example, the class icon). After that you can add any style that applies to a text.

The HTML will look like:

<p>This is an attachement <span class="icon">A</span></p>
<p>Tweet about it <span class="icon">t</span></p>
<p>Share it on <span class="icon">f</span></p>
<p>Watch it on <span class="icon">y</span></p>

The result ih the browser:

The link to the downloadable font is:websymbols

jQuery Mobile – page structure

A jQuery Mobile site must have an HTML5 doctype.
In the head is a meta viewport tag sets the screen width to the pixel width of the device and references to jQuery, jQuery Mobile and the mobile theme stylesheet.
In the body there is a div with a data-role of page is the wrapper, the header bar (data-role="header"), a content region (data-role="content") and a footer (data-role="footer").
These data- attributes are HTML5 attributes and used through jQuery Mobile to transform basic markup into an enhanced and styled widget.

<!DOCTYPE html>
<html>
  <head>
   <title>My Page</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.css" />
   <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
   <script src="http://code.jquery.com/mobile/1.1.0-rc.1/jquery.mobile-1.1.0-rc.1.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Header</h1>
      </div>
      <div data-role="content">
        <p>Content</p>
      </div>
      <div data-role="footer">
        Footer
      </div>
    </div>
  </body>
</html>

Adding elements in content

1. Listview
The common listviews in jQuery Mobile are coded as lists with a data-role="listview" added.
In the example bellow a dynamic search filter for the list is added with data-filter="true".

<ul data-role="listview" data-filter="true">
  <li><a href="#">Acura</a></li>
  <li><a href="#">Audi</a></li>
  <li><a href="#">BMW</a></li>
  <li><a href="#">Cadillac</a></li>
  <li><a href="#">Ferrari</a></li>
</ul>

 

2. Buttons
A simple clickable button is made adding data-role="button" attribute to it. You can add an icon with data-icon attribute, and set its position with data-iconpos.

<a href="#" data-role="button" data-icon="star" data-iconpos="top">Star button</a>

3. Themes
jQuery Mobile has 5 default themes, from a to e. To change the theme add data-theme="d" attribute to any of the widgets on the page.

4. Dialogs
Any page can be presented as a modal dialog by adding the data-rel="dialog" attribute to the page anchor link. By default, the dialog will open with a ‘pop’ transition. Like all pages, you can specify any page transition you want on the dialog by adding the data-transition attribute to the link.

<a href="foo.html" data-rel="dialog" data-transition="slideup">Open dialog</a>

5. Collapsible content blocks
To create a collapsible block of content, create a container and add the data-role="collapsible" attribute. After the header, add any HTML markup you want to be collapsible. The framework will wrap this markup in a container that will be hidden/shown when the heading is clicked.
By default, the content will be collapsed. To expand the content when the page loads, add the data-collapsed="false" attribute to the wrapper.

<div data-role="collapsible" data-collapsed="false">>
   <h3>I'm a header</h3>
   <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>
</div>

Structural tags in HTML5

HTML 5 specification added some new tags for the markup that will replace many typical div entries and a new doctype.

First of all, HTML5 uses a new and simple doctype: <!DOCTYPE html>. This indicates that the broswer should use HTML5.

The new tags in the structure are:

<header>
– intended to mark a section of the HTML page as the header.

<section>
– meant to identify significant portions of the content
– sections can be nested inside each other if needed
– can have a header and a footer
– sections are like chapters of a book

<article>
– identifies major sections of content

<aside>
– indicates that the content contained within the tag is related to the main content of the page, but not part of it
– provides additional information

<footer>
– marks the section of the HTML page as the footer
– typically contains information about its section such as who wrote it, copyright data, links to related documents

<nav>
– defines the navigation area, tipically a list of links
– the nav should be a sibling of the main section, header and footer

Example of use:

<!DOCTYPE html>
<html>
  <head>
    <title>Structural tags in HTML5</title>
  </head>
  <body>
    <header>
      <h1><a href="#">Structural tags in HTML5</a></h1>
      <nav>
        <a href="#">Home</a> |
        <a href="#">Link 1</a> |
        <a href="#">Link 2</a> |
      </nav>
    </header>
    <section>
      <article>
        <p>This is an important section of content on the page.</p>
        <aside>
          <p>This is an aside for the first article.</p>
        </aside>
      </article>
      <article>
        <p>This is an important section of content on the page.</p>
      </article>
    </section>
    <footer>This is the footer</footer>
  </body>
</html>

Using HTML5 in all browsers

Because some browsers don’t understand the new HTML5 doctype, they don’t recognize the new tags. All unknown tags have no default style, and are treated as inline tags (and we need to use them as block elements).
We can style them with CSS like this:
header, nav, section, article, aside, footer { display: block; }

Supporting IE
IE rendering engine will work with the new tags, but will not recognize any CSS applied to them. For reparing that, we need to creare a DOM node with JavaScript for each of the new tag, like this:

<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('aside');
  document.createElement('nav');
  document.createElement('article');
</script>

 

Cross browser opacity

This is a code snippet that you can use for a cross browser opacity.

Works in Chrome, FF, Safari, IE6+, Opera, Netscape.

.opacity {
  opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
  filter: alpha(opacity=75); /* IE lt 8 */
  -ms-filter: "alpha(opacity=75)"; /* IE 8 */
  -khtml-opacity: .75; /* Safari 1.x */
  -moz-opacity: .75; /* FF lt 1.5, Netscape */
}