KreaComm'.info [KBWEB]

Supprimer un élément/index d'un tableau en Javascript

KreaComm' — 2010-03-24T18:09:50Z

Voici en JavaScript comment supprimer un élément d'un tableau (Array) :

function arrayUnset(array, value){
array.splice(array.indexOf(value), 1);
}

Et voici comment supprimer un élément du tableau en JS par sa clé :

delete array[cléDuTableau];

Exemple :

var myArray = new Array('un', 'six', 'neuf');
// myArray = un, six, neuf;
// supprimer l'élément "six":
arrayUnset(myArray ,'six');
// désormais myArray = un, neuf;

Télécharger

Forcer le (re)chargement d'une animation Flash

KreaComm' — 2007-10-16T14:40:25Z

Afin d'obliger le téléchargement de votre animation Flash par le navigateur à chaque chargement de la page pour ne pas utiliser l'animation en cache, vous devez "tromper" le navigateur en utilisant un paramètre dans l'url de votre fichier ; l'url n'étant plus la même le navigateur télécharge le "nouveau" fichier sans ce préoccuper de l'animation contenue dans le cache.

Il suffit simplement d'appliquer un nom de variable dynamique dans l'url du fichier Flash (nul besoin de renseigner de valeur sur cette variable). L'utilisation d'un timestamp UNIX (date en millisecondes écoulées depuis le 1er janvier 1970) est un bon choix dans notre cas.

Les modifications sont donc minimes, exemples :

Ancien fichier : /MonDossier/MonAnimation.swf

Nouveau fichier : /MonDossier/MonAnimation.swf ?428083200

Exemple avec PHP

 $noCache=time();
 ?>
 " width="460" height="400">

Exemple avec JavaScript et SWFObjects :

 var noCache=new Date();
 var so = new SWFObject("/flash/monAnimation.swf?"+noCache.getTime(), "monAnimation", "1024", "100", "9");
 so.addParam("wmode", "transparent");
 so.write("pub");
 }

Internet Explorer ne peut pas ouvrir le site http://www... Opération abandonnée !

KreaComm' — 2007-10-09T09:36:21Z

Un bug et c'est le crash total sur votre site ?! Le message d'erreur "Opération abandonnée" s'affiche et le chargement de la page est stoppé ?

Cela ce produit sous Internet Explorer lorsque la page est modifiée via un script JavaScript avant le chargement complet de celle-ci. A noter que les versions 7/8 sont aussi touchées par ce problème. (KB Microsoft #927917)

Un exemple simple

<html>
<body>
<div>
<script type="text/javascript">
var newElem = document.createElement('foo');
document.body.appendChild(newElem);
</script>
</div>
</body>
</html>

Télécharger

Ce code ajoute un élément 'foo' dans la balise body alors que celle-ci n'est pas encore fermée (lecture ligne par ligne pour le parser) ce qui provoque non seulement une alerte dans le rapport d'erreur IE mais aussi la plantage...

Solutions :

1) Placer le code posant problème en bas de page (juste avant < /body> par exemple)

2) Exécuter le code seulement lorsque la page est complètement chargée en utilisant un onload :

window.onload=function()
{
// votre code...
}

Télécharger

Toujours le même problème ?

Dans ce cas essayez étapes suivantes et n'hésitez pas à commenter si vous rencontrez toujours cette erreur :

Vider le cache : Outils > Options internet > Supprimer... > Supprimer les fichiers
Redémarrez IE... cela fonctionne ? Non ?! alors désactivez le JavaScript dans IE : Outils > Sécurité, cliquez sur la zone concernée (Internet probablement) et sur Personnaliser le niveau... Ensuite dans la partie Script, décochez Scripts ASP.

Maintenant, rechargez la page ? Que ce passe-t'il ? Si la page s'ouvre alors c'est bien un problème de JavaScript (un chemin DOM erroné ?), bon courage dans ce cas ;)

Informations complémentaires :

Blog IE : What Happened to Operation Aborted ?

KB MS : BUG : Error message when you visit a Web page or interact with a Web application in Internet Explorer : "Operation aborted"

Voir en ligne : + d'infos sur le blog IE

Effet de fondu entre éléments

KreaComm' — 2007-02-25T22:39:13Z

Voici un petit bout de code permettant un fondu simultané (apparait/disparait) entre deux éléments html (div, img, a etc.).

Testé et fonctionnel sous ie6+, FF2 et Opera 9.

Démo sur la page d'accueil de Challenge&Co UK

Code JS :

lastShow=1;
function switchTxt(nbElementEvent)
{
Element.addClassName($('txtSuite'+nbElementEvent),'positionElementDesc');
new Effect.Fade($('txtSuite'+lastShow),{
duration: 0.3,
from:1.0,
to:0.0,
afterFinish:function()
{
Element.removeClassName($('txtSuite'+nbElementEvent),'positionElementDesc');
}
});
new Effect.Appear($('txtSuite'+nbElementEvent),{
duration: 0.3,
from:0.0,
to:1.0
});
lastShow=nbElementEvent;
}

Télécharger

Dans mon cas, j'avais x éléments (div) contenant du contenu html, un seul est affiché à la fois ; le premier (index 1) étant affiché au chargement de la page. Le but étant de pouvoir switcher entre les éléments avec un effet de fondu à la manière d'un diaporama d'images...

On attribu la classe css positionElementDesc de manière à pouvoir superposer le nouvel élément sur l'ancien déjà affiché.

Code CSS de la classe positionElementDesc :

.positionElementDesc {
position:absolute;
left:0;
top:0;
}

Télécharger

La variable lastShow indique le dernier élément ayant été affiché (on n'affiche qu'un seul élément à la fois).

On appel la fonction switchTxt(nbElementEvent) , nbElementEvent représente l'index de l'élément à afficher.

Code html :

<p><a javascript:; onclick="switchTxt(1);">Titre 1</a> | <a javascript:; onclick="switchTxt(1);">Titre 2</a> | <a javascript:; onclick="switchTxt(1);">Titre 3</a> | <a javascript:; onclick="switchTxt(1);">Titre 4</a></p>
<div style="position:relative;">
<p id="txtSuite1">du texte, des images...</p>
<p id="txtSuite2">du texte, des images...</p>
<p id="txtSuite3">du texte, des images...</p>
<p id="txtSuite4">du texte, des images...</p>
</div>

Télécharger

Le code n'est pas forcément optimisé, mais peut servir de base pour bien d'autres utilisations.

Classer les données d'un tableau

KreaComm' — 2006-12-04T01:54:17Z

Enfin, voila de quoi classer/ordonner ses données directement côté client en javascript ; ça éxiste déjà mais c'était lourd et peu fiable.

Les différents type de données gérés :
"date-iso" // e.g. 2005-03-26T19:51:34Z
"date" // e.g. Mon, 18 Dec 1995 17:28:35 GMT
"date-au" // e.g. 25/12/2006 05:30:00 PM
"date-eu" // e.g. 25-12-2006
"date-us" // e.g. 12/25/2006 05:30:00 PM
"time" // e.g. 05:30:00 PM
"currency" // e.g. $55.00 - detects : $ £ ¥ € ¤
"datasize" // e.g. 30MB - detects : B, KB, MB, GB, TB
"number"
"casesensitivetext"
"text"

Jugez par vous même avec cette démo du script de tri.

Voir en ligne : Table Sorting with Prototype

Diaporama automatique et fluide en 10 lignes de code.

KreaComm' — 2006-05-24T19:29:53Z

Fonctionne parfaitement, testé sous Safari, Opera 8+, IE6+ et Firefox 1.5+.

Je suis tombé par hasard sur ces bouts de codes permettant de créer un diaporama à défilement automatique et ce de maniére trés fluide, et pour cause, il est basé sur la librairie Scriptaculous.

Premiere solution : Source : Slideshow JS par Code Snippets

<div id="slideshow1" class="slide"><div>frame 1</div></div>
<div id="slideshow2" class="slide" style="display: none"><div>frame 2</div></div>
<div id="slideshow3" class="slide" style="display: none"><div>frame 3</div></div>
<div id="slideshow4" class="slide" style="display: none"><div>frame 4</div></div>

Télécharger

<script type="text/javascript">
start_slideshow(1, 4, 2000);
function start_slideshow(start_frame, end_frame, delay) {
setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay);
}
function switch_slides(frame, start_frame, end_frame, delay) {
return (function() {
Effect.Fade('slideshow' + frame);
if (frame == end_frame) { frame = start_frame; } else { frame = frame + 1; }
setTimeout("Effect.Appear('slideshow" + frame + "');", 850);
setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay + 850);
})
}
script>

Télécharger

Seconde solution : Source : Easy Scriptaculous Slideshow

var album = {
startup: function() {
new PeriodicalExecuter(album.cycle, 5) // change image every 5 seconds
},
cycle: function() {
new Effect.Fade('image', { // the id of the
containing the photos
duration: 1,
fps: 50,
afterFinish: function() {
new Ajax.Updater('image','/album/next', { // URL for next tag
asynchronous: true,
onSuccess: function() {
new Effect.Appear('image', {
duration: 1,
fps: 50,
queue:'end'
})
}
})
}
})
}
}
window.onload = album.startup

Télécharger

Une troisième solution s'offre à vous, version améliorée.

Edit du 20/08 : Une autre alternative pour créer un fondu automatique (diaporama ou slideshow) avec des bloc html (pas d'ajax) : Slideshow xhtml avec Scriptaculous

Voir en ligne : Code Snippets > Slideshow