Menu en cascade ne redimensionne pas le calque conteneur sous firefox

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Menu en cascade ne redimensionne pas le calque conteneur sous firefox

g_bu

Bonjour à tous!

Je devais faire un menu en cascade sans javascript (j'avais déja une fonction javascript pour personaliser des checkbox et à peine un autre code javascript était àjouté, mes checkbox foiraient...). J'ai donc opté pour la solution suivante :

Code :

<div id="un" style="cursor:pointer;display:block"><a href="#" onClick="trois.style.display='block'; deux.style.display='block'; un.style.display='none'">+</a></div>
<div id="deux" style="cursor:pointer;display:none"><a href="#" onClick="trois.style.display='none'; deux.style.display='none'; un.style.display='block'">-</a> </div>
<div id="trois" style="display:none">texte</div>

Est-ce que d'après vous c'est une bonne solution? Elle marche sur IE et Firefox mais marche-t-elle sur les autres navigateurs?

Merci pour vos conseils!

Gaëtan

[EDIT] ce petit exemple de code marche sous firefox... mais pas quand je l'ai mis dans ma page... :??: [/EDIT]

Message édité par g_bu le 02-02-2007 à 11:45:22

Publicité

xtof_83

Freeride Spirit

Code :

onClick="trois.style.display='none'; deux.style.display='none'; un.style.display='block'"

Lol tu appels ça comment ?

Du JS, nonnn il aurait pas osé :whistle:

Donc oui ceci est du JS

Et surement ça marche partout

g_bu

Ouais pardon je me suis mal exprimé... je voulais dire que je ne voulais pas une fonction JS (je crois que c'était window.onload qui faisait foiré!)

Maintenant mon problème c'est que quand j'ai mis ce code dans ma page ça ne marche plus sous firefox.......

g_bu

Sous firefox j'arrive pas à faire marcher mon code qui modifie mes case à cocher et mon truc de cascade...

bon... je vous montre mon code mais je doute que qqun aura le courage de le lire... voici la fonction qui affiche mes formulaire :

Code :

function form($id_form, $langue) {
$tableau = array("a", "b", "c", "d", "e", "f", "g", "h", "i",
"j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v",
"w", "x", "y", "z", "0", "1", "2", "3", "4", "5", "6", "7", "8",
"9" );
$valeurs_aleatoires = array_rand($tableau, 10);
$name_form = "";
foreach($valeurs_aleatoires as $i)
{
$name_form = $name_form . $tableau[$i];
}
include('Connections/conn.php');
$query_Recordset_formulaire = sprintf("SELECT * FROM t_formulaire WHERE(for_lan_id = '$langue' AND for_id = '$id_form')" );
$Recordset_formulaire = mysql_query($query_Recordset_formulaire, $conn) or die(mysql_error());
$row_Recordset_formulaire = mysql_fetch_assoc($Recordset_formulaire);
$totalRows_Recordset_formulaire = mysql_num_rows($Recordset_formulaire);
$query_Recordset_for_act = sprintf("SELECT * FROM t_for_act WHERE for_id = '$id_form'" );
$Recordset_for_act = mysql_query($query_Recordset_for_act, $conn) or die(mysql_error());
$totalRows_Recordset_for_act = mysql_num_rows($Recordset_for_act);
$formulaire = "<blockquote>";
$formulaire .= "<form method='post' name='".$name_form."' action='result.php'>";
$formulaire .= "<p id='NewCB'>";
$formulaire .= "<b>".$row_Recordset_formulaire['for_titre']."</b>";
$formulaire .= "<table border='0' cellspacing='0' cellpadding='0'>";
$i=0;
while($row_Recordset_for_act = mysql_fetch_assoc($Recordset_for_act)){
$i++;
$act_id = $row_Recordset_for_act['act_id'];
$query_activite = mysql_query("SELECT * FROM t_activite WHERE act_id='$act_id' AND act_lan_id = $langue" );
$row_query_activite = mysql_fetch_array($query_activite);
$formulaire .= "<tr><td><label><input type='checkbox' name='id_act[]' value='".$row_query_activite['act_id']."' />".$row_query_activite['act_titre']."</label><br>";
//recherche de sous activité
$req_sous_activite = mysql_query("SELECT * FROM t_sous_activite WHERE acs_act_id = '$act_id' AND acs_lan_id = $langue" );
$total_sous_activite = mysql_num_rows($req_sous_activite);
if($total_sous_activite != 0){
$formulaire .= "<div id='detail".$name_form.$i."' style='display:none;margin-left:25px'>";
while($tab_sous_activite = mysql_fetch_array($req_sous_activite)){
$nom_sous_activite = $tab_sous_activite['acs_titre'];
$formulaire .= "<font color='#535353'>".$nom_sous_activite."</font><br>";
}
$formulaire .= "<br></div>";
}
$formulaire .= "</td><td valign='top'>";
if($total_sous_activite != 0){
$formulaire .= "<div id='plus".$name_form.$i."' style='display:block;margin-left:10px'><a href='#' onClick=\"detail".$name_form.$i.".style.display='block'; moins".$name_form.$i.".style.display='block'; plus".$name_form.$i.".style.display='none'\"><img src='images/images/plus.gif' border='0'></a></div><div><div id='moins".$name_form.$i."' style='display:none;margin-left:10px'><a href='#' onClick=\"detail".$name_form.$i.".style.display='none'; moins".$name_form.$i.".style.display='none'; plus".$name_form.$i.".style.display='block'\"><img src='images/images/minus.gif' border='0'></a></div>";
}
$formulaire .= "</td></tr>";
}
$formulaire .= "</table>";
$formulaire .= "<table border='0' cellspacing='0' cellpadding='0'>
<tr>
<td width='3'><img src='images/submit1.gif' width='3' height='21'></td>
<td background='images/submit2.gif' id='send'><a href='javascript:document.".$name_form.".submit();'> Recherchez votre spécialiste </a></td>
<td width='3'><img src='images/submit3.gif' width='3' height='21'></td>
</tr>
</table>";
$formulaire .= "</p>";
$formulaire .= "</form>";
$formulaire .= "</blockquote>";
echo $formulaire;
}

et voici mon code JS pour modifier l'affichage des checkbox :

Code :

<script language="javascript">
function chgCB(){
ALL = document.getElementsByTagName('p');
for (j=0;j < ALL.length;j++){
CHKB= ALL[j].getElementsByTagName('input');
for(i=0; i < CHKB.length; i++){
if(CHKB[i].type == "checkbox" ){
IMG = document.createElement('img');
CHKB[i].parentNode.insertBefore(IMG, CHKB[i]);
IMG.src = "nocheck.gif";
if(CHKB[i].checked == true) IMG.src = "check.gif";
if(CHKB[i].disabled == true) IMG.src = "nocheck.gif";
else{ // Les comportements de changement d'état ne sont appliqués que si la checkbox est cliquable !
CHKB[i].onchange = function(){
IMG = this.parentNode.getElementsByTagName('img')[0];
if(this.checked == true) IMG.src = 'check.gif'
else IMG.src = 'nocheck.gif'
}
if(!window.sidebar){
CHKB[i].parentNode.onclick = function(){
CHK = this.getElementsByTagName('input')[0];
CHK.checked = (CHK.checked == true) ? false : true;
CHK.onchange()
}
}
}
CHKB[i].style.visibility = "hidden";
CHKB[i].style.position = "absolute";
}
}
}
}
window.onload = chgCB;
</script>

Dès que j'ajoute mes calques pour mon espèce de menu à plusieurs niveaux, mes checkbox ne sont plus modifiée et mon "menu" ne fonctionne pas....... (dans firefox je précise... dans IE tous fonctionne parfaitement!!!)

Message édité par g_bu le 01-02-2007 à 23:21:40

gatsu35

Blablaté par Harko

window.onload = chgCB <== là tu ecrase le window.onload par defaut
de plus le window.onload est systématiquement écrasé par le onload du body s'il y a quelque chose dedans le mieux est d'utiliser les events c'est moins crade. Et via une fonction comme addEvent qui est crossBrowser (oublions IE5 Mac)

Code :

function addEvent( obj, type, fn )
{
if (obj.addEventListener)
obj.addEventListener( type, fn, false );
else if (obj.attachEvent)
{
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
}
}
addEvent(window, "load", chgCB)
addEvent(window, "load", autrefonction)

g_bu

Bon j'ai déjà réussi à refaire marché mes checkbox personalisées. A la ligne 23 (de ma fonction d'affichage de formulaire) j'avais un <p id='NewCb'> je l'ai viré (ainsi que la ligne 59) et à la balise table de la ligne 25 j'ai ajouté id='NewCb'...
Mes checkbox marche mais toujours pas mon menu déroulant... Je vous donne quelques détails: A la ligne 46 je place deux image (un "+" visible dès le départ et un - invisible) Normalement dès que l'on clique sur le + il disparait, le - apparait et le calque que j'affiche de la ligne 37 à 42 devrait également apparaître. Cela ne fonctionne pas sous Firefox...

gatsu35

Blablaté par Harko

On est pas à la carte au trésor ici, tu reposte ton code mais en version généré pas le PHP :fou: :fou: :fou: :fou:

g_bu

ouais c'est ce que j'étais en train de préparer et tester en dehors de ma page... donc voici la partie du code générée par ma fonction php :

Code :

<table border='0' cellspacing='0' cellpadding='0'>
<tr>
<td>
<input type='checkbox' name='ok' value='7' />porte-clés<br>
</td>
<td valign='top'></td>
</tr>
<tr>
<td>
<input type='checkbox' name='ok' value='8' />vide-poche<br>
<div id='detailbgklmnst025' style='display:none;margin-left:25px'><font color='#535353'>Test sous activité</font><br><br></div></td>
<td valign='top'>
<div id='plusbgklmnst025' style='display:block;margin-left:10px'><a href='#' onClick="detailbgklmnst025.style.display='block'; moinsbgklmnst025.style.display='block'; plusbgklmnst025.style.display='none'"><img src='images/images/plus.gif' border='0'></a></div>
<div><div id='moinsbgklmnst025' style='display:none;margin-left:10px'><a href='#' onClick="detailbgklmnst025.style.display='none'; moinsbgklmnst025.style.display='none'; plusbgklmnst025.style.display='block'"><img src='images/images/minus.gif' border='0'></a></div>
</td>
</tr><tr>
<td><input type='checkbox' name='ok' value='9' />interphone<br>
</td><td valign='top'></td>
</tr>
</table>

J'ai copier ça dans une simple page HTML et ça ne marchait toujours pas sous Firefox...
J'ai essayé de virer la première ligne :

Code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

et là ça marche! j'ai tous de suite essayé sur ma page... ça marche également mais les caractères deviennent plus gros et tous se décale... :??:

Quelqu'un à une idée? Merci bcp!

g_bu

Ah j'ai trouvé... enfin presque! Au moins quand je clique sur le plus il se passe qqch. En fait il fallait utiliser le document.getElementById() dans mon onClick... Le problème maintenant c'est que des fois ça marche et des fois pas et après il y a tous qui se décale...

[EDIT]
C'est bon ça marche aussi sous Firefox (j'ai refait un peu mon tableau). :bounce: Mais il reste tout de même un problème :
Mon tableau avec ces menus en cascade se trouve dans un calque conteneur. Lorsque j'ouvre mes cascades, Firefox ajoute une scroll à mon calque au lieux de l'agrandir... Est-ce que quelqu'un à une idée pour qu'il s'agrandisse au lieux d'ajouter une scroll? Aucune hauteur (height) n'est déclarée pour ce calque conteneur!
Si quelqu'un à une proposition je suis preneur!
Merci à tous!!!
[/EDIT]

Message édité par g_bu le 03-02-2007 à 23:17:35

ultratoonz

Salut,

Tu peux me rappeler où tu as pris le script de personnalisation des checkbox s'il te plaît ?

---------------
Consultant SEO

Publicité

FlorentG

'tain le code PHP [:johneh] Dix balles qu'on peut le rendre 50 fois plus rapide Avec un peu d'output buffering pour la concaténation de fou. Et en mettant de joli CSS dans un _fichier_... Et faire le JS de manière non-obstrusive

FORUM HardWare.fr

Programmation

HTML/CSS

Menu en cascade ne redimensionne pas le calque conteneur sous firefox

Sujets relatifs
IE7 ok Firefox probleme (css)	Firefox OK, Internet Explorer Problème
Js compatibilite IE / firefox	Photos s'affichent dans firefox, mais pas dans IE
menu + pseudo frame	Bug sous firefox ?
Menu déroulant	Pb affichage css sous Firefox mais marche sous IE
Top Navigational Bar II sous Mozilla firefox	[Réglé]Menu déroulant
Plus de sujets relatifs à : Menu en cascade ne redimensionne pas le calque conteneur sous firefox

Page générée en 0.097 secondes