cURL & SSL certificates error

This will be mainly a reminder, more than a real post.
Today I was writing a bunch of PHP bugs and suddenly a wordpress plugin of mine started to output this string :

SSL certificate problem: unable to get local issuer certificate

The plugin is quite simple itself. It just uses cURL to fetch some Facebook Pages data using the Graph urlon a Wordpress website I'm creating. The error log did not show anything about this error.

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 !

Getting the street address..and errors :-/

I was testing my app, it should update the latitude and longitude of the phone when it moves more than 10 meters or passes some time.
After updating the lat/long also the address reverse geolocation it's done.

While I was walking in the office yard (almost naked under 40° sun) I got the following error :

java.io.IOException unable to parse response from server

Got quite frightened, but the Saint Google again come in handy.
This just means that I did too much geolocations requests to the google server, so I got kicked out for a while.

Not a big problem, just wait for some time or restart your app and everything goes fine again.

Using Dialogs and Java1.5 vs Java1.6

Trying to display a MessageBox to the user of my awesome app.
Found a simple example on (thanksgoditexists) Google.
The code looks as follows :


AlertDialog ad = new AlertDialog.Builder(this).create();  
ad.setCancelable(false); 
ad.setMessage("GPS Disabled");  
ad.setButton(DialogInterface.BUTTON_POSITIVE,"OK", new DialogInterface.OnClickListener() {  
@Override  
public void onClick(DialogInterface dialog, int which) {  
               dialog.dismiss();                      
           }  
});  
ad.show();

By compiling this code Eclipse gave me the following error :

method onClick(DialogInterface, int) of type new DialogInterface.OnClickListener(){} must override a superclass method

Here is why :

Eclipse is defaulting to Java 1.5 and you have classes implementing interface methods (which in Java 1.6 can be annotated with @Override, but in Java 1.5 can only be applied to methods overriding a superclass method).

Go to your project/ide preferences and set the java compiler level to 1.6 and also make sure you select JRE 1.6 to execute your program from eclipse.

Happy coding!