11528 sujets

JavaScript, DOM et API Web HTML5

Probleme javascript dans une balise <div id=

Pages :
Bonjour à tous

je débute en css. J'ai acheté le livre CSS2 d'Alsacréations qui est vraiment formidable et très clair dans ses explications. Bravo à son auteur !

Je suis en train de refaire mon site perso sans utiliser les balises de tableaux qui devenaient un casse-tête à chaque modif pour passer aux feuilles de styles. Quel régal !!!

Oui mais voilà, j'ai un petit soucis que les balaises en css et html pourront certainement m'expliquer : enfin j'espère !

Voilà :
J'ai un javascript qui m'affiche l'heure du jour, un javascript tout bête qui fonctionne très bien et qui m'affiche par exemple :
Mardi 22 janvier 2008

jusqu'à présent, j'appelais mon script mis dans un fichier .js après la balise <body> en mettant :
<script type='text/javascript' src='date.js'></script>

Maintenant que je me sers des CSS, le script ne veut pas m'afficher l'heure.

Voilà le bout de code html :

<div id="cadreG">
<script type='text/javascript' src='date.js'></script>
</div>


et voilà le code css mis dans un fichier styles.css :

#cadreG {
position:absolute;
margin-top: 145px;
width:230px;
height : 600px;
background-color : #ffcc00;
}


l'id cadreG me sert à placer sur la gauche un "cadre" dans lequel je voudrais mettre des infos comme la date du jour etc...
Mais rien ne s'affiche de mon script. Pourtant, il fonctionne.

Pourriez-vous m'aider s'il vous plaît ?
Je vous remercie tous d'avance pour votre aide et tous les contibuteurs dans les autres messages qui nous apprennent énormément nous les débutants !!
Une première qui ne vas pas forcément résoudre le problème, il est mieux de mettre des double quotes " " pour entourer les valeurs des champs (donc language="text/javascript" par exemple).
Ensuite, je me demande pourquoi ne pas mettre le contenu du script qui affiche l'heure dans cette balise <script> ?
Que contient ton date.js ? Avec son contenu, il sera plus facile de te répondre Smiley cligne
Re bonjour ou Bonsoir
voici le contenu du fichier date.js.
Si j'ai mis le code dans un ficheir date.js, c'est pour pouvoir l'utiliser dans d'autres pages et alléger ainsi un peu le code.


var datedujour, date, mois, mois1, jour, jour1, an;
datedujour = new Date();
jour = datedujour.getDay()
switch(jour){
case 1 :
jour1 ="Lundi"
break;
case 2 :
jour1 ="Mardi"
break;
case 3 :
jour1 ="Mercredi"
break;
case 4 :
jour1 ="Jeudi"
break;
case 5 :
jour1 ="Vendredi"
break;
case 6 :
jour1 ="Samedi"
break;
case 0 :
jour1 ="Dimanche"
break;
}
date = datedujour.getDate()
mois = datedujour.getMonth()
switch(mois+1){
case 1 :
mois1 ="Janvier"
break;
case 2 :
mois1 ="Février"
break;
case 3 :
mois1 ="Mars"
break;
case 4 :
mois1 ="Avril"
break;
case 5 :
mois1 ="Mai"
break;
case 6 :
mois1 ="Juin"
break;
case 7 :
mois1 ="Juillet"
break;
case 8 :
mois1 ="Août"
break;
case 9 :
mois1 ="Septembre"
break;
case 10 :
mois1 ="Octobre"
break;
case 11 :
mois1 ="Novembre"
break;
case 12 :
mois1 ="Décembre"
break;
}
an = datedujour.getFullYear()
document.write(jour1, " ");
document.write(date, " ");
document.write(mois1 , " ");
document.write(an, " ");
re
oui le fichier date.js est bien dans le même dossier que le fichier html.

Ce qui est dingue, c'est que le javascript fonctionne très bien sur une page sans balise div id mais avec la balise id et les propriétés dans le .css, ça marche pas.... Smiley decu
ton css utilise la position absolute.... je sais pas si ce sera cela.

mais ayant eu le cas y a pas si longtemps ton div s'affiche t il bien ou tu crois?.

peut-être que l'heure est affiché mais qu'elle est caché par une autre div ou une image.

PS: pense a utiliser les balises de mise en forme de code. qui sont dispo en dessous des smiley quand on edite le texte. c'est bien plus lisible.
Modifié par CPascal (22 Jan 2008 - 22:40)
Ce que tu peux aussi essayer de faire, c'est de créer une textNode et l'ajouter à ton div

