[Javascript] Mini barres de chargement
Fermé
axel50397
Messages postés
113
Date d'inscription
mercredi 8 août 2007
Statut
Membre
Dernière intervention
17 mars 2014
-
4 janv. 2008 à 12:04
Ghizlane - 27 mai 2010 à 16:05
Ghizlane - 27 mai 2010 à 16:05
A voir également:
- [Javascript] Mini barres de chargement
- Telecharger javascript - Télécharger - Langages
- Opera mini pc - Télécharger - Navigateurs
- Javascript round ✓ - Forum Javascript
- Facebook opera mini ✓ - Forum Facebook
- Changer code x96 mini - Forum Vidéo/TV
6 réponses
Cabbie
Messages postés
17
Date d'inscription
mercredi 28 novembre 2007
Statut
Membre
Dernière intervention
4 janvier 2008
11
4 janv. 2008 à 12:17
4 janv. 2008 à 12:17
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
axel50397
Messages postés
113
Date d'inscription
mercredi 8 août 2007
Statut
Membre
Dernière intervention
17 mars 2014
16
4 janv. 2008 à 12:40
4 janv. 2008 à 12:40
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 !
Cabbie
Messages postés
17
Date d'inscription
mercredi 28 novembre 2007
Statut
Membre
Dernière intervention
4 janvier 2008
11
4 janv. 2008 à 14:21
4 janv. 2008 à 14:21
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
axel50397
Messages postés
113
Date d'inscription
mercredi 8 août 2007
Statut
Membre
Dernière intervention
17 mars 2014
16
4 janv. 2008 à 15:56
4 janv. 2008 à 15:56
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 ?
Mais je pense que j'en aurais surement besoin si ce que je cherche n'est pas possible... ^^
Merci !
Sinon, d'autres idées ?
13 nov. 2009 à 18:25
27 mai 2010 à 16:04