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!

Android Development Experiences

Finally I got my Android phone...an old Galaxy Next (not the turbo edition).

Running apps on the phone is really easy and no problems encountered.
As soon as I've choosen to run the emulator I've encountered a problem.
The Eclipse interface told me that libGL.so was missing.
The libGL.so comes with the libgl1-mesa-dev package, so if you have not installed it just do a

sudo apt-get install ligbl1-mesa-dev

In my case I already got libgl mesa as I was developning OpenGL already, so
the solution was to create a link in (Ubuntu 12.04 64bit) mesa folder like this.


ln -s /usr/lib/i386-linux-gnu/mesa/libGL.so.1.2 /usr/lib/i386-linux-gnu/mesa/libGL.so

Hope this helps if someone finds the same problem.

Happy coding folks.