jQuery prevent event propagation and stopEventPropagation explained

Yesterday I was implementing (AGAIN) a custom dialog-popup box for a wordpress theme so I choose to go for a javascript class to handle all the stuff, with the help of jQuery.

 While writing the close dialog code I fell in a black out moment and I wasn't able to remember what was the name of the jQuery function to prevent click propagation from childrem DOM elements to parent. Of course my (perfectly looking) dialog was firing the onClick event of the parent even when the dialog content was clicked.

While doing my usual jQuery website digging I found that a lot of people struggle with the problem of click propagation, even if the jQuery library has a stopPropagation function that SOUNDS perfect for that task....but...

Super simple horizontal gauge or progress bar in PHP + HTML

Yesterday I was coding a small piece of PHP code when suddenly I needed to display, in a fashionable way, an affinity value between two elements.

After digging a while for jQuery plugins or PHP code I decided to go for my own solution, cause the ready to use solutions where full of useless fancy fetures and animations.
Aas usual I prefer a simple solution, with a very few lines of code.

Here is the result :

Horizontal image scroller (that bounces!) with jQuery

Recently I needed a way to show a lot of thumbnails ina small space.

I decided it would be a nice solution to use a wide "ribbon" of images continuously bouncing left to right.

I came with this solution : http://www.liquidgate.it/tests/testscroll.html

Basically it is a single container div with the overflow-x property set to hidden.
Inside the container div there is another div with all the thumbnails in a row.

Fading pagination system in 4 lines of javascript.

A friend of mine was asking for a multipage javascript navigation sample for a website. He wanted a main content (subdivided in 3 squares) with two navigation arrows.
By clicking the arrows he wanted the main content squares to fade out and fade back in with a different content.

You can see a working demo (and source code) here :  http://www.liquidgate.it/tests/pagination.html

Ignoring the basic crappy CSS here is the sample I did for him.

A 4 lines of javascript pagination or contet swap system  :D

var _speed = 500; 
function mostra(_tohide, _toshow) 
{ 
 $('#'+_tohide).fadeOut(_speed, function() { 
     $('#'+_tohide).hide(); 
     $('#'+_toshow).fadeIn(_speed); 
   }); 
} 


$(document).ready(function() {

$('#pagina2').hide();
$('#pagina3').hide();

});

The script simply is a single function that accepts two parameters, the ID of the element to hide, and the ID of the element to show.

While the html looks like the following.
3 pages are created the same size, the page2 and page3 are hidden as soon as the document is loaded (see previous javascript on document.ready).


<div id="container">
<div id="pagina1" class="pagina">
<table>
<tr>
<td class="pagebutton">SIN</td>
<td><div class="squarecontent">
<!-- contenuto del primo quadrato -->
<div style="width:100%; height:10px; background-color:#ff0000;"></div><br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb blah blah blahb blah blah blahb blah blah blahb<br>
blah blah blahb <br>
</div></td>
<td><div class="squarecontent">
<!-- contenuto del secondo quadrato -->
<div style="width:100%; height:10px; background-color:#00ff00;"></div><br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb <br>
</div></td>
<td><div class="squarecontent">
<!-- contenuto del terzo quadrato -->
<div style="width:100%; height:10px; background-color:#0000ff;"></div><br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb <br>
blah blah blahb <br>
</div></td>
<td class="pagebutton"><a href="javascript:mostra('pagina1','pagina2');">DES</a></td>
</tr>
</table>
</div>

<div id="pagina2" class="pagina">
<table>
<tr>
<td class="pagebutton"><a href="javascript:mostra('pagina2','pagina1');">SIN</a></td>
<td><div class="squarecontent">
<!-- contenuto del primo quadrato -->
<div style="width:100%; height:10px; background-color:#ff0000;"></div><br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
</div></td>
<td><div class="squarecontent">
<!-- contenuto del secondo quadrato -->
<div style="width:100%; height:10px; background-color:#00ff00;"></div><br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
</div></td>
<td><div class="squarecontent">
<!-- contenuto del terzo quadrato -->
<div style="width:100%; height:10px; background-color:#0000ff;"></div><br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
bloh bloh bloh <br>
</div></td>
<td class="pagebutton"><a href="javascript:mostra('pagina2','pagina3');">DES</a></td>
</tr>
</table>
</div>

<div id="pagina3" class="pagina">
<table>
<tr>
<td class="pagebutton"><a href="javascript:mostra('pagina3','pagina2');">SIN</a></td>
<td><div class="squarecontent">
<!-- contenuto del primo quadrato -->
<div style="width:100%; height:10px; background-color:#ff0000;"></div><br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
</div></td>
<td><div class="squarecontent">
<!-- contenuto del secondo quadrato -->
<div style="width:100%; height:10px; background-color:#00ff00;"></div><br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
</div></td>
<td><div class="squarecontent">
<!-- contenuto del terzo quadrato -->
<div style="width:100%; height:10px; background-color:#0000ff;"></div><br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
bluh bluh bluh <br>
</div></td>
<td class="pagebutton">DES</td>
</tr>
</table>
</div>
</div>  <!-- container -->

And the style of the page looks like this :


#container { border: 1px solid #ff0000; width: 900px; } 

.pagina { width:900px; } 

.pagebutton { vertical-align:middle; text-align:center; } 

table { width: 900px; border:none; } 

table tr { vertical-align: top; } 

.squarecontent { width:250px; }

As you can see every "button", I've used some plain A links for simplicity, calls a function with two parameters that fades out the content using fadeOut jquery function and makes another page visible.

You can create a very simple pagination system, or content swapper very easily.
Try to cut & paste this code into a new HTML document, include the latest jQuery and happy experimenting !