function getElement(rid) {
         return document.getElementById ? document.getElementById(rid) : document.all(rid) ;
}
var div_cadre = getElement('cadreG') ;
var date_ecrite = document.createTextNode(jour1+" "+date+" "+mois1+" "+an) ;
div_cadre.appendChild(date_ecrite) ;

Sinon oui, essaye de voir si ton div est bien affiché où tu penses (ajoute lui une bordure par exemple pour bien le repérer)

<!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" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>SISPEO</title>
<link rel="shortcut icon" href="sispeo.ico">


<link rel='stylesheet' type='text/css' href='css/general.css'/>
<link rel='stylesheet' type='text/css' href='menu.css'/>

<script type='text/javascript' src='menu.js'></script>

</head>


voici le doctype de mon fichier html mais avec ou sans, ça ne change rien.

Concernant mon div, j'ai appliqué dessus une couleur de fond "orangée" pour bien repérer sa position et j'ai ajouté *** pour voir où s'affichait le texte et les 3* s'affichent bien mais pas ma date. Smiley ohwell
Re
voici le code complet de la page html :


<!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" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>SISPEO</title>
<link rel="shortcut icon" href="sispeo.ico">


<link rel='stylesheet' type='text/css' href='css/general.css'/>
<link rel='stylesheet' type='text/css' href='menu.css'/>

<script type='text/javascript' src='menu.js'></script>



</head>


<body>


<div id="cartouche">
<iframe name="fenetre_vigilance" valign="top" scrolling="NO" marginwidth="0" marginheight="0" frameborder="NO" border="0" framespacing="0" width="71" height="70" src="vigilance/carte_vigilance.htm"></iframe>
</div>



<div id="cadreG">
***
<script type='text/javascript' src='bib_js/date.js'></script>

</div>


<div id="cadreC">
<img src="http://chambord622/sispeo/preisos/analyse.php" width=300 height=240>


</div>



<div id="cadreD">
***Cadre de Droite***
</div>

<div id="cadre_pied2page">
© 2006-2008 Site perso de MicroPhilou
</div>


<div id="menu">
<script type='text/javascript' src='bib_js/maj.js'></script>

etc.... liste de balises <ul> et <li> qui représentent le menu..


<!-- fin du div du bloc menu --> </div>
</body>
</html>



Je m'arrache les cheveux à n'y rien comprendre Smiley biggol

Ca me bloque tout car si je n'arrive pas à insérrer mes javascripts dans mes div, je ne peux pas continuer.

En tout cas, je vous remercie très sincèrement d'essayer de m'aider et merci déjà pour vos réponses.
J'ai mis en image, une copie des cadres qui s'affichent à l'écran.

la balise div id=CadreG (cadre de Gauche) est orangée avec *** mais après il devrait y avoir la date et elle ne s'affiche pas.

upload/15511-Clipboard.jpg
re

petite info, j'ai changé le contenu du fichier date.js en le remplaçant par :



<!-- JavaScript 1.0
var months=new Array(13);
months[1]="Janvier";
months[2]="F&eacute;vrier";
months[3]="Mars";
months[4]="Avril";
months[5]="Mai";
months[6]="Juin";
months[7]="Juillet";
months[8]="Ao&ucirc;t";
months[9]="Septembre";
months[10]="Octobre";
months[11]="Novembre";
months[12]="D&eacute;cembre";
var time=new Date();
var lmonth=months[time.getMonth() + 1];
var date=time.getDate();
var year=time.getYear();
// Y2K Fix by Isaac Powell
//  http://onyx.idbsu.edu/~ipowell
 
if ((navigator.appName == "Microsoft Internet Explorer") && (year < 2000))		
year="19" + year;
if (navigator.appName == "Netscape")
year=1900 + year;
document.write(date);
if (date == 1)
	document.write("er");
document.write(" " + lmonth + " " + year);
//-->



avec ce code, ça marche Smiley murf mais ça ne résoud pas le problème de manière générale car tous les autres javascripts que j'utilise ne marchent toujours pas.

Chose étonnante également : au lieu d'appeler le javascript, si j'écris tout le code à l'intérieur de la balise div, là aussi ça marche.

Si vous avez des idées , merci beaucoup car je rame grave ! Smiley bawling
ce qui est bizarre c'est quand reprenant des bout de ton code je l'ai vu marché ce code.


avec le js que tu avais donné dans le premier post où y a du js

et ceci dans un fichier date.js.

est - tu sur d'avoir pas un probleme des chemins menant au js? je l'ai vu fonctionner en mettant le date.js au même niveau que la page et faisant un

 <div id="cadreG">
***
<script type='text/javascript' src='date.js'></script>

</div>


en tous cas c'est pas une impossibilité technique qui t'oblige a écrire le source dans le div.
Modifié par CPascal (23 Jan 2008 - 12:15)
Il ne faut pas oublier pour le xhtml 1 strict de mettre des " au lieu des ' pour entourer les attributs de balise
<script type="text/javascript" src="date.js"></script>

Sinon, as-tu une erreur dans la console sous firefox ?
Tsukaniki a écrit :
Il ne faut pas oublier pour le xhtml 1 strict de mettre des " au lieu des ' pour entourer les attributs de balise
<script type="text/javascript" src="date.js"></script>


Gné ?

<edit>C'est la seconde fois que je vois passer ça cette semaine, sur deux canaux complètement différents. Assistons-nous à la naissance d'une nouvelle légende urbaine ? Smiley ravi
</>
Modifié par Laurent Denis (23 Jan 2008 - 13:13)
Si il veut faire du strict, il vaut mieux qu'il signale ses attributs correctement... Ce n'est pas ce qui va faire planter son script (ni une éventuelle validation xhtml) mais c'est mieux écrit comme ça Smiley smile

a écrit :
<edit>C'est la seconde fois que je vois passer ça cette semaine, sur deux canaux complètement différents. Assistons-nous à la naissance d'une nouvelle légende urbaine ? ravi
</>

Si c'est le cas, cette légende urbaine circule alors depuis bien longtemps, j'ai toujours appris comme ça et on m'a toujours repris dans ce sens Smiley cligne
Modifié par Tsukaniki (23 Jan 2008 - 13:22)
Tsukaniki a écrit :
mais c'est mieux écrit comme ça Smiley smile



Non.

Merci de ne pas inventer de contraintes syntaxiques supplémentaires Smiley cligne

<edit>Pardon, je rectifie: tu ne l'as pas inventé, mais ceux qui te l'ont appris se trompent. Et créent des probèmes là où il n'y en a aucun. Ce qui est beaucoup plus agaçant Smiley cligne

En revanche, une bonne pratique de codage évidente invite à ne pas mêler attributs à guillemets simples et attributs à guillemets doubles dans le même traitement. Ce qui n'a rien à voir.

</>
Modifié par Laurent Denis (23 Jan 2008 - 13:29)
Laurent Denis a écrit :

En revanche, une bonne pratique de codage évidente invite à ne pas mêler attributs à guillemets simples et attributs à guillemets doubles dans le même traitement. Ce qui n'a rien à voir.

C'est ce que je voulais dire par mieux écrit comme ça... Maintenant niveau contrainte syntaxique j'ai été le premier étonné que ça n'en soit pas une justement... M'enfin, ce n'est pas du tout le sujet...
Tsukaniki a écrit :
Il ne faut pas oublier pour le xhtml 1 strict de mettre des " au lieu des ' pour entourer les attributs de balise
<script type="text/javascript" src="date.js"></script>

Sinon, as-tu une erreur dans la console sous firefox ?



bonjour
je viens de tester ma page sous Firefox et ôh surprise !!! ça marche !!!!
Smiley langue
C'est donc ce Smiley fache grrrr Smiley fache d'IE qui ne gère pas correctement les javascripts lorsqu'ils sont dans des div id ??

Merci pour vos prochaines réponses si vous avez des idées.
Je suis rassuré de voir que le script fonctionne mais y aurait-il moyen de faire en sorte que ça marche quelque soit le navigateur ???

Merci en tout de votre aide Smiley biggrin
Bin alors même question mais pour IE, as-tu un erreur sur la page ? Firefox ne te retourne vraiment aucune erreur (Outils -> Console d'erreur) ? As-tu essayé d'ajouter un textNode au lieu de faire un document.write ?
Re',

ça marcherait sûrement mieux en fermant correctement la balise <link rel="shortcut icon" href="sispeo.ico"/>

D'autre part ton DOCTYPE est invalide si tu utilises une iframe : il te faudrait
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

A+
Pages :
Sujet clos
Aller à