La page produit ...

Messagepar Jerome38 » Lun 05 Nov 2007, 16:45

Bonjour

Petite question par rapport au "Switch Content Script" qui est utilisé dans la fiche produit (page product_info_tab.php dans module) et qui ressemble a ceci :

Code: Tout sélectionner
<ul id="tablist">
<li><a href="#" class="current" onclick="return expandcontent('sc4', this)"><?php echo PRODUCT_INFO_TAB4; ?></a></li>
<li><a href="#" onclick="return expandcontent('sc1', this)" theme="#eaeaff"><?php echo PRODUCT_INFO_TAB1; ?></a></li>
<li><a href="#" onclick="return expandcontent('sc2', this)" theme="#ffe6e6"><?php echo PRODUCT_INFO_TAB2; ?></a></li>
<li><a href="#" onclick="return expandcontent('sc3', this)" theme="#dfffdf"><?php echo PRODUCT_INFO_TAB3; ?></a></li>
</ul>

(j'ai un peu modifié c'st pour ca que c'est pas dans l'ordre).
Mon soucis est que si je change de catégories, par exemple je clique sur Ecrire (pour écrire une critique), la classe="current" reste sur la premiere li donc c'est la premiere catégorie qui reste sélectionné (au niveau css, en fait c'est la premiere catégorie qui est mise en valeur en css alors que je suis dans la 2eme)

J'ai du mal a être clair la dessus mais si quelqu'un a compris j'essai de comprendre comment faire pour que le class="current" se mette sur la bonne balise quand on clic sur un des liens

Merci
Jerome38
Membre inactif
 
Messages: 4
Inscription: Mer 17 Oct 2007, 16:32

Messagepar cymbeline » Lun 05 Nov 2007, 19:11

Bonjour,

Je ne vois pas le fichier mentionner : page product_info_tab.php dans module, peux tu être plus précis, quelle version d'oscss utilises-tu ? templates.....

Pour ton problème le CSS n'emploi pas de forme conditionnelle ; tu peux avoir des effets sur la balise <a> en fonction de son état : a:active ; a:hover ; a:visited....

peux-tu nous mettre ce que contient ta class="current" et quel effet tu souhaite obtenir sur tes liens.

++
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar Jerome38 » Lun 05 Nov 2007, 19:43

J'ai la toute derniere version d'oscss (1.2) avec le template de base, le bleu la heu generic il s'appele je crois

Et donc dans cette page moi j'ai un truc en javascript
En fait le class=current

Mon css est comme ceci :

Code: Tout sélectionner
#tablist li a{
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #ccc;
border-bottom: none;
background-image:url(../images/css/tablist_a.jpg);
background-repeat:repeat-x;
color:#5c5c5c;
}

#tablist li a.current{
background-image:url(../images/css/tablist_current.jpg);
background-repeat:repeat-x;
color:#cc0000;
}

Alors en fait c'est des onglets en javascript avec critiques écrire une critiques, infos constructeurs envoyer à un ami ...
Quand on clic sur un onglet ca affiche donc les infos (genre pour envoyer a un ami ca demande l'adresse e-mail) sans recharger la page.

La class current est censé se mettre sur le lien javascript qui est actuellement sélectionné mais il bouge pas (c'est a dire que c'est le premier a qui reste avec la class current, normal vu le code va t'on me dire oui mais avant ca changeait par rapport a la ou on était, maintenant que j'ai modifié le style et la position des liens ca foire)
C'est pas un soucis de css ou de html php je m'en tire pas trop mal dans ca mais la c'est le javascript qui gére ca et c'est pas trop mon truc
Dernière édition par Jerome38 le Lun 05 Nov 2007, 19:46, édité 1 fois.
Jerome38
Membre inactif
 
Messages: 4
Inscription: Mer 17 Oct 2007, 16:32

Messagepar Jerome38 » Lun 05 Nov 2007, 20:01

Bon apparament ca marche que avec des couleurs le javascript et pas avec des images en background ca a l'air d'être pour ca
Jerome38
Membre inactif
 
Messages: 4
Inscription: Mer 17 Oct 2007, 16:32

Messagepar cymbeline » Lun 05 Nov 2007, 21:06

RE :

Je n'étais pas sur la bonne version d'oscss.;)

Voisi le code original

Code: Tout sélectionner
<ul id="tablist">
<li><a href="#" class="current" onclick="return expandcontent('sc1', this)"><?php echo PRODUCT_INFO_TAB1; ?></a></li>
<li><a href="#" onclick="return expandcontent('sc2', this)" theme="#eaeaff"><?php echo PRODUCT_INFO_TAB2; ?></a></li>
<li><a href="#" onclick="return expandcontent('sc3', this)" theme="#ffe6e6"><?php echo PRODUCT_INFO_TAB3; ?></a></li>
<li><a href="#" onclick="return expandcontent('sc4', this)" theme="#dfffdf"><?php echo PRODUCT_INFO_TAB4; ?></a></li>
<li><a href="#" onclick="return expandcontent('sc5', this)" theme=""><?php echo PRODUCT_INFO_TAB5; ?></a></li>
</ul>

