onwebdev

jQuery: AJAX contact form for WordPress

noreply@blogger.com (Gabriele Romanato) — Sun, 29 Jan 2012 19:44:00 +0000

jQuery can actually interact very well with WordPress. A typical example of this is surely a contact form enhanced with AJAX. Let's see how things work from the client-side point of view.

The first thing to bear in mind is that a WordPress contact page is self-processed, meaning that the value of the action attribute corresponds to the current page.

For that reason, we need to use this value as our target URL. Then we need to attach an extra POST variable to notify the server-side script (which also handles data validation) that our form has been submitted. We also need to attach another variable to make sure that the output of the server-side script will be displayed only when the form has been actually sent:

(function($) {


 $(function() {
 
  var Contact = function() {
  
   var form = '#contact';
   
   
   
   
   this.process = function() {
   
   
   $(form).submit(function(event) {
   
    var $form = $(this);
    var url = $form.attr('action');
    var data = 'from=' + $('#from', $form).val() + '&email=' + $('#email', $form).val() +
                '&subject=' + $('#subject', $form).val() +
                '&message=' + $('#message', $form).val() +
                '&captcha=' + $('#captcha', $form).val() +
                '&contact-submit=Send&ajax=true';
    
    $.ajax({
     type: 'POST',
     dataType: 'text',
     url: url,
     data: data,
     success: function(txt) {
     
         $('div.success, div.error', $form).remove();
     
      $(txt).prependTo($('ul', $form));
      
      $('html, body').animate({
       scrollTop: $form.offset().top
      }, 500);
      
     
     
     }
     
    });
    
    
    event.preventDefault();
   
   
   });
   
   }
  
  
  };
  
  var contact = new Contact();
  
  if($('#contact').length) {
  
   contact.process();
   
  }
 
 
 });


})(jQuery);

In the success() callback method we remove any message generated by the server-side script before adding further messages. Then we use the scrollTop property to make the entire page scroll up to the top of the form:

$('div.success, div.error', $form).remove();
     
$(txt).prependTo($('ul', $form));
      
$('html, body').animate({
 scrollTop: $form.offset().top
}, 500);

You can see the demo below.

CSS: create layouts with table values

noreply@blogger.com (Gabriele Romanato) — Wed, 25 Jan 2012 18:16:00 +0000

In this article I'll explain how to use the table values of the CSS display property to format certain sections of a simple three-columns layout.

The final layout is shown in the picture below.

The relevant sections that will be formatted with such values are highlighted in the following picture.

We start with the following markup:

<div id="header">
<h1>CSS Magazine</h1>
<ul id="nav">
<li><strong>Home</strong></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Tests</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</div>

As you can see, the navigation menu (#nav) is contained in the #header section, where there is also the main title of the page (an h1 element. The styles could be the following:

#header {
height: 8em;
min-height: 80px;
border-bottom: 1px solid #333;
background: #fff url("img/banner.png") no-repeat 0 0;
position: relative;
}
#header h1 {
position: absolute;
top: -1000em;
}
#nav {
display: table;
position: absolute;
top: 0;
right: 0;
height: 100%;
border-left: 1px solid;
margin: 0;
padding: 0;
border-collapse: collapse;
width: 15%;
}
#nav li {
display: table-row;
}
#nav li a, #nav li strong {
display: table-cell;
border: 1px solid #000;
font-size: 120%;
width: 100%;
padding: 0 0.3em;
text-decoration: none;
}
#nav li a:hover {
background: #800;
color: #fff;
}
#nav li strong {
background: #800;
color: #fff;
}

View the example - View the screenshot

The first two rules give a basic formatting to our header. We've set a height in ems and a minimum height in pixels. The latter equals the height of the background image that we'll use as a banner. A minimum height gives a full visibility to our background image even when the user decreases the base font size or when the specified font used on the page is not available. The last declaration of the first rule creates a new context positioning through the value relative of the position property. Thanks to this declaration, we can absolutely position our navigation menu by taking the header section as a reference and not the whole viewport. Then we want to get rid of the heading's text, since it must be replaced by the background image. We use absolute positioning with an enormous negative value for the top property. This value will actually make the text disappear from the page.

Then comes our navigation menu. The first declaration of the third rule turns our unordered list into a table. Since we're working now with tables, we should be sure that there will be no extra space between the cells. For that reason, we use the border-collapse property set to collapse. By doing so, the borders of the single cells will collapse to form an unique border. Tables can be floated and absolutely positioned, since they're actually block-level elements or, more precisely, elements that work in a block-level formatting context. Our menu will be absolutely positioned on the right and with a left border. Its height will equal the height of its container, while its width will be 15% of the container's width.

Now we need table rows to host our cells. We turn the list items into table rows by declaring display: table-row on each li element.

Finally, we create the table cells in the fifth rule by declaring display: table-cell on the a and strong elements. The border of these cells will collapse to form an unique border, as said above. The width of the cells will be 100% of the total, plus a 0.3em of left and right padding. In case you're wondering, the content of the cells will not overflow its container because of the type of table layout set on our menu. Tables can have two types of layout, controlled by the table-layout property: auto and fixed. The first value is used by default on all tables and it's used also on our menu. With this value, the global width of the table will be determined by the width (and the content) of its single cells. In other words, we have a fluid table that will expand automatically together with its cells.

The sub-header

The sub-header is marked up as follows:

<div id="subheader">
<p id="issue">Issue 1, August 2008</p>
<form id="search" action="#">
<div>
<label for="text">Search:</label>
<input type="text" name="text" id="text" />
<input type="submit" id="btn" name="btn" value="Go" />
</div>
</form>
</div>

We want to put the #issue element on the left and the search form on the right. The code could be the following:

#subheader {
display: table;
width: 100%;
height: 1.4em;
border-bottom: 1px solid #000;
font-size: 120%;
}
#subheader #issue {
display: table-cell;
width: 30%;
vertical-align: middle;
font-weight: bold;
padding: 0 0.5em;
text-transform: uppercase;
}
#subheader form {
display: table-cell;
width: 68%;
text-align: right;
vertical-align: middle;
padding: 0.5em;
}
#subheader form label {
font-weight: bold;
}
#subheader form input {
font: 1em Verdana, sans-serif;
}
#subheader form input#text {
border: 1px solid #000;
background: #fff;
color: #333;
}
#subheader form input#btn {
background: #800;
color: #fff;
font-weight: bold;
border: 1px solid #800;
}

View the example - View the screenshot

The first rule turns the sub-header section into a table, sets a global height and width plus a bottom border. The second rule turns the #issue element into a table cell, sets a width on the element plus the vertical alignment of the text inside the cell (middle). The third rule turns the form into a table cell. As for the previous element, also in this case the vertical margins of this element will be resetted, since table cells cannot have vertical margins. The width of this element covers almost all the available space and this is actually our intended purpose. In fact, with the declaration text-align: right we push the form elements to the right of the sub-header, as we do want. Also in this case the elements will be vertically aligned, thanks to the declaration vertical-align: middle. The fifth rule deserves a further explanation: since the dimensions of form elements are determined also by the type and size of the used font, a good way to get consistency across browsers is an explicit declaration of font type/size on the elements we want to format (in this case, input).

The post title

The markup for this section is really simple, as you can see below.

<div class="art-title">
<h2>Lorem ipsum</h2>
<p class="date">8/17/2008</p>
</div>

The post title has been inserted through a h2 element and the date of the post is marked up with a paragraph having .date as its own class. The styles could be the following:

.art-title {
background: #800;
color: #fff;
display: table;
width: 100%;
margin-top: 1em;
padding: 0.3em 0;
}
.art-title h2 {
font-size: 1.4em;
display: table-cell;
width: 40%;
vertical-align: middle;
color: #fff;
padding-left: 3px;
}
.art-title .date {
display: table-cell;
width: 60%;
vertical-align: middle;
text-align: right;
padding-right: 3px;
font-style: italic;
font-weight: bold;
}

View the example - View the screenshot

Again, we've turned the outermost container into a table and its children into table cells. The vertical alignment of the text is controlled by the vertical-align property. The width of each element can be adjusted in order to satisfy particular needs. In this case, we could change the value 40% with 60%, since the content of a date doesn't require so much space.

Download

examples.zip

WordPress: publish a tweet as a post

noreply@blogger.com (Gabriele Romanato) — Tue, 24 Jan 2012 10:55:00 +0000

Twitter is surely one the most popular social networks on the web, and WordPress is surely one the most popular CMS available today. Usually these two platforms interact only in one way: you get something from Twitter, you post something on Twitter. Let's say that you want to publish your latest tweet as a post on your WordPress site, also checking if there is another brand new tweet available. How we can to this?

The first thing you need to do is to create a category for your tweets. Let's name this category tweets and assume that its assigned category ID is 145 (you can see the ID by hovering the category link with your mouse on the WordPress backend).

Then add the following code to the functions.php file of your theme:

function get_insert_latest_tweet() {
 global $wpdb;
 $post = array();
 $url = "http://twitter.com/statuses/user_timeline/yourusername.xml?count=1";
 
 if(file_get_contents($url)) {
 
  $xml = new SimpleXMLElement(file_get_contents($url));
  $status = $xml->status->text;
  $time = nice_time(strtotime($xml->status->created_at));
  $tweet = preg_replace('/http:\/\/(.*?)\/[^ ]*/', '<a href="\\0">\\0</a>', $status);
  $title = preg_replace('/http:\/\/(.*?)\/[^ ]*/', '', $status);
  
  $result = $wpdb->get_row("SELECT * FROM $wpdb->posts WHERE post_title = '$title'");
  
  $post['post_title'] = $title;
  $post['post_content'] = '<p>' . $tweet . ' <small>' . $time . '</small></p>';
  $post['post_status'] = 'publish';
  $post['post_category'] = array(145);
  $post['tags_input'] = 'tweet';
  
  if(is_null($result)) {
   wp_insert_post($post);
  }
  
 } else {
 
  return;
 
 }
 
 
 
}

add_action( 'pre_get_posts', 'get_insert_latest_tweet');



function nice_time($time) {
  $delta = time() - $time;
  if ($delta < 60) {
    return 'less than a minute ago.';
  } else if ($delta < 120) {
    return 'about 1 minute ago.';
  } else if ($delta < (45 * 60)) {
    return floor($delta / 60) . ' minutes ago.';
  } else if ($delta < (90 * 60)) {
    return 'about 1 hour ago.';
  } else if ($delta < (24 * 60 * 60)) {
    return 'about ' . floor($delta / 3600) . ' hours ago.';
  } else if ($delta < (48 * 60 * 60)) {
    return '1 day ago.';
  } else {
    return floor($delta / 86400) . ' days ago.';
  }
}

get_insert_latest_tweet() create a new post from your Twitter feed through the wp_insert_post() function. Before creating a new post, though, it checks whether the current tweet has already been inserted. If so, it does nothing.

The WordPress action used here is pre_get_posts which means that the current tweet is fetched within your main WordPress Loop. You can change this behavior by moving the above function in a separate plugin that requires your deliberate action to create a new post from a tweet.

CSS: how to style form elements

noreply@blogger.com (Gabriele Romanato) — Mon, 23 Jan 2012 18:35:00 +0000

In this article I'll explain how to format form elements by using CSS. Finally, I'll provide a series of screenshots taken from the various browsers.

The markup

We start with the following markup:

<form action="#" method="post">
 <fieldset>
 <legend>Personal information</legend>
 <div class="row">
  <label for="name">Name:</label>
  <input type="text" name="name" id="name" />
  <label for="email">Email:</label>
  <input type="text" name="email" id="email" />
 </div>
 <div class="row">
  <label for="male">Male</label>
  <input type="checkbox" value="male" id="male" name="male" />
  <label for="female">Female</label>
  <input type="checkbox" value="female" id="female" name="female" />
  <label for="country">Country:</label>
  <select name="country" id="country">
   <option value="USA">USA</option>
   <option value="Italy">Italy</option>
  </select>
 </div>
 <div class="row">
  <h2>Comments</h2>
  <textarea rows="10" cols="40"></textarea>
 </div>
 <div class="row">
  <input type="submit" id="btn" name="btn" value="Send" />
 </div>
 </fieldset>
</form>

View the example

We're going to stylize the following elements:

form
fieldset
legend
label
input as:
- text field
- checkbox
- submit button
select
textarea

Note that we've used proper attributes for each element, due to accessibility reasons.

General styles

The following styles set only the backbone for further and more advanced styles.

form, fieldset {
 margin: 0;
 padding: 0;
}

form {
 width: 500px;
 background: #ffe;
 color: #000;
 font: small Verdana, sans-serif;
}

View the example

We've resetted the default margin and padding on the form and fieldset elements. Then we've specified a width for our form, plus font and colors.

Adding some padding to the form

We need some vertical padding to create a certain amount of vertical spaces above and below the blocks. So we can write the following:

form {
 padding: 1em 0;
}

View the example

Fieldset and legend

Now we can start stylizing the fieldset and legend elements. Styles are the following:

fieldset {
 display: block;
 width: 90%;
 margin: 0 auto;
 border: 1px solid #666;
}

legend {
 padding: 0 0.2em;
 background: #c00;
 color: #fff;
 font-weight: bold;
 text-transform: uppercase;
 margin-left: 0.5em;
}

View the example

fieldset is actually a block-level element, but we've declared it explicitly in order to prevent browsers from applying their internal algorithms for handling form elements. Then we've specified a width and we've centered this element through horizontal automatic margins. On the contrary, legend is an inline element, so we've only added a left margin and some horizontal padding. Just for the record, Internet Explorer 7 (and lower) doesn't need a left margin to keep this element separated from the fieldset's left border, so we've used the following code only for Internet Explorer:

<!--[if lt IE 8]>
<style type="text/css" media="screen">
legend {margin-left: 0}
</style>
<![endif]-->

What's more, legend is one of those elements that is actually "locked" by browser's algorithms so that we can specify only a few styles on it.

Creating centered rows

After centering the main content of our form, we want to center the other elements. This can be done very easily.

div.row {
 width: 90%;
 margin: 0 auto;
 padding: 1em 0;
}

View the example

We use vertical padding instead of margins in order to avoid some problems with Internet Explorer 7 (and lower), namely the wrong computation of margins in a form.

Input and label

Now we can stylize the text fields and the label elements.

label {
 vertical-align: middle;
 font-weight: bold;
}

input {
 font: 1em Verdana, sans-serif;
 vertical-align: middle;
}
input#name, input#email {
 width: 100px;
 border: 1px solid #c00;
 background: #fff;
}

View the example

To vertically align the elements, we've used the vertical-align property set to middle. Another important thing to keep in mind is that the actual dimensions of text fields are determined by the type and size of the font in use. For that reason, we've specified a font family and a font size on each input element, so that the vertical alignment can be handled correctly.

However, the rendering of checkboxes is really inconsistent, so we've skipped these elements. Again, this kind of elements seems to be "locked" by the default algorithms of most browsers.

Select

The styles for the select element are really simple.

select {
 font: 1em Verdana, sans-serif;
 vertical-align: middle;
 width: 95px;
}

View the example

As for the input element, we've vertically aligned this element and specified the same font family and size used above. In this case, Internet Explorer 7 (and lower) has some problems with the specified width, so it needs the following code:

<!--[if lt IE 8]>
<style type="text/css" media="screen">
select {width: 99px}
</style>
<![endif]-->

However, the rendering of the option elements is really inconsistent, so we've skipped these elements. Again, this kind of elements seems to be "locked" by the default algorithms of most browsers.

Textarea and submit button

These elements have the following styles:

textarea {
 display: block;
 width: 100%;
 background: #fff;
 border: 1px solid #c00;
 font: 1em Verdana, sans-serif;
 overflow: auto;
}

input#btn {
 background: #c00;
 border: 1px solid #800;
 color: #fff;
 font-weight: bold;
}

View the example

The textarea element is an inline-block element, so we've declared it as a block-level element. The declaration overflow: auto should prevent browsers from showing the trackbar for the vertical scrollbar, but this solution doesn't work in all cases. What's more, Internet Explorer 7 (and lower) has some problems with the correct calculation of the width of the element and it needs the following code:

<!--[if lt IE 8]>
<style type="text/css" media="screen">
textarea {width: 99%}
</style>
<![endif]-->

Final result

Our final layout appears as follows in the four major browsers.

Firefox
Internet Explorer
Opera
Safari

Download examples

examples.zip

JavaScript syntax highlighting is bad for performance

noreply@blogger.com (Gabriele Romanato) — Sun, 22 Jan 2012 15:55:00 +0000

My visitor's satisfaction is one of the top priorities of this blog. For that reason, I decided to remove syntax highlighting completely. I found out that syntax highlighters are bad for performance. In fact, all the syntax highlighters tools used since the very beginning of this blog were actually poor when it comes to performance. Most of my visitors come from the USA, but there's a significant percentage of people who connect to this site from Asia. When the distance increases, it also affects latency and response times. I'd like to explain why JavaScript syntax highlighters are bad for performance using very simple words.

Too many GET requests

Generally speaking, a JavaScript syntax highlighter is made up of a single core file and several additional language files. Let's say that on your blog your main topics are CSS, JavaScript, HTML5 and PHP.

Four languages mean four different language files, plus the main core file. The total of five JavaScript files forces a browser to perform five different GET requests.

These additional requests, added to the overall amount of the HTTP requests of your site, result in an increased loading time of your pages. I didn't take the exact timing of such delays, but I reasonably think that they should be approximately of more that 5-10 seconds, especially on high-traffic web sites.

Poor string manipulation

In JavaScript, advanced string manipulation is handled by regular expressions (Perl-compatible, with some differences). Usually a syntax highlighter works on a target element by replacing its HTML content with new content created on the fly by searching and replacing some strings which have a special meaning for the code in use.

For example, a DOM structure like the following:

<pre class="js">
function A() {}
</pre>

becomes:

<pre class="js">
<span class="kwd">function</span> A() {}
</pre>

This search-and-replace routine is performed several times on each code block on the page. To get an idea of the process behind syntax highlighting, you should measure the duration of a single routine, multiply it for the number of significant strings of each block and finally multiply the result for the number of blocks of a page.

DOM loading delays

Most of these routines take place on page loading. More specifically, the event used is DOMContentReady or, if it's not available, the load event of the body element is used instead.

The problem is that if your page contains several other assets, such as media elements or JavaScript widgets, DOM loading will be further delayed. In fact, syntax highlighters don't feature a really flexible way of handling the bootstrapping (so to speak) of the library, meaning that you cannot preload them without affecting the way by which your code blocks will be displayed.

If you load a library too soon or too late, you won't see the CSS styles applied to your code blocks but only raw code.

jQuery: Mati, professional image gallery

noreply@blogger.com (Gabriele Romanato) — Sat, 21 Jan 2012 12:41:00 +0000

Mati is a professional jQuery image gallery that I've created as an homage to my little niece Matilde. It's a grid-based image gallery that allows you to navigate through the image sets and view the full-size image preview. It's free. The only thing you should do is to add an image preloading routine to improve performance. I hope you find it useful.

Demo

Mati image gallery

Download

ZIP file

jQuery: the moreLink plugin for WordPress

noreply@blogger.com (Gabriele Romanato) — Sun, 08 Jan 2012 07:20:00 +0000

moreLink is a jQuery plugin written by me that handles the 'More' links of a WordPress site by fetching the linked post via AJAX without refreshing the page.

Base usage

$('a.more-link').moreLink(options);

Options

target: The CSS selector that identifies your post wrapper in the target page (e.g. div.post).
parent: The outermost parent of the link in the current page.
loader: The full path to the animated GIF used while the fetched post is loading.
loaderStyles: The CSS styles given as an object to the css() method to stylize the animated spinner.

Demo

Download

ZIP file

Blogger: inserting social media buttons selectively

noreply@blogger.com (Gabriele Romanato) — Thu, 05 Jan 2012 08:46:00 +0000

Blogger already provides a way to include social media buttons on its pages but not selectively. We want that our social buttons appear only on posts and not on the homepage. Fortunately, Blogger also provides a series of tags (all starting with b) to perform some specific tasks within a template. Let's see how we can accomplish this task.

From Template, select Edit HTML and put the following conditional expression where you want the social buttons appear:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

  <!-- social buttons code here -->

</b:if>

The above instruction checks whether the current URL is different from your homepage's URL. Then you can include your social buttons code within that conditional block, as follows:

<b:if cond='data:blog.url != data:blog.homepageUrl'>

    <div class='share'>
<span class='twitter'>
<a class='twitter-share-button' data-lang='en' data-via='username' href='https://twitter.com/share'>Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</span>
<span class='google-plus'>
<g:plusone annotation='inline' size='small' width='120'/>
<script type='text/javascript'>
  (function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/plusone.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
</script>
</span>
</div>

</b:if>

Easy enough, isn't it?

The Book of CSS3

noreply@blogger.com (Gabriele Romanato) — Tue, 03 Jan 2012 11:34:00 +0000

The Book of CSS3 is the most comprehensive and detailed guide ever written on the subject practically since the creation of this standard. I bought this book myself a couple of days ago and I have to say that I'm actually learning new things on CSS3. The author is Peter Gasston, one of the people behind CSS3.info. I'd like to explain why you should get this book.

This book covers all the nuts and bolts of CSS3. I mean, all. For example:

Stylize text with fully customizable outlines, drop shadows, and other effects
Create, position, and resize unlimited background images on the fly
Spice up static web pages with event-driven transitions and animations
Apply 2D and 3D transformations to text and images
Use linear and radial gradients to create smooth color transitions
Tailor a website's appearance to smartphones and other devices

With this book you won't need to google over and over searching for a tutorial because everything you need to know on CSS3 is already covered here. You'll become more independent and you'll be able to start testing and experimenting on your own.

I definitely recommend this book.

jQuery: how to split images on slideshows

noreply@blogger.com (Gabriele Romanato) — Tue, 03 Jan 2012 10:25:00 +0000

Splitting and dividing images on a jQuery slideshow is not so difficult as it could seem at a first glance. In fact, if you know the technique that works behind the scenes, you'll probably end up with realizing how this feature is simple in its implementation. In a nutshell: it's only a matter of layers and background images. Let's see the details.

The markup

We have a very simple and common slideshow structure:

<div id="slideshow">
 <div id="slideshow-wrapper">
     <div class="slide">
   <img src="img/1.jpg" alt="" />
  </div>
  <div class="slide">
   <img src="img/2.jpg" alt="" />
  </div>
  <div class="slide">
   <img src="img/3.jpg" alt="" />
  </div>
  <div class="slide">
   <img src="img/4.jpg" alt="" />
  </div>
 </div>
</div>

Each image is 1150 x 400 pixels wide. We have to create a grid made up of 40 blocks and 4 rows to be applied on each slide. Each row is made up of 10 blocks. In turn, each block is 115 x 100 pixels wide, so (115 x 10) and (100 x 4) give us the total image dimensions. Here comes the trick: each of these blocks will have the current image as its background image, but with different x and y values for the CSS background-position property. Once set the blocks, it's easy to animate them with jQuery.

The CSS styles

Our CSS styles are as follows:

#slideshow {
 margin: 2em auto;
 width: 90%;
 max-width: 1150px;
 height: 400px;
 border: 5px solid #565656;
 overflow: hidden;
 position: relative;
}

#slideshow-wrapper {
 width: 4600px;
 height: 400px;
 position: relative;
 background: #ccc;
}

#slideshow-wrapper img {
 width: 1150px;
 height: 400px;
 display: none;
}

div.slide {
 float: left;
 width: 1150px;
 height: 400px;
 position: relative;
}

div.overlay {
 width: 1150px;
 height: 400px;
 position: absolute;
 top: 0;
 left: 0;
}

div.row {
 height: 100px;
 position: relative;
}

div.piece {
 height: 100px;
 width: 115px;
 background-repeat: no-repeat;
 float: left;
 display: none;
}

The jQuery code

We start with a singleton object and we declare the properties and variables used throughout its namespace:

var Slideshow = new function() {

 var slideshow = document.getElementById('slideshow'),
  wrapper = $('#slideshow-wrapper', slideshow),
  slides = $('div.slide', wrapper),
  pieces = $('div.piece', slides),
  index = -1,
  timer = null;
  
  // continues

}();

Then we split each slide into pieces using the following private method:

var Slideshow = new function() {

 var slideshow = document.getElementById('slideshow'),
  wrapper = $('#slideshow-wrapper', slideshow),
  slides = $('div.slide', wrapper),
  pieces = $('div.piece', slides),
  index = -1,
  timer = null;
  
 var insertBlocks = function() {
 
  slides.each(function() {
   
   var slide = $(this);
   
   $('<div class="overlay"/>').appendTo(slide);
   
   var block = '<div class="row">' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '</div>';
   for(var i = 0; i < 4; i += 1) {
   
    $(block).appendTo($('div.overlay', slide));
   
   }
  
  });
 
 
 };

 // continues

}();

Then we set the background images:

var Slideshow = new function() {

 var slideshow = document.getElementById('slideshow'),
  wrapper = $('#slideshow-wrapper', slideshow),
  slides = $('div.slide', wrapper),
  pieces = $('div.piece', slides),
  index = -1,
  timer = null;
  
 var insertBlocks = function() {
 
  slides.each(function() {
   
   var slide = $(this);
   
   $('<div class="overlay"/>').appendTo(slide);
   
   var block = '<div class="row">' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '</div>';
   for(var i = 0; i < 4; i += 1) {
   
    $(block).appendTo($('div.overlay', slide));
   
   }
  
  });
 
 
 };

 var setBackgroundImages = function() {
 
      
 
  slides.each(function() {
  
   var slide = $(this);
   var src = $('img', slide).attr('src');
   var pieces = $('div.piece', slide);
   pieces.css('backgroundImage', 'url(' + src + ')');
   
   pieces.eq(0).css('backgroundPosition', '0px 0px');
   pieces.eq(1).css('backgroundPosition', '-115px 0px');
   pieces.eq(2).css('backgroundPosition', '-230px 0px');
   pieces.eq(3).css('backgroundPosition', '-345px 0px');
   pieces.eq(4).css('backgroundPosition', '-460px 0px');
   pieces.eq(5).css('backgroundPosition', '-575px 0px');
   pieces.eq(6).css('backgroundPosition', '-690px 0px');
   pieces.eq(7).css('backgroundPosition', '-805px 0px');
   pieces.eq(8).css('backgroundPosition', '-925px 0px');
   pieces.eq(9).css('backgroundPosition', '-1040px 0px');
   
   pieces.eq(10).css('backgroundPosition', '0px -100px');
   pieces.eq(11).css('backgroundPosition', '-115px -100px');
   pieces.eq(12).css('backgroundPosition', '-230px -100px');
   pieces.eq(13).css('backgroundPosition', '-345px -100px');
   pieces.eq(14).css('backgroundPosition', '-460px -100px');
   pieces.eq(15).css('backgroundPosition', '-575px -100px');
   pieces.eq(16).css('backgroundPosition', '-690px -100px');
   pieces.eq(17).css('backgroundPosition', '-805px -100px');
   pieces.eq(18).css('backgroundPosition', '-925px -100px');
   pieces.eq(19).css('backgroundPosition', '-1040px -100px');
   
   pieces.eq(20).css('backgroundPosition', '0px -200px');
   pieces.eq(21).css('backgroundPosition', '-115px -200px');
   pieces.eq(22).css('backgroundPosition', '-230px -200px');
   pieces.eq(23).css('backgroundPosition', '-345px -200px');
   pieces.eq(24).css('backgroundPosition', '-460px -200px');
   pieces.eq(25).css('backgroundPosition', '-575px -200px');
   pieces.eq(26).css('backgroundPosition', '-690px -200px');
   pieces.eq(27).css('backgroundPosition', '-805px -200px');
   pieces.eq(28).css('backgroundPosition', '-925px -200px');
   pieces.eq(29).css('backgroundPosition', '-1040px -200px');
   
   pieces.eq(30).css('backgroundPosition', '0px -300px');
   pieces.eq(31).css('backgroundPosition', '-115px -300px');
   pieces.eq(32).css('backgroundPosition', '-230px -300px');
   pieces.eq(33).css('backgroundPosition', '-345px -300px');
   pieces.eq(34).css('backgroundPosition', '-460px -300px');
   pieces.eq(35).css('backgroundPosition', '-575px -300px');
   pieces.eq(36).css('backgroundPosition', '-690px -300px');
   pieces.eq(37).css('backgroundPosition', '-805px -300px');
   pieces.eq(38).css('backgroundPosition', '-925px -300px');
   pieces.eq(39).css('backgroundPosition', '-1040px -300px');


   
   
     
  
  });
 
 
 };

 // continues
}();

It's verbose but doing so is the best way to help you understand how it works. Now we have to animate the slideshow:

var Slideshow = new function() {

 var slideshow = document.getElementById('slideshow'),
  wrapper = $('#slideshow-wrapper', slideshow),
  slides = $('div.slide', wrapper),
  pieces = $('div.piece', slides),
  index = -1,
  timer = null;
  
 var insertBlocks = function() {
 
  slides.each(function() {
   
   var slide = $(this);
   
   $('<div class="overlay"/>').appendTo(slide);
   
   var block = '<div class="row">' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '</div>';
   for(var i = 0; i < 4; i += 1) {
   
    $(block).appendTo($('div.overlay', slide));
   
   }
  
  });
 
 
 };

 var setBackgroundImages = function() {
 
      
 
  slides.each(function() {
  
   var slide = $(this);
   var src = $('img', slide).attr('src');
   var pieces = $('div.piece', slide);
   pieces.css('backgroundImage', 'url(' + src + ')');
   
   pieces.eq(0).css('backgroundPosition', '0px 0px');
   pieces.eq(1).css('backgroundPosition', '-115px 0px');
   pieces.eq(2).css('backgroundPosition', '-230px 0px');
   pieces.eq(3).css('backgroundPosition', '-345px 0px');
   pieces.eq(4).css('backgroundPosition', '-460px 0px');
   pieces.eq(5).css('backgroundPosition', '-575px 0px');
   pieces.eq(6).css('backgroundPosition', '-690px 0px');
   pieces.eq(7).css('backgroundPosition', '-805px 0px');
   pieces.eq(8).css('backgroundPosition', '-925px 0px');
   pieces.eq(9).css('backgroundPosition', '-1040px 0px');
   
   pieces.eq(10).css('backgroundPosition', '0px -100px');
   pieces.eq(11).css('backgroundPosition', '-115px -100px');
   pieces.eq(12).css('backgroundPosition', '-230px -100px');
   pieces.eq(13).css('backgroundPosition', '-345px -100px');
   pieces.eq(14).css('backgroundPosition', '-460px -100px');
   pieces.eq(15).css('backgroundPosition', '-575px -100px');
   pieces.eq(16).css('backgroundPosition', '-690px -100px');
   pieces.eq(17).css('backgroundPosition', '-805px -100px');
   pieces.eq(18).css('backgroundPosition', '-925px -100px');
   pieces.eq(19).css('backgroundPosition', '-1040px -100px');
   
   pieces.eq(20).css('backgroundPosition', '0px -200px');
   pieces.eq(21).css('backgroundPosition', '-115px -200px');
   pieces.eq(22).css('backgroundPosition', '-230px -200px');
   pieces.eq(23).css('backgroundPosition', '-345px -200px');
   pieces.eq(24).css('backgroundPosition', '-460px -200px');
   pieces.eq(25).css('backgroundPosition', '-575px -200px');
   pieces.eq(26).css('backgroundPosition', '-690px -200px');
   pieces.eq(27).css('backgroundPosition', '-805px -200px');
   pieces.eq(28).css('backgroundPosition', '-925px -200px');
   pieces.eq(29).css('backgroundPosition', '-1040px -200px');
   
   pieces.eq(30).css('backgroundPosition', '0px -300px');
   pieces.eq(31).css('backgroundPosition', '-115px -300px');
   pieces.eq(32).css('backgroundPosition', '-230px -300px');
   pieces.eq(33).css('backgroundPosition', '-345px -300px');
   pieces.eq(34).css('backgroundPosition', '-460px -300px');
   pieces.eq(35).css('backgroundPosition', '-575px -300px');
   pieces.eq(36).css('backgroundPosition', '-690px -300px');
   pieces.eq(37).css('backgroundPosition', '-805px -300px');
   pieces.eq(38).css('backgroundPosition', '-925px -300px');
   pieces.eq(39).css('backgroundPosition', '-1040px -300px');


   
   
     
  
  });
 
 
 };
 
 var autoSlide = function() {
     
 
  timer = setInterval(function() {
  
   index++;
   
   if(index == (slides.length - 1)) {
   
    index = -1;
   
   }
   
   
   wrapper.animate({
    left: - slides.eq(index).position().left
   }, 0, function() {
   
    var slide = slides.eq(index);
    var parts = $('div.piece', slide);
    var counter = -1;
    var slicer = null;
    
    slicer = setInterval(function() {
    
     counter++;
     
     if(counter == (parts.length)) {
     
      clearInterval(slicer);
      
      parts.fadeOut();
     
     }
     
     parts.eq(counter).fadeIn(75);
    
    
    }, 75); 
    
   
   
   });
  
  
  
  }, 3000);
 
 
 
 };


 // continues
}();

Finally, we create an initialization public method:

var Slideshow = new function() {

 var slideshow = document.getElementById('slideshow'),
  wrapper = $('#slideshow-wrapper', slideshow),
  slides = $('div.slide', wrapper),
  pieces = $('div.piece', slides),
  index = -1,
  timer = null;
  
 var insertBlocks = function() {
 
  slides.each(function() {
   
   var slide = $(this);
   
   $('<div class="overlay"/>').appendTo(slide);
   
   var block = '<div class="row">' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '<div class="piece"></div>' +
      '</div>';
   for(var i = 0; i < 4; i += 1) {
   
    $(block).appendTo($('div.overlay', slide));
   
   }
  
  });
 
 
 };

 var setBackgroundImages = function() {
 
      
 
  slides.each(function() {
  
   var slide = $(this);
   var src = $('img', slide).attr('src');
   var pieces = $('div.piece', slide);
   pieces.css('backgroundImage', 'url(' + src + ')');
   
   pieces.eq(0).css('backgroundPosition', '0px 0px');
   pieces.eq(1).css('backgroundPosition', '-115px 0px');
   pieces.eq(2).css('backgroundPosition', '-230px 0px');
   pieces.eq(3).css('backgroundPosition', '-345px 0px');
   pieces.eq(4).css('backgroundPosition', '-460px 0px');
   pieces.eq(5).css('backgroundPosition', '-575px 0px');
   pieces.eq(6).css('backgroundPosition', '-690px 0px');
   pieces.eq(7).css('backgroundPosition', '-805px 0px');
   pieces.eq(8).css('backgroundPosition', '-925px 0px');
   pieces.eq(9).css('backgroundPosition', '-1040px 0px');
   
   pieces.eq(10).css('backgroundPosition', '0px -100px');
   pieces.eq(11).css('backgroundPosition', '-115px -100px');
   pieces.eq(12).css('backgroundPosition', '-230px -100px');
   pieces.eq(13).css('backgroundPosition', '-345px -100px');
   pieces.eq(14).css('backgroundPosition', '-460px -100px');
   pieces.eq(15).css('backgroundPosition', '-575px -100px');
   pieces.eq(16).css('backgroundPosition', '-690px -100px');
   pieces.eq(17).css('backgroundPosition', '-805px -100px');
   pieces.eq(18).css('backgroundPosition', '-925px -100px');
   pieces.eq(19).css('backgroundPosition', '-1040px -100px');
   
   pieces.eq(20).css('backgroundPosition', '0px -200px');
   pieces.eq(21).css('backgroundPosition', '-115px -200px');
   pieces.eq(22).css('backgroundPosition', '-230px -200px');
   pieces.eq(23).css('backgroundPosition', '-345px -200px');
   pieces.eq(24).css('backgroundPosition', '-460px -200px');
   pieces.eq(25).css('backgroundPosition', '-575px -200px');
   pieces.eq(26).css('backgroundPosition', '-690px -200px');
   pieces.eq(27).css('backgroundPosition', '-805px -200px');
   pieces.eq(28).css('backgroundPosition', '-925px -200px');
   pieces.eq(29).css('backgroundPosition', '-1040px -200px');
   
   pieces.eq(30).css('backgroundPosition', '0px -300px');
   pieces.eq(31).css('backgroundPosition', '-115px -300px');
   pieces.eq(32).css('backgroundPosition', '-230px -300px');
   pieces.eq(33).css('backgroundPosition', '-345px -300px');
   pieces.eq(34).css('backgroundPosition', '-460px -300px');
   pieces.eq(35).css('backgroundPosition', '-575px -300px');
   pieces.eq(36).css('backgroundPosition', '-690px -300px');
   pieces.eq(37).css('backgroundPosition', '-805px -300px');
   pieces.eq(38).css('backgroundPosition', '-925px -300px');
   pieces.eq(39).css('backgroundPosition', '-1040px -300px');


   
   
     
  
  });
 
 
 };
 
 var autoSlide = function() {
     
 
  timer = setInterval(function() {
  
   index++;
   
   if(index == (slides.length - 1)) {
   
    index = -1;
   
   }
   
   
   wrapper.animate({
    left: - slides.eq(index).position().left
   }, 0, function() {
   
    var slide = slides.eq(index);
    var parts = $('div.piece', slide);
    var counter = -1;
    var slicer = null;
    
    slicer = setInterval(function() {
    
     counter++;
     
     if(counter == (parts.length)) {
     
      clearInterval(slicer);
      
      parts.fadeOut();
     
     }
     
     parts.eq(counter).fadeIn(75);
    
    
    }, 75); 
    
   
   
   });
  
  
  
  }, 3000);
 
 
 
 };


 this.init = function() {
 
  insertBlocks();
  setBackgroundImages();
  autoSlide();
 
 };
}();

And we kick things off:

$(function() {

 Slideshow.init();

});

You can see the demo below.

Demo

Live demo

Download

ZIP file

jQuery: closing gate effect on a slideshow

noreply@blogger.com (Gabriele Romanato) — Sat, 24 Dec 2011 10:55:00 +0000

A closing gate-like effect on a jQuery slideshow takes only two opposite, positioned elements to be executed on each slide in order to show the current image. These two panels slide in opposite directions, thus creating the effect of a closing and opening gate. Let's see the details.

We start with the following markup:

<div id="slideshow">
 <img src="img/1.jpg" alt=""/>
 <img src="img/2.jpg" alt="" />
 <img src="img/3.jpg" alt="" />
 <img src="img/4.jpg" alt="" />
 <div id="panel-left"></div>
 <div id="panel-right"></div>
</div>

And here are our CSS rules:

#slideshow {
 margin: 2em auto;
 width: 650px;
 height: 430px;
 position: relative;
 overflow: hidden;
 border: 6px double #bbb;
}

#slideshow img {
 width: 650px;
 height: 430px;
 display: none;
}

#panel-left, #panel-right {
 width: 325px;
 height: 430px;
 background: #000;
 position: absolute;
 top: 0;
}

#panel-left {
 left: -325px;
}

#panel-right {
 right: -325px;
}

As you can see, both panels are initially hidden by setting their offsets to negative values. Since their container has its overflow property set to hidden, they won't be visible until a jQuery action takes place.

Here's our jQuery code:

var Slideshow = new function() {

 var slideshow = document.getElementById('slideshow'),
  images = $('img', slideshow),
  panelLeft = $('#panel-left', slideshow),
  panelRight = $('#panel-right', slideshow),
  index = -1,
  timer = null;
 
 var autoSlide = function() {
 
  timer = setInterval(function() {
  
   index++;
   
   if(index == (images.length - 1)) {
   
    index = -1;
    images.hide();
   
   }
   
   panelLeft.animate({
    left: 0
   }, 250);
   panelRight.animate({
    right: 0
   }, 250);
   panelLeft.animate({
    left: - 325
   }, 250);
   panelRight.animate({
    right: - 325
   }, 250);
   
   images.eq(index).fadeIn(1000).siblings('img').hide();
  
  
  }, 2000);
 
 };
 
 this.init = function() {
 
  autoSlide();
 
 };


}();

$(function() {

 Slideshow.init();

});

We use a cyclic timer with a progressive internal counter to select the current image. Before showing the current image, both panels are first shown and then hidden again by adjusting their offsets. It's a pretty interesting effect to be added on a slideshow. You can see the demo below.

Demo

Live demo

Download

ZIP file

jQuery: a usability lesson

noreply@blogger.com (Gabriele Romanato) — Fri, 16 Dec 2011 09:27:00 +0000

Why jQuery is one of the most used JavaScript libraries available on the web? Perhaps it has more features than other libraries or more flexibility. Perhaps its design is better conceived. Nothing like that: jQuery is a successful project simply because it has usability in mind. Usability is a too often neglected aspect of library development. jQuery fills this gap by providing a simple way to perform tasks that other libraries tend to make too complicated for the average user. That's the jQuery's secret.

Usability and productivity

Developers want to be ready and productive as soon as possible. jQuery provides a simple interface to work with. Most JavaScript libraries tend to create a complex namespace hierarchy which is surely great from an OOP perspective, but it turns out to be difficult to remember and use when it comes to productivity.

For example, to hide an element in Prototype you have to write the following:

Element('test').hide();

whereas in jQuery you have only to write a simpler line:

$('#test').hide();

jQuery uses CSS selectors to match DOM elements. This is really, really useful because even beginners can actually start to work with this library only knowing CSS and a little of JavaScript, whereas other libraries require that a user must have a firm knowledge of JavaScript and the DOM.

Also chaining is a vital aspect of jQuery's usability: instead of using a syntax like this:

Library.namespace.method(element, function() {

 //...

});

you can use the following:

$('#test').addClass('test').find('p').removeClass('para');

Event the method and property names used by jQuery is intuitive and easy: bind() is easy to understand and remember, but what exactly Event.observe() does? And what is its exact syntax?

The more a namespace hierarchy gets complex and deeper, the more is difficult to remember and use.

Hiding the DOM

DOM methods and properties are generally verbose and inconsistent across browsers. jQuery succeeds in hiding the underlying DOM procedures and structures by providing some really useful methods to work with the DOM without knowing all the nuts and bolts of the DOM:

CSS selectors
DOM traversing methods
DOM manipulation methods

By hiding the underlying DOM structure to the average user, jQuery aids usability with a simple interface that is very easy to understand even for the absolute beginner:

$('#test').prev().wrap('<div></div>').end().find('p').wrapAll('<div></div>');

Extensibility

Unless other libraries, jQuery is fully extensible through plugins. From a pure user perspective, this is really handy. In fact, jQuery itself cannot encompass all the possible use cases that you may encounter during the development process of a web site.

Extending jQuery is easy:

(function($) {

 $.fn.plugin = function(options) {
 
  options = $.extend({
   option1: defaultValue1,
   option2: defaultValue2,
   optionN: //...
  }, options);
  
  return this.each(function() {
  
   //...
  
  
  });
 
 };

})(jQuery);

The way by which jQuery handles plugins is very simple in itself: once defined, your plugin is available on all elements in the set, unless you restrict its usage only on a particular element.

Conclusions

jQuery is a great example of how JavaScript library development meets usability to provide users with some tools which are not only powerful in their design, but also easy to use.

jQuery: using timers with animations

noreply@blogger.com (Gabriele Romanato) — Wed, 14 Dec 2011 11:16:00 +0000

JavaScript timers constitute the inner engine of any good automated jQuery slideshow. Although timers can be really handy in most situations and case-scenarios, their rules are somewhat obscure to many developers. The point is that timers can be used in a wide range of use cases, not only in animations. For that reason, you should understand how timers work when applied to jQuery animations before developing any practical implementation that makes use of them.

Delays: setTimeout()

The setTimeout() method is primarily used to create a delay between an action and the subsequent one or to prevent an action from being executed immediately:

function appear(element) {

 $(element).fadeIn(1000); 

}

setTimeout(function() {

 appear('#test');

}, 1000);

This is a wait-and-go action: the timer delays the execution of the function for one second (1,000 milliseconds) but the function itself uses an effect whose duration is of another second. Globally, the whole action takes 2 seconds to finish its task.

As a rule of thumb, you should always add up the duration of your animation to the overall duration of the timer you're using. By doing this, you have the exact duration of the entire action.

Delays can be applied on many scenarios. One of the most interesting examples is the animation chain created through deferred objects:

$.Deferred(function(def) {

 def.pipe(function() {
 
  return $('#a').animate({
   left: 100
  }, 1000);
 
 }).pipe(function() {
 
  return setTimeout(function() {
  
   $('#b').animate({
    left: 200
   }, 1000);
  
  }, 1000);
 
 });


}).resolve();

The second animation must wait until the first one is complete. Since the first animation has a duration of 1,000 milliseconds, then the timer must have a delay of exactly 1,000 milliseconds to create the effect of an animation chain where every animation follows the previous one. If you don't do so, both animations will start simultaneously.

Speaking of delays, another practical application can be found in the dropdown menu handling where you can prevent a submenu from disappearing too fast:

$('ul.sub-menu').mouseleave(function() {

    var $menu = $(this);

 setTimeout(function() {
 
  $menu.slideUp(800); 
 
 }, 500);

});

Intervals: setInterval()

setInterval() has exactly the same syntax as setTimeout(). The main difference between these two methods is that setInterval() creates a cyclic timer whose execution is virtually infinite if you don't stop it once it has reached a certain limit:

var timer = setInterval(function() {

 index++;
 
 if(index == limit) {
 
  index = 0;
 
 }

}, 1000);

In this case the inner counter is incremented by 1 every second. When the counter reaches its limit (say, 5), it will be reset to 0 so that the cycle can start again. And so on.

This method can be useful on automated slideshows:

var autoSlide = function() {

 timer = setInterval(function() {
 
  index++;
  
  if(index == slides.length) {
  
   index = 0;
  
  }
  
  var position = slides.eq(index).position().left;
  
  wrapper.animate({
   left: - position
  }, 1000);
 
 }, 1000);


};

Be careful with the duration of your animations within a timer: you should always make sure that the overall duration of your animations match the duration of the interval defined by the timer (in this case, 1 second for both the animation and the interval).

For that reason, setInterval() is not very practical when you have to deal with multiple animations, because you'll probably end up with an interval that is too long for your needs. Nicholas Zakas proposes the following alternate solution:

timer = setTimeout(function() {

 // various animations that last 5,000 milliseconds
 
 setTimeout(arguments.callee, 5000);

}, 1000);

The above timer will also repeat itself because of the second call to setTimeout() but with a significant difference: you have only to wait one second between each execution whereas setInterval() requires you to wait 5 seconds.

Clearing timers and animations

To clear the aforementioned methods you can use clearTimeout() and clearInterval(), respectively. Is that all? Unfortunately not, because you have also to clear the animation queue.

Consider this example: you have a jQuery slideshow which features both an autosliding effect and navigation buttons. When you click on a button, you should stop the automatic sliding effect:

$('#prev').click(function(event) {

 clearInterval(timer);
 timer = null;
 
 var position = slides.eq(index).position().left; // index belongs to the global namespace of your slideshow
 
 wrapper.animate({
  left: - position
 }, 1000, autoSlide);

 event.preventDefault();

});

Once the action bound to the button is complete, you can restart your timer. But this is not enough. In fact, if you click twice on that button, everything will fall apart. That's because the animation queue is still active. You have to reset it as well:

$('#prev').click(function(event) {

 clearInterval(timer);
 timer = null;
 $(':animated', slideshow).clearQueue();
 
 var position = slides.eq(index).position().left; // index belongs to the global namespace of your slideshow
 
 wrapper.animate({
  left: - position
 }, 1000, autoSlide);

 event.preventDefault();

});

By doing so, you've normalized everything so you can start with a clean slate again.

jQuery slideLeft plugin

noreply@blogger.com (Gabriele Romanato) — Wed, 30 Nov 2011 12:08:00 +0000

jQuery doesn't provide natively a method to slide an element from left to right, so here's a lightweight and simple plugin to accomplish this task. slideLeft() is intelligent enough to calculate the width of an element by referencing it to the width of its parent element and animate such property accordingly. I hope you find it useful.

Demo

Live demo

Download

ZIP file

jQuery: scanner effect on a slideshow

noreply@blogger.com (Gabriele Romanato) — Tue, 29 Nov 2011 11:23:00 +0000

An interesting effect that we can achieve with jQuery on a slideshow is the scanner effect. Basically, it's simply a vertical bar that moves from left to right on each slide. The effect is even more interesting if we use an expanding movement on each slide. Let's see how.

We start with the following markup:

<div id="slideshow">
 <div id="slideshow-wrapper">
  <img src="img/1.jpg" alt="Alba tra gli alberi" />
  <img src="img/2.jpg" alt="Natura morta con conchiglia" />
  <img src="img/3.jpg" alt="Natura morta con conchiglia 2" />
  <img src="img/4.jpg" alt="Battigia e conchiglie" />
 </div>
 <div id="slideshow-cursor"></div>
</div>

slideshow-cursor is our bar. We'll use CSS contextual positioning to prepare our layout:

#slideshow {
 width: 600px;
 height: 400px;
 position: relative;
 overflow: hidden;
 border: 5px solid #222;
 border-radius: 5px;
 margin: 2em auto;
}

#slideshow-wrapper {
 width: 600px;
 height: 400px;
 position: relative;
 overflow: hidden;
 background: #bbb;
}

#slideshow-wrapper img {
 height: 400px;
 width: 0px;
 display: none;
}

#slideshow-cursor {
 position: absolute;
 top: 0;
 width: 30px;
 height: 400px;
 left: 0;
 z-index: 1;
 background: #333;
 display: none;
}

Notice how all the images have also a zeroed width. This will allow us to create an expanding effect from left to right. Now jQuery:

var Slider = new function() {


 var slideshow = document.getElementById('slideshow'),
     wrapper = $('#slideshow-wrapper', slideshow),
     images = $('img', wrapper),
     cursor = $('#slideshow-cursor', slideshow),
     timer = null,
     index = -1;
     
 var prepare = function() {
 
  cursor.css('opacity', 0.5);
 
 };
 
 var autoSlide = function() {
 
  timer = setInterval(function() {
  
   index++;
   
   if(index == (images.length -1)) {
   
    index = -1;
   
   }
   
   var img = images.eq(index);
   
   
   img.show()
   .animate({
    width: 600
   }, 1500, function() {
   
    cursor.show().
   animate({
    left: 570
   }, 1500, 
      function() {
      
        $(this).hide().
        css('left', 0);
        
        img.hide().
     css('width', '0px');
      
   });
   
     
   
   
   });
   
   
   
  
  
  }, 3000);
 
 };
 
 this.init = function() {
 
  prepare();
  autoSlide();
 
 };

}();

$(function() {

 Slider.init();

});

The scanner bar and the current image are first revealed: the image will expand in width, while the scanner bar will change its position moving towards right. Once both animations are complete, we reset all the CSS properties involved in the animations and we hide again the elements.

You can see the demo below.

Demo

Live demo

Download

ZIP file

Pure CSS3 content slider

noreply@blogger.com (Gabriele Romanato) — Fri, 25 Nov 2011 16:53:00 +0000

My friend Francesca has recently started her web site which features a nice content slider on the home page. I decided to create a similar slider using jQuery, but I soon realized that the main effect could be actually achieved using only CSS3 transitions. Let's see how.

First, our markup:

<div id="slideshow">
 <div class="slide s1">
  <img src="img/1.jpg" alt="" />
  <div class="caption">1. Lorem ipsum dolor sit amet</div>
 </div>
 <div class="slide s2">
  <img src="img/2.jpg" alt="" />
  <div class="caption">2. Lorem ipsum dolor sit amet</div>
 </div>
 <div class="slide s3">
  <img src="img/3.jpg" alt="" />
  <div class="caption">3. Lorem ipsum dolor sit amet</div>
 </div>
 <div class="slide s4">
  <img src="img/4.jpg" alt="" />
  <div class="caption">4. Lorem ipsum dolor sit amet</div>
 </div>
</div>

Each slide has a different left offset within the main container, so we'll use contextual positioning. We also need to register our transition on each slide:

#slideshow {
 width: 500px;
 height: 330px;
 margin: 2em auto;
 overflow: hidden;
 position: relative;
 background: #ccc;
 border: 1px solid #000;
}

#slideshow div.slide {
 width: 500px;
 height: 330px;
 position: absolute;
 top: 0;
 cursor: pointer;
 z-index: 1;
 -moz-transition: all 1s ease-out;
 -webkit-transition: all 1s ease-out;
 -o-transition: all 1s ease-out;
 -ms-transition: all 1s ease-out;
 transition: all 1s ease-out;
}

#slideshow div.slide img {
 position: absolute;
 top: 0;
 left: 0;
 width: 500px;
 height: 330px;
}

#slideshow div.slide div.caption {
 height: 2em;
 width: 100%;
 position: absolute;
 bottom: 0;
 left: 0;
 background: rgba(0, 0, 0, 0.5);
 color: #fff;
 line-height: 2;
 text-indent: 0.5em;
}

#slideshow div.s1 {
 left: 100px;
}
#slideshow div.s2 {
 left: 200px;
}
#slideshow div.s3 {
 left: 300px;
}
#slideshow div.s4 {
 left: 400px;
}

On :hover, we only have to change the left and z-index property on each slide. Here is where the magic of CSS3 transitions takes place:

#slideshow div.slide:hover {
 left: 0;
 z-index: 2;
}

You can see the demo below.

Demo

Live demo

Download

ZIP file

jQuery: a slideshow with a side navigation menu

noreply@blogger.com (Gabriele Romanato) — Fri, 25 Nov 2011 09:41:00 +0000

I always take inspiration from desktop applications to create new jQuery demos. In this post I'd like to show you how to create an image slideshow which features a vertical thumbnail-based menu on its left side. This menu is initially hidden and it will be shown by clicking on a tab. Let's see the details.

The markup

The underlying HTML structure is as follows:

<div id="slideshow">
 <div id="slideshow-wrapper">
  <img src="img/1.jpg" alt="" id="s1" />
  <img src="img/2.jpg" alt="" id="s2" />
  <img src="img/3.jpg" alt="" id="s3" />
  <img src="img/4.jpg" alt="" id="s4" />
 </div>
 <ul id="slideshow-nav">
  <li>
   <a href="#s1"><img src="img/1-thumb.jpg" alt="" /></a>
  </li>
  <li>
   <a href="#s2"><img src="img/2-thumb.jpg" alt="" /></a>
  </li>
  <li>
   <a href="#s3"><img src="img/3-thumb.jpg" alt="" /></a>
  </li>
  <li>
   <a href="#s4"><img src="img/4-thumb.jpg" alt="" /></a>
  </li>
 </ul>
 <a href="#" id="open">Apri</a>
</div>

We have three main elements:

slideshow-wrapper: the full-width image container
slideshow-nav: the thumbnail-based vertical menu
open: the tab for showing/hiding the menu

The CSS

Our CSS design is all based on contextual positioning:

#slideshow {
 width: 700px;
 height: 400px;
 position: relative;
 margin: 0 auto;
 overflow: hidden;
}

#slideshow-wrapper {
 width: 2400px;
 height: 400px;
 position: absolute;
 left: 100px;
 z-index: 3;
}

#slideshow-wrapper img {
 float: left;
 width: 600px;
 height: 400px;
 position: relative;
}

#slideshow-nav {
 width: 100px;
 height: 276px;
 margin: 0;
 padding: 0;
 list-style: none;
 position: absolute;
 top: 50%;
 margin-top: -138px;
 left: 100px;
 z-index: 2;
}

#slideshow-nav li,
#slideshow-nav li a,
#slideshow-nav li a img {
 display: block;
 width: 100%;
}

#open {
 display: block;
 width: 18px;
 height: 150px;
 background: url(img/open-off.png) no-repeat;
 text-indent: -1000em;
 position: absolute;
 top: 50%;
 left: 82px;
 margin-top: -75px;
 z-index: 2;
}

#open:hover {
 background: url(img/open-on.png) no-repeat;
}

We've used z-index to initially hide the vertical menu just behind the main image wrapper. Bear in mind that an element with a greater z-index value will be always displayed on the top of another element with a lower z-index value.

The jQuery code

We have to associate a sliding action to each thumbnail link and a show/hide effect to the tab control:

var Slider = {

 slide: function() {
 
  $('a', '#slideshow-nav').each(function() {
  
   var $a = $(this);
   var href = $a.attr('href');
   var $img = $(href);
   var left = $img.position().left;
   
   $a.click(function(event) {
   
       $('img', '#slideshow-wrapper').not($img).css('left', 0);
   
    $img.animate({
     left: - left
    }, 1000);
    
    event.preventDefault();
   
   });
  
  
  });
 
 
 },
 
 control: function() {
 
  var $control = $('#open', '#slideshow');
  var $nav = $('#slideshow-nav', '#slideshow');
  
  $control.click(function(event) {
  
   if(parseInt($nav.css('left')) == 100) {
   
    $nav.animate({
     left: 0
    }, 1000); 
   
   } else {
   
    $nav.animate({
     left: 100
    }, 1000);
   
   }
  
  
   event.preventDefault();
  
  });
 
 
 },
 
 init: function() {
 
  this.slide();
  this.control();
 
 
 }

};

$(function() {

 Slider.init();

});

Each link has an anchor which is equal to the corresponding ID of the current image, so we'll use this anchor to select the images. The action on the tab control is different: here we have to check whether the vertical menu is actually positioned behind the main image wrapper by testing its left property to see if its current value is 100 or not. After testing this value, we can finally show or hide the menu.

You can see the demo below.

Demo

Live demo

Download

ZIP file

CSS: fluid grid systems

noreply@blogger.com (Gabriele Romanato) — Fri, 25 Nov 2011 08:49:00 +0000

I'm currently testing some of the recent and new possibilities offered by CSS grids and I have to say that I still haven't found what I'm looking for. Most of these grids are based on fixed sizes, meaning that the current base grid is made up of lengths measured in pixels. Pixels are a bad approach to CSS design because this approach actually doesn't take into account the problem of screen resolution. In fact, a 960 pixels grid system fails spectacularly on the most recent versions of PC and Mac monitors: simply put, it doesn't fill well the screen. A better approach is to use percentages. Let's see how.

How percentages work

Percentages in CSS are calculated by taking the width and height of the parent element as a reference. The base value is always 100%. For example, if you want to have five boxes on the same line, you could write something like this:

#container {
 width: 100%; 
}

div.box {
 display: inline-block;
 width: 20%;
}

20 multiplied by 5 gives 100, so you have five boxes that fill completely the width of their parent element. On the other hand, heights work better when they're previously defined on the parent element:

#container {
 width: 100%;
 height: 200px; 
}

div.box {
 display: inline-block;
 width: 20%;
 height: 90%;
}

In this case, 90% must be calculated by taking 200 pixels as its reference.

Using minimum and maximum lengths

CSS provides four powerful properties that can be combined with percentages, namely:

min-width
max-width
min-height
max-height

You can use these properties to keep your layout proportions when the screen resolution is too high or too low. Example:

#site {
 width: 90%;
 margin: 0 auto;
 max-width: 1000px;
 min-width: 700px;
}

This technique is widely used by some of the newest WordPress themes, including TwentyEleven. It simply tells browsers that the overall width of the main container should not exceed 1000 pixels and should not be less than 700 pixels. Try to resize the browser's window to see the effect.

Rounding problems

Suppose that you have a container with three floated boxes inside. You want to equally redistribute the horizontal space so that all the boxes fit their container's width:

#container {
 width: 100%;
 overflow: hidden;
}

div.box {
 float: left;
 width: 33.3%;
}

33.3 multiplied by 3 gives 99.9, but you can use more decimal points if you want. The problem with all this rounding is that some versions of Internet Explorer (namely 6 and 7) tend to round up your values. The final result in these browsers is rather ugly: floated boxes are pushed on the next line. To fix this, always remember to round down your values for IE 6 and 7.

jQuery: expanding tabs content slider

noreply@blogger.com (Gabriele Romanato) — Thu, 24 Nov 2011 09:43:00 +0000

I recently had to modify the Ventura WordPress theme which features an interesting content slider based on expanding tabs. I decided to recreate the basic expanding effect of the tabs with a simple combination of jQuery and CSS. Let's see the results.

We start with the following markup:

<div id="slideshow">
 <div id="slideshow-wrapper">
  <img src="img/1.jpg" alt="" id="s1" />
  <img src="img/2.jpg" alt="" id="s2" />
  <img src="img/3.jpg" alt="" id="s3" />
 </div>
 <div id="slides">
  <div class="slide">
   <h3>Titolo 1</h3>
   <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="slide">
   <h3>Titolo 2</h3>
   <p>Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="slide">
   <h3>Titolo 3</h3>
   <p>Lorem ipsum dolor sit amet.</p>
  </div>
 </div>
</div>

Each tab should be initially visible only in its top section (the heading). Then, when a user clicks on the heading's icon, the tab expands vertically and shows the corresponding image. Here's the CSS:

#slideshow {
 margin: 2em auto;
 width: 980px;
 height: 740px;
 position: relative;
 overflow: hidden;
}

#slideshow-wrapper {
 width: 2940px;
 height: 740px;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 1;
 background: #ddd;
}

#slideshow-wrapper img {
 float: left;
 width: 980px;
 height: 740px;
 display: none;
}

#slides {
 width: 980px;
 height: 740px;
 position: absolute;
 top: 0;
 left: 0;
 z-index: 2;
 overflow: hidden;
}

div.slide {
 width: 200px;
 float: left;
 font: 90% Arial, sans-serif;
 position: relative;
 top: 721px;
 margin-left: 100px;
}

div.slide h3 {
 margin: 0;
 font-size: 18px;
 background-color: #fff;
 background-image: url(img/arrows.png); 
 background-repeat: no-repeat; 
 background-position: 100% 0;
 color: #c30;
 height: 18px;
 cursor: pointer;
 padding: 0 5px;
 border: 1px solid #999;
 border-radius: 5px 5px 0 0;
}

div.slide h3.active {
 background-position: 100% 100%;
}

div.slide p {
 margin: 0;
 padding: 1em;
 line-height: 1.3;
 background: #000;
 color: #fff;
}

Each slide element is pushed outside the content's area by adjusting its top property. Since the container has the declaration overflow: hidden, the exceeding content will be always kept hidden.

With jQuery we have only to associate an expanding/revealing action to each tab's heading. At the same time, we have also to prevent the other slides from overlapping the current one:

var Slider = new function() {

 var wrapper = $('#slideshow-wrapper', '#slideshow');
 var images = $('img', wrapper);
 var slides = $('#slides', '#slideshow');
 
 var prepare = function() {
 
  $('h3', slides).each(function(i) {
  
   $(this).attr('rel', '#s' + (i+1));
  
  });
 
 };
 
 var reset = function() {
 
  images.hide();
  wrapper.css('left', 0);
 
 };
 
 var slideAndShow = function(slide) {
 
  wrapper.animate({
   left: - slide.position.left
  }, 100, function() {
  
   slide.fadeIn(1000);
  
  });
 
 
 };
 
 var showHideSlides = function() {
 
  $('h3', slides).each(function() {
  
   var $h3 = $(this);
   var slide = $($h3.attr('rel'));
   
   $h3.click(function() {
   
    reset();
   
    if(!$h3.hasClass('active')) {
    
     $h3.parent().animate({
      top: 660
     }, 500);
     
     slideAndShow(slide);
     
     $h3.addClass('active');
    
    } else {
    
     $h3.parent().animate({
      top: 721
     }, 500);
     
     $h3.removeClass('active');
    
    }
   
   });
   
  
  });
 
 
 };
 
 this.init = function() {
 
  prepare();
 
  showHideSlides();
 
 };


}();

$(function() {

 Slider.init();

});

We've set a rel attribute on each tab's heading so that the current heading is actually linked to the corresponding image through the ID previously defined on the image itself.

Also, we're using a dynamic CSS class on headings just to make sure that the current element is active. The effect on the tabs is simple: we only adjust their top property and then we reset it to its default value.

You can see the demo below.

Demo

Live demo

Download

ZIP file

jQuery: deferred objects and animated slideshows

noreply@blogger.com (Gabriele Romanato) — Tue, 15 Nov 2011 17:38:00 +0000

Today I had to write my weekly post on the Html.it blog and I suddenly start mumbling on the recent possibilities offered by jQuery's deferred objects. When we deal with content sliders we usually have to perform two main tasks: sliding and animating. If you take a look at one of my past works, namely BTMagazine, you'll surely notice that each slide has a lot of effects and animations. You'd probably be worried by knowing that each animation set has been created by using a long chain of nested callback functions that span on several lines. In short, the code works but it's a mess. Deferred objects, instead, allow us to create all the effects we need without having to use callback functions. Let's see how.

In the traditional, chained model, you use callbacks like this:

$('#slideshow-wrapper').animate({
 left: - $('div.slide').eq(index).position().left
}, 1000, function() {

 $('div.slide').eq(index).
 find('div.desc').fadeIn(1000);

});

If you're lucky, two or three additional animations is enough, but sometimes (just like in my case) you have to deal with dozens nested effects. Here's when deferred objects come into play.

Deferred objects allow us to concatenate actions, but in a radically different way: each code section has its own life which is contained within the Deferred wrapper.

For example:

var Slider = new function() {
    
    var timer = null,
        index = 0,
        wrapper = $('#slideshow-wrapper'),
        slides = $('div.slide', wrapper);
    
    var slide = function() {
        
        timer = setInterval(function() {
            
            index++;
            
            if(index == slides.length) {
             
                index = 0;
               
                $('div.desc', wrapper).hide(); 
                
            }
            
            $.Deferred(function(def) {
                
                def.pipe(function() {
                  
                    return wrapper.animate({
                        left: - slides.eq(index).position().left
                       
                    }, 1000); 
                    
                }).pipe(function() {
                   
                   return slides.eq(index).
                      find('div.desc').fadeIn(1000); 
                    
                });
                
            }).resolve();
            
        }, 2000);
        
    };
    
    this.init = function() {
        
      slide();  
        
    };
        
    
    
}();
  
  
$(function() {
   
  Slider.init();
   
});

There are two separate actions in the following code, not a chain:

$.Deferred(function(def) {
                
                def.pipe(function() {
                  
                    return wrapper.animate({
                        left: - slides.eq(index).position().left
                       
                    }, 1000); 
                    
                }).pipe(function() {
                   
                   return slides.eq(index).
                      find('div.desc').fadeIn(1000); 
                    
                });
                
}).resolve();

You can also write two separate functions or methods to be executed within each call to the pipe() method. This practice allows us to write clear, concise, organized and compact code.

You can see the live example on JSFiddle.

jQuery: creating a slideshow from scratch

noreply@blogger.com (Gabriele Romanato) — Fri, 11 Nov 2011 18:41:00 +0000

The theory behind a jQuery slideshow is one of the most neglected topics in a million. Many web sites provide excellent tutorials on how to create specific slideshows for specific scenarios, but there are no tutorials covering the theory and the basics of a jQuery slideshow. In short, you're a developer who wants to create a slideshow for his/her client. You've tried to use an existing plugin but the client's needs are very specific and the chosen plugin doesn't fit the bill. So you need to understand how a jQuery slideshow works in order to create a custom one. Let's get to work.

Choosing the right markup

A slideshow is made up of solid and robust HTML markup. It doesn't matter if you choose to use HTML5, XHTML or HTML 4: it's the structure that makes the difference, not the preferred DTD.

There are several parts that make up a slideshow, which include:

Outer container: this is the general wrapper of your slideshow that you can stylize with CSS to exactly position the whole slideshow on a specific section of a page.
Inner container: this is the wrapper of your slide elements, which can either be images or other elements.
Slides: slides can be either img or div elements, depending on the slideshow type.
Controls: controls are the canonical "Next" and "Previous" buttons or a series of links containing thumbnails used for navigating the slides.

Here's the structure of a recent demo of mine:

<div id="slideshow-container">
<div id="slideshow">
 <div id="slideshow-wrapper">
  <img src="1.jpg" alt="" id="s1" />
  <img src="2.jpg" alt="" id="s2" />
  <img src="3.jpg" alt="" id="s3" />
  <img src="4.jpg" alt="" id="s4" />
  <img src="5.jpg" alt="" id="s5" />
  <img src="6.jpg" alt="" id="s6" />
  <img src="7.jpg" alt="" id="s7" />
  <img src="8.jpg" alt="" id="s8" />
  <img src="9.jpg" alt="" id="s9" />
  <img src="10.jpg" alt="" id="s10" />
  <img src="11.jpg" alt="" id="s11" />
  <img src="12.jpg" alt="" id="s12" />
  
  
 </div>
</div>
<div id="slideshow-thumbs">
 <a href="#" rel="s1"><img src="1.jpg" alt="" /></a>
 <a href="#" rel="s2"><img src="2.jpg" alt="" /></a>
 <a href="#" rel="s3"><img src="3.jpg" alt="" /></a>
 <a href="#" rel="s4"><img src="4.jpg" alt="" /></a>
 <a href="#" rel="s5"><img src="5.jpg" alt="" /></a>
 <a href="#" rel="s6"><img src="6.jpg" alt="" /></a>
 <a href="#" rel="s7"><img src="7.jpg" alt="" /></a>
 <a href="#" rel="s8"><img src="8.jpg" alt="" /></a>
 <a href="#" rel="s9"><img src="9.jpg" alt="" /></a>
 <a href="#" rel="s10"><img src="10.jpg" alt="" /></a>
 <a href="#" rel="s11"><img src="11.jpg" alt="" /></a>
 <a href="#" rel="s12"><img src="12.jpg" alt="" /></a>
</div>
<div id="controls">
   <a href="#" id="previous">Previous</a>
   <a href="#" id="next">Next</a>
  </div>
</div>

Let's make this code a little bit clearer. This is an image slideshow and is made up of the following parts:

slideshow-container is the outermost wrapper of the whole slideshow
slideshow is the outermost wrapper of the slides
slideshow-wrapper is the innermost wrapper of the slides
each slide has a progressive ID (s1, s2, etc.) which uniquely identifies each image
slideshow-thumbs contains a series of linked thumbnails of the images; each link has a rel attribute set on the same value of the corresponding ID of each image so that now thumbnails and images are linked together
controls contains the traditional "Previous" and "Next" buttons.

The above structure is surely one of the most widely used in the overwhelming majority of slideshows. In this case the controls and navigation sections come after the slide series, but you can revert this structure by inserting them just before the outermost slide wrapper.

Using CSS

CSS performs a preparatory task: it simply lays out the slideshow in the way you want it to appear. As you surely noticed from the code above, we have 12 images. Each image is approximately 650 pixels wide and 440 pixels tall. But we want to display only one large image at time, so how we can do?

We could use floating to align images on the same line, but our wrapper should be 7,800 pixels wide, so how this could be? It could be one way: we use the overflow property combined with floating so that only one image will be always visible:

#slideshow-container {
 width: 650px;
 margin: 2em auto;
 position: relative;
}

#slideshow {
 width: 100%;
 height: 440px;
 position: relative; 
 z-index: 1;
 overflow: hidden;
}

#slideshow-wrapper {
 width: 7800px;
 height: 440px;
 position: relative;
}

#slideshow-wrapper img {
 width: 650px;
 height: 440px;
 float: left;
}

Our innermost image wrapper is actually 7,800 pixels wide, but only a 650 x 440 box will be visible thanks to the hidden overflow. Now our images are all laid out on the same line, but we can see only one image at time when the slideshow slides (no pun intended).

Now you may ask: "Why position: relative?". This is due to two reasons: first, IE 6 and 7 have a problem with the overflowing content and this declaration fixes the bug; second, we need to create a contextual positioning for our next/previous buttons:

#controls a {
 display: block;
 width: 29px;
 height: 78px;
 text-indent: -1000em;
 background-repeat: no-repeat;
}

#controls #previous {
 background-image: url(arrow-left.png);
 float: left;
 position: relative;
 left: -29px;
}

#controls #previous:hover {
 background-position: 0 -78px;
}

#controls #next {
 background-image: url(arrow-right.png);
 float: right;
 position: relative;
 right: 0;
}

#controls #next:hover {
 background-position: 0 -78px;
}

We've simply vertically centered our controls and put them on the opposite edges of the main content area so that they will be shown each one on a different image side ("Previous" on the left, "Next" on the right).

Finally, our thumbnail navigation:

#slideshow-thumbs {
 margin-top: 1em;
 width: 100%;
 height: 50px;
}

#slideshow-thumbs a {
 float: left;
 width: 54px;
 height: 100%;
}

#slideshow-thumbs a img {
 display: block;
 width: 100%;
 height: 100%;
 border: none;
}

Adding jQuery

We have to implement three actions with jQuery:

An automatic sliding
Next/Previous navigation
Thumbnail navigation

Let's focus on the sliding first. As you remember, we've a series of floated images. Each image is 650 x 440 pixels wide and its wrapper is globally 7,800 pixels wide. Since the wrapper is relatively positioned, each image has its own left offset calculated from the left edge of the container. So the first images has an offset of 0, the second has 650, the third 1300 and so on. So far so good. Each image has an offset, but what's the point with knowing this?

Here's the point: we want to make the slide wrapper move from right to left and from left to right by adjusting its left property. By doing so, we'll use the left offset of each image to make the current image appear. Very simple.

But first things first: let's wrap our code with an object:

var Slideshow = new function() {

 // code here

}();

Now we need to define some initial variables for later use:

a reference to a JavaScript timer defined later and used for the automatic sliding
a global index initially set to 0 to get the current image
a reference to the image wrapper
a reference to the images themselves
a reference to the thumbnail links
a reference to the previous/next buttons

var timer = null,
     index = 0,
     wrapper = $('#slideshow-wrapper', '#slideshow'),
     slides = $('img', wrapper),
     thumbs = $('a', '#slideshow-thumbs'),
     previous = $('#previous', '#controls'),
     next = $('#next', '#controls');

Next step is to store all the image offsets in an array that can be accessed through our global index:

var getSlidePositions = function() {
 
  var positions = [];
  slides.each(function(i) {
  
   var left = $(this).position().left;
   
   positions[i] = left;
  
  });
  
  return positions;
 
};

Thumbnail links are associated with the large images through the rel attribute but they're not aware of the offset of each image, so we need now to associate each image with its left offset through the jQuery's attr() method:

var addOffsetsToImages = function() {
 
  slides.each(function() {
  
   $(this).attr('position', $(this).position().left);
  
  });
 
};

The preparatory work is done. Now we can create our automatic sliding by incrementing and decrementing our global index to access the offsets array in a JavaScript timer:

var autoSlide = function() {
 
  var offsets = getSlidePositions();
  timer = setInterval(function() {
  
      index++;
      
      if(index == offsets.length) {
      
       index = 0;
      
      }
  
   wrapper.animate({
    left: - offsets[index]
   }, 1000, function() {
   
    thumbs.eq(index).animate({
     opacity: 0.5
    }, 500, function() {
    
     $(this).animate({
      opacity: 1
     }, 500);
    
    }); 
   
   });
  
  
  
  }, 2000);
  
 
 
};

Together with making the image wrapper slide, this timer also animates the current image thumbnail by adjusting its opacity. Thumbnails are our next step. We need to associate an action that makes the current image slide into view. In this case, our timer needs to be stopped when we click on a thumbnail and restarted when the sliding movement ends:

var handleThumbLinks = function() {
 
  thumbs.each(function() {
  
   var $a = $(this);
   var imgId = $('#' + $a.attr('rel'));
   var $offset = imgId.attr('position');
   
   $a.click(function(event) {
   
    clearInterval(timer);
    
    wrapper.animate({
     left: - $offset
    }, 1000, function() {
    
     autoSlide();
    
    });
   
    event.preventDefault();
   
   });
  
  });
 
};

The triggered action uses as left offset the current's image position attribute previously set. It also uses the link's rel attribute to target the current ID of the image.

The last action we need to implement is the handling of next/previous buttons:

var handlePrevNextButtons = function() {
 
     var offsets = getSlidePositions();
 
  previous.click(function(event) {
      
      clearInterval(timer);
  
      index--;
  
   if(index == 0) {
   
    index = 0;
   
   }
   
   wrapper.animate({
    left: - offsets[index]
   }, 1000, function() {
   
    autoSlide();
   
   });
   
  
   event.preventDefault();
  
  });
  
  next.click(function(event) {
      
      clearInterval(timer);
  
      index++;
  
   if(index == offsets.length) {
   
    index = 0;
   
   }
   
   wrapper.animate({
    left: - offsets[index]
   }, 1000, function() {
   
    autoSlide();
   
   });
   
  
   event.preventDefault();
  
  });

 
 
};

In this case we also need to check whether our global index is within the range given by the number of images and act accordingly. Finally, we have to define a public function to kicks things off:

this.init = function() {
 
  addOffsetsToImages();
 
  autoSlide();
  
  handleThumbLinks();
  
  handlePrevNextButtons();
 
};

Usage:

$(function() {

 Slideshow.init();

});

You can see the demo below.

Demo

Live demo

WordPress: creating a custom CSS

noreply@blogger.com (Gabriele Romanato) — Thu, 03 Nov 2011 11:08:00 +0000

The recommended way of customizing your default WordPress theme is to create a child theme. However, sometimes we only need to add just a few style rules to override some default styles of our theme, so what we really need is to create a custom style sheet for our theme. Let's see how.

You shouldn't add your custom CSS to the theme directory, because you'll probably end up with having files which don't belong to the theme. A good solution is to put your CSS file just under your /uploads directory.

Add the following code to the functions.php file of your theme (create one if it doesn't exist):

add_action('wp_print_styles', 'add_custom_css');

function add_custom_css() {

    $uploads = wp_upload_dir();

 $url = $uploads['baseurl'] . '/custom.css';
    wp_register_style('custom', $url);
    wp_enqueue_style('custom');

}

If you open your home page now and take a look at the source code inside the head tag, you'll see the new CSS file properly linked. The new CSS file comes just after the main style sheet of your theme. This is a must: in order to make your new style rules to override the preceding ones, a custom style sheet must come after the main style sheet. This is due to the CSS cascade: a CSS file that comes later in the source has an higher precedence over all the preceding ones.

For example, if you have the following rule in your main style.css file:

#header {
 height: 150px;
 background: #000;
}

you can override it in your custom CSS as follows:

#header {
 height: 100px;
 background: #c30;
}

The quickest way to achieve this is to copy the original style rules you want to change into your custom CSS file and modify them there. By doing so, you make sure that cascading and specificity will work as intended.

jQuery: emulating the placeholder attribute

noreply@blogger.com (Gabriele Romanato) — Tue, 01 Nov 2011 18:55:00 +0000

Internet Explorer 8 doesn't support the HTML5 placeholder attribute that we can use to label our text fields. Fortunately, we can emulate this attribute with jQuery. Let's see how.

We have to create a plugin to exactly position an element with its text label just over a text field:

(function($) {

 $.fn.placeholder = function(options) {
 
  var that = this;
  
  if(!that.is('input[type=text]')) {
  
   return;
  
  }
  
  var defaults = {
  
   text: 'Placeholder'
  
  };
  
  options = $.extend(defaults, options);
  
  var top = that.offset().top;
  var left = that.offset().left;
  
  return that.each(function() {
  
   $('<span class="placeholder"/>').text(options.text).
   css({
    position: 'absolute',
    top: top,
    left: left
   }).insertAfter(that);
   
   that.focus(function() {
   
   
    that.next('span.placeholder').hide();
   
   });
   
   that.blur(function() {
   
    if(that.val() == '') {
    
     that.next('span.placeholder').show();
    
    }
   
   }); 
  
  });
 
 };

})(jQuery);

We use the top and left offsets of the text field to position our element. We use then focus and blur to hide the placeholder while a user is typing and to show it again if the field's value is empty, respectively.

An example:

$(function() {

 $('#text', '#form').placeholder({text: 'Lorem'});
 $('#text2', '#form').placeholder({text: 'Lorem ipsum'});

});

You can see the demo below.

Demo

Live demo

WordPress: adding social buttons with iframes

noreply@blogger.com (Gabriele Romanato) — Tue, 01 Nov 2011 17:19:00 +0000

JavaScript social buttons are evil. They may cause major hiccups in the overall performance of your sites, not to mention that they may actually block the rendering of your pages. Iframes are better, because they load simple HTML snippets. In this post I'll show you how to add the Twitter, Facebook and Google Plus buttons to your WordPress theme.

Add the following code to the functions.php file of your theme (create one if it doesn't exist):

function tweet_button() {

 $title = get_the_title();
 $link = get_permalink();
 
 $html = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.html?';
 $html .= 'url=' . $link . '&text=' . $title . '&count=vertical&via=username"></iframe>';
 
 return $html;

}

function facebook_button() {

 $title = get_the_title();
 $link = get_permalink();
 
 $html = '<iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://www.facebook.com/plugins/like.php?';
 $html .= 'href=' . $link . '&title=' . $title . '&layout=box_count"></iframe>';
 
 return $html;

}


function google_plus_button() {

 $link = get_permalink();
 
 $html = '<iframe src="https://plusone.google.com/u/0/_/+1/fastbutton?url=';
 $html .= $link . '&size=tall&count=true&annotation=bubble&lang=it" scrolling="no" frameborder="0"></iframe>';
 
 return $html;

}

Then you can use such functions directly in your theme files, as follows:

<div id="social">
 <span class="twitter"><?php echo tweet_button();?></span>
 <span class="facebook"><?php echo facebook_button();?></span>
 <span class="google-plus"><?php echo google_plus_button();?></span>
</div>

Bear in mind that the above functions must be called in The Loop.

jQuery: notification message system

noreply@blogger.com (Gabriele Romanato) — Tue, 01 Nov 2011 16:14:00 +0000

The most stimulating part of my job with jQuery is to turn ideas into code. Today I needed to create a notification system for a web site. A user can fill out a form by specifying if he's writing a project or a task. jQuery collects all the data and populate the corresponding item on a top menu. The most important part is that you can further extend the basic code to work with AJAX. Let's see now our implementation.

First, the markup:

<ul id="notifications">
 <li><a href="#" id="projects">Progetti <span>0</span></a></li>
 <li><a href="#" id="tasks">Compiti <span>0</span></a></li>
</ul>

<form action="#" method="post" id="message">
 <div>
  <label for="category">Categoria</label>
  <select name="category" id="category">
   <option>Seleziona:</option>
   <option value="progetti">Progetti</option>
   <option value="compiti">Compiti</option>
  </select>
 </div>
 <div>
  <label for="title">Titolo</label>
  <input type="text" name="title" id="title" />
 </div>
 <div>
  <label for="description">Descrizione</label>
  <textarea name="description" id="description" rows="15" cols="15"></textarea>
 </div>
 <p><input type="submit" name="send" id="send" value="Invia" /></p>
</form>

Then a couple of CSS rules to display our main elements:

body {
 margin: 0;
 padding: 0;
 font: 95% Arial, sans-serif;
}

#notifications {
 height: 2em;
 margin: 0;
 padding: 0 0.5em;
 list-style: none;
 background: #222;
}

#notifications > li {
 float: left;
 height: 100%;
 margin-right: 0.5em;
 position: relative;
}

#notifications > li > a {
 float: left;
 height: 100%;
 line-height: 2;
 padding: 0 1em;
 font-weight: bold;
 text-decoration: none;
 color: #fff;
}

#notifications #projects {
 background: #c30;
}

#notifications #tasks {
 background: #282;
}

#message {
 width: 35em;
 margin: 1em auto;
 padding: 0;
}

#message input,
#message select,
#message textarea {
 font: 1em Arial, sans-serif;
 display: block;
}

#message label {
 display: block;
 font-weight: bold;
 padding-bottom: 4px;
}

#message div input {
 width: 150px;
 border: 1px solid #bbb;
 margin-bottom: 0.5em;
}

#message div select {
 width: 150px;
 margin-bottom: 0.5em;
}

#message div textarea {
 width: 380px;
 height: 280px;
 border: 1px solid #bbb;
}

#message p input {
 width: 100px;
 background: #ddd;
 border: 1px solid #aaa;
 font-weight: bold;
 padding: 5px;
 border-radius: 5px;
}

ul.messages {
 width: 15em;
 padding: 0.8em;
 margin: 0;
 list-style: none;
 background: #222;
 color: #fff;
 position: absolute;
 top: 2em;
 left: 0;
 display: none;
}

ul.messages li {
 margin-bottom: 0.4em;
 padding-bottom: 4px;
 border-bottom: 1px dotted #ccc;
 text-align: right;
}

ul.messages li a {
 color: #f90;
 font-size: 1.2em;
 font-weight: bold;
 text-decoration: none;
}

ul.messages li div.message {
 text-align: left;
}

ul.messages li div.message h4 {
 font: normal 1.2em Arial, sans-serif;
 margin: 0;
}

ul.messages li div.message p {
 margin: 0.3em 0;
 line-height: 1.4;
}

With jQuery, we first need to attach an hidden list to all our items in the notification menu. Then we need to populate the corresponding list based on the user's choice. In fact, users can either select tasks or projects:

$(function() {

 $('li', '#notifications').each(function() {
 
  var $ul = $('<ul class="messages"/>');
  
  $ul.appendTo($(this));
 
 });
  
    
  $('a.delete').live('click', function(event) {
  
      var $a = $(this);
   var $ul = $a.parents('ul.messages');
   var $message = $a.parent();
   var $li = $ul.parent();
   var $span = $('a span', $li);
   var no = new Number($span.text());

  
   $ul.slideUp(500);
   $message.remove();
   
   $span.text(no - 1);
 
  
   event.preventDefault();
  
  });
 

 
 $('#message').submit(function(event) {
 
     var $form = $(this);
     var category = $('#category', $form).val();
     var title = $('#title', $form).val();
     var description = $('#description', $form).val();
     
     var projects = $('#projects', '#notifications');
     var projectsNo = $('span', projects);
     var tasks = $('#tasks', '#notifications');
     var tasksNo = $('span', tasks);
     
     var projectsNumber = new Number(projectsNo.text());
     var tasksNumber = new Number(tasksNo.text());
     
     var projectMessages = projects.parent().find('ul.messages');
     var taskMessages = tasks.parent().find('ul.messages');
     
     var html = '<li><a href="#" class="delete">X</a><div class="message">';
     
     switch(category) {
     
      case 'progetti':
      
         html += '<h4>' + title + '</h4><p>' + description + '</p></div></li>';
         
         $(html).appendTo(projectMessages);
         
         projectsNo.text(projectsNumber + 1);
      
         break;
         
      case 'compiti':
      
       html += '<h4>' + title + '</h4><p>' + description + '</p></div></li>';
         
         $(html).appendTo(taskMessages);
         
         tasksNo.text(tasksNumber + 1);
      
         break;
         
      default:
      
         break;
     
     
     }
  
 
  event.preventDefault();
 });
 
 $('#projects').click(function(event) {
 
     var $a = $(this);
     
     var $ul = $a.parent().find('ul.messages');
     
     if($ul.is(':hidden')) {
     
      $ul.slideDown(500);
     
     } else {
     
      $ul.slideUp(500);
     
     }
  
 
  event.preventDefault();
 
 });
 
 $('#tasks').click(function(event) {
 
     var $a = $(this);
     
     var $ul = $a.parent().find('ul.messages');
     
     if($ul.is(':hidden')) {
     
      $ul.slideDown(500);
     
     } else {
     
      $ul.slideUp(500);
     
     }
  
 
  event.preventDefault();
 
 });
 
 
 


});

You can see the demo below.

Demo

Live demo

onwebdev

jQuery: AJAX contact form for WordPress

CSS: create layouts with table values

The navigation menu

The sub-header

The post title

Download

WordPress: publish a tweet as a post

CSS: how to style form elements

The markup

General styles

Adding some padding to the form

Fieldset and legend

Creating centered rows

Input and label

Select

Textarea and submit button

Final result

Download examples

JavaScript syntax highlighting is bad for performance

Too many GET requests

Poor string manipulation

DOM loading delays

jQuery: Mati, professional image gallery

Demo

Download

jQuery: the moreLink plugin for WordPress

Base usage

Options

Demo

Download

Blogger: inserting social media buttons selectively

The Book of CSS3

jQuery: how to split images on slideshows

The markup

The CSS styles

The jQuery code

Demo

Download

jQuery: closing gate effect on a slideshow

Demo

Download

jQuery: a usability lesson

Usability and productivity

Hiding the DOM

Extensibility

Conclusions

jQuery: using timers with animations

Delays: setTimeout()

Intervals: setInterval()

Clearing timers and animations

jQuery slideLeft plugin

Demo

Download

jQuery: scanner effect on a slideshow

Demo

Download

Pure CSS3 content slider

Demo

Download

jQuery: a slideshow with a side navigation menu

The markup

The CSS

The jQuery code

Demo

Download

CSS: fluid grid systems

How percentages work

Using minimum and maximum lengths

Rounding problems

jQuery: expanding tabs content slider

Demo

Download

jQuery: deferred objects and animated slideshows

jQuery: creating a slideshow from scratch

Choosing the right markup

Using CSS

Adding jQuery

Demo

WordPress: creating a custom CSS