Qeel accordéon ou coulissant

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

Résolu Qeel accordéon ou coulissant

Message par KIRI. le Ven 16 Déc 2011 - 13:34

Bonjour !

Mon but était donc de faire un panneau coulissant, ou accordéon, pour le qeel. J'ai suivis le tutoriel sur un autre site et .. J'ai complètement massacré mon qeel. J'y suis depuis longtemps pour réparer tout ça mais j'ai l'impression de le détruire encore plus. Je viens donc demander du secours !

Voilà mon template index_body :
Code:
{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%"  class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle" align="right">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" perms="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
         <!-- END switch_delete_cookies -->
         </span>
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%"  class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" perms="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<div class="gensmall"><script type="text/javascript">haccordion.setup({
  accordionid: 'hc1', //main accordion div id
  paneldimensions: {peekw:'30px', fullw:'800px', h:'350px'},
  selectedli: [0, true], //[selectedli_index, persiststate_bool]
  collapsecurrent: false //<- No comma following very last setting!
})</script><div id="hc1" class="haccordion"><ul>
<li style="overflow: hidden; width:50px; display: block;"><div class="hpanel"><img src="http://i.imgur.com/MDFE5.png" alt=""><td class= width="50%" style="padding-top:50px;"><span class="gensmall">
      <center><span class="groupes"><a href="http://croatoanslegendary.actifforum.com/g8-dieu"><font color=#eeff5d

size="3"><b>Dieux</b></font></a></span><span class="groupes"> <a href="http://croatoanslegendary.actifforum.com/g3-fantome"><font

color=#ffffdf size="3"><b>Fantômes</b></font></a></span> <br><br> <span class="groupes"> <a

href="http://croatoanslegendary.actifforum.com/g7-humain"><font color=#AA88B3 size="3"><b>Humains</b></font></a></span><span

class="groupes"> <a href="http://croatoanslegendary.actifforum.com/g5-lycan"><font color=#6CCC6C

size="3"><b>Lycans</b></font></a></span><span class="groupes"> <a href="http://croatoanslegendary.actifforum.com/g6-sorcier"><font

color=#7da6d1 size="3"><b>Sorciers</b></font></a></span> <br><br> <span class="groupes"> <a

href="http://croatoanslegendary.actifforum.com/g4-vampire"><font color=#Ed34D4D size="3"><b>Vampires</b></font></a></span></center>
      </td></span></td></div></li><li style="overflow: hidden; width:50px; display: block;"><div class="hpanel"><img src="http://i.imgur.com/MDFE5.png" alt=""><td width="50%" text align="justify" style="padding-top:60px;"><div id='scrollqeel'><span class="gensmall">        <span id="matt">{TOTAL_USERS}
                </span>
                <script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"Alors que la bataille fait rage sur Orys Island, ");
                </script>
                <script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membres enregistrés/,"habitants tentent de survivre.");
                </script>
<span id="bert">{TOTAL_POSTS}
                </span>
                <script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"Dans le désespoir, ils ont lancé ");
                </script>
                <script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/messages/," SOS, pensant vainement que quelqu'un viendrait les secourir. ");
                </script>

<span id="yosh">{NEWEST_USER}
                </span></center>
                <script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier condamné arrivé sur l’île est");
                </script>

                    <span id="delf">{TOTAL_USERS_ONLINE}</span><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateur en ligne/,"personne, sur l'île, qui se balade, un morceau de jambe à la main");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateurs en ligne/,"personnes, sur l'île, qui se baladent, un morceau de jambe à la main.");
                </script>
  <span id="alpha">{LOGGED_IN_USER_LIST}
                </span>
                <script type="text/javascript">document.getElementById('alpha').innerHTML=document.getElementById('alpha').innerHTML.replace(/Utilisateurs enregistrés/,"Si cette jambe vous appartient, voici le(s) nom(s) des responsables");
        </script></span></div></li><li style="overflow: hidden; width:50px; display: block;"><div class="hpanel"><img src="http://i.imgur.com/MDFE5.png" alt=""><table class="connected">{L_CONNECTED_MEMBERS}</table></div>
      </td></div></li><li style="overflow: hidden; width:50px; display: block;"><div class="hpanel"><img src="http://i.imgur.com/MDFE5.png" alt=""></div></li></ul></div>
 
<!-- END disable_viewonline -->
{CHATBOX_BOTTOM}
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td>  </td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
     status: true,
     cookie: true,
     xfbml: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Mon CSS :
Code:
/*HEADER FOND*/
body {
background-repeat : no-repeat;
background-attachment: scroll;
background-position: top center;
}

/*BORD FORUM*/

.forumline
{
border: 2px solid tan;
padding: 3px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
-ô-border-radius:15px;
-khtml-border-radius:15px;
border-radius:15px;
}


/*BARRE NAVIG*/
.navig {
position: fixed;
  margin-left: -10px;
          margin-right: -20px;
background: black;
padding : -5px;
border-bottom: 2px solid tan;
    border-right: 2px solid tan;
  border-left: 2px solid tan;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 3px;
box-shadow: #D2B48C 0px 0px 10px;
-moz-box-shadow: #D2B48C 0px 0px 10px;
-webkit-box-shadow: #D2B48C 0px 0px 10px;
top: 0px;
width: 100%;
}

a.mainmenu {
text-align: center;
font-family: Garamound;
font-size: 18px;
color: #D2B48C;
}

a.mainmenu:hover {
color: #B49855;
font-size: 19px;
}

/*DERNIERE EDIT SUPPR*/
tr.post span.gensmall { display: none; }


/*FORUM PA*/
.contenu {
  background-image: url('http://fc08.deviantart.net/fs71/f/2010/036/9/1/Light_texture_05_by_xnienke.jpg');
          font-family: Trebuchet MS;
          font-size: 10px;
          text-align: justify;
    color : #61523f;
          margin-left: 45px;
          margin-right: 40px;
          padding: 5px;
-moz-border-radius-bottomleft:40px;
-moz-border-radius-bottomright:0px;
-moz-border-radius-topleft:40px;
-moz-border-radius-topright:0px
}

.def {
  background-image: url('http://fc06.deviantart.net/fs27/i/2008/094/d/9/Grunge_Texture_7_by_amiens_stock.jpg');
        font-family: Trebuchet MS;
        font-size: 9px;
        text-align: center;
  color : #8D886C;
          margin-left: 45px;
          margin-right: 40px;
        padding: 5px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:20px;
-moz-border-radius-topleft:0px;
-moz-border-radius-topright:0px
}

/*JUSTIFICATION AUTO*/
.postbody {
texte-align: justify;
padding: 5px;
}

/*CADRE AVATAR*/
.cadreavatar {
border: 3px solid tan;
padding : 2px,
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

/*PA INFOBULLES*/
a.info {
position:relative;
z-index:24;
color:#B2C48D;
text-decoration:none
}
 
a.info:hover {
z-index:25;
background-image: url('http://fc08.deviantart.net/fs71/f/2010/036/9/1/Light_texture_05_by_xnienke.jpg');
color:#B2C48D;
}
 
a.info span {
display: none
}
 
a.info:hover span {
display:block;
position:absolute;
top:2em;
left:2em;
width:15em;
border:1px solid #000000;
background-image: url('http://fc08.deviantart.net/fs71/f/2010/036/9/1/Light_texture_05_by_xnienke.jpg');
color:#B2C48D;
font-weight:none;
padding:5px;
border: 2px solid tan;
padding: 2px;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
box-shadow: #D2B48C 0px 0px 10px;
-moz-box-shadow: #D2B48C 0px 0px 10px;
-webkit-box-shadow: #D2B48C 0px 0px 10px;
}

A:link {text-decoration: none !important;}
A:visited {text-decoration: none !important;}
A:active {text-decoration: none !important;}
A:hover {text-decoration: none !important;}

/*TEXTE GROUPE QEEL*/
.groupes{
border: 1px color #0D0D0D  ;
-moz-border-radius : 5px 5px 5px 5px;
height:40px;
padding-right:12px;
padding-left:14px;
padding-bottom:3px;
font-size:24px;
font-family:  Garamond;
font-weight: normal !important;
text-align:center;
font-color : #444444  ;
text-transform : uppercase;
text-decoration: none !important;
}

/*QEEL*/
.connected .row1 {background: none !important;}
.haccordion{
padding: 0;
width: 800px;
}


.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}


.haccordion li{
margin: 0;
padding: 0;
display: block;
width: 100%;
height: 20px;
overflow: hidden;
float: left;
}

#hc1 li{
margin:0 0px 0 0;
width: 800px;
}

#hc1 li .hpanel{
padding: 0px;
background: transparent;
}

.haccordion li .hpanel{
width: 20px;
height: 20px;
}

#hc1 li{width: 118px;
height: 124px;
}
#hc1 li .hpanel{width: 205px;
height: 124px;
}

/*SCROLLBAR QEEL*/
#scrollqeel {
height: 120px
padding: 3px;
margin: 0;
overflow-x:hidden !important;
overflow-y:auto;
}

/*CADRE IMG*/
.cadreimg {
border: 3px;
box-shadow: #D2B48C 0px 0px 30px;
-moz-box-shadow: #D2B48C 0px 0px 30px;
-webkit-box-shadow: #D2B48C 0px 0px 30px;
}

.cadreimg:hover{
border: 2px solid tan;
padding: 2px;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

/*TITRE*/
.titre {
font-size : 19pt;
font-family : courrier new;
letter-spacing : -3px;
text-align : center;
color: #D2B48C;
}

/*FOND PROFIL*/
.fondprofil {
padding: 8px;
background-image: url('http://fc08.deviantart.net/fs71/f/2010/036/9/1/Light_texture_05_by_xnienke.jpg');
paddind : 5px;
box-shadow: #D2B48C 0px 0px 10px;
-moz-border-radius: 10px;
 -webkit-border-radius: 10px;
border-radius: 10px;
}

/*PA ONGLETS*/
.mon_onglet{
  border: 3px;
box-shadow: #D2B48C 0px 0px 10px;
-moz-box-shadow: #D2B48C 0px 0px 10px;
-webkit-box-shadow: #D2B48C 0px 0px 10px;
  display: block;
  padding: 5px;
  margin: 4px;
 font-size : 17pt;
font-family : courrier new;
letter-spacing : -3px;
text-align : center;
color: #D2B48C;
  background-image: url('http://fc08.deviantart.net/fs71/f/2010/036/9/1/Light_texture_05_by_xnienke.jpg');
  }
 
.mon_onglet:hover{
  border: 2px solid tan;
padding: 2px;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;}   
   
.mon_onglet_selected{
  border: 3px;
box-shadow: #D2B48C 0px 0px 10px;
-moz-box-shadow: #D2B48C 0px 0px 10px;
-webkit-box-shadow: #D2B48C 0px 0px 10px;
  border: 2px solid tan;
padding: 2px;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: block;
  padding: 5px;
  margin: 4px;
  font-size : 17pt;
font-family : courrier new;
letter-spacing : -3px;
text-align : center;
color: #D2B48C;
  background-image: url('http://fc06.deviantart.net/fs27/i/2008/094/d/9/Grunge_Texture_7_by_amiens_stock.jpg');
  }
         
.clear{
  clear: both;}
 
.mon_contenu{
  border: 3px;
box-shadow: #D2B48C 0px 0px 10px;
-moz-box-shadow: #D2B48C 0px 0px 10px;
-webkit-box-shadow: #D2B48C 0px 0px 10px;
  border: 2px solid tan;
padding: 2px;
-webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  display: block;
  padding: 5px;
  margin: 4px;
text-align : center;
  line-height: normal;
  height : 330px;
  width : 700px;
  }
 
#mes_contenus, #mes_onglets{
  height: 100%;
  width:100%;}

/*BOUTONOFFLINE*/
#post_onlin {
background: url("http://img337.imageshack.us/img337/2362/boutoffline.jpg") no-repeat;
width: 200px;
height: 23px;
padding: 0;
border: 0;
}

Mon template overall_header pour le "coulissant" :
Code:
<!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" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
   <title>{SITENAME_TITLE}{PAGE_TITLE}</title>
   <meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
   <meta http-equiv="content-script-type" content="text/javascript" />
   <meta http-equiv="content-style-type" content="text/css" />
   <!-- BEGIN switch_compat_meta -->
   <meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
   <!-- END switch_compat_meta -->
   <!-- BEGIN switch_canonical_url -->
   <link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
   <!-- END switch_canonical_url -->
   {META_FAVICO}
   {META}
   {META_FB_LIKE}
   <meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
   {T_HEAD_STYLESHEET}
   {CSS}
   <link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
   <link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
   <script src="{JQUERY_PATH}" type="text/javascript"></script>
   <script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>

   <!-- BEGIN switch_fb_login -->
   <script src="http://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
   <script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
   <!-- END switch_fb_login -->

   <!-- BEGIN switch_ticker -->
   <link type="text/css" rel="stylesheet" href="{JS_DIR}jquery/ticker/ticker.css" />
   <script src="{JS_DIR}jquery/ticker/ticker.js" type="text/javascript"></script>
   <!-- END switch_ticker -->

   <!-- BEGIN switch_ticker_new -->
   <script src="{JS_DIR}jquery/jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
   <script type="text/javascript">//<![CDATA[
      /* Definir le sens de direction en fonction du panneau admin */
      var tickerDirParam = "{switch_ticker.DIRECTION}";
      var slid_vert = false;
      var auto_dir = 'next';
      var h_perso = parseInt({switch_ticker.HEIGHT});

      switch( tickerDirParam )
      {
         case 'top' :
            slid_vert = true;
            break;

         case 'left':
            break;

         case 'bottom':
            slid_vert = true;
            auto_dir = 'prev';
            break;

         case 'right':
            auto_dir = 'prev';
            break;

         default:
            slid_vert = true;
      }

      $(document).ready(function() {
         var w_cont = $('#fa_ticker_container').width();

         if (w_cont > 0)
         {
            $('#fa_ticker_container').width(w_cont);

            /* Affichage de la liste */
            $('#fa_ticker_content').css('display','block');

            /* Calcul des dimensions du conteneur et des ?l?ments */
            var width_max = $('ul#fa_ticker_content').width();
            var width_item = Math.floor(width_max / {switch_ticker.SIZE});
            var height_max = h_perso;

            /* Calcul de la hauteur maximale du contenur en fonction des ?l?ments et de la hauteur personnalis?e dans l'admin */
            $('ul#fa_ticker_content li').each( function () {
               if ($(this).height() > height_max)
               {
                  height_max = $(this).height();
               }
            } );

            /* Redimensionnement des ?l?ments et des images trop larges */
            $('ul#fa_ticker_content li').width(width_item).height(height_max).find('img').each(function () {
               if ($(this).width() > width_item)
               {
               var ratio      = $(this).width() / width_item;
               var new_height = Math.round($(this).height() / ratio);
               $(this).height(new_height).width(width_item);
               }
            });

            /* Redimensionnement et centrage du conteneur en mode vertical */
            if (slid_vert)
            {
               $('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
            }

            /* Initialisation du caroussel */
            $('#fa_ticker_content').jcarousel({
                  vertical: slid_vert,
               wrap: 'circular',
               auto: {switch_ticker.STOP_TIME},
               auto_direction: auto_dir,
            scroll: 1,
            size: {switch_ticker.SIZE},
            height_max: height_max,
            animation: {switch_ticker.SPEED}
            });
         }
         else
         {
            $('ul#fa_ticker_content li:not(:first)').css('display','none');
            $('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
         }
      });
   //]]>
   </script>
   <!-- END switch_ticker_new -->

   <script type="text/javascript">//<![CDATA[
   $(document).ready(function(){
      <!-- BEGIN switch_enable_pm_popup -->
         pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
         pm.focus();
      <!-- END switch_enable_pm_popup -->
      <!-- BEGIN switch_report_popup -->
         report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
         report.focus();
      <!-- END switch_report_popup -->
      <!-- BEGIN switch_ticker -->
         ticker_start({switch_ticker.HEIGHT}, {switch_ticker.SPACING}, {switch_ticker.SPEED}, '{switch_ticker.DIRECTION}', {switch_ticker.STOP_TIME});
      <!-- END switch_ticker -->
   });

   <!-- BEGIN switch_login_popup -->
      var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
   <!-- END switch_login_popup -->

   <!-- BEGIN switch_login_popup -->
   $(document).ready( function() {
      $(window).resize(function() {
         var windowWidth = document.documentElement.clientWidth;
         var popupWidth = $("#login_popup").width();
         var mypopup = $("#login_popup");

         $("#login_popup").css({
         "left": windowWidth/2 - popupWidth/2
            });
      });
   });
   <!-- END switch_login_popup -->
   //]]>
   </script>
   {GREETING_POPUP}
   <!-- BEGIN switch_ticker_new -->
   <style>
   .jcarousel-skin-tango .jcarousel-item {
      text-align:center;
      width: 10px;
   }

   .jcarousel-skin-tango .jcarousel-item-horizontal {
      margin-right: {switch_ticker.SPACING}px;
   }

   .jcarousel-skin-tango .jcarousel-item-vertical {
      margin-bottom: {switch_ticker.SPACING}px;
   }
   </style>
   <!-- END switch_ticker_new -->
   {HOSTING_JS}
   <!-- BEGIN google_analytics_code -->
   <script type="text/javascript">
   //<![CDATA[
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', '{G_ANALYTICS_ID}']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
   //]]>
   </script>
   <!-- END google_analytics_code -->
  <script type="text/javascript" src="http://sd-2.archive-host.com/membres/up/198368448645211924/accordeons.js"></script>
</head>
<body background="{T_BODY_BACKGROUND}" bgcolor="{T_BODY_BGCOLOR}" text="{T_BODY_TEXT}" link="{T_BODY_LINK}" vlink="{T_BODY_VLINK}">
<center><div class="navig">{GENERATED_NAV_BAR}</div></center>
   <!-- BEGIN hitskin_preview -->
   <div id="hitskin_preview" style="display: block;">
      <h1><img src="http://illiweb.com/fa/hitskin/hitskin_logo.png" alt="" /> Hit<em>skin</em>.com</h1>
      <div class="content">
         <p>
            {hitskin_preview.L_THEME_SITE_PREVIEW}
            <br />
            <span>{hitskin_preview.U_INSTALL_THEME}<a href="http://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
         </p>
      </div>
   </div>
   <!-- END hitskin_preview -->

   <!-- BEGIN switch_login_popup -->
   <div id="login_popup">
      <table class="forumline" width="{LOGIN_POPUP_WIDTH}" height="{LOGIN_POPUP_HEIGHT}" border="0" cellspacing="1" cellpadding="0">
         <tr height="25">
            <td class="catLeft">
               <span class="genmed module-title">{SITENAME}</span>
            </td>
         </tr>
         <tr height="{LOGIN_POPUP_MSG_HEIGHT}">
            <td class="row1" align="left" valign="top">
               <div id="login_popup_buttons">
                  <form action="{S_LOGIN_ACTION}" method="get">
                     <input type="submit" class="mainoption" value="{L_LOGIN}" />
                     <input type="button" class="mainoption" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
                     <input id="login_popup_close" type="button" class="button" value="{L_DONT_DISPLAY_AGAIN}" />
                  </form>
               </div>
               <span class="genmed">{LOGIN_POPUP_MSG}</span>
            </td>
         </tr>
      </table>
   </div>
   <!-- END switch_login_popup -->

   <a name="top"></a>
   {JAVASCRIPT}

   <table class="bodylinewidth" width="{T_BODY_TABLE_WIDTH}" cellspacing="0" cellpadding="10" border="0" align="center">
      <tr>
         <td class="bodyline">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
               <tr>
                  <!-- BEGIN switch_logo_left -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_left -->
                  <td align="center" width="100%" valign="middle">
                     <!-- BEGIN switch_logo_center -->
                     <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>
                     <br />
                     <!-- END switch_logo_center -->
                     <div class="maintitle">{MAIN_SITENAME}</div>
                     <br />
                     <span class="gen">{SITE_DESCRIPTION}<br />  </span>
                  </td>
                  <!-- BEGIN switch_logo_right -->
                  <td><a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a></td>
                  <!-- END switch_logo_right -->
               </tr>
            </table>

            <div style="clear: both;"></div>

            <!-- BEGIN switch_ticker_new -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none;">
                              <!-- BEGIN ticker_row -->
                              <li>{switch_ticker.ticker_row.ELEMENT}</li>
                              <!-- END ticker_row -->
                           </ul>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker_new -->

            <!-- BEGIN switch_ticker -->
            <div id="fa_ticker_block" style="margin-top:4px;margin-bottom:4px;">
               <table width="100%" border="0" cellspacing="0" cellpadding="0" class="forumline">
                  <tr>
                     <td {CLASS_TABLE_TYPE} align="left" class="row1">
                        <div id="fa_ticker_container">
                           <div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
                              <div class="fa_ticker_content">
                                 <!-- BEGIN ticker_row -->
                                 <div>{switch_ticker.ticker_row.ELEMENT}</div>
                                 <!-- END ticker_row -->
                              </div>
                           </div>
                        </div>
                     </td>
                  </tr>
               </table>
            </div>
            <!-- END switch_ticker -->

            <div id="page-body">
               <div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
                  <table cellpadding="0" cellspacing="0" width="100%" class="three-col">
                     <tbody>
                        <tr>
                           <td valign="top" width="{C1SIZE}">
                              <div id="{ID_LEFT}">
                                 <!-- BEGIN giefmod_index1 -->
                                 {giefmod_index1.MODVAR}
                                    <!-- BEGIN saut -->
                                    <div style="height:{SPACE_ROW}px"></div>
                                    <!-- END saut -->
                                 <!-- END giefmod_index1 -->
                              </div>
                           </td>
                           <td valign="top" width="100%">
<!-- BEGIN html_validation -->
                           </td>
                        </tr>
                     </tbody>
                  </table>
               </div>
            </div>
         </td>
      </tr>
   </table>
</body>
</html>
<!-- END html_validation -->

Et pour finir, ma page html :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>
</head>
<body>
<!--Make sure your page contains a valid doctype at the very top-->

<link rel="stylesheet" type="text/css" href="haccordion.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="haccordion.js">

/***********************************************
* Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<style type="text/css">

/*CSS for example Accordion #hc1*/

#hc1 li{
margin:0 3px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightblue;
}

/*CSS for example Accordion #hc2*/

#hc2 li{
margin:0 0 0 0; /*Spacing between each LI container*/
border: 12px solid black;
}

#hc2 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: #E2E9FF;
cursor: hand;
cursor: pointer;
}

</style>

<script type="text/javascript">

haccordion.setup({
  accordionid: 'hc1', //main accordion div id
  paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'},
  selectedli: [0, true], //[selectedli_index, persiststate_bool]
  collapsecurrent: false //<- No comma following very last setting!
})

haccordion.setup({
  accordionid: 'hc2', //main accordion div id
  paneldimensions: {peekw:'30px', fullw:'450px', h:'150px'},
  selectedli: [-1, true], //[selectedli_index, persiststate_bool]
  collapsecurrent: true //<- No comma following very last setting!
})

</script>

<script type="text/javascript" src="
http://pmsc.free.fr/J03/1045165647.js"></script>
</script>
</body>
</html>

Ensuite voilà le schéma de ce que je voulais faire :
Spoiler:
Les écritures pour statistiques, chatbox etc, seront des images que je réaliserai une fois le qeel bien en forme.

Merci beaucoup à celui qui arrivera à m'aider.


Dernière édition par KIRI. le Dim 18 Déc 2011 - 22:11, édité 1 fois

KIRI.
**

Féminin
Messages : 53
Inscrit(e) le : 21/10/2011

http://testkiri.forumactif.org/
KIRI. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Qeel accordéon ou coulissant

Message par Final-Blonde le Ven 16 Déc 2011 - 22:27

Bonsoir Kiri,

Dans des cas pareils, il ne reste plus qu'à supprimer tout ce que tu as fait concernant le QEEL et reprendre proprement avec les codes de l'accordéon.

Ensuite, pourrais-tu donner justement ces codes pour que nous puissions l'installer dans le QEEL vierge.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Qeel accordéon ou coulissant

Message par KIRI. le Ven 16 Déc 2011 - 23:15

Dans le template index_body, il fallait mettre ça :
Code:
<div class="gensmall"><script type="text/javascript">haccordion.setup({
  accordionid: 'hc1', //main accordion div id
  paneldimensions: {peekw:'30px', fullw:'210px', h:'50px'},
  selectedli: [0, true], //[selectedli_index, persiststate_bool]
  collapsecurrent: false //<- No comma following very last setting!
})</script><div id="hc1" class="haccordion"><ul>
<li style="overflow: hidden; width:VALEURpx; display: block;"><div class="hpanel"><a href="LIEN" target="_blank"><img src="IMAGE" alt=""></a></div></li></ul></div>

KIRI.
**

Féminin
Messages : 53
Inscrit(e) le : 21/10/2011

http://testkiri.forumactif.org/
KIRI. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Qeel accordéon ou coulissant

Message par Final-Blonde le Sam 17 Déc 2011 - 9:02

Ton accordéon ne contient rien.

- Il y a là une partie concernant le js (que tu pourrais plutôt mettre dans la gestion des pages javascripts sans les balises >script<).
- Et une autre pour le HTML, qui doit contenir les données du QEEL.
- Normalement tu devrais aussi auvoir la partie CSS pour tout ce qui est l'apparence.

Je te suggère de suivre ce tuto qui me parait bien fait et concerne FA.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Qeel accordéon ou coulissant

Message par KIRI. le Sam 17 Déc 2011 - 11:00

Autant pour moi, j'ai oublié de mettre le reste --'
Pour le CSS :
Code:
.haccordion{
padding: 0;
width: 800px;
}


.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden;
}


.haccordion li{
margin: 0;
padding: 0;
display: block;
width: 100%;
height: 20px;
overflow: hidden;
float: left;
}

#hc1 li{
margin:0 0px 0 0;
width: 800px;
}

#hc1 li .hpanel{
padding: 0px;
background: transparent;
}

.haccordion li .hpanel{
width: 20px;
height: 20px;
}

#hc1 li{width: 118px;
height: 124px;
}
#hc1 li .hpanel{width: 205px;
height: 124px;
}

Pour la page html :
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title></title>
</head>
<body>
<!--Make sure your page contains a valid doctype at the very top-->

<link rel="stylesheet" type="text/css" href="haccordion.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="haccordion.js">

/***********************************************
* Horizontal Accordion script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<style type="text/css">

/*CSS for example Accordion #hc1*/

#hc1 li{
margin:0 3px 0 0; /*Spacing between each LI container*/
}

#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightblue;
}

/*CSS for example Accordion #hc2*/

#hc2 li{
margin:0 0 0 0; /*Spacing between each LI container*/
border: 12px solid black;
}

#hc2 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: #E2E9FF;
cursor: hand;
cursor: pointer;
}

</style>

<script type="text/javascript">

haccordion.setup({
  accordionid: 'hc1', //main accordion div id
  paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'},
  selectedli: [0, true], //[selectedli_index, persiststate_bool]
  collapsecurrent: false //<- No comma following very last setting!
})

haccordion.setup({
  accordionid: 'hc2', //main accordion div id
  paneldimensions: {peekw:'30px', fullw:'450px', h:'150px'},
  selectedli: [-1, true], //[selectedli_index, persiststate_bool]
  collapsecurrent: true //<- No comma following very last setting!
})

</script>

<script type="text/javascript" src="
http://pmsc.free.fr/J03/1045165647.js"></script>
</script>
</body>
</html>

Et dans le template overall_header pour le coulissement :
Code:
<script type="text/javascript" src="http://sd-2.archive-host.com/membres/up/198368448645211924/accordeons.js"></script>

KIRI.
**

Féminin
Messages : 53
Inscrit(e) le : 21/10/2011

http://testkiri.forumactif.org/
KIRI. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Qeel accordéon ou coulissant

Message par Final-Blonde le Sam 17 Déc 2011 - 13:18

Je ne vois pas ce que vient faire la page HTML là-dedans.

Le JS est à installer dans :
PA >> Modules >> Gestion des javascipts > sans oublier d'activer le JS > Titre > Index :
Code:
/* Horizontal Accordion script
* Created: Oct 27th, 2009. This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
*/


var haccordion={
   //customize loading message if accordion markup is fetched via Ajax:
   ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /></div>',

   accordioninfo: {}, //class that holds config information of each haccordion instance

   expandli:function(accordionid, targetli){
      var config=haccordion.accordioninfo[accordionid]
      var $targetli=(typeof targetli=="number")? config.$targetlis.eq(targetli) : (typeof targetli=="string")? jQuery('#'+targetli) : jQuery(targetli)
      if (typeof config.$lastexpanded!="undefined") //targetli may be an index, ID string, or DOM reference to LI
         config.$lastexpanded.stop().animate({width:config.paneldimensions.peekw}, config.speed) //contract last opened content
      $targetli.stop().animate({width:$targetli.data('hpaneloffsetw')}, config.speed) //expand current content
      config.$lastexpanded=$targetli
   },


   urlparamselect:function(accordionid){
      var result=window.location.search.match(new RegExp(accordionid+"=(\\d+)", "i")) //check for "?accordionid=index" in URL
      if (result!=null)
         result=parseInt(RegExp.$1)+"" //return value as string so 0 doesn't test for false
      return result //returns null or index, where index is the desired selected hcontent index
   },

   getCookie:function(Name){
      var re=new RegExp(Name+"=[^;]+", "i") //construct RE to search for target name/value pair
      if (document·cookie.match(re)) //if cookie found
         return document·cookie.match(re)[0].split("=")[1] //return its value
      return null
   },

   setCookie:function(name, value){
      document·cookie = name + "=" + value + "; path=/"
   },


   loadexternal:function($, config){ //function to fetch external page containing the entire accordion content markup
      var $hcontainer=$('#'+config.ajaxsource.container).html(this.ajaxloadingmsg)
      $.ajax({
         url: config.ajaxsource.path, //path to external content
         async: true,
         error:function(ajaxrequest){
            $hcontainer.html('Error fetching content.<br />Server Response: '+ajaxrequest.responseText)
         },
         success:function(content){
            $hcontainer.html(content)
            haccordion.init($, config)
         }
      })
   },


   init:function($, config){
         haccordion.accordioninfo[config.accordionid]=config //cache config info for this accordion
         var $targetlis=$('#'+config.accordionid).find('ul:eq(0) > li') //find top level LIs
         config.$targetlis=$targetlis
         config.selectedli=config.selectedli || [] //set default selectedli option
         config.speed=config.speed || "normal" //set default speed
         $targetlis.each(function(i){
            var $target=$(this).data('pos', i) //give each li an index #
            $target.data('hpaneloffsetw', $target.find('.hpanel:eq(0)').outerWidth()) //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
            $target.mouseenter(function(){
                  haccordion.expandli(config.accordionid, this)
               config.$lastexpanded=$(this)
            })
            if (config.collapsecurrent){ //if previous content should be contracted when expanding current
               $target.mouseleave(function(){
                  $(this).stop().animate({width:config.paneldimensions.peekw}, config.speed) //contract previous content
               })
            }            
         }) //end $targetlis.each
         var selectedli=haccordion.urlparamselect(config.accordionid) || ((config.selectedli[1] && haccordion.getCookie(config.accordionid))? parseInt(haccordion.getCookie(config.accordionid)) : config.selectedli[0])
         selectedli=parseInt(selectedli)
         if (selectedli>=0 && selectedli<config.$targetlis.length){ //if selectedli index is within range
            config.$lastexpanded=$targetlis.eq(selectedli)
            config.$lastexpanded.css('width', config.$lastexpanded.data('hpaneloffsetw')) //expand selected li
         }
         $(window).bind('unload', function(){ //clean up and persist on page unload
            haccordion.uninit($, config)
         }) //end window.onunload
   },

   uninit:function($, config){
      var $targetlis=config.$targetlis
      var expandedliindex=-1 //index of expanded content to remember (-1 indicates non)
      $targetlis.each(function(){
         var $target=$(this)
         $target.unbind()
         if ($target.width()==$target.data('hpaneloffsetw'))
            expandedliindex=$target.data('pos')
      })
      if (config.selectedli[1]==true) //enable persistence?
         haccordion.setCookie(config.accordionid, expandedliindex)
   },

   setup:function(config){
      //Use JS to write out CSS that sets up initial dimensions of each LI, for JS enabled browsers only
      document.write('<style type="text/css">\n')
      document.write('#'+config.accordionid+' li{width: '+config.paneldimensions.peekw+';\nheight: '+config.paneldimensions.h+';\n}\n')
      document.write('#'+config.accordionid+' li .hpanel{width: '+config.paneldimensions.fullw+';\nheight: '+config.paneldimensions.h+';\n}\n')
      document.write('<\/style>')
      jQuery(document).ready(function($){ //on Dom load
         if (config.ajaxsource) //if config.ajaxsource option defined
            haccordion.loadexternal($, config)
         else
            haccordion.init($, config)
      }) //end DOM load
   }

}
C'est le script hébergé et c'est ainsi que tu le mets dans les page de gestion des js.
Il faut supprimer le rappel que tu as mis dans le template overall_header.

Je ne vois pas le deuxième js mais tu fais pareil que pour le premier dans une nouvelle page.
Et si tu as mis un rappel quelque part de ce deusième script, tu le supprimes.

Comme je te l'ai dit plus haut, il n'y a pas de HTML, dans ton cas le QEEL ?!

Deuxio, suis un tuto que tu peux suivre, du genre celui que je t'ai donné plus haut et qui est en français. Wink


Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Qeel accordéon ou coulissant

Message par KIRI. le Sam 17 Déc 2011 - 13:57

J'ai suivi ton tuto qui est déjà carrément plus simple, merci ! Smile Bon c'est pas vraiment l'effet que je voulais, mais ça ira très bien Smile
Sinon j'ai encore des soucis xD L'image qui devait être au dessus se retrouve en plein milieu du qeel et la liste des membres connectés ces dernières 48h n'est pas masquée.

Je n'arrive pas à voir l'erreur dans mon template index_body :
Code:
{JAVASCRIPT}
<!-- BEGIN message_admin_index -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
   <!-- BEGIN message_admin_titre -->
   <tr>
      <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
   </tr>
   <!-- END message_admin_titre -->
   <!-- BEGIN message_admin_txt -->
   <tr>
      <td class="row1" rowspan="3" align="center" valign="middle">
      <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
      </td>
   </tr>
   <!-- END message_admin_txt -->
</table>
<!-- END message_admin_index -->

<!-- BEGIN switch_user_login_form_header -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%"  class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle" align="right">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" perms="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_header.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_header -->

{CHATBOX_TOP}
{BOARD_INDEX}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td width="50%" valign="top">
         <!-- BEGIN switch_user_logged_in -->
         <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a>
         <!-- END switch_user_logged_in -->
         <!-- BEGIN switch_delete_cookies -->
         <br /><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_delete_cookies.L_DELETE_COOKIES}</a>
         <!-- END switch_delete_cookies -->
         </span>
      </td>
      <td width="50%" align="right">
         <span class="gensmall">
            <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
            <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
            <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
            <!-- BEGIN switch_on_index -->
               <!-- BEGIN switch_delete_cookies -->
               <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
               <!-- END switch_delete_cookies -->
            <!-- END switch_on_index -->
         </span>
      </td>
   </tr>
</table>

<!-- BEGIN switch_user_login_form_footer -->
<form action="{S_LOGIN_ACTION}" method="post" name="form_login">
   <!-- BEGIN switch_fb_connect_no -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td class="row1" align="center">
            <table border="0" cellspacing="0" cellpadding="0">
               <tr>
                  <td><span class="genmed">{L_USERNAME}:</span> </td>
                  <td><input class="post" type="text" size="10" name="username"/> </td>
                  <td>
                     <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                     <span class="gensmall">{L_AUTO_LOGIN}</span> 
                  </td>
               </tr>

               <tr>
                  <td><span class="genmed">{L_PASSWORD}:</span> </td>
                  <td><input class="post" type="password" size="10" name="password"/> </td>
                  <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect_no -->

   <!-- BEGIN switch_fb_connect -->
   <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
      <tr>
         <td valign="top" width="100%"  class="row1" align="center">
            <table width="100%">
               <tr>
                  <td width="55%" valign="middle">
                     <table class="right">
                        <tr>
                           <td><span class="genmed">{L_USERNAME}:</span> </td>
                           <td><input class="post" type="text" size="10" name="username"/> </td>
                           <td>
                              <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                              <span class="gensmall">{L_AUTO_LOGIN}</span> 
                           </td>
                        </tr>

                        <tr>
                           <td><span class="genmed">{L_PASSWORD}:</span> </td>
                           <td><input class="post" type="password" size="10" name="password"/> </td>
                           <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                        </tr>
                     </table>
                  </td>
                  <td width="10%" align="center" valign="middle">
                     <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                  </td>
                  <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" v="2" perms="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
               </tr>
            </table>
         </td>
      </tr>
   </table>
   <!-- END switch_fb_connect -->
</form>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN disable_viewonline -->
<table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
      <td class="catHead" colspan="2" height="28">
      <table align="center"><td class="row1" rowspan="6" valign="middle"> <div align="center"> <div

style="text-align:center;"><img src="http://files.getwebb.org/files/10/17/98/1b59ff7aad6848bb1457279634fbdeee22/source.png" id="i_whosonline"

alt="{L_WHO_IS_ONLINE}"/></div></div></td></table>
      </td>
  </tr>
    <p class="elt_declancheur">Clique moi !</p><div class="afficher_masquer"><span class="gensmall">
      <center><span class="groupes"><a href="http://croatoanslegendary.actifforum.com/g8-dieu"><font color=#EEFF69

size="3"><b>Dieux</b></font></a></span><span class="groupes"> <a href="http://croatoanslegendary.actifforum.com/g3-fantome"><font

color=#ffffdf size="3"><b>Fantômes</b></font></a></span> <br><br> <span class="groupes"> <a

href="http://croatoanslegendary.actifforum.com/g7-humain"><font color=#AA88B3 size="3"><b>Humains</b></font></a></span><span

class="groupes"> <a href="http://croatoanslegendary.actifforum.com/g5-lycan"><font color=#6CCC6C

size="3"><b>Lycans</b></font></a></span><span class="groupes"> <a href="http://croatoanslegendary.actifforum.com/g6-sorcier"><font

color=#7DA6D1 size="3"><b>Sorciers</b></font></a></span> <br><br> <span class="groupes"> <a

href="http://croatoanslegendary.actifforum.com/g4-vampire"><font color=#E34D4D size="3"><b>Vampires</b></font></a></span></center>
        </span></div>
      <p class="elt_declancheur">Clique moi !</p><div class="afficher_masquer"><span class="gensmall">        <span id="matt">{TOTAL_USERS}
                </span>
                <script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"Alors que la bataille fait rage sur Orys Island, ");
                </script>
                <script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/membres enregistrés/,"habitants tentent de survivre.");
                </script>
<span id="bert">{TOTAL_POSTS}
                </span>
                <script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/Nos membres ont posté un total de/,"Dans le désespoir, ils ont lancé ");
                </script>
                <script type="text/javascript">document.getElementById('bert').innerHTML=document.getElementById('bert').innerHTML.replace(/messages/," SOS, pensant vainement que quelqu'un viendrait les secourir. ");
                </script>

<span id="yosh">{NEWEST_USER}
                </span>
                <script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le dernier condamné arrivé sur l’île est");
                </script><br />
                    <span id="delf">{TOTAL_USERS_ONLINE}</span><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateur en ligne/,"personne, sur l'île, qui se balade, un morceau de jambe à la main");</script><script type="text/javascript">document.getElementById('delf').innerHTML=document.getElementById('delf').innerHTML.replace(/utilisateurs en ligne/,"personnes, sur l'île, qui se baladent, un morceau de jambe à la main.");
                </script>
  <span id="alpha">{LOGGED_IN_USER_LIST}
                </span>
                <script type="text/javascript">document.getElementById('alpha').innerHTML=document.getElementById('alpha').innerHTML.replace(/Utilisateurs enregistrés/,"Si cette jambe vous appartient, voici le(s) nom(s) des responsables");
        </script></span></div>
<p class="elt_declancheur">Clique moi !</p><div class="afficher_masquer"><table class="connected">{L_CONNECTED_MEMBERS}</table></div>
  <!-- BEGIN switch_chatbox_activate -->
        <div class="afficher_masquer"><span class="gensmall">{TOTAL_CHATTERS_ONLINE} :  {CHATTERS_LIST}<br />
            <!-- BEGIN switch_chatbox_popup -->
            <div id="chatbox_popup"></div>
            <script type="text/javascript">
            //<![CDATA[
           

insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
            //]]>
            </script>
            <!-- END switch_chatbox_popup --><br />
        </span>
      </span>
  <!-- END switch_chatbox_activate -->
  </div></div>
<!-- END disable_viewonline --><h1 class="elt_declancheur">Clique moi !</h1>
    <div class="afficher_masquer">{CHATBOX_BOTTOM}</div>
<br clear="all" />
<!-- BEGIN switch_legend -->
<table border="0" cellspacing="3" cellpadding="0" align="center">
   <tr>
      <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NEW_POSTS}</span></td>
      <td></td>
      <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
      <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
      <td>  </td>
      <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
      <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
   </tr>
</table>
<!-- END switch_legend -->

{AUTO_DST}

<!-- BEGIN switch_fb_index_login -->
<div id="fb-root"></div>
<script type="text/javascript">
//<![CDATA[
FB.init({
   appId: '{switch_fb_index_login.FACEBOOK_APP_ID}',
     status: true,
     cookie: true,
     xfbml: true
});
//]]>
</script>
<!-- END switch_fb_index_login -->

Et est ce que pour le : <p class="elt_declancheur">Clique moi !</p> je peux mettre à la place du "Clique moi !" une image ?

KIRI.
**

Féminin
Messages : 53
Inscrit(e) le : 21/10/2011

http://testkiri.forumactif.org/
KIRI. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Qeel accordéon ou coulissant

Message par Final-Blonde le Sam 17 Déc 2011 - 18:54

Je ne t'ai pas dit de suivre mon tuto, je n'en ai pas vraiment fait fait un, j'ai juste corrigé l'histoire des scripts.

Le tuto que je te conseille, est celui du lien donné plus haut, et de tout reprendre.

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Qeel accordéon ou coulissant

Message par KIRI. le Sam 17 Déc 2011 - 18:58

Oui oui c'est ce que j'ai fait ^^
Mais j'ai des petits soucis avec ce tuto, je te les ai indiqué dans mon message précédent ^^

KIRI.
**

Féminin
Messages : 53
Inscrit(e) le : 21/10/2011

http://testkiri.forumactif.org/
KIRI. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Qeel accordéon ou coulissant

Message par Final-Blonde le Sam 17 Déc 2011 - 19:55

Ah, oh sorry, j'ai juste lu le tuto en question, et comme je "snobe" un peu les histoires de QEEL, je ne l'ai pas appliqué.

Du coup je ne sais pas de quelle image tu parles, et ça ne sert à rien de balancer tout le template, la partie concernée suffirait.
De plus je suppose que c'est aussi lié à du CSS, ou bien c'est celui que tu donnes plus haut ?
(Il me semble qu'il y a eu comme un malentendu : comme je te l'ai dit, je n'ai fait que lire le tuto).
Pour la deuxième question:

@KIRI. a écrit:Et est ce que pour le : <p class="elt_declancheur">Clique moi !</p> je peux mettre à la place du "Clique moi !" une image ?
Oui, je bien que oui :
Code:
<p class="elt_declancheur"><img src="url-image" width="??" height="??" title="Titre de l'image" /></p>
Il faudrait que tu y mettes certainement des dimensions (comme je te l'ai mis en exemple), du moins je le suppose.
Cela dit, je ne comprends pas le "clique moi" parce que je ne vois pas de lien dans ce bloc "p".

Final-Blonde
# Tropactif #

Féminin
Messages : 1581
Inscrit(e) le : 09/05/2010

http://www.siteduzero.com/
Final-Blonde a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Qeel accordéon ou coulissant

Message par KIRI. le Dim 18 Déc 2011 - 22:10

Bon finalement j'ai pas mis d'image xD Je voulais modifier le texte et j'ai du remplacer les <p> par des <h1> Mais tout va bien ! J'ai un joli QEEL maintenant !
Merci beaucoup de ton aide ! =D

KIRI.
**

Féminin
Messages : 53
Inscrit(e) le : 21/10/2011

http://testkiri.forumactif.org/
KIRI. 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