Catégories en onglets : empêcher la page de "remonter toute seule"

[Suk Lin]

Bonsoir !

Je viens d'essayer de mettre mes catégories en onglets sur base de quelques tutos trouvés sur ce forum, néanmoins je rencontre un problème que je ne parviens pas à résoudre. Je vais essayer de vous exposer mon souci le plus clairement possible.

Lorsque je suis en haut de la page d'accueil et que je survole mon onglet, la catégorie correspondante s'affiche immédiatement. C'est parfait !
Par contre, si je baisse ma scroll et que je repasse mon curseur sur mon onglet, la catégorie s'affiche certes, mais la scroll remonte tout à coup vers le haut ! Ce qui n'est pas très agréable je trouve, voire même gênant (on ne peut pas survoler chaque onglet en ayant un aperçu global de la catégorie correspondante puisque la page remonte tout à coup, ce qui nous oblige de descendre la scroll à chaque fois).

Je vous fais part également du contenu de mon index_box :

Code:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


    <!-- DEBUT MODIF ONGLETS -->

    <script type="text/javascript">
    <!--

    document.write('<div align="center" style="display:none;" id="conteneur_barre_onglet">
    <ul class="conteneur_onglets">

    <li onMouseOver="change_cat(1)" class="onglet actif" id="onglet_1">onglet 1</li>
    <li onMouseOver="change_cat(2)" class="onglet " id="onglet_2">onglet 2</li>

    </ul></div>');

    var compteur_cat = 1;

    function change_cat(numero)
    {
      if(document.getElementById('categorie_'+numero))
      {
          /* affichage de la bonne categorie */
          $('table[id^=categorie_]').css('display','none');
          $('table[id=categorie_'+numero+']').fadeIn();
         
          /* affichage du bon onglet */
          $('.actif').removeClass("actif");
          $('.onglet[id=onglet_'+numero+']').addClass("actif");
      }
    }

    function capture_cat()
    {
      if(compteur_cat == 1)
      {
          document.write('<table class="forumline" id="categorie_' + compteur_cat + '" >');
      }
      else
      {
          $('#conteneur_barre_onglet').css("display","block");
          document.write('</table><table class="forumline" id="categorie_' + compteur_cat + '" style="display:none;">');
      }
     
      compteur_cat++;
    }

    //-->
    </script>

    <!-- BEGIN catrow --><!-- BEGIN tablehead -->

    <script type="text/javascript">
    <!--
      capture_cat();
    //-->
    </script>

    <!-- FIN MODIF ONGLETS -->


   <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
   </tr>
   <!-- END tablehead -->
   <!-- BEGIN cathead -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>
  <!-- END cathead -->

   <!-- BEGIN forumrow -->
   <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
         <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

            </span>
        </h{catrow.forumrow.LEVEL}></td></tr></tbody></table>
         <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<table align="right"><tr><td style="padding-left: 40px; text-align: right;" class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</td></tr></table>
         <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
         </span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
         <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
   </tr>
   <!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

Quelqu'un a-t-il une petite idée de ce qui cloche ?

Merci d'avance !

[missx]

salut
c'est tout à fait normal, le survol remplace le clic donc c'est comme ci tu recharger ta page à chaque fois que tu passe le curseur sur l'onglet.
La solution est de faire apparaitre les catégories au clic et pas au survol.
A+

[Suk Lin]

Hello ! Merci pour ta réponse (:

Hm c'est étrange : j'avais d'abord essayé ce script au clic et j'ai également rencontré ce phénomène, alors que j'ai déjà vu sur plusieurs autres forums que le souci en question n'apparaît pas.
Le plus récent que j'ai visité (est qui même est au survol) est celui-ci (j'ai pensé à garder l'adresse, pour une fois !)

Ou peut-être existe-t-il une astuce ? Auquel cas je suis tout à fait preneuse...

[missx]

tu doit avoir un soucis de liens, peut-tu mettre le lien vers ton forum ?
j'ai un peu nettoyer ton template :
essaie avec celui-ci :

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


    <!-- DEBUT MODIF ONGLETS -->

    <script type="text/javascript">
    <!--

    document.write('<div align=center style=display:none id=conteneur_barre_onglet>
    <ul class=conteneur_onglets>

    <li onMouseOver=change_cat(1) class=onglet actif id=onglet_1>onglet 1</li>
    <li onMouseOver=change_cat(2) class=onglet  id=onglet_2>onglet 2</li>

    </ul></div>');

    var compteur_cat = 1;

    function change_cat(numero)
    {
      if(document.getElementById('categorie_'+numero))
      {
          /* affichage de la bonne categorie */
          $('table[id=categorie_]').css('display','none');
          $('table[id=categorie_'+numero+']').fadeIn();
       
          /* affichage du bon onglet */
          $('.actif').removeClass(actif);
          $('.onglet[id=onglet_'+numero+']').addClass(actif);
      }
    }

    function capture_cat()
    {
      if(compteur_cat == 1)
      {
          document.write('<table class=forumline id=categorie_' + compteur_cat + ' >');
      }
      else
      {
          $('#conteneur_barre_onglet').css(display,block);
          document.write('</table><table class=forumline id=categorie_' + compteur_cat + ' style=display:none>');
      }
   
      compteur_cat++;
    }

    //-->
    </script>

    <!-- BEGIN catrow --><!-- BEGIN tablehead -->

    <script type="text/javascript">
    <!--
      capture_cat();
    //-->
    </script>

    <!-- FIN MODIF ONGLETS -->


  <tr>
      <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
      <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
  </tr>
  <!-- END tablehead -->
  <!-- BEGIN cathead -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
      <!-- END inc -->
      <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
        <h{catrow.cathead.LEVEL} class="hierarchy">
            <span class="cattitle">
              <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
            </span>
        </h{catrow.cathead.LEVEL}>
      </td>
      <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  </tr>
  <!-- END cathead -->

  <!-- BEGIN forumrow -->
  <tr>
      <!-- BEGIN inc -->
      <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
      <!-- END inc -->
      <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
        <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
      </td>
      <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
<table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
            <span class="forumlink">
              <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

            </span>
        </h{catrow.forumrow.LEVEL}></td></tr></tbody></table>
        <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
<table align="right"><tr><td style="padding-left: 40px; text-align: right;" class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</td></tr></table>
        <span class="gensmall">
            <!-- BEGIN switch_moderators_links -->
            {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
            <!-- END switch_moderators_links -->
            {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
        </span>
      </td>
      <td class="row3 over" align="center" valign="middle" height="50">
        <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
      </td>
  </tr>
  <!-- END forumrow -->
<!-- BEGIN catfoot -->
<tr>
<!-- BEGIN inc -->
<td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
<!-- END inc -->
<td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
</tr>
<!-- END catfoot -->
<!-- BEGIN tablefoot -->
<img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->


A+

[Suk Lin]

J'ai remplacé mon template avec le tien, mais grande surprise : il n'y avait plus d'onglet ! Donc j'ai remis l'ancien.

Je te donne le plus récent (j'y ai juste rajouté un onglet et travaillé le style) :

Code:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


        <!-- DEBUT MODIF ONGLETS -->

        <script type="text/javascript">
        <!--

        document.write('<div align="center" style="display:none;" id="conteneur_barre_onglet">
        <ul class="conteneur_onglets">

        <li onMouseOver="change_cat(1)" class="onglet actif" id="onglet_1"><font size=1><span style="font-variant: small-caps;"><span style="letter-spacing: 5px;">Notion</span>s</span></font></li>
        <li onMouseOver="change_cat(2)" class="onglet " id="onglet_2"><font size=1><span style="font-variant: small-caps;"><span style="letter-spacing: 5px;">Extrait</span>s</span></font></li>
        <li onMouseOver="change_cat(3)" class="onglet " id="onglet_3"><font size=1><span style="font-variant: small-caps;"><span style="letter-spacing: 5px;">Ressource</span>s</span></font></li>
        </ul></div>');

        var compteur_cat = 1;

        function change_cat(numero)
        {
          if(document.getElementById('categorie_'+numero))
          {
              /* affichage de la bonne categorie */
              $('table[id^=categorie_]').css('display','none');
              $('table[id=categorie_'+numero+']').fadeIn();
           
              /* affichage du bon onglet */
              $('.actif').removeClass("actif");
              $('.onglet[id=onglet_'+numero+']').addClass("actif");
          }
        }

        function capture_cat()
        {
          if(compteur_cat == 1)
          {
              document.write('<table class="forumline" id="categorie_' + compteur_cat + '" >');
          }
          else
          {
              $('#conteneur_barre_onglet').css("display","block");
              document.write('</table><table class="forumline" id="categorie_' + compteur_cat + '" style="display:none;">');
          }
       
          compteur_cat++;
        }

        //-->
        </script>

        <!-- BEGIN catrow --><!-- BEGIN tablehead -->

        <script type="text/javascript">
        <!--
          capture_cat();
        //-->
        </script>

        <!-- FIN MODIF ONGLETS -->


      <tr>
          <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%" class="secondarytitle"> {catrow.tablehead.L_FORUM} </th>
          <th nowrap="nowrap" width="150"><div style="width:150px;">{L_LASTPOST}</div></th>
      </tr>
      <!-- END tablehead -->
      <!-- BEGIN cathead -->
      <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
          <!-- END inc -->
          <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%">
            <h{catrow.cathead.LEVEL} class="hierarchy">
                <span class="cattitle">
                  <a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a>
                </span>
            </h{catrow.cathead.LEVEL}>
          </td>
          <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
      </tr>
      <!-- END cathead -->

      <!-- BEGIN forumrow -->
      <tr>
          <!-- BEGIN inc -->
          <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" alt="." /></td>
          <!-- END inc -->
          <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle">
            <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
          </td>
          <td class="row1 over" colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50">
    <table width="100%"><tbody><tr><td><h{catrow.forumrow.LEVEL} class="hierarchy">
                <span class="forumlink">
                  <a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>

                </span>
            </h{catrow.forumrow.LEVEL}></td></tr></tbody></table>
            <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
    <table align="right"><tr><td style="padding-left: 40px; text-align: right;" class="gensmall">{catrow.forumrow.POSTS} messages dans {catrow.forumrow.TOPICS} sujets.</td></tr></table>
            <span class="gensmall">
                <!-- BEGIN switch_moderators_links -->
                {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
                <!-- END switch_moderators_links -->
                {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
            </span>
          </td>
          <td class="row3 over" align="center" valign="middle" height="50">
            <span class="gensmall">{catrow.forumrow.LAST_POST}</span>
          </td>
      </tr>
      <!-- END forumrow -->
    <!-- BEGIN catfoot -->
    <tr>
    <!-- BEGIN inc -->
    <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46" /></td>
    <!-- END inc -->
    <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1" /></td>
    </tr>
    <!-- END catfoot -->
    <!-- BEGIN tablefoot -->
    <img src="{SPACER}" alt="" height="5" width="1" /><!-- END tablefoot --><!-- END catrow -->

En tout cas c'est gentil de te pencher sur mon problème !

Bonne soirée

[Suk Lin]

A moins que quelqu'un d'autre ait une idée..?

[missx]

as-tu d'autres templates modifié ? on dirait un div non fermée mais ce n'est pas sur ce template.

[Suk Lin]

Non, il n'y a que celui-là pour l'instant...

[missx]

tu as essayé de remettre le template par défaut ainsi que d'enlever le css des onglets et de tout recommencer ?
quand tu as copié colé les codes, tu as copié directement ?
il y a des

Code:

"

dans ton code et ce n'est pas normal.
quand on copie un code, on le colle dans le bloc note pour ensuite selectionner et ensuite le copier pour le coller dans le template.
quel tuto as tu suivi ?

[Suk Lin]

Oh, désolée d'avoir mis autant de temps pour te répondre ! Je suis confuse et impardonnable.

Sinon oui, j'ai remarqué ces &quot, ils se rajoutent à chaque fois que j'enregistre mon template. Ils ont commencé à apparaître quand j'ai intégré le script des onglets. Quand j'ai ajouté quelques propriétés stylistiques, ils se sont rajoutés tous seuls après enregistrement...
A savoir que ces &quot sont présents dans le script sur lequel je me suis basé, sur ce topic principalement.
Sinon pour ce qui est de la procédure à suivre pour copier/coller un code, ne t'inquiète pas c'est ce que j'ai toujours fait

Voili voilou, et encore toutes mes excuses pour cette longue attente !

[Suk Lin]

Je me permets de remonter mon topic, n'ayant toujours pas trouvé de solution, toutefois je précise qu'étant en session d'examens je ne saurai plus répondre très souvent jusqu'à ce que mon calvaire soit terminé

Néanmoins je remercie toute personne ayant tenté ou s'apprêtant de m'aider (:

Bonne journée...

[Ea]

Bonjour,


Lien du forum avec le problème ? =3

Cordialement.

[Suk Lin]

Oups pardon !

Le voici : http://afabulisadfacta.forumactif.com

Merci de te pencher sur mon problème ! (: (j'avoue avoir cru que rien n'était plus possible...)

[Ea]

Bonjour,


Votre script a un état "transitoire" pendant lequel tout disparaît puis la bonne catégorie réapparaît.

Si la page avait par exemple 11 lignes de haut ( pour schématiser ) comme ceci :

Code:

PAS VISIBLE
PAS VISIBLE
PAS VISIBLE
PAS VISIBLE
VISIBLE SUR L'ECRAN
VISIBLE SUR L'ECRAN
VISIBLE SUR L'ECRAN
VISIBLE SUR L'ECRAN
VISIBLE SUR L'ECRAN
PAS VISIBLE
PAS VISIBLE

Et puis que ça passe à 6 lignes, pendant un instant il va y avoir :

Code:

PAS VISIBLE
VISIBLE SUR L'ECRAN
VISIBLE SUR L'ECRAN
VISIBLE SUR L'ECRAN
VISIBLE SUR L'ECRAN
VISIBLE SUR L'ECRAN

Car le navigateur quand la hauteur diminue agira intelligemment, mais après que l'autre catégorie apparaisse et qu'on revienne à 11 lignes de hauteur on aura :

Code:

PAS VISIBLE
VISIBLE SUR L'ECRAN
VISIBLE SUR L'ECRAN
VISIBLE SUR L'ECRAN
VISIBLE SUR L'ECRAN
VISIBLE SUR L'ECRAN
PAS VISIBLE
PAS VISIBLE
PAS VISIBLE
PAS VISIBLE
PAS VISIBLE

Enfin mettre quelque chose du genre :

Code:

body { min-height: 1300px;}

Dans le css ( PA > Affichage > Couleurs > Feuille de style ) qui garantit que la page ne devient pas trop "petite" en hauteur pourrait déjà bien aider.

Cela pourrait être bien aussi d'avoir un bloc autour des catégories qui leur donne une hauteur minimum, pour cela vous pourriez éditer index_body et remplacer :

Code:

{BOARD_INDEX}

Par :

Code:

<div id="boardIndex">{BOARD_INDEX}</div>

Puis mettre dans le CSS :

Code:

#boardIndex { min-height: 300px; }

Où la taille minimum que vous souhaitez au bloc d'index.

D'habitude ce problème n'est pas trop présent car le qui est en ligne prend pas mal de place et agrandit la hauteur de la page ( et d'habitude la transition est immédiate, ici elle ne l'est pas pour avoir l'effet de transition ).


Cordialement.

[Suk Lin]

Rebonsoir !

C'est extra ; un tout grand merci, Etana, pour ces explications ! Mais également pour cette astuce ; cela fonctionne à merveille à présent, je suis enchantée.



Bonne soirée !