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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Suk Lin le Sam 21 Mai 2011 - 0:49

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 !


Dernière édition par Suk Lin le Lun 13 Juin 2011 - 20:43, édité 1 fois

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

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

Message par missx le Sam 21 Mai 2011 - 11:00

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+

missx
+ Hyperactif +

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

http://google.fr
missx a été remercié(e) par l'auteur de ce sujet.

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

Message par Suk Lin le Sam 21 Mai 2011 - 14:12

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...

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

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

Message par missx le Dim 22 Mai 2011 - 8:12

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 -->
Wink A+

missx
+ Hyperactif +

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

http://google.fr
missx a été remercié(e) par l'auteur de ce sujet.

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

Message par Suk Lin le Dim 22 Mai 2011 - 21:35


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


Dernière édition par Suk Lin le Sam 11 Juin 2011 - 14:33, édité 1 fois

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

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

Message par Suk Lin le Mar 24 Mai 2011 - 23:14

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

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

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

Message par missx le Mer 25 Mai 2011 - 7:26

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

missx
+ Hyperactif +

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

http://google.fr
missx a été remercié(e) par l'auteur de ce sujet.

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

Message par Suk Lin le Mer 25 Mai 2011 - 11:28

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

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

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

Message par missx le Mer 25 Mai 2011 - 12:14

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:
&quot;
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 ?

missx
+ Hyperactif +

Féminin
Messages : 2895
Inscrit(e) le : 12/05/2007

http://google.fr
missx a été remercié(e) par l'auteur de ce sujet.

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

Message par Suk Lin le Sam 28 Mai 2011 - 20:36

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 Wink

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

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

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

Message par Suk Lin le Sam 4 Juin 2011 - 9:45

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é Interrog

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

Bonne journée...

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

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

Message par Ea le Dim 12 Juin 2011 - 12:13

Bonjour,


Lien du forum avec le problème ? =3

Cordialement.

Ea
Aidactif
Aidactif

Messages : 23442
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

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

Message par Suk Lin le Lun 13 Juin 2011 - 10:38

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...)

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

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

Message par Ea le Lun 13 Juin 2011 - 12:28

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.

Ea
Aidactif
Aidactif

Messages : 23442
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

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

Message par Suk Lin le Lun 13 Juin 2011 - 20:43

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.

Yahoo

Bonne soirée !

Suk Lin
*

Messages : 46
Inscrit(e) le : 30/12/2008

Suk Lin a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum