Barre de progression genial pb de compatibili

Résolu/Fermé

caty - 19 sept. 2006 à 20:40
cypher - 5 mai 2009 à 19:28

j'ai trouvé un script genial de barre de progression compatible IE et NS mais ne marche pas sous firefox/mozilla. Comment faire?
Merci pour la réponse

Voisi le script :

entre les balise head :



<style>

</style>
<SCRIPT language="JavaScript1.2">
var duration=5
function postaction(){
window.location="adresse de redirection automatique"
}

/// FIN DE LA CONFIGURATION - NE PAS EDITER LE RESTE ! //
var clipright=0
var widthIE=0
var widthNS=0

function initializebar(){
if (document.all){
baranchor.style.visibility="visible"
widthIE=bar.style.pixelWidth
startIE=setInterval("increaseIE()",50)
}
if (document.layers){
widthNS=document.baranchorNS.document.fondbarNS.clip.width
document.baranchorNS.document.barNS.clip.right=0
document.baranchorNS.visibility="show"

startNS=setInterval("increaseNS()",50)
}
}

function increaseIE(){
bar.style.clip="rect(0 "+clipright+" auto 0)"
window.status="Loading..."
if (clipright<widthIE)
clipright=clipright+(widthIE/(duration*20))
else{
window.status=''
clearInterval(startIE)
postaction()
}
}

function increaseNS(){
if (clipright<202){
window.status="Loading..."
document.baranchorNS.document.barNS.clip.right=clipright
clipright=clipright+(widthNS/(duration*20))
}
else{
window.status=''
clearInterval(startNS)
postaction()
}
}

window.onload=initializebar
</SCRIPT>


entre les balises body :



<SCRIPT language="JavaScript1.2">
if (document.all){
document.write('<div id="baranchor" style="position:relative;width:200px;height:20px;visibility:hidden;">')
document.write('<div id="fondbar" style="width:200px;height:20px;z-index:9"></div>')
document.write('<div id="bar" style="width:200px;height:20px;z-index:10"></div>')
document.write('</div>')
}

</SCRIPT>
<ilayer name="baranchorNS" visibility="hide" width=200 height=20> </p>
<layer name="fondbarNS" bgcolor="black" width=200 height=20 z-index="10" left="0" top="0">
</layer>
<layer name="barNS" bgcolor="#006699" width=200 height=20 z-index="11" left="0" top="0">
</layer>
</ilayer>

A voir également:

Barre de progression genial pb de compatibili
Windows 11 barre des taches a gauche - Guide
Barre de défilement - Guide
Barre verticale mac - Forum MacOS
Barré whatsapp - Guide
Changer la couleur de la barre des taches - Guide

5 réponses

Réponse 1 / 5

Lust Messages postés 243 Date d'inscription mercredi 28 septembre 2005 Statut Membre Dernière intervention 12 septembre 2007 123
20 sept. 2006 à 09:27

Tiens, voila bcp plus simple qui marche sur Mozilla 5 et Internet explorer 6 testé par moi.... voila le code complet de la page avec bcp plus de rigueur dans le code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	#Cadre{
	position:absolute;
	left:10px;
	top:50px;
	width:500px;
	height:20px;
	border:1px navy solid;
	background-color:#F3F3F3;
	}
	#Progress{
	position:absolute;
	left:10px;
	top:50px;
	width:0px;
	height:20px;
	background-color:#FF6699;
	border-left:1px navy solid;
	border-bottom:1px navy solid;
	border-top:1px navy solid;
	}
</style>

<script type="text/javascript">

var incremProgress = 10;
var progressWith=0;
var urlRedirect = "http://www.e-rus.net/";

function startProgress()
{
	progressWith = progressWith + incremProgress;
	if( progressWith  < 500)
		document.getElementById("Progress").style.width = progressWith + "px";
	else
	{
		document.getElementById("Progress").style.width = "500px";
		window.location = urlRedirect;
	}
}

setInterval("startProgress()",50);
</script>

<title>Progress Barre</title>

</head>

<body>

<script type="text/javascript">
document.write("Vous allez être redirigé dans un instant vers cette url : " + urlRedirect)
</script>

	<div id="Cadre"></div>
	<div id="Progress" ></div>
	
</body>
</html>

A toi de tester sur Netscape... moi j'ai pas

cypher
5 mai 2009 à 19:28

salut !
ton code fonctionne presque nickel : mais il manque l'arrêt de la barre de progression : clearInterval(...).
->comme "setInterval(...)" continue pendant qu'on charge la page, si on réduit l'intervalle, le navigateur n'a plus le temps de charger la page...

donc voilà le même code (merci Lust) un peu renforcé !

---------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html"/>
<style type="text/css">
#Cadre{
position:absolute;
left:10px;
top:50px;
width:500px;
height:20px;
border:1px navy solid;
background-color:#F3F3F3;
}
#Progress{
position:absolute;
left:10px;
top:50px;
width:0px;
height:20px;
background-color:#FF6699;
border-left:1px navy solid;
border-bottom:1px navy solid;
border-top:1px navy solid;
}
</style>

<script type="text/javascript">

var incremProgress = 100;
var progressWith=0;
var urlRedirect = "https://www.google.fr/?gws_rd=ssl";

function startProgress()
{
progressWith = progressWith + incremProgress;
if( progressWith < 500)
document.getElementById("Progress").style.width = progressWith + "px";
else
{
document.getElementById("Progress").style.width = "500px";
clearInterval(idSetInterval);
window.location = urlRedirect;
}
}

idSetInterval = setInterval("startProgress()",100);
</script>

<title>Progress Barre</title>

</head>

<body>

<script type="text/javascript">
document.write("Vous allez être redirigé dans un instant vers cette url : " + urlRedirect)
</script>

<div id="Cadre"></div>
<div id="Progress" ></div>

</body>
</html>

---------------------------------------------------------------------

Réponse 2 / 5

catycath Messages postés 5 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 25 septembre 2006
20 sept. 2006 à 10:46

MErci Lust pour ton aide ! mais ca ne marche pas sur IE. J'ai collé entierment ton code ton mon editeur internet. Il me redirige effectivement mais je ne vois pas la barre. En plus de ca faut que j'utilise cette barre sous une feuille PHP car faut que le code passe...

Réponse 3 / 5

Lust Messages postés 243 Date d'inscription mercredi 28 septembre 2005 Statut Membre Dernière intervention 12 septembre 2007 123
20 sept. 2006 à 13:54

??? moi ca fonctionne tres bien sur IE... le 6. La source est ici :

http://www.e-rus.net/tutodivers/tuto.aspx?tuto=33

et ca marche sur ie 6, netscape 7, mozilla 5 quand il s'agit d'un fichier html en utf-8, parce que je sais que j'ai eu des pb d'interprétation avec ca.