je cherche a refaire l'affichage de ce tableau

Fr.eddoZ · Message par **Fr.eddoZ** » 10 juil. 2004, 08:18

Bonjour je trouve l'affichage de ce forum tres sympa !

J'ai un peu regardé les sources et c'est le onmouseover sur le <tr> que je trouve cool !

il fait appelle a un javascript : highlightRow que j'ai regardé mais je pige pas trop. si j'ai bien compris il switch la class css sur le mousseover mais ou est déterminé la class ???

j'suis un brin paumé, un pitit coup de main ?

Merci, bon dev a tous !

Fred

Fr.eddoZ · Message par **Fr.eddoZ** » 10 juil. 2004, 12:29

Je vous met le code que j'ai recup ça sera peu etre plus parlant ...
vive l'open source

Voila le code sur le <tr> :

<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">

Le javascript appellé (enfin il me semble ... )

<script language="javascript">
function highlightRow(row, onFlag) {
var tdNodes = row.childNodes;
for (var i=0; i<tdNodes.length; i++) {
var tdNode = tdNodes;
if (tdNode.nodeType != 3) { // type 3 => #text
if (onFlag) {
tdNode.className = tdNode.className + "over";
} else {
var overPos = tdNode.className.indexOf("over");
tdNode.className = tdNode.className.substring(0,tdNode.className.length-overPos);
}
}
}
}
</script>
Le code html :

<table width="515" border="1" cellspacing="0" cellpadding="0">
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
<td><p>test</p></td>
<td> </td>
<td> </td>
</tr>
</table>

mais ça marche pas me manque un truc ... et je trouve po ...

help ???

Fr.eddoZ · Message par **Fr.eddoZ** » 10 juil. 2004, 13:03

En relisant peut etre que vous voyez pas de quel tableau je veux parler c'est celui des recap de ce forum :

http://www.geckozone.org/forum/viewforum.php?f=8

Voila ... le webmaster du site n'est pas dans le coin ?

Allez bon we a tous

Fred

jv2759 · Message par **jv2759** » 10 juil. 2004, 13:03

la class c'est un style, donc cherche les balise style. Et eventuelement les fichier css...

Invité · Message par **Invité** » 10 juil. 2004, 13:40

Salut jv 2759 je suis de nimes ....

ouai j'ai regarder la feuile de style mais je comprend pas le javascript donc ... ça coince !!

personne n'utilise ce genre de script pour faire un roll over sur un <tr> ? snif

jv2759 · Message par **jv2759** » 10 juil. 2004, 14:13

tu peux à mon avie récupérer le javascripte comme il est sans y toucher.

Je tes isoler parti des css utiliser. tu ajoute simplement cela dans ta pages.
Le principe c'est qu'au demarage il utilise le style row1 tout court qui affiche un fond en eff3f9, et une fois que tu tu passe dessu il change le style en row1over avec comme couleur e0e8f2...

Code : Tout sélectionner

<style>
.row1, .row1Poster {
	background: #eff3f9;
	border-top: 1px solid #eff3f9;
	border-bottom: 1px solid #eff3f9;
}
.row2, .row2Poster, .helpline {
	background: #e0e8f2;
	border-top: 1px solid #e0e8f2;
	border-bottom: 1px solid #e0e8f2;
}
.row1Poster, .row2Poster {
	border-right: 1px solid #2e62aa;
}
.row3 {
	background: #cedcec;
	border-top: 1px solid #cedcec;
	border-bottom: 1px solid #cedcec;
}
/****************** Row highlighting ********************/
.row1over, .row2over, .row3over {
	background-color: #e0e8f2;
	border-top: 1px solid #2e62aa;
	border-bottom: 1px solid #2e62aa;
}</style>

Fr.eddoZ · Message par **Fr.eddoZ** » 10 juil. 2004, 14:36

Voila le code de ma page de test ... mon editeur voit une erreur au niveau du mousseover ... il doit y avoir un chemin dans le javascript que je vois pas !

quand ça veut pas ...

Merci en tout cas pour ton coup de main

Code : Tout sélectionner


<!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>Test</title>
<script language="javascript">
function highlightRow(row, onFlag) {
	var tdNodes = row.childNodes;
	for (var i=0; i<tdNodes.length; i++) {
		var tdNode = tdNodes[i];
		if (tdNode.nodeType != 3) { // type 3 => #text
			if (onFlag) {
				tdNode.className = tdNode.className + "over";
			} else {
				var overPos = tdNode.className.indexOf("over");
				tdNode.className = tdNode.className.substring(0,tdNode.className.length-overPos);
			}
		}
	}
}
</script>
<style>
.row1, .row1Poster {
   background: #eff3f9;
   border-top: 1px solid #eff3f9;
   border-bottom: 1px solid #eff3f9;
}
.row2, .row2Poster, .helpline {
   background: #e0e8f2;
   border-top: 1px solid #e0e8f2;
   border-bottom: 1px solid #e0e8f2;
}
.row1Poster, .row2Poster {
   border-right: 1px solid #2e62aa;
}
.row3 {
   background: #cedcec;
   border-top: 1px solid #cedcec;
   border-bottom: 1px solid #cedcec;
}
/****************** Row highlighting ********************/
.row1over, .row2over, .row3over {
   background-color: #e0e8f2;
   border-top: 1px solid #2e62aa;
   border-bottom: 1px solid #2e62aa;
}</style>
</head>
<body>
<table width="515" border="1" cellspacing="0" cellpadding="0">
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
    <td><p>test</p></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

jv2759 · Message par **jv2759** » 10 juil. 2004, 14:54

tien j'ai un peux modifier ton scripte.

En fait tu avait oublier de mettre les class en celulle :

Code : Tout sélectionner

<!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>Test</title>
<script language="javascript">
function highlightRow(row, onFlag) {
   var tdNodes = row.childNodes;
   for (var i=0; i<tdNodes.length; i++) {
      var tdNode = tdNodes[i];
      if (tdNode.nodeType != 3) { 
         if (onFlag) {
            tdNode.className = tdNode.className + "over";
         } else {
            var overPos = tdNode.className.indexOf("over");
            tdNode.className = tdNode.className.substring(0,tdNode.className.length-overPos);
         }
      }
   }
}
</script>
<style>
.tableaux {
   background: #eff3f9;
   border: 1px solid #2e62aa;
}
.row1 {
   background: #eff3f9;
   border-top: 1px solid #eff3f9;
   border-bottom: 1px solid #eff3f9;
}
.row2 {
   background: #e0e8f2;
   border-top: 1px solid #e0e8f2;
   border-bottom: 1px solid #e0e8f2;
}
.row3 {
   background: #cedcec;
   border-top: 1px solid #cedcec;
   border-bottom: 1px solid #cedcec;
}
/****************** Row highlighting ********************/
.row1over, .row2over, .row3over {
   background-color: #e0e8f2;
   border-top: 1px solid #2e62aa;
   border-bottom: 1px solid #2e62aa;
}</style>
</head>
<body>
<table class="tableaux" width="515" cellspacing="0" cellpadding="0">
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
    <td class="row1"><p>test1</p></td>
    <td class="row2">&nbsp;</td>
    <td class="row3">&nbsp;</td>
</tr>
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
    <td class="row1"><p>test2</p></td>
    <td class="row2">&nbsp;</td>
    <td class="row3">&nbsp;</td>
</tr>
<tr onmouseover="highlightRow(this, true);" onmouseout="highlightRow(this, false);">
    <td class="row1"><p>test3</p></td>
    <td class="row2">&nbsp;</td>
    <td class="row3">&nbsp;</td>
</tr>
</table>
</body>
</html>

Tu peux utiliser cela en base et faire les modif que tu veux...

Fr.eddoZ · Message par **Fr.eddoZ** » 10 juil. 2004, 17:26

ouai maintenant comme ça cela parait evident !!!!

Merci beaucoup vraiment c'est super cool !! je vais en abuser !!!!

bonne continuation

@+ Fred

jv2759 · Message par **jv2759** » 10 juil. 2004, 17:32

Mais c'est évident, c'est toujours évident;)

Abuse tout de même pas trop car si à chaque fois que l'on vas sur ton site cela clignote dans tout les sence quand on passe la sourie;)

Dragon Company · Message par **Dragon Company** » 10 juil. 2004, 17:53

Salut,

Quelqu'uns peut il me dire les fichiers phpbb à modifier ? le code sur une page ca va mais là ... avec phpbb me paume dans les fichier tpl ...

@+++

Geckozone

je cherche a refaire l'affichage de ce tableau

je cherche a refaire l'affichage de ce tableau

je vous met le code si ça vous parle mieux ...

non ça veut pas

excellent !!

Qui est en ligne ?