11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLU] Css et javascript capricieux

Bonjour,

J'ai un problème de css et de javascript. La fonction fonctionne (-_-') parfaitement sous opera, mais pas du tout sous IE et mozilla, où elle ne fait strictement rien.

Voici les codes:

html 
<a href='#' onclick=\javascript:annexes();">Module d'annexes</a><br />
<span class='annexes' id='annexes' style='display:none;'>contenu</span>



javascript: 
function annexes(){
	var doc=document.getElementById('annexes');
	if(doc.style.display=='none'){
		doc.style.display='block';
	}else if(doc.style.display=='block'){
		doc.style.display='none';
	}
}



Voilà, j'espère que quelqu'un pourra m'aider. J'ai déjà vu ce système fonctionner ailleurs, il n'y a pas de raison que ça ne le fasse pas ici. J'ai aussi exploré d'autres façons de faire, telle l'accès aux css via javascript (document.styleSheet), mais sans aucun succès. J'ai cru pouvoir le faire avec visibility, mais ça marche encore moins^^ je suis donc ouvert à toutes suggestions^^

Cordialement,

Smoke
Modifié par Smoke (30 Jan 2009 - 22:05)
Bonjour, ce code la marchera certainement mieux :

<a href="#" onclick="annexes()">Module d'annexes</a><br />
<span class="annexes" id="annexes" style="display:none;">contenu</span>
Bonjour, et merci de ton intervention, je commençais à désespérer Smiley smile

Après essais, je me rends compte que ta proposition ne fonctionne pas^^

Cette portion de code est include dans du php, donc j'ai fait les modifications adéquates, mais rien n'y fait :s
voici Smiley smile (en principe c'est bien mis en forme, enfin en tous les cas j'fais attention quand j'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=iso-8859-1" />
<title></title>
<link rel='stylesheet' type='text/css' href='style.css'/>
<script type='text/javascript' src='loadInst.js'/>
<script type='text/javascript'>
function deroll(id){
	document.getElementById(id).className='develop';
}
function annexes(){
	var doc=document.getElementById('annexes');
		if(doc.style.display=='none'){
			doc.style.display='block';
		}else if(doc.style.display=='block'){
			doc.style.display='none';
		}
}
</script>
</head>
<body>
<div id='cartouche'>
	
	<div id='head'>
	<p class='catchLyric'>Je garde le buste droit, la tête sur les épaules...</p>
		<p class='analyse'>
		</p>
	</div>
		<div id='menu'>
			<ul>
				<li><a href='?trigger=menu&tinyTrigger=addMenu'>Menu</a></li>
				<li><a href='?trigger=news&tinyTrigger=addNews'>News</a></li>
				<li><a href='?trigger=pages&tinyTrigger=modiPages'>Pages</a></li>
			</ul>
		</div>
			<div id='contenu'>
				<div id='contenter'>
					<ul id='menuContenter'>
						<li><a href='?trigger=pages&tinyTrigger=modiPages'>Modifier une page</a></li>
						<li>Supprimer une page</li>
					</ul><p id='contenterFormed'>
							<form action='' method='post'/>
								<p class='bckTitre'>Modifier une page</p>
								<p ckass='bckTexte'>Voici tes cibles, jedi:<br /><br />
								<span class='eachPage'>
									<label>Titre: <input type='text' name='MP[011d9f][]' value='Accueil'/></label>
									<select name='MP[011d9f][]' style='width:5em;'>
										<option value='c44f58' style='background-color:#c44f58'></option>
										<option value='ffbb00' style='background-color:#ffbb00'></option>
										<option value='2222ff' style='background-color:#2222ff' selected></option>
									</select><br />
									<label>Texte:<textarea class='textContenter' name='MP[011d9f][]'>Texte d'accueil modifié.</textarea><br />
									<label>En cours d'édition: <input type='radio' name='MP[011d9f][]' value="en cours d'édition" checked /></label>
									<label>En ligne: <input type='radio' name='MP[011d9f][]' value='en ligne' /></label><br /><br />
									<label>Mots-clefs:<textarea name='MP[011d9f][]'>Première page de test, test couleurs modifiées,</textarea></label>
									<input type='hidden' value='011d9f' name='MP[011d9f][]'/><br />
									
									<a href='#' onclick='annexes()'>Module d'annexes</a><br />
									<span class='annexes' id='annexes' style='display:none;'>
									<label>Miniature n°1: <input type='file' name='annexe[1][mini]'/></label>
									<label>Image n°1: <input type='file' name='annexe[1][img]'/></label><br/>
									<label>Miniature n°2: <input type='file' name='annexe[2][mini]'/></label>
									<label>Image n°2: <input type='file' name='annexe[2][img]'/></label><br/>
									<label>Miniature n°3: <input type='file' name='annexe[3][mini]'/></label>
									<label>Image n°3: <input type='file' name='annexe[3][img]'/></label><br/>
									<label>Miniature n°4: <input type='file' name='annexe[4][mini]'/></label>
									<label>Image n°4: <input type='file' name='annexe[4][img]'/></label><br/>
									</span>
								</span>
							<br /><input type='submit'/>
								</p>
							</form>
</p>
</span>
</div>		</div>
	<div id='foot'>
		footer
	</div>
</div>
</body>
</html>
Je n'arrive pas à y voir plus clair, mais est-ce que la class="annexes" et l'id ne t'embeterais pas dans ton code ?

Sinon, solution paliative, connais Jquery ?
Le problème vient de la balise script juste au dessus, elle doit etre fermée comme ça :
<script type='text/javascript' src='loadInst.js'></script>
et non pas avec la forme courte.
Merci messieurs Smiley lol

En effet, en fermant la balise script avec la forme longue, ça fonctionne^^ (d'ailleurs, quelle est la bonne façon de fermer ces balises là? parce que IE n'est pas forcément une référence de respect des standards^^)

Je connais Jscript de nom, je ne sais pas utiliser les librairies javascript par contre^^

Sinon, même si ça n'a plus d'utilité, la classe et l'id étaient fiables Smiley cligne

Merci encore et bonne soirée! ^^
Je pensais juste aux même "nom" pour une class et ID, je ne sais pas pourquoi, mais j'ai jamais utilisé parce que ... enfin j'en sais rien !

Le principal est que ton problème est résolu !
mdr je cherchais justement comment noter ça^^ très habile ta façon de me le dire Smiley cligne

je n'ai jamais eu de problèmes avec ce type de notation, les choses étant plutôt claires dans une feuille css ^^
Sujet clos
Aller à