11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

encore en plein phase de débogage du site je me retrouve confronté à un nouveau problème ou plutôt deux ! Smiley confus Smiley confused

Mon premier problème qui concernait le innerHTML sous IE a été résolu. Smiley smile Merci !

Et mon deuxième problème est le suivant j'ai mes codes javascript pour mettre en place la galerie d'image défilante mais aussi le système de news pour la page d'accueil, et mon problème est le suivant. Si je mets le doctype en en-tête mes images de la galerie javascript n'aparaissent pas mais par contre le javascript doit surement être actif car en ouvrant Firebug et en plaçant mon curseur de la souris sur les DIV devant contenir les images je vois un cadre bleu qui se deplace, donc le défilement en lui même fonctionne je pense.
J'ai donc effectué quelques recherches et j'ai pu lire quelque chose comme MODE QUIRCKS ou quelque chose du genre.
Qu'est ce que c'est exactement ?
Comment résoudre ce problème de galerie qui disparait lorsque j'inscrit mes doctypes, car si j'enlève les doctypes, pas de problème, la galerie s'affiche correctement.

slide.js

		var sliderwidth="50px"

		var sliderheight="120px"

		var slidespeed=1

		slidebgcolor="00OO00"

		var finalslide=''

		var copyspeed=slidespeed

		leftrightslide='<nobr>'+leftrightslide.join(" ")+'</nobr>'

		var iedom=document.all||document.getElementById

		if (iedom)

			document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')

			var actualwidth=''

			var cross_slide, ns_slide

		function fillup()
		{

			if (iedom)
			{

				cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2

				cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3

				cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide

				actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth

				cross_slide2.style.left=actualwidth+4+"px"

			}

			else if (document.layers)
			{

				ns_slide=document.ns_slidemenu.document.ns_slidemenu2

				ns_slide2=document.ns_slidemenu.document.ns_slidemenu3

				ns_slide.document.write(leftrightslide)

				ns_slide.document.close()

				actualwidth=ns_slide.document.width

				ns_slide2.left=actualwidth+4

				ns_slide2.document.write(leftrightslide)

				ns_slide2.document.close()

			}

			lefttime=setInterval("slideleft()",30)

		}

		addLoadEvent(fillup);

		function slideleft()
		{

			if (iedom)
			{

				if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+0))

					cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"

				else

					cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+4+"px"

				if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+0))

					cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"

				else

					cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+4+"px"

			}

			else if (document.layers)
			{

				if (ns_slide.left>(actualwidth*(-1)+0))

					ns_slide.left-=copyspeed

				else

					ns_slide.left=ns_slide2.left+actualwidth+4

				if (ns_slide2.left>(actualwidth*(-1)+0))

					ns_slide2.left-=copyspeed

				else

					ns_slide2.left=ns_slide.left+actualwidth+4

			}

		}

		if (iedom||document.layers)
		{

			with (document)
			{

				if (iedom)
				{

					write('<table width=680 align=center border=0 id="cinesearch"><tr><td>')

					write('<div style="position:relative;top:1px;left:-1px;width:100%;height:1;" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')

					write('<div style="position:absolute;top:305px;left:-2px;width:100%;height:170;overflow:hidden;">')

					write('<div id="test2" style="position:absolute;width:100%;left:-1px;top:1px"></div>')

					write('<div id="test3" style="position:absolute;width:100%;left:-1000px;top:1px"></div></div></div>')

					write('</td></tr></table>')

				}

				else if (document.layers)
				{

				}

			}

		}



imageslide_accueil.js

// JavaScript Document
var leftrightslide = new Array();



leftrightslide[0] ='<IMG src="images/diapo/accueil/1.png" border=1 alt="Accueil Agence Graphique Marquage Textile Objets pub Design"/>';

leftrightslide[1] ='<IMG src="images/diapo/accueil/2.png" border=1 alt="Accueil Agence Graphique Marquage Textile Objets pub Design"/>';

leftrightslide[2] ='<IMG src="images/diapo/accueil/3.png" border=1 alt="Accueil Agence Graphique Marquage Textile Objets pub Design"/>';

leftrightslide[3] ='<IMG src="images/diapo/accueil/4.png" border=1 alt="Accueil Agence Graphique Marquage Textile Objets pub Design"/>';

leftrightslide[4] ='<IMG src="images/diapo/accueil/5.png" border=1 alt="Accueil Agence Graphique Marquage Textile Objets pub Design"/>';



Merci d'avance.

Arnaud S.
Modifié par bibi-arnaud (23 Jul 2008 - 11:46)
Pour le premier problème, essayes de passer par le DOM (document.createElement, document.createTextNode et element.appendChild).

Concernant le 2è problème, ça vient du fait que ton code est invalide par rapport au type de document déclaré.
En HTML, les balises et attribut doivent être impérativement écrit en minuscule (même les évènements), les balises doivent toutes être fermées (même les balises type <br /> et <img /> si tu déclare un document XHTML) dans le bon ordre (genre <p><div></p></div> c'est pas bon) et les valeurs des attributs doivent être entourés de guillemet. Si une de ces conditions (il y en a d'autres, j'ai mis que l'essentiel) n'est pas respecté, la page est mal affiché.
En mode Quirks (si tu ne précise pas le type de document), le navigateur va essayer de rafistolé comme il peut le code, sachant qu'il est quand même proche du HTML. Donc les erreurs de syntaxe posent moins de problème.

Pour t'aider, installe l'extension HTML Validator. Il t'indiquera toutes les erreurs de syntaxes (même les plus insignifiantes) que comporte ton document et qui pourrait gêner la lecture du document.
Modifié par MacIntoc (07 Jul 2008 - 10:39)
J'ai essayé avec HTML Validator et il me marquait des erreurs et me donnait le code à changer et la manière de le changer.
Je l'ai fait et après il me disait que le code qu'il m'a dit de mettre était faux .... Smiley decu


Par contre mon problème c'est un peu étendu subitement Smiley decu ... sous IE bien entendu !

Sur les pages où je spécifie un Doctype, pas de problème mon menu s'affiche correctement mais mes applis javascript ne fonctionnent pas, par contre sur les pages où je ne le spécifie pas, mon dernier élément du menu se décale complètement (à noter que le fichier du menu est un seul fichier qui est comment à toutes les pages et intégré en PHP à l'aide d'un include). mais mes applis javascript fonctionnent.

Je deviens fou.

Pour avoir un exemple concret, je vous donne le lien de deux pages ou cela se passe.

Là, c'est une page où le Doctype n'est pas déclaré et donc vous pouvez constater que ma galerie javascript fonctionne correctement mais le menu est complètement décalé (enfin, le dernier élément!) :


Là, c'est une page où le Doctype est déclaré et donc vous pouvez constater que le menu est placé de façon impeccable. J'ai pu déclaré le doctype car sur cette page, il n'y a aucun javascript, mais si j'avais eu une galerie javascript placée sur cette page, elle n'aurait pas fonctionné du fait que mon Doctype était déclaré.


A noter que ces problèmes sont sous IE, si je regarde mon site tel quel sous MFF, aucun problème au niveau du menu avec ou sans doctype, par contre j'aurais le même problème de non affichage de la galerie d'image en javascript si je déclare les Doctype.
Modifié par bibi-arnaud (23 Jul 2008 - 11:28)
Problème résolu pour le menu, j'ai rajouté un SPAN au niveau du fichier PHP du menu autours de l'image en question.

Par contre toujours le problème au niveau du javascript qui ne s'affiche pas si je spécifie le DOCTYPE.
J'ai essayé avec le Doctypes HTML 4 Transitionnel mais rien n'y fait, ça marche pas. J'ai comme l'impression que les images partent en arrière plan.
ça marchera si ta page est convertie en HTML 4 : plus de fermeture des tags LINK,META ext...
Modifié par chmel (17 Jul 2008 - 01:51)
chmel a écrit :
ça marchera si ta page est convertie en HTML 4 : plus de fermeture des tags LINK,META ext...


A prioris il veut pas Smiley decu