Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
546 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [javascript/css] Pb bordures tableau dessinées sous IE

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[javascript/css] Pb bordures tableau dessinées sous IE

n°1095364
Pwill
Deux fois Né
Posté le 24-05-2005 à 17:53:51  profilanswer
 

Bonjour !
 
J'ai un problème d'affichage au niveau des bordures de tableau.
J'ai 4 tableaux (dans une cellule d'un autre tableau). Chacun de ces 4 tableaux contient un bout de formulaire.
J'aimerais que lorsque l'utilisateur clique sur un champ, les bordures du tableau/formulaire correspondant apparaissent.
 
Je m'y prend ainsi:
 
- bout du fichier scripts.js
 

Code :
  1. var lastFocus;
  2. function setFocus(param){
  4. // si ya un numéro de tableau dans lastFocus, alors ses bordures ne s'affichent plus
  5. switch (lastFocus)
  6. {
  7.  case '1' :
  8.   document.getElementById("tabForm1" ).style.borderStyle = "hidden";
  9.   break;
  10.  case '2' :
  11.   document.getElementById("tabForm2" ).style.borderStyle = "hidden";
  12.   break;
  13.  case '3' :
  14.   document.getElementById("tabForm3" ).style.borderStyle = "hidden";
  15.   break;
  16.  case '4' :
  17.   document.getElementById("tabForm4" ).style.borderStyle = "hidden";
  18.   break;
  19.  default:
  20.   break;
  21. }
  23. lastFocus = param; // Mémorise le numéro de tableau où le champ a été cliqué
  25. // ici on fait apparaitre les bordures d'un tableau en fonction du champs ou l'utilisateur a cliqué
  26. switch (param)
  27. {
  28.  case '1' :
  29.   document.getElementById("tabForm1" ).style.borderStyle = "solid";
  30.   document.getElementById("tabForm1" ).style.borderColor = "#FF6633";
  31.   break;
  32.  case '2' :
  33.   document.getElementById("tabForm2" ).style.borderStyle = "solid";
  34.   document.getElementById("tabForm2" ).style.borderColor = "#FF6633";
  35.   break;
  36.  case '3' :
  37.   document.getElementById("tabForm3" ).style.borderStyle = "solid";
  38.   document.getElementById("tabForm3" ).style.borderColor = "#FF6633";
  39.   break;
  40.  case '4' :
  41.   document.getElementById("tabForm4" ).style.borderStyle = "solid";
  42.   document.getElementById("tabForm4" ).style.borderColor = "#FF6633";
  43.   break;
  44.  default:
  45.   document.getElementById("tabForm1" ).style.borderStyle = "solid";
  46.   document.getElementById("tabForm1" ).style.borderColor = "#FF6633";


 
- code css d'un tableau:
 

Code :
  1. .tableScenario {
  2. font-family: Arial, Helvetica, sans-serif;
  3. font-size: 12px;
  4. color: #444444;
  5. border-style: solid;
  6. border-top: hidden;
  7. border-bottom: hidden;
  8. border-left: hidden;
  9. border-right: hidden;
  10. padding-top: 15px;
  11. width: 160px;
  12. }


 
Sur Firefox ca marche très bien, le moindre clic affiche les bordures du tableau correspondant.
Sous IE, chaque clic affiche les bordures, seulement elles ne sont pas prédessinées, et à chaque clique les champs des tableaux "bougent".
Comment empêcher cela ?
 
Merci d'avance !


Message édité par Pwill le 24-05-2005 à 17:55:18
mood
Publicité
Posté le 24-05-2005 à 17:53:51  profilanswer
 

n°1095378
gatsusat
Posté le 24-05-2005 à 18:00:00  profilanswer
 

ton script corrigé :  
 

Code :
  1. var lastFocus;
  3. function setFocus(param){
  4. // si ya un numéro de tableau dans lastFocus, alors ses bordures ne s'affichent plus  
  5. document.getElementById("tabForm1"+lastFocus).style.borderStyle = "hidden";
  7. lastFocus = param; // Mémorise le numéro de tableau où le champ a été cliqué  
  9. // ici on fait apparaitre les bordures d'un tableau en fonction du champs ou l'utilisateur a cliqué  
  10. document.getElementById("tabForm" + param).style.borderStyle = "solid";
  11. document.getElementById("tabForm" + param).style.borderColor = "#FF6633";
  12. document.getElementById("tabForm" + param).style.borderWidth = "1px";
  13. }


 
et ton style :  
 

Code :
  1. .tableScenario {
  2.     font-family: Arial, Helvetica, sans-serif;
  3.     font-size: 12px;
  4.     color: #444444;
  5.     border: none;
  6.     padding-top: 15px;
  7.     width: 160px;
  8. }

n°1095380
gatsusat
Posté le 24-05-2005 à 18:00:48  profilanswer
 

essaye ca déjà, ensuite on verra

n°1095933
Pwill
Deux fois Né
Posté le 25-05-2005 à 09:22:38  profilanswer
 

Je te remercie j'essaye ca  ;)

n°1095952
Spir
Words are timeless
Posté le 25-05-2005 à 09:32:15  profilanswer
 

Vive le tabless!
Faut arrêter avec les tableaux!
 
-> une remarque qui n'aide pas mais bon...

n°1096007
Pwill
Deux fois Né
Posté le 25-05-2005 à 10:02:46  profilanswer
 

Oui j'attendais la remarque, si j'ai du temps je reprends tout sans...

n°1096023
gatsusat
Posté le 25-05-2005 à 10:09:31  profilanswer
 

bah si c'est pour afficher des données tabulaires, il faut mieux avoir un tableau. Mais sinon, ben c'est clair ke ca ne sert à rien

n°1096059
Pwill
Deux fois Né
Posté le 25-05-2005 à 10:25:09  profilanswer
 

Code :
  1. .tableScenario { 
  2.      font-family: Arial, Helvetica, sans-serif; 
  3.      font-size: 12px; 
  4.      color: #444444; 
  5.      border: none;
  6.       border-width: 1px;
  7.      padding-top: 15px; 
  8.      width: 160px; 
  9. }


 

Code :
  1. function setFocus(param){
  2.   try {
  3.   document.getElementById("tabForm" + lastFocus).style.borderStyle = "none";
  4.   }
  5.   catch (ex){
  6.   };
  7.   lastFocus = param;
  8.   document.getElementById("tabForm" + param).style.borderStyle = "solid";
  9.   document.getElementById("tabForm" + param).style.borderColor = "#FF6633";
  10.   document.getElementById("tabForm" + param).style.borderWidth = "1px";
  12. }


 
Ca passe bien sour FireFox, seulement sous IE j'ai toujours ce problème de tableaux qui bougent lorsque les bordures apparaissent.
Ils ne sont pas prédessinés j'ai l'impression.

n°1096061
FlorentG
Unité de Masse
Posté le 25-05-2005 à 10:27:21  profilanswer
 

Faut dans le style mettre ça :

Code :
  1. .tableScenario {
  2. [...]
  3.   border: 1px solid #fff; // Remplacer #fff par couleur du fond
  4. }


Puis le script :

Code :
  1. function setFocus(param){
  2.   try {
  3.     document.getElementById("tabForm" + lastFocus).style.borderColor = "#fff"; // Couleur du fond de nouveau
  4.   } catch (ex){
  5.   };
  6.   lastFocus = param;
  7.   document.getElementById("tabForm" + param).style.borderColor = "#f63";
  8. }


Message édité par FlorentG le 25-05-2005 à 10:27:34
n°1096072
Pwill
Deux fois Né
Posté le 25-05-2005 à 10:31:42  profilanswer
 

Ca peut être une solution, je la teste.
Mais none et hidden ca sert à quoi ?  
Je pensais que hidden prévoyait la place pour l'objet sans l'afficher. :??:

mood
Publicité
Posté le 25-05-2005 à 10:31:42  profilanswer
 

n°1096078
Pwill
Deux fois Né
Posté le 25-05-2005 à 10:34:54  profilanswer
 

Effectivement elle marche à l'identique sur les deux navigateurs, merci Florent ;)

n°1096080
gatsusat
Posté le 25-05-2005 à 10:35:27  profilanswer
 

edit : grilled
 
salauddd FlorentG
 
/me sort la pelle à clous


Message édité par gatsusat le 25-05-2005 à 10:36:18
n°1096084
FlorentG
Unité de Masse
Posté le 25-05-2005 à 10:37:59  profilanswer
 

Celle-là : [:florentg] ? :D

n°1096128
gatsusat
Posté le 25-05-2005 à 10:54:51  profilanswer
 

ouais je la veut


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

  [javascript/css] Pb bordures tableau dessinées sous IE

 

Sujets relatifs
[RESOLU][Javascript] Mise en page compliquée :)Pb javascript, iframe et firefox
[Javascript] Modifier du texte en cliquant une checkbox[Javascript]remplacer document.all par document.getElementbyID
supression d'un element de tableauRéinitialisation d'un tableau !
[javascript] desactiver un onsubmit en cochant une case (formulaire)[JavaScript] Grammaire BNF
rendre une cellule de tableau cliquable ?[reglé]probleme à la con : bordure de tableau
Plus de sujets relatifs à : [javascript/css] Pb bordures tableau dessinées sous IE

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.077 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR