[Javascript] Mini barres de chargement
axel50397
Messages postés
113
Date d'inscription
Statut
Membre
Dernière intervention
-
Ghizlane -
Ghizlane -
Bonjour,
J'ai un site internet et je suis en train de travailler sur un système de miroirs...
Pendant le chargement de la page principale du site principal, plusieurs lien sont testés et il y a un retour de leur êtat sur la page...
Les liens sont agencés sous forme d'un tableau, une ligne par Site...
J'aimerais en fait, que pendant l'exécution du script, et meme à la fin de l'affichage de la page, il y ai une petite barre de chargement, toute simple avec ou sans porcentage qui indiquerait l'avancement du teste du site... Et j'aimerais faire cela pour les 3 liens à tester...
L'effet recherché est celui d'un "teste en cours" et à la fin du chargement, l'état du site serait affiché (juste derriere l'emplacement de la barre...)
J'espère que vous comprenez ce que je cherche, et que vous pouriez m'aider...
Merci beaucoup !
J'ai un site internet et je suis en train de travailler sur un système de miroirs...
Pendant le chargement de la page principale du site principal, plusieurs lien sont testés et il y a un retour de leur êtat sur la page...
Les liens sont agencés sous forme d'un tableau, une ligne par Site...
J'aimerais en fait, que pendant l'exécution du script, et meme à la fin de l'affichage de la page, il y ai une petite barre de chargement, toute simple avec ou sans porcentage qui indiquerait l'avancement du teste du site... Et j'aimerais faire cela pour les 3 liens à tester...
L'effet recherché est celui d'un "teste en cours" et à la fin du chargement, l'état du site serait affiché (juste derriere l'emplacement de la barre...)
J'espère que vous comprenez ce que je cherche, et que vous pouriez m'aider...
Merci beaucoup !
A voir également:
- [Javascript] Mini barres de chargement
- Opera mini pc - Télécharger - Navigateurs
- Telecharger javascript - Télécharger - Langages
- Rohos mini drive - Télécharger - Chiffrement
- Dameware mini remote control - Télécharger - Web & Internet
- Chargement terminé shein - Forum Consommation & Internet
6 réponses
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))+')':'-Moz-opacity:'+((100-i*(100/blocks))/100);
t+='"></span>';
}
t+='</span></div>';
document.write(t);
var bA=(ie)?document.all['blocks'+N]:document.getElementById('blocks'+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('blocks'+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=\"block\";";
echo "</script>";
}
// Fonction pour masquer la barre de progression
function Hide_ProgressBar()
{
echo "<script>";
echo "document.getElementById('progress').style.display=\"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
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))+')':'-Moz-opacity:'+((100-i*(100/blocks))/100);
t+='"></span>';
}
t+='</span></div>';
document.write(t);
var bA=(ie)?document.all['blocks'+N]:document.getElementById('blocks'+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('blocks'+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=\"block\";";
echo "</script>";
}
// Fonction pour masquer la barre de progression
function Hide_ProgressBar()
{
echo "<script>";
echo "document.getElementById('progress').style.display=\"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
olivier
Bonjour je viens d'essayer ton script c exactement ce que je recherche mais il ne fonctionne pas chez moi !!! je dois surement mal m'y prendre !!!! tu n'as pas donné de nom au fichier, c peut être à cause de ca que ca ne fonctionne pas ? merci pour ta reponse
Ghizlane
Bonjour SVP je cherche à ajouter une barre de progression qui affiche l'état d'upload d'un fichier via ftp , j'ai déjà configuré l'upload je veux juste ajouter la barre Aidez moi si possible MEerci
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 !
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question