[Javascript] Mini barres de chargement

Bonjour,

Je n'suis pas sur d'avoit tolalement compris ce que tu désires faire, mais s'il s'agit d'une barre de chargement (s'affichant pendant l'éxecution du script et s'enlevant à la fin), voici ce que je peut te proposer (je m'excuse par avance de la longueur du message) :

! Afin de rendre à César ce qui est à César, ce script n'est pas de moi !

- Copyright 2004 Brian Gosselin of ScriptAsylum.com -

Etape 1 : creer un fichier Javascript contenant


// xp_progressbar
// Copyright 2004 Brian Gosselin of ScriptAsylum.com
//
// v1.0 - Initial release
// v1.1 - Added ability to pause the scrolling action (requires you to assign
// the bar to a unique arbitrary variable).
// - Added ability to specify an action to perform after a x amount of
// - bar scrolls. This requires two added arguments.
// v1.2 - Added ability to hide/show each bar (requires you to assign the bar
// to a unique arbitrary variable).

// var xyz = createBar(
// total_width,
// total_height,
// background_color,
// border_width,
// border_color,
// block_color,
// scroll_speed,
// block_count,
// scroll_count,
// action_to_perform_after_scrolled_n_times
// )

var w3c=(document.getElementById)?true:false;
var ie=(document.all)?true:false;
var N=-1;

function createBar(w,h,bgc,brdW,brdC,blkC,speed,blocks,count,action){­
if(ie||w3c){
var t='<div id="_xpbar'+(++N)+'" style="visibility:visible; position:relative; overflow:hidden; width:'+w+'px; height:'+h+'px; background-color:'+bgc+'; border-color:'+brdC+'; border-width:'+brdW+'px; border-style:solid; font-size:1px;">';
t+='<span id="blocks'+N+'" style="left:-'+(h*2+1)+'px; position:absolute; font-size:1px">';
for(i=0;i<blocks;i++){
t+='<span style="background-color:'+blkC+'; left:-'+((h*i)+i)+'px; font-size:1px; position:absolute; width:'+h+'px; height:'+h+'px; '
t+=(ie)?'filter:alpha(opacity='+(100-i*(100/blocks))+')':'-M­oz-opacity:'+((100-i*(100/blocks))/100);
t+='"></span>';
}
t+='</span></div>';
document.write(t);
var bA=(ie)?document.all['blocks'+N]:document.getElementById('bl­ocks'+N);
bA.bar=(ie)?document.all['_xpbar'+N]:document.getElementById­('_xpbar'+N);
bA.blocks=blocks;
bA.N=N;
bA.w=w;
bA.h=h;
bA.speed=speed;
bA.ctr=0;
bA.count=count;
bA.action=action;
bA.togglePause=togglePause;
bA.showBar=function(){
this.bar.style.visibility="visible";
}
bA.hideBar=function(){
this.bar.style.visibility="hidden";
}
bA.tid=setInterval('startBar('+N+')',speed);
return bA;
}}

function startBar(bn){
var t=(ie)?document.all['blocks'+bn]:document.getElementById('bl­ocks'+bn);
if(parseInt(t.style.left)+t.h+1-(t.blocks*t.h+t.blocks)>t­.w){
t.style.left=-(t.h*2+1)+'px';
t.ctr++;
if(t.ctr>=t.count){
eval(t.action);
t.ctr=0;
}}else t.style.left=(parseInt(t.style.left)+t.h+1)+'px';
}

function togglePause(){
if(this.tid==0){
this.tid=setInterval('startBar('+this.N+')',this.speed);
}else{
clearInterval(this.tid);
this.tid=0;
}}

function togglePause(){
if(this.tid==0){
this.tid=setInterval('startBar('+this.N+')',this.speed);
}else{
clearInterval(this.tid);
this.tid=0;
}}

Etape 2 : créer un fichier php contenant

<?
// Fonction pour afficher la barre de progression
function Show_ProgressBar()
{
echo ("<div id=\"progress\" style=\"display:none;\">");
echo ("<h4>Please loading ...</h4>");
echo ("<img src=\"../Intranet/images/progress.gif\" border = \"0px\" title=\"Loading\">");
echo ("</div>");

echo "<script>";
echo "document.getElementById('progress').style.display=\&qu­ot;block\";";
echo "</script>";
}

// Fonction pour masquer la barre de progression
function Hide_ProgressBar()
{
echo "<script>";
echo "document.getElementById('progress').style.display=\&qu­ot;none\";";
echo "</script>";
}
?>

Etape 3 : Tu utilises les fonctions de cette façon :

// Début de la page php appellant ton script
<?

// Appel de la fonction d'affichage
Show_ProgressBar();
// Insertion de ton script
... script ...
// Appel de la fonction d'enlevement
Hide_ProgressBar();

// Fin de la page appellant ton script
?>

En espérant que ça corresponde à tes attentes

Hello,

Merci beaucoup, je recherche presque cela... Le problème, c'est que je dois afficher une barre de progréssion sur 3 céllules différentes d'un tableau:

exemple d'une cellule:

------------------------------------------------------------­--------------------
Miroir 1 | Emplacement Web du miroir | Barre de chargement |
------------------------------------------------------------­--------------------

La barre (meme si c'est une barre qui charge dans le vide, qui ne charge rien de concret, meme si j'ai juste une barre qui affiche 23%, puis 50%, puis 70, puis 100, il faut qu'à la fin, elle disparaisse, pour que le script derriere puisse afficher l'état du moroir distant...

Il y a au mimum 3 miroirs, je peux pas utiliser ton script, à moins de le copier 3 fois en changeant les noms... Mais ce serait un peu lourd...

J'espere que c'est plus clair, merci de ton aide !

Tant pis, un coup dans l'eau ^^

Au cas où, je te passe un lien pour créer une page de chargement :

http://www.valhalla.fr/index.php/2007/08/01/php-wait-screen/­

Jai peur que ça ne corresponde pas exactement à tes attentes non plus, mais dans la mesure où la conception est différente de la précédente, peut être pourras tu trouver ici des pistes pour régler ton problème ;-)

Bon courage

Ah, merci quand même Cabbie...

Mais je pense que j'en aurais surement besoin si ce que je cherche n'est pas possible... ^^
Merci !


Sinon, d'autres idées ?