Le premier bout de code intéressant..

Code Javascript :

(function($){

$.fn.shuffleLetters = function(prop){

// Handling default arguments
 var options = $.extend({
 // Default arguments
 },prop)

return this.each(function(){
 // The main plugin code goes here
 });
 };

// A helper function

function randomChar(type){
 // Generate and return a random character
 }

})(jQuery);

La fonction randomChar() pour générer un caractère aléatoire.

function randomChar(type){
var pool = "";

if (type == "lowerLetter"){
pool = "abcdefghijklmnopqrstuvwxyz0123456789";
}
else if (type == "upperLetter"){
pool = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
}
else if (type == "symbol"){
pool = ",.?/\\(^)![]{}*&^%$#'\"";
}

var arr = pool.split('');
return arr[Math.floor(Math.random()*arr.length)];
}

Le code principal du plugin :

$.fn.shuffleLetters = function(prop){

var options = $.extend({
"step"    : 8,    // How many times should the letters be changed
"fps"    : 25,    // Frames Per Second
"text"    : ""     // Use this text instead of the contents
},prop)

return this.each(function(){

var el = $(this),
str = "";

if(options.text) {
str = options.text.split('');
}
else {
str = el.text().split('');
}

// The types array holds the type for each character;
// Letters holds the positions of non-space characters;

var types = [],
letters = [];

// Looping through all the chars of the string

for(var i=0;i<str.length;i++){

var ch = str[i];

if(ch == " "){
types[i] = "space";
continue;
}
else if(/[a-z]/.test(ch)){
types[i] = "lowerLetter";
}
else if(/[A-Z]/.test(ch)){
types[i] = "upperLetter";
}
else {
types[i] = "symbol";
}

letters.push(i);
}

el.html("");

// Self executing named function expression:

(function shuffle(start){

// This code is run options.fps times per second
// and updates the contents of the page element

var i,
len = letters.length,
strCopy = str.slice(0);    // Fresh copy of the string

if(start>len){
return;
}

// All the work gets done here
for(i=Math.max(start,0); i < len; i++){

// The start argument and options.step limit
// the characters we will be working on at once

if( i < start+options.step){
// Generate a random character at this position
strCopy[letters[i]] = randomChar(types[letters[i]]);
}
else {
strCopy[letters[i]] = "";
}
}

el.text(strCopy.join(""));

setTimeout(function(){

shuffle(start+1);

},1000/options.fps);

})(-options.step);

});
};

Vous avez maintenant ce qu’il vous faut pour réaliser de jolis effets

Je vous met en bloc le bout de script que j’ai retrouvé jenesaisplusoù ..

Code HTML :

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/
1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript">
function success(position)
{
var s = document.querySelector('#status');
if (s.className == 'success')
{
return;
}
s.innerHTML = "Trouvé!";
s.className = 'Success';
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '100%';
mapcanvas.style.width = '100%';
document.querySelector('#map').appendChild(mapcanvas);
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"You are here!"
});
$.cookie("MyLat", position.coords.latitude); // Storing latitude value
$.cookie("MyLon", position.coords.longitude); // Storing longitude value
}
function error(msg)
{
var s = document.querySelector('#status');
s.innerHTML = typeof msg == 'string' ? msg : "failed";
s.className = 'Fail';
}
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(success, error);
}
else
{
error('Not supported'); //HTML Support
}

//Jquery Code
$(document).ready(function()
{
$("#check").click(function()
{
var lat = $.cookie("MyLat");
var lon = $.cookie("MyLon");
alert('Latitued: '+lat);
alert('Longitude: '+lon);
var url="http://maps.googleapis.com/maps/api/geocode/json?latlng="+lat+","+lon+"&sensor=false";
alert('Google Map API: '+url);
//Get Json Request Here
});
});
</script>
//HTML Code
<input type='button' id='check' value='Check-out'/>
<div id="status">Loading.............</div>
<div id="map"></div>

Premièrement, il faut vous créez une application sur le centre de développement Bing.

Connectez-vous avec votre compte live et laissez-vous guider, rien de compliqué, validez et mettez de côté l’AppID qu’il vous renvoi.

Code Javascript :

Remplacez APPID par la votre.

On interroge Bing qui nous renvoi au format Json.

On y récupère la description, le titre et l’url pour chaque ligne retournée.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{

$(".search_input").keyup(function()
{
var search_input = $(this).val();
var keyword= encodeURIComponent(search_input);
// Bing Search API
var bing_url='http://api.search.live.net/json.aspx?JsonType=callback&JsonCallback=?&Appid=APPID&query='+keyword+'&sources=web';

$.ajax
({
type: "GET",
url: bing_url,
dataType:"jsonp",
success: function(response)
{
$("#result").html('');
if(response.SearchResponse.Web.Results.length)
{
$.each(response.SearchResponse.Web.Results, function(i,data)
{
var title=data.Title;
var dis=data.Description;
var url=data.Url;

var final="<div class='webresult'><div class='title'><a href='"+url+"'>"+title+"</a></div><div class='desc'>"+dis+"</div><div class='url'>"+url+"</div></div&gt;";

$("#result").append(final); // Result

});
}
else
{
$("#result").html("<div id='no'>No Results</div>");
}
}
});
});
});
</script>
// HTML code
<input type="text" class='search_input' />
<div id="result">
</div>

Code CSS :

<strong>#container</strong>
 {
 margin:0 auto;
 width:700px;
 }
 <strong>.search_input</strong>
 {
 border:2px solid #333;
 font-size:20px;
 padding:5px;
 width:350px;
 font-family:'Georgia', Times New Roman, Times, serif;
 -moz-border-radius:5px;-webkit-border-radius:5px;
 }
 <strong>#input_box</strong>
 {
 text-align:left;
 width:640px;
 }
 <strong>#result</strong>
 {
 text-align:left;
 }
 <strong>.title</strong>
 {
 color:#006699;
 font-size:16px;
 padding-bottom:5px;
 }
 <strong>.title a</strong>
 {
 color:#cc0000;
 text-decoration:none;
 }
 <strong>.desc</strong>
 {
 color:#333;
 padding-bottom:5px;
 }
 <strong>.url</strong>
 {
 color:#006600;
 }
 <strong>.webresult</strong>
 {
 margin-top:10px;
 padding-bottom:10px;
 padding-left:5px;
 border-bottom:1px dashed #dedede;
 }

Premièrement, on va créer une base de données pour stocker nos messages

CREATE TABLE demo_supprimer_un_enregistrement_updates(
 msg_id INT PRIMARY KEY AUTO_INCREMENT,
 message TEXT);

Code jQuery :

Le code jQuery contient $(« .delete_button »).click(function(){}- qui est la fonction qui nous intéresse, on lui donne l’ID du message a supprimer.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.color.js"></script>
<script type="text/javascript">
$(function() {
$(".delete_button").click(function() {
var id = $(this).attr("id");
var dataString = 'id='+ id ;
var parent = $(this).parent();

$.ajax({
type: "POST",
url: "deleteajax.php",
data: dataString,
cache: false,
beforeSend: function()
{
parent.animate({'backgroundColor':'#fb6c6c'},300).animate({ opacity: 0.35 }, "slow");;
},
success: function()
{
parent.slideUp('slow', function() {$(this).remove();});
}
});

return false;
});
});
</script>

deleteajax.php

deleteajax.php contient le code qui supprime le message de la base de données.

<?php
if($_POST['id']){
 mysql_connect('localhost', 'user', 'password'); // remplacer ici par vos identifiants
 mysql_select_db('bdd'); // et le nom de la base de données
 $id=$_POST['id'];
 $id = mysql_escape_String($id);
 $sql = "delete from demo_supprimer_un_enregistrement_updates where msg_id='$id'";
 mysql_query($sql);
}
?>

Code CSS :

Vous devez utiliser background-color pour que jquery.color.js s’y retrouve.

*{margin:0;padding:0;}
ol.update
{
list-style:none;font-size:1.2em;
}
ol.update li
{
height:50px; border-bottom:#dedede dashed 1px;background-color:#ffffff
}
#main
{
width:500px; margin-top:20px; margin-left:100px;
font-family:"Trebuchet MS";
}
.delete_button
{
margin-left:10px;
font-weight:bold;
float:right;
}

Pour lister les messages stockés dans la base de données, téléchargez l’exemple, tout est dedans

Code Javascript et HTML :

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("#contentbox").keyup(function()
{
var content=$(this).val();
var urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
// Filtering URL from the content using regular expressions
// Filtrer l'URL du contenu en utulisant les expressions regulières
var url= content.match(urlRegex);

if(url.length>0)
{
$("#linkbox").slideDown('show');
$("#linkbox").html("<img src='link_loader.gif'>");
// Récupération des données du domaine
$.get("urlget.php?url="+url,function(response)
{
// On récupère le nom du site entre les balises <title></title>
var title=(/<title>(.*?)<\/title>/m).exec(response)[1];
// On récupère la premiere image en .png avec la balise image src=''
var logo=(/src='(.*?).png'/m).exec(response)[1];
$("#linkbox").html("<img src='"+logo+".png' class='img'/><div><b>"+title+"</b><br/>"+url)
});

}
return false;
});
});
//HTML Code
<textarea id="contentbox"></textarea>
<div id="linkbox"></div>
</script>

On utilise les expressions régulières pour récupérer la description entre les balises <title></title> ainsi que la première image .png que l’on trouve.

Après vous pouvez peaufiner, remplacer le .png par un .jpg ou bien utilisez l’api d’un générateur de screenshot de site web (http://www.robothumb.com , leur API est vraiment simple) pour générer la vignette, etc etc..

urlget.php

il contient juste la fonction file_get_contents qui lira le contenu d’un fichier dans une chaîne de caractères.

<?php
if($_GET['url'])
{
$url=$_GET['url'];
echo file_get_contents($url);
}
?>

Code CSS :

body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#contentbox
{
width:458px; height:50px;
border:solid 2px #dedede;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-bottom:6px;
}
.img
{
float:left; width:150px; margin-right:10px;
text-align:center;
}
#linkbox
{
border:solid 2px #dedede; min-height:50px; padding:15px;
display:none;
}

Voila, vous avez une base de départ pour vos projets.

Rien de pire qu’un formulaire qui vous renvoi sur la page d’inscription parce que vous avez oublié de remplir un champ.

Pour rendre accrocheur notre formulaire, on va y ajouter un effet de gravité qui déploie le champ suivant, lorsque le champ est bien rempli.

Code Javascript :

Le code javascript contient $(« #email »).keyup(function(){} ou email est le nom de notre champ.

La fonction keyup vérifie l’expression régulière et valide si tout est bon, sinon elle affiche un message d’erreur.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js.js"></script>
<script type="text/javascript">
$(function()
{
// Displaying first list email field
$("ul li:first").show();
// Regular Expressions
var ck_username = /^[A-Za-z0-9_]{3,20}$/;
var ck_email = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
var ck_password = /^[A-Za-z0-9!@#$%^&*()_]{6,20}$/;
// Email validation
$('#email').keyup(function()
{
var email=$(this).val();
if (!ck_email.test(email))
{
$(this).next().show().html("Enter valid email");
}
else
{
$(this).next().hide();
$("li").next("li.username").slideDown({duration: 'slow',easing: 'easeOutElastic'});
}
});
// Username validation
$('#username').keyup(function()
{
var username=$(this).val();
if (!ck_username.test(username))
{
$(this).next().show().html("Min 3 charts no space");
}
else
{
$(this).next().hide();
$("li").next("li.password").slideDown({duration: 'slow',easing: 'easeOutElastic'});
}
});
// Password validation
$('#password').keyup(function()
{
var password=$(this).val();
if (!ck_password.test(password))
{
$(this).next().show().html("Min 6 Charts");
}
else
{
$(this).next().hide();
$("li").next("li.submit").slideDown({duration: 'slow',easing: 'easeOutElastic'});
}
});
// Submit button action
$('#submit').click(function()
{
var email=$("#email").val();
var username=$("#username").val();
var password=$("#password").val();
if(ck_email.test(email) && ck_username.test(username) && ck_password.test(password) )
{
$("#form").show().html("<h1>Thank you!</h1>");
}
return false;
});

})
</script>

Code HTML :

Le code html est simple, c’est juste un formulaire

<form method="post" >
<ul>
<li>
<label>Email: </label><br/>
<input type="text" name="email" id="email" />
<span></span>
</li>
<li>
<label>Username: </label><br/>
<input type="text" name="username" id="username" />
<span></span>
</li>
<li>
<label>Password: </label><br/>
<input type="password" name="password" id="password" />
<span></span>
</li>
<li>
<input type="submit" value=" Register " id='submit'/>
</li>
</ul>
</form>

Code CSS :

Ici on a li {display:none} pour cacher tout les champs et jQuery affichera seulement le premier avec li:first (le champs e-mail).

ul
{
padding:0px;
margin:0px;
list-style:none;
}
li
{
padding:5px;
display:none;
}
label
{
font-size:14px;
font-weight:bold;
}
input[type="text"], input[type="password"]
{
border:solid 2px #009900;
font-size:14px;
padding:4px;
width:180px;
-moz-border-radius:6px;-webkit-border-radius:6px;
}
input[type="submit"]
{
border:solid 1px #ff6600;
background-color:#FF6600;
color:#fff;
font-size:14px;
padding:4px;
-moz-border-radius:6px;-webkit-border-radius:6px;
}
.error
{
font-size:11px;
color:#cc0000;
padding:4px;
}
#form
{
width:350px;
margin:0 auto;
margin-top:30px;
}

Voila, vous avez maintenant un formulaire avec un effet de gravité lorsque le champs est bien rempli.