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)

Aprés une longue interruption, les commentaires sont maintenant ouvert.

Extraire les categories et les nouveaux articles à partir de la base de donnés et les integrés dans le modele.

lancement de la nouvelle version de mutationevent bookmark. (Eventbookmark)

Explication : du moment que notre fichier SWF (intégré dans une page HTML) possède une largeur et une hauteur et que JAVASCRIPT peut contrôler la plus part des éléments présent dans la page html alors JAVASCRIPT peut contrôlé les dimensions de notre SWF.

Dans notre document html on créer une Balise DIV avec un identifiant ‘flashid’ et on place dedans notre SWF avec une largeur et une hauteur de 100%, la notre SWF prendra les dimensions de la Balise DIV.
Puis on crée une fonction JAVASCRIPT qui permet de redimensionner notre Balise DIV et qui sera appelée par notre SWF.

Code HTML

<div id="flashid" width="700px" height="500px">
    <script>
 
document.write("<OBJECT
classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"
codebase=\"http://download.macromedia.com/pub/shockwave/...\"
WIDTH=\"100%\" HEIGHT=\"100%\" id=\"movie\">");
    document.write("<PARAM NAME=movie VALUE=\"main.swf\">");
    document.write("<PARAM NAME=salign VALUE=\"LT\">");
    document.write("<PARAM NAME=quality VALUE=high>");
    document.write("<PARAM NAME=scale VALUE=noscale>");
    //document.write("<PARAM NAME=wmode VALUE=transparent>");
 
document.write("<EMBED NAME=movie src=\"main.swf\" quality=high
scale=noscale WIDTH=\"100%\" HEIGHT=\"100%\" SALIGN=\"LT\"
TYPE=\"application/x-shockwave-flash\"
PLUGINSPAGE=\"http://www.macromedia.com/go/getflashplayer\"
></EMBED>");
    document.write("</OBJECT>");
    </script>
    </div>

Code JAVASCRIPT

function ResizeFlashObject(Width,Height) {
    if(document.all && !document.getElementById) {
    document.all['flashid'].style.pixelWidth = Width+'px';
    document.all['flashid'].style.pixelHeight = Height+'px';
    }else{
    document.getElementById('flashid').style.width = Width+'px';
    document.getElementById('flashid').style.height = Height+'px';
    }
    }

On sait tous ou disant ceux qui utilisent Flash que lorsqu’on conçoit un site entièrement en flash et bien les boutons suivant et précédent de la barre de navigation deviennent inutilisables, alors quoi faire.
La solution existe sûrement mais comment faire.

Les boutons suivant et précédent s’active lorsqu’on clique sur un lien pour aller dans une autre page alors qu’avec flash c pas possible parce qu’on ne change pas de page lorsqu’on utilise loadMovie par exemple, alors pourquoi ne pas faire ça tout en utilisant loadMovie.
C’est la qu’intervient Javascript.

Explication :

On suppose que dans notre animation flash on possède 3 boutons et que chaqu’un d’eux fait appel a la fonction loadFrame() figure1 et envoie comme paramètre a cette dernière le nom de l’animation a chargé (animation qu’on chargé auparavant avec loadMovie).

La fonction appelé a partir de l’animation flash va recharger notre frame (topFrame) figure1 en passant le paramètre reçu à la page figure1.
Lorsque cette page (topFrame) elle récupère le paramètre maintenant disponible dans l’url et l’envoi à notre animation flash qui se trouve dans l’autre frame (mainFrame) figure1 via une fonction Javascript qui fait appel à SetVariable.

Maintenant il ne nous reste plus qu’a récupérer cette variable dans flash et chargé notre animation avec loadMovie

J’ai utilisé getURL pour appeler la fonction javascript à partir de l’animation, SetVariable pour l’envoi vers flash et un onEnterFrame pour faire une boucle afin de vérifier l’arrivé de la variable, mais vous pouvez utiliser l’External API (Flash,external,ExternalInterface) pour la communication entre Flash et Javascript.

Un nouveau produit fait son apparition dans le Pack Google.
Google video Player a télécharger ici.