5568 sujets

Sémantique web et HTML

Probleme compliance XML/JAVASCRIPT

salutà tous,

je suis nul en javascript, mais là je dois absolument m'en servir.

j'arrive à faire ce que je veux (une page centrée avec deux banières verticales qui suivent le scroll de la page et se positionnent en haut ou en bas selon la taille de la fenetre)

donc comme ça ça marche :

<SCRIPT language="javascript">
// PARAMETRAGE DU SCRIPT

var topming=200;
var hauteurming=724;
var topminr=0;
var hauteurminr=524;

var tjs_delai=20;
var tjs_max=20;
var tjs_hauteur=0;

function PrintCalqueg(left,top,width,height,contenu) {
	tjs_hauteur=height;
	var Z="<DIV id='gauche' style='display:block;position:absolute;left:"+left+";top:"+top+";width:"+width+";height:"+height+"'>"+contenu+"</DIV>";
	document.write(Z);
	setTimeout("Startg()",tjs_delai);
}
function Startg() {
	MoveLayer("gauche",GetTop("gauche", hauteurming, topming));
	setTimeout("Startg()",tjs_delai);
}

function PrintCalquer(left,top,width,height,contenu) {
	tjs_hauteur=height;
	var Z="<DIV id='right' style='display:block;position:absolute;left:"+left+";top:"+top+";width:"+width+";height:"+height+"'>"+contenu+"</DIV>";
	document.write(Z);
	setTimeout("Startr()",tjs_delai);
}
function Startr() {
	MoveLayer("right",GetTop("right", hauteurminr, topminr));
	setTimeout("Startr()",tjs_delai);
}

function Debug() {
	var obj=document.body
	var Z="";
	for (var i in obj) {
		Z+=i+"="+obj[ i ]+"\n";  //les espaces sinon affiche italiq
	}
	alert(Z);
}
function MoveLayer(nom,top) {
	if (document.getElementById) { //IE5 et NS6
		document.getElementById(nom).style.top=top;
	}

	if ((document.all)&&(!document.getElementById)) { //IE4 seul
		document.all[nom].style.top=top;
	}
	if (document.layers) { //NS4.X seul
		document.layers[nom].top=top;
	}
}
function GetTop(nom, hauteurmin, topmin) {
	// Partie 1 : Récupération de la position du calque et de la page
	if (document.getElementById) { //IE5 
		var pos=parseInt(document.getElementById(nom).style.top);
		var wintop=parseInt(document.body.scrollTop);
		var avail=document.body.clientHeight;
	}
	if ((document.getElementById)&&(!document.all)) { //NS6
		var pos=parseInt(document.getElementById(nom).style.top);
		var wintop=parseInt(window.pageYOffset);
		var avail=window.innerHeight;
	}
	if ((document.all)&&(!document.getElementById)) { //IE4 seul
		var pos=parseInt(document.all[nom].style.top);
		var wintop=parseInt(document.body.scrollTop);
		var avail=document.body.clientHeight;
	}
	if (document.layers) { //NS4.X seul
		var pos=parseInt(document.layers[nom].top);
		var wintop=parseInt(window.pageYOffset);
		var avail=window.innerHeight;
	}

	// Partie 2 : Traitement de la position
		
	if ((avail<hauteurmin)&&(wintop<hauteurmin-avail))  { var top=topmin;}
	else if (avail>=hauteurmin) {
				var delta=Math.ceil(((pos-topmin)-wintop)/3);
				if (delta>tjs_max) {delta=tjs_max;}
				if (delta<-1*tjs_max) {delta=-1*tjs_max;}
				var top=pos-delta;	
	}
	else {
				var delta=Math.ceil((pos-(wintop+avail-tjs_hauteur)));
				if (delta>tjs_max) {delta=tjs_max;}
				if (delta<-1*tjs_max) {delta=-1*tjs_max;}
				var top=pos-delta;
			} 
	return top; 
}
</SCRIPT>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<HEAD>
<TITLE>Logo qui reste en bas</TITLE>
		<meta http-equiv="Content-Type" content="text/html; charset= UTF-8">
		<link href="site.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY text="#000000" bgcolor="#FFFFFF" alink="#FF8C00" link="#FF8C00" vlink="#FF8C00">
<div id="global"><BR>
  pour faire descendre avec le scroll deux banières verticales (après 
  les avoir dépassées en gardant l'image en haut d'cran si la taille de la fenêtre est assez grande).<BR>
  Utilisez le scroll pour observez les déplacements de l'image.<BR>
  <BR>
 <SCRIPT language="javascript">
	PrintCalqueg(0,0,200,524,"<IMG src='gauche.jpg' width=200 height=524 alt=''>");
	PrintCalquer(770,0,200,524,"<IMG src='gauche.jpg' width=200 height=524 alt=''>");
</SCRIPT>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <BR>
  <div style="padding-left:250px;"> fin contenu</div>
</div>
</BODY></HTML>


sauf que le navigateur me lit la page en mode quirk...

si j'insère le script dans le <head></head>
il ne marche plus par contre là, compliance ok (et donc javascript erreur)

du coup j'ai reconstruit mon truc en essayant de respecter les normes et en externalisant mon code js et j'en suis maintenant là :

script.js :

var topming=200;
var hauteurming=724;
var topminr=0;
var hauteurminr=524;

var tjs_delai=20;
var tjs_max=20;
var tjs_hauteur=0;

window.onload = start();

function Start() {
	MoveLayer("gauche",GetTop("gauche", hauteurming, topming));
	MoveLayer("right",GetTop("right", hauteurminr, topminr));
	setTimeout("Start()",tjs_delai);
}

function Debug() {
	var obj=document.body;
	var Z="";
	for (var i in obj) {
		Z+=i+"="+obj[ i ]+"\n";  //espaces ici pour eviter italik
	}
	alert(Z);
}
function MoveLayer(nom,top) {
	if (document.getElementById) { //IE5 et NS6
		document.getElementById(nom).style.top=top;
	}

	if ((document.all)&&(!document.getElementById)) { //IE4 seul
		document.all[nom].style.top=top;
	}
	if (document.layers) { //NS4.X seul
		document.layers[nom].top=top;
	}
}
function GetTop(nom, hauteurmin, topmin) {
	// Partie 1 : Récupération de la position du calque et de la page
	if (document.getElementById) { //IE5 
		var pos=parseInt(document.getElementById(nom).style.top);
		var wintop=parseInt(document.body.scrollTop);
		var avail=document.body.clientHeight;
	}
	if ((document.getElementById)&&(!document.all)) { //NS6
		var pos=parseInt(document.getElementById(nom).style.top);
		var wintop=parseInt(window.pageYOffset);
		var avail=window.innerHeight;
	}
	if ((document.all)&&(!document.getElementById)) { //IE4 seul
		var pos=parseInt(document.all[nom].style.top);
		var wintop=parseInt(document.body.scrollTop);
		var avail=document.body.clientHeight;
	}
	if (document.layers) { //NS4.X seul
		var pos=parseInt(document.layers[nom].top);
		var wintop=parseInt(window.pageYOffset);
		var avail=window.innerHeight;
	}

	// Partie 2 : Traitement de la position
		
	if ((avail<hauteurmin)&&(wintophauteurmin-avail))  { var top=topmin;}
	else if (avail>=hauteurmin) {
				var delta=Math.ceil(((pos-topmin)-wintop)/3);
				if (delta>tjs_max) {delta=tjs_max;}
				if (delta<-1*tjs_max) {delta=-1*tjs_max;}
				var top=pos-delta;	
	}
	else {
				var delta=Math.ceil((pos-(wintop+avail-tjs_hauteur)));
				if (delta>tjs_max) {delta=tjs_max;}
				if (delta<-1*tjs_max) {delta=-1*tjs_max;}
				var top=pos-delta;
			} 
	return top; 
}


la page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<HEAD>
<TITLE>Logo qui reste en bas</TITLE>
		<meta http-equiv="Content-Type" content="text/html; charset= UTF-8">
		<link href="site.css" rel="stylesheet" type="text/css">
<link href="style.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="script.js"></script>
</HEAD>
<BODY>
<div id="global"><DIV id="gauche"><IMG src="gauche.jpg" width=200 height=524 alt=""></DIV>
  <DIV id="right"><IMG src="gauche.jpg" width=200 height=524 alt=""></DIV>
 <BR>
  pour faire descendre avec le scroll deux banières verticales (après les avoir 
  dépassées en gardant l'image en haut d'cran si la taille de la fenêtre est assez 
  grande).<BR>
  Utilisez le scroll pour observez les déplacements de l'image.<BR>
  <BR>
  <BR>
...


les styles

body {
     margin: 0; 
     text-align: center; 
     }
#global {
 	 position: relative;
     margin-left: auto;
     margin-right: auto;
     width: 980px; 
	 text-align: left;
     }
#gauche {display:block;position:absolute;left:0px;top:200px; width:200px;height:524px;}
#right {display:block;position:absolute;left:770px;top:0px; width:200px;height:524px;}


evidemment ça marche pas...

il me met une erreur de syntaxe ici -> function Startr() {
Smiley eek bon je perds mes cheveux,
trop de subtilités de jS et xml m'échappent

HELP ! merci
Modifié par arcmau (23 Apr 2007 - 12:08)
OK alors 3 trucs :
- si tu mets du code AVANT le DOCTYPE, ça va gueuler ;
- tu devrais mettre window.onload = start; (sans les parenthèses donc) ;
- évite les noms de fonctions trop génériques (start, stop etc.) car un jour ça rentrera en conflit avec les fonctions natives et tu passeras trois plombes à essayer de comprendre l'origine du problème.

Maintenant, une explication simple sur l'erreur ; tu vas vite comprendre pourquoi ça déconne :
- evenement = ma_fonction() : s'exécute immédiatement
- evenement = ma_fonction : s'exécute lors de l'évènement

Tu avais une erreur Javascript car ta fonction Start() s'exécutait au niveau de ton fichier .js. A ce stade là, le reste de ta page n'était pas chargé.

Le jour où tu auras besoin de passer des paramètres à ta fonction start, il faudra utiliser cette syntaxe :
evenement = function(){ ma_fonction('parametre1', 'parametre2'); }.
Ca s'appelle une fonction anonyme Smiley cligne
Sujet clos
Aller à