En effet pour modifier la couleur du background (je parle ici du fond des commentaires) il faut jouer avec l'hexadécimal des différents theme ; après et a partir de là on ne gère que les onglets.

La boite des commentaires se gère plus bas dans le code avec :
Code: Tout sélectionner
                <div id="tabcontentcontainer">

<div id="sc1" class="tabcontent">

  <div id="currentReviews">
<?php
  if ($reviews['count'] > 0) {
?>
    <p class="currentReviews"><?php echo TEXT_CURRENT_REVIEWS . ' ' . $reviews['count']; ?></p>
    <p class="averageReviews"><?php echo TEXT_REVIEW_AVERAGE . tep_image(DIR_WS_COMMON_IMAGES . 'stars_' . $reveiws_rating . '.gif'); ?></p>
<?php
  } else {
?>
    <p><?php echo TEXT_CURRENT_REVIEWS . ' ' . $reviews['count']; ?></p>
<?php
  }
?>
  </div>

Tu peux modifier la bordure avec :
Code: Tout sélectionner
#tabcontentcontainer{
/*width: 400px; */
/* Insert Optional Height definition here to give all the content a unified height */
padding: 5px;
border: 1px solid red;
}

Mais je n'ai pas réussi a modifier le background et je pense que cela vient du javascript :

Code: Tout sélectionner
function highlighttab(aobject){
  if (typeof tabobjlinks=="undefined")
      collecttablinks()
  for (i=0; i<tabobjlinks.length; i++)
      tabobjlinks[i].style.backgroundColor=initTabcolor
  var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
  aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
}

a étudier....

Sinon pour modifier la boîte de commentaire par défaut lorsqu'on arrive sur la page, on peut jouer avec (en haut de la page) en changeant les valeurs des variables :

Code: Tout sélectionner
//Set tab to intially be selected when page loads:
//[which tab (1=first tab), ID of tab content to display]:
var initialtab=[1, "sc1"]

++
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar cymbeline » Lun 05 Nov 2007, 21:41

RE :

J'ai modifié la fonction comme ceci :

Code: Tout sélectionner
function highlighttab(aobject){
  if (typeof tabobjlinks=="undefined")
      collecttablinks()
  for (i=0; i<tabobjlinks.length; i++)
      tabobjlinks[i].style.backgroundColor=initTabcolor
  /*
  var themecolor=aobject.getAttribute("theme")? aobject.getAttribute("theme") : initTabpostcolor
  aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style.backgroundColor=themecolor
  else if
  */
  var themecolor=aobject.getAttribute("")? aobject.getAttribute("") : initTabpostcolor
  aobject.style.backgroundColor=document.getElementById("tabcontentcontainer").style
 

}

Cela permet de desactiver la gestion des backgound par les "themes"
et de gérer ces derniers via le CSS : #tabcontentcontainer{ }
et de pouvoir mettre une image en background ou la même couleur pour tous.
Mais cela ne fonctionne pas puisqu' a chaque onglet les valeurs de la boîte des commentaires changent en hauteur et en largeur et il faudrait une image etirable en css :(

Sinon dans le css il manque ceci :

Code: Tout sélectionner
#sc1{
border: 1px solid blue;
}
#sc2{
border: 1px solid yellow;
}
#sc3{
border: 1px solid lime;
}
#sc4{
border: 1px solid orange;
}
#sc5{
border: 1px solid red;
}

++
Dernière édition par cymbeline le Lun 05 Nov 2007, 21:43, édité 1 fois.
cymbeline
Membre très actif
 
Messages: 265
Inscription: Mer 06 Sep 2006, 20:01
Localisation: Nevers

Messagepar Jerome38 » Mar 06 Nov 2007, 13:28

Je regarde tout ca en tout cas merci d'avoir regardé tout ca je te tiens au courant
Jerome38
Membre inactif
 
Messages: 4
Inscription: Mer 17 Oct 2007, 16:32

Messagepar stepibou » Mer 07 Nov 2007, 15:55

Salut,

quoi dire , à part que j'avais fait cette fonctionnalité trop " à l'arrache ".
En effet je n'avais pas reussi a deplacé ses couleurs de theme dans des css.
En dure comme ca, c'est tout ce qu'on essaye d'eviter dans oscss. Pas beau.

Sinon si l'ordre ne convient pas et pose probleme, on peut aussi changer le contenu des onglets..
Je pense que les conseilles de Cymbeline sont tres bon.
Sinon on peut modifier tout ce systeme d'affichage ou carrement commenter la ligne d'inclusion du modules. :P
Dans le fichier desc.xml du template j'ai rajouter :
Code: Tout sélectionner
<infos1>tab1</infos1>

Il suffirai de changer tab1 en tab2, par exemple, pour le desactiver (a verifier)

a+
--> osCSS inside <--
stepibou
Membre très actif
 
Messages: 274
Inscription: Dim 30 Oct 2005, 02:15
Localisation: Lyon


Retourner vers Design

 


  • Articles en relation
    Réponses
    Vus
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 4 invités

cron