The Javascript package to validate datas .
whats new :

• isIP() become isSimpleIP() ^updated

  isSimpleIP() does not support IPv4 and IPv6

• isAlpha became isAlphaLatin() ^updated
• isNotEmpty() ^updated
• isEmpty() ^new
• isDecimal() ^updated
• isLetter() ^removed
• isEmail() become isEMailAddr() ^updated
• isURL ^updatedAccept "http://" , "https://" , "ftp://" and "ftps://"

For more details see Validate.js home page

Javascript Package to validate various data. It includes :

• hasValidChars(string, characters, caseSensitive)
• isIP(ip)
• isAlpha(string)
• isLetter(string)
• isNotEmpty(string)
• isIntegerInRange(number,min,max)
• isNum(number)
• isEmail(string)
• isZipCode(number,country)
• isDate(date,format)
• isMD5(string)
• isURL(string)
• isGuid(string)
• isISBN(string)
• isSSN(number)
• isDecimal(number)

For more details see Validate.js home page

Sépparer le code javascript du code HTML

au fait c'est pratique de faire sépparer le code javascript du code HTML comme c'est le cas pour le CSS.

dans cet exemple nous avons besoin des bibliothèques :

Prototype 1.5.0
event-selector
scriptaculous

sans event-selector :

<a id="monlien" href="#" onclick="new Effect.Appear('details',{duration: 0.2});return false">Afficher</a>
<div id="detail" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

maintenant avec event-selector :

<a id="monlien" href="#">Afficher</a>
<div id="detail" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
 
var regles = {
'#monlien a:click': function() {
new Effect.Appear('detail',{duration: 0.5});
}
}

et pour que tout cela marche il faut démarer event:Selector avec

eventSelectors.start(regles);

Créer un blog septième partie.
Ajout de nouvel article

Créer un blog sixième partie.
Afficher la liste des articles par categorie.

voici une lecteur de flux rss qui pourrer vous etre utile a vous de voire.

pour faire cela on a besoin de :

• Une classe PHP qui permet de parser un fichier rss "lastRSS 0.9.1" lastrss.php.txt (167)
• La bibliotheque Javascript "Prototype 1.4.0" Télécharger ici
• La bibliotheque "script.aculo.us 1.5.3" Télécharger ici

en comment tout d'abord par récupérer les informations a afficher (titre et lien de chaque articles disponible dans le fichier rss) sous cet format :

<a href="lien">titre</a>|<a href="lien">titre</a>|<a href="lien">titre</a>...

Fichier getrss.php

<?php
get($_GET['url'])) {
  $i = 0;
  foreach($rs['items'] as $item) {
  $i++;
  echo "<a href="\">".$item['title']."</a>|";
  if($i == '15'){
  break;
  }
  }
  }
?&gt;

maintenant que le contenu est récupérer on l'affiche :

on fait appel aux deux bibliothèque javascript

<script src="/js/prototype.js" type="text/javascript"><!--mce:0--></script>
<script src="/js/script.aculo.us/scriptaculous.js" type="text/javascript"><!--mce:1--></script>

Ensuite on créer les DIVs qui vont contenir le contenu

document.write('<div id="title">Ajax Rss Reader</div>');
document.write('<div id="viewer">');
document.write('<div id="content">loading...</div>');
document.write('</div>');

et la fonction se chargera de l'affichage

 function ajaxTicker(url){
  $('content').innerHTML = 'Loading feeds ...';
  var ajax = new Ajax.Request('getrss.php',
  {
  method:'get',
  parameters:'url='+url,
  onComplete:showResponse
  });
  function showResponse(request){
  var liste = request.responseText.split('|');
  showContent(0,liste.length);
 
  function showContent(index,end){
  new Effect.Fade('content',{
  duration:0.5,
  afterFinishInternal:function(){
  $('content').innerHTML = liste[index];
  new Effect.Appear('content',{duration:0.5});
  }
  });
  setTimeout(
  function(){
  if(index == (end-1)){
  index = 0;
  showContent(index,end);
  }else{
  showContent(index+1,end);
  }
  },5000);
  }
  }
  }

à la fin il ne reste plus qu'a faire appel a la fonction avec le chemin du flux comme paramètre:

 ajaxTicker('http://www.mutationevent.com/rss2.php');

et mettre un petit peu de style et le tour est joué

  <style>
  #title{
  float:left;
  color:#333;
  background-color:#FC0;
  padding:5px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  font-weight:bold;
  }
  #viewer{
  clear:left;
  float:left;
  width:400px;
  color:#fff;
  background-color:#333;
  padding:5px;
  font-family:Arial, Helvetica, sans-serif;
  font-size:11px;
  }
  #viewer a{
  color:#fff;
  text-decoration:none;
  }
  #viewer a:hover{
  color:#FC0;
  text-decoration:underline;
  }
  #content{
  float:left;
  }
</style>

Télécharger la demo ici : ajax rss reader (105)