Accordéon

3 participants

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

Résolu Accordéon

Message par Pakodar Sam 28 Mai 2011 - 15:06

Bonjour,
J'ai fait quelques recherches pour créer un accordéon, et j'ai trouvé ce lien.
Cependant, j'y comprend rien, est-ce que quelqu'un qui le comprend pourrait m'expliquer s.v.p. ?
Merci d'avance! Smile
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par SoraNoHime Dim 29 Mai 2011 - 2:13

Bonsoir,

Sur ce sujet on vous explique que vous avez besoin de trois choses.

1. Un javascript qui sera à héberger :

faites un clique droit sur haccordion.js et enregistrez la cible sur votre ordinateur. Hébergez le fichier.js obtenu et conserver dans un coin l'url d'utilisation.
Insérez le dans votre forum ainsi :

Code:
<script type="text/javascript" src="lien d'hébergement de votre fichier.js">

2. De la css à replacer dans votre feuille de style :

cliquez sur haccordion.css, cela vous ammenera à une page . Copier y tout et collez la dans votre css.

3. Du html à mettre là ou vous voudrez qu'apparaisse votre accordéon

Code:

<div id="hc1" class="haccordion">
<ul>

<li>
<div class="hpanel">
Accordion content 1 here
</div>
</li>

<li>
<div class="hpanel">
Accordion content 2 here
</div>
</li>

<li>
<div class="hpanel">
Accordion content 3 here
</div>
</li>

</ul>
</div>

Par la suite, vous n'avez plus qu'à personnaliser.

Cordialement.
SoraNoHime

SoraNoHime
Membre actif

Féminin
Messages : 6218
Inscrit(e) le : 10/06/2010

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

Résolu Re: Accordéon

Message par Pakodar Dim 29 Mai 2011 - 11:05

Bonjour,
Merci de votre aide, mais j'ai quelques soucis...
J'ai essayé d'héberger le script sous plusieurs formats, aucun ne fonctionne. (.docx, .txt et .rtf )
J'ai aussi essayer de le mettre dans la page HTML entre <script></script>, sans succès...
Comment dois-je faire s.v.p.?
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Invité Dim 29 Mai 2011 - 11:15

Bonjour,

Les scripts sont héberger en .js. IL n'y en a pas qu'un, pour que l'accordéon fonctionne il y en a plusieurs.
Voici toute la partie javascript:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
 
/***********************************************
* 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
***********************************************/
 /* 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
*/</script>
 
 
<script type="text/javascript" >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.
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
   }
 
}</script>
 
<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 //collapse current expanded li when mouseout into general space?
})</script>
Ces codes font appel à JQuery, donc il faut creer votre page Html l'enregistrer, puis la modifier Wink .

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Accordéon

Message par Pakodar Dim 29 Mai 2011 - 11:27

J'essaie d'enregistrer, mais je ne peux pas le faire en .js .....
Je peux mettre cette partie javascript dans ma page HTML, directement comme vous me le donnez? Si oui, ça ne fonctionne toujours pas....
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Invité Dim 29 Mai 2011 - 11:38

J'ai réussi à faire fonctionner l'accordéon avec le modèle de démo sur mon forum test .
J'ai installé l'ensemble des codes dans une page Html, et ensuite j'ai inséré l'accordeon dans mon message d'accueil à l'aide d'une iframe.
Je vous donne le contenu de la page Html:
Code:
<!--Make sure your page contains a valid doctype at the very top-->
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
 
/***********************************************
* 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
***********************************************/
 /* 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
*/</script>
 
 
<script>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.
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
   }
 
}</script>
 
<script>haccordion.setup({
 accordionid: 'hc1', //main accordion div id
 paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'},
 selectedli: [0, true], //[selectedli_index, persiststate_bool]
 collapsecurrent: false //collapse current expanded li when mouseout into general space?
})</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;
}
/*Overall CSS for each Horizontal Accordion.
   Most settings should be kept as it.
   Customize each Accordion by styling each Accordion's ID attribute instead.
*/
 
.haccordion{
padding: 0;
}
 
.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*leave as is*/
}
 
 
.haccordion li{
margin: 0;
padding: 0;
display: block; /*leave as is*/
width: 100%; /*For users with JS disabled: Width of each content*/
height: 200px; /*For users with JS disabled: Height of each content*/
overflow: hidden; /*leave as is*/
float: left; /*leave as is*/
}
 
.haccordion li .hpanel{
width: 100%; /*For users with JS disabled: Width of each content*/
height: 200px;  /*For users with JS disabled: Height of each content*/
}
 
</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>
 
 
 
<h2>Demo 1:</h2>
 
<div id="hc1" class="haccordion">
   <ul>
 
   <li>
      <div class="hpanel">
      <img src="http://img502.imageshack.us/img502/746/thailand.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.
      </div>
   </li>
 
   <li>
      <div class="hpanel">
      <img src="http://img264.imageshack.us/img264/7199/japan.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Japan is a constitutional monarchy where the power of the Emperor is very limited.
      </div>
   </li>
 
   <li>
      <div class="hpanel">
      <img src="http://img101.imageshack.us/img101/516/mayai.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals.
      </div>
   </li>
 
   <li>
      <div class="hpanel">
      <img src="http://img194.imageshack.us/img194/9553/camam.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Agriculture has long been the most important sector of the Cambodian economy.
      </div>
   </li>
 
   <li>
      <div class="hpanel">
      <img src="http://img408.imageshack.us/img408/5751/langkawi.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Langkawi is particularly known for its beaches which are among the best in Malaysia.
      </div>
   </li>
 
   </ul>
</div>
 
<p style="clear:left"><a href="javascript:haccordion.expandli('hc1', 0)">Expand 1 Panel</a> | <a href="javascript:haccordion.expandli('hc1', 1)">Expand 2nd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 2)">Expand 3rd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 3)">Expand 4th Panel</a> | <a href="javascript:haccordion.expandli('hc1', 4)">Expand 5th Panel</a></p>
 
 

 
 
 
 
<h2>Demo 2:</h2>
 
 
<div id="hc2" class="haccordion">
   <ul>
 
   <li style="border-right-width:0">
      <div class="hpanel" style="padding:10px; width:250px">
      This accordion content has a custom full width of 250px. Note where the two inline CSS are added within the markup.
      </div>
   </li>
 
   <li style="border-right-width:0">
      <div class="hpanel" style="padding:10px; width:180px">
      This accordion content has a custom full width of 180px. Note where the two inline CSS are added within the markup.
      </div>
   </li>
 
   <li style="border-right-width:0">
      <div class="hpanel" style="padding:10px; width:350px">
      This accordion content has a custom full width of 350px. Note where the two inline CSS are added within the markup.
      </div>
   </li>
 
   <li>
      <div class="hpanel" style="padding:10px; width:550px">
      This accordion content has a custom full width of 550px. Note where the two inline CSS are added within the markup.
      </div>
   </li>
 
   </ul>
</div>
Pour le moment, je découvre ces codes en même temps que vous, je n'ai pas encore essayé de personnaliser Razz .
Anonymous

Invité
Invité


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

Résolu Re: Accordéon

Message par Pakodar Dim 29 Mai 2011 - 11:48

Hum il doit me manquer un truc, j'ai mis la CSS, le code HTML....
que me manque-t-il? J'ai vu que vous avez mis le code CSS dans votre message, il ne faut pas l'installer dans la CSS?
J'y comprend rien.... on peut tout refaire depuis le début svp? que dois-je installer et ou... (si il faut en arriver là --' )
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Invité Dim 29 Mai 2011 - 11:56

:lol!:

On reprend. Pour faire fonctionner le modèle de démo qui comprend 2 accordéon, j'ai créer une page Html nommée accordeon avec le code abc. Ensuite j'ai modifié cette page pour installé l'ensemble des codes dans une page Html (javascript+CSS+Html). Ce qui donne:
Code:
<!--Make sure your page contains a valid doctype at the very top-->
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
 
/***********************************************
* 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
***********************************************/
 /* 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
*/</script>
 
 
<script>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.
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
  }
 
}</script>
 
<script>haccordion.setup({
 accordionid: 'hc1', //main accordion div id
 paneldimensions: {peekw:'50px', fullw:'400px', h:'158px'},
 selectedli: [0, true], //[selectedli_index, persiststate_bool]
 collapsecurrent: false //collapse current expanded li when mouseout into general space?
})</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;
}
/*Overall CSS for each Horizontal Accordion.
  Most settings should be kept as it.
  Customize each Accordion by styling each Accordion's ID attribute instead.
*/
 
.haccordion{
padding: 0;
}
 
.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*leave as is*/
}
 
 
.haccordion li{
margin: 0;
padding: 0;
display: block; /*leave as is*/
width: 100%; /*For users with JS disabled: Width of each content*/
height: 200px; /*For users with JS disabled: Height of each content*/
overflow: hidden; /*leave as is*/
float: left; /*leave as is*/
}
 
.haccordion li .hpanel{
width: 100%; /*For users with JS disabled: Width of each content*/
height: 200px;  /*For users with JS disabled: Height of each content*/
}
 
</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>
 
 
 
<h2>Demo 1:</h2>
 
<div id="hc1" class="haccordion">
  <ul>
 
  <li>
      <div class="hpanel">
      <img src="http://img502.imageshack.us/img502/746/thailand.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />The Andaman Sea is regarded as Thailand's most precious natural resource as it hosts the most popular and luxurious resorts in Asia.
      </div>
  </li>
 
  <li>
      <div class="hpanel">
      <img src="http://img264.imageshack.us/img264/7199/japan.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Japan is a constitutional monarchy where the power of the Emperor is very limited.
      </div>
  </li>
 
  <li>
      <div class="hpanel">
      <img src="http://img101.imageshack.us/img101/516/mayai.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Malaysia is a South Asian country rich in natural resources in areas such as agriculture, forestry and minerals.
      </div>
  </li>
 
  <li>
      <div class="hpanel">
      <img src="http://img194.imageshack.us/img194/9553/camam.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Agriculture has long been the most important sector of the Cambodian economy.
      </div>
  </li>
 
  <li>
      <div class="hpanel">
      <img src="http://img408.imageshack.us/img408/5751/langkawi.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Langkawi is particularly known for its beaches which are among the best in Malaysia.
      </div>
  </li>
 
  </ul>
</div>
 
<p style="clear:left"><a href="javascript:haccordion.expandli('hc1', 0)">Expand 1 Panel</a> | <a href="javascript:haccordion.expandli('hc1', 1)">Expand 2nd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 2)">Expand 3rd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 3)">Expand 4th Panel</a> | <a href="javascript:haccordion.expandli('hc1', 4)">Expand 5th Panel</a></p>
 
 

 
 
 
 
<h2>Demo 2:</h2>
 
 
<div id="hc2" class="haccordion">
  <ul>
 
  <li style="border-right-width:0">
      <div class="hpanel" style="padding:10px; width:250px">
      This accordion content has a custom full width of 250px. Note where the two inline CSS are added within the markup.
      </div>
  </li>
 
  <li style="border-right-width:0">
      <div class="hpanel" style="padding:10px; width:180px">
      This accordion content has a custom full width of 180px. Note where the two inline CSS are added within the markup.
      </div>
  </li>
 
  <li style="border-right-width:0">
      <div class="hpanel" style="padding:10px; width:350px">
      This accordion content has a custom full width of 350px. Note where the two inline CSS are added within the markup.
      </div>
  </li>
 
  <li>
      <div class="hpanel" style="padding:10px; width:550px">
      This accordion content has a custom full width of 550px. Note where the two inline CSS are added within the markup.
      </div>
  </li>
 
  </ul>
</div>

Dans Panneau d'admin' > Affichage > Généralités - message d'accueil, j'ai mis:
<iframe src="adresse de ma page html" frameborder="none" width="800" height="800" scrolling="no"></iframe>

Quel modèle voulez-vous installer, et que voulez-vous personnaliser dessus?

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Accordéon

Message par Pakodar Dim 29 Mai 2011 - 12:05

Accordéon Captur23

Voilà ce que ça me donne. J'ai fait exactement comme vous me l'avez dit. Je n'ai rien fait de plus ni de moins. Et lorsque j'essaie de le mettre en message d'accueil, il n'y a absolument rien....
La version change quelque chose?

Edit: je ne sais pas ce qu'est le code abs, je ne l'ai pas.
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Invité Dim 29 Mai 2011 - 12:17

La version de votre forum n'influe pas sur ce genre de code logiquement.
J'obtiens exactement le même résultat que vous si je colle le code directement dans une page Html nouvelle.

Etape 1:
Cliquez sur "Créer une nouvelle page html" et la remplir comme ceci:
Accordéon Captur41
Valider.
Etape 2:
Cliquez sur edit à coté de cette page nouvellement créer, et collez le code complet.

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Accordéon

Message par Pakodar Dim 29 Mai 2011 - 12:32

Fait.
Aucun changement....
Je vire abc ou je le laisse?
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Invité Dim 29 Mai 2011 - 12:40

Assomé Je n'y comprends plus rien.

En collant ceci dans votre message d'accueil, ça donne quoi?
Code:
<iframe src="http://izzy-test.forumgratuit.org/h1-accordeon" frameborder="none" width="800" height="800" scrolling="no"></iframe>

Le "abc" vous l'enlevez.

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Accordéon

Message par Pakodar Dim 29 Mai 2011 - 13:17

Alors, j'ai fait le message d'accueil, il n'y avait rien parce que j'avais pas mis de forum ( --')
Mais là c'est bon, ça apparaît correctement. Cependant pour la page HTML ça ne marche toujours pas...
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Invité Dim 29 Mai 2011 - 14:12

Bon, dans ce cas, on va faire autrement.
1- Quel type d'accordéon voulez-vous? La démo 1 ou 2?
2- Où voulez-vous placer cet accordéon?

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Accordéon

Message par Pakodar Dim 29 Mai 2011 - 14:19

Alors, j'aimerais faire le 1.
J'aimerais le placer dans un widget et le message d'accueil.

Edit: J'ai (enfin) réussi, j'ai installé le script sur mon forum, donc la page HTML marche. Maintenant que dois-je modifier pour le personnaliser?
Comment peut-on changer la hauteur et la largeur, principalement?
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Pakodar Lun 30 Mai 2011 - 16:46

Up
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Invité Lun 30 Mai 2011 - 17:14

Bonjour,

La largeur et la hauteur se modifient dans l'un des scripts:
<script>haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'50px', fullw:'400px', h:'200px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //collapse current expanded li when mouseout into general space?
})</script>
peekw => petit morceau visible des contenus pliés.
fullw => largeur globale du menu accordéon.
h => Hauteur du menu accordéon.

J'ai revue la page Html, en ne mettant que le nécessaire au modèle 1:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
 
/***********************************************
* 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
***********************************************/
 /* 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
*/</script>
 
 
<script>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
   }
 
}</script>
 
<script>haccordion.setup({
 accordionid: 'hc1', //main accordion div id
 paneldimensions: {peekw:'50px', fullw:'400px', h:'200px'},
 selectedli: [0, true], //[selectedli_index, persiststate_bool]
 collapsecurrent: false //collapse current expanded li when mouseout into general space?
})</script>
 
<style type="text/css">
 
/*CSS for example Accordion #hc1*/
 
#hc1 li{
margin:0 1px 0 0; /*Spacing between each LI container*/
}
 
#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightblue;
}
 
.haccordion{
padding: 0;
}
 
.haccordion ul{
margin: 0;
padding: 0;
list-style: none;
overflow: hidden; /*leave as is*/
}
 
 
.haccordion li{
margin: 0;
padding: 0;
display: block; /*leave as is*/
width: 100%; /*For users with JS disabled: Width of each content*/
height: 100px; /*For users with JS disabled: Height of each content*/
overflow: hidden; /*leave as is*/
float: left; /*leave as is*/
}
 
.haccordion li .hpanel{
width: 100%; /*For users with JS disabled: Width of each content*/
height: 100px;  /*For users with JS disabled: Height of each content*/
}
 
</style>
 

 
<h2>Demo 1:</h2>
 
<div id="hc1" class="haccordion">
   <ul>
 
   <li>
      <div class="hpanel">
      <img src="http://img502.imageshack.us/img502/746/thailand.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Texte 1
      </div>
   </li>
 
   <li>
      <div class="hpanel">
      <img src="http://img264.imageshack.us/img264/7199/japan.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Texte 2
      </div>
   </li>
 
   <li>
      <div class="hpanel">
      <img src="http://img101.imageshack.us/img101/516/mayai.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Texte 3
      </div>
   </li>
 
   <li>
      <div class="hpanel">
      <img src="http://img194.imageshack.us/img194/9553/camam.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />Texte 4
      </div>
   </li>
 
   <li>
      <div class="hpanel">
      <img src="http://img408.imageshack.us/img408/5751/langkawi.jpg" style="float:left; padding-right:8px; width:200px; height:148px" />texte 5.
      </div>
   </li>
 
   </ul>
</div>
 
<p style="clear:left"><a href="javascript:haccordion.expandli('hc1', 0)">Expand 1 Panel</a> | <a href="javascript:haccordion.expandli('hc1', 1)">Expand 2nd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 2)">Expand 3rd Panel</a> | <a href="javascript:haccordion.expandli('hc1', 3)">Expand 4th Panel</a> | <a href="javascript:haccordion.expandli('hc1', 4)">Expand 5th Panel</a></p>

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Accordéon

Message par Pakodar Lun 30 Mai 2011 - 18:26

Ah bah d'accord, je cherchais dans un truc comme la CSS ou dans le genre, j'y était pas du tout Embarassed Razz
Merci beaucoup, je ne fermes pas le sujet, le temps de créer les images et codes, au cas où j'aurais encore besoin d'aide Smile
En attendant, un petit + et un gros
:thanks: Flowers2
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Pakodar Mar 31 Mai 2011 - 17:07

Bonjour,
Sauriez-vous mettre uniquement le contenu d'une page HTML dans un widget sur un autre forum?
J'ai installé le script sur mon forum de test, mais sur mon vrai forum je n'ai plus la place de le mettre dans la description du forum.
J'ai bien essayé avec votre code:
Code:
    <iframe src="http://izzy-test.forumgratuit.org/h1-accordeon" frameborder="none" width="800" height="800" scrolling="no"></iframe>
Mais ça m'affiche toute le forum de test (où j'ai installé le script et la page).
Est-ce obligatoire d'installer le script dans la description? N'y a-t-il pas un autre endroit? Je ne peux pas le mettre dans des balises dans la page HTML?
Auriez-vous la solution s.v.p j'y suis presque aidez moi
Deuxième chose, est-il possible de mettre des images au lieu du fond ainsi que d'autres sur les "barres" permettant de changer de page?
Troisième chose, pour mon information personnelle, est-il possible de changer d'onglet au clic?
Merci d'avance!
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Pakodar Mer 1 Juin 2011 - 19:32

Up!!
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Invité Jeu 2 Juin 2011 - 9:12

Bonjour,

Je n'ai pas tout suivi, pourquoi voulez-vous mettre le script dans la description? Je l'ai mis dans la page d'accueil pour tester. Je vais faire quelques essais pour voir comment placer cet accordéon partout sans soucis.

Pour placer une image de fond dans l'accordeon, cherchez:
Code:
#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: lightblue;
}
Et remplacez par:
#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: url('adresse de l'image de fond');
}
Pour mettre un fond au paragraphe en dessous de l'accordeon, 2 solutions:
- mettre une image globale en ajoutant:
<p style="clear:left;url('adresse de l'image de fond');">
- mettre une image derrière chaque lien en ajoutant pour chaque lien:
<a href="javascript:haccordion.expandli('hc1', 0)" style="background:url('adresse de l'image de fond');">

Pour le changement au click, je n'ai pas trouvé la modification à effectuer.Je ne suis pas sure que ce soit possible.

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Accordéon

Message par Pakodar Jeu 2 Juin 2011 - 11:04

Isolde a écrit:Je n'ai pas tout suivi, pourquoi voulez-vous mettre le script dans la description?

Non non, je ferme ma bouche et je réfléchi, c'est bon c'est régler Smile


Cependant, pour l'insertion d'une image de fond, ce n'était pas ça....
Normalement il faut <img="URL"> pour les images non? J'ai essayé avec et sans, c'était pas bon.....

Ensuite je n'arrive pas à mettre l'accordéon au centre de la page, où dois-je placer les balises svp?

Dernière chose, comment fait-on pour afficher le contenu d'une page HTML dans un widget sans mettre tout le code (de la page HTML): en clair mettre un code qui affiche le contenu d'une page HTML.

Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Pakodar Sam 4 Juin 2011 - 10:45

Up
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Invité Sam 4 Juin 2011 - 14:02

Bonjour,
Pour installer un menu accordéon de ce style où vous les souhaitez, voici la marche à suivre.

1. Le partie script & CSS non modifiable:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://sd-5.archive-host.com/membres/up/86411517957321821/haccordionJS.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>
<link rel="stylesheet" type="text/css" href="http://sd-5.archive-host.com/membres/up/86411517957321821/haccordionCSS.css" />
Cette partie est indispensable au bon fonctionnement de l'accordéon, mais n'ets pas personnalisable, il faut la conserver ainsi.

2. La partie script & CSS modifiable:
<script type="text/javascript">
haccordion.setup({
accordionid: 'hc1', //id principale accordeon
paneldimensions: {peekw:'15px', fullw:'100px', h:'100px'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})
</script>

<style type="text/css">
#hc1 li{
margin:0 3px 0 0; /*Espace entre chaque volet*/
}

#hc1 li .hpanel{
padding: 5px; /*marge intérieure des contenus*/
background: lightblue;/*couleur de fond des volets*/
background-image: url('url de votre image');/*image de fond des volets*/}
</style>
En rouge, personnalisez les dimensions de l'accordéon: le morceau visible de chaque volet, la largeur globale, la hauteur globale.
En orange, personnalisez le fond des volets de manière générale.

3. L'accordéon en lui-même:
Code:
<div id="hc1" class="haccordion">
   <ul>
   <li>
      <div class="hpanel">
      Texte 1
      </div>
   </li>
   <li>
      <div class="hpanel">
      Texte 2
      </div>
   </li>
   <li>
      <div class="hpanel">
      Texte 3
      </div>
   </li>
   <li>
      <div class="hpanel">
      Texte 4
      </div>
   </li>
   <li>
      <div class="hpanel">
      Texte 5
      </div>
   </li>
   </ul>
</div>
Le contenu de chaque volet est placé entre <div class="hpanel"> et </div>

4. Le paragraphe permettant de changer les onglets au clic:
<p style="clear:left"><a href="javascript:haccordion.expandli('hc1', 0)">Volet 1</a> | <a href="javascript:haccordion.expandli('hc1', 1)">Volet 2</a> | <a href="javascript:haccordion.expandli('hc1', 2)">Volet 3</a> | <a href="javascript:haccordion.expandli('hc1', 3)">Volet 4</a> | <a href="javascript:haccordion.expandli('hc1', 4)">Volet 5</a></p>
Personnalisable en ajoutant des class CSS.

Le code complet:
Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://sd-5.archive-host.com/membres/up/86411517957321821/haccordionJS.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>
<link rel="stylesheet" type="text/css" href="http://sd-5.archive-host.com/membres/up/86411517957321821/haccordionCSS.css" />


<script type="text/javascript">
haccordion.setup({
   accordionid: 'hc1', //main accordion div id
   paneldimensions: {peekw:'15px', fullw:'100px', h:'100px'},
   selectedli: [0, true], //[selectedli_index, persiststate_bool]
   collapsecurrent: false //<- No comma following very last setting!
})
</script>

<style type="text/css">
#hc1 li{
margin:0 3px 0 0; /*Espace entre chaque volet*/
}

#hc1 li .hpanel{
padding: 5px; /*marge intérieure des contenus*/
background: lightblue;/*couleur de fond des volets*/
background-image: url('http://i21.servimg.com/u/f21/11/11/92/64/th13na10.gif');/*image de fond des volets*/}
</style>

<div id="hc1" class="haccordion">
   <ul>
   <li>
      <div class="hpanel">
      Texte 1
      </div>
   </li>
   <li>
      <div class="hpanel">
      Texte 2
      </div>
   </li>
   <li>
      <div class="hpanel">
      Texte 3
      </div>
   </li>
   <li>
      <div class="hpanel">
      Texte 4
      </div>
   </li>
   <li>
      <div class="hpanel">
      Texte 5
      </div>
   </li>
   </ul>
</div>

<p><a href="javascript:haccordion.expandli('hc1', 0)">Volet 1</a> | <a href="javascript:haccordion.expandli('hc1', 1)">Volet 2</a> | <a href="javascript:haccordion.expandli('hc1', 2)">Volet 3</a> | <a href="javascript:haccordion.expandli('hc1', 3)">Volet 4</a> | <a href="javascript:haccordion.expandli('hc1', 4)">Volet 5</a></p>
Les codes fonctionnent à conditions d'êtres tous groupés, donc comme le code complet ci dessus. Vous pouvez placer l'accordeon dans le message d'accueil, dans un widget personnalisé, ou dans une page Html.
Si vous vous servez d'une page Html, vous pouvez placer l'accordeon en vous servant d'une iframe:
<iframe src="Adresse de la page HTML" frameborder="0" width="Largeur de l'accordeon" height="Hauteur de l'accordeon" scrolling="no"></iframe>


Pour centrer l'accordeon, placez le dans un tableau:
Code:
<table align="center"><tr><ts>le code complet de l'accordeon</td></tr></table>
J'ai repris depuis début, en hébergeant le plus de parties possible de manière à réduire le nombre de lignes et en essayant de détailler le plus possible. Si vous avez des problèmes pour personnaliser, donnez moi un maximum de détail, je suis parfois un peu longue à comprendre Wink .

Cordialement.
Anonymous

Invité
Invité


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

Résolu Re: Accordéon

Message par Pakodar Sam 4 Juin 2011 - 14:51

affraid

Là j'ai envie de dire chapeau! Vous pourriez envoyer ce message pour proposer un tutoriel Very Happy
C'est parfait merci beaucoup Smile

:thanks: :thanks: :thanks: :thanks:
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Convivialite Sam 4 Juin 2011 - 15:02

Vraiment merci Isolde Accordéon 122779

c'est là qu'on voit les pros , ça fonctionne du 1er coup , alors que ça fait un moment que j'essayais de le faire

Accordéon 941733
Convivialite

Convivialite
Membre actif

Féminin
Messages : 2874
Inscrit(e) le : 19/03/2009

http://la-convivialite.forumactif.com
Convivialite a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Accordéon

Message par Pakodar Sam 4 Juin 2011 - 15:29

ça pour du pro c'est du pro..... :lol!:
Pakodar

Pakodar
*****

Masculin
Messages : 669
Inscrit(e) le : 22/12/2010

http://ogamemaio.forumgratuit.org/forum
Pakodar a été remercié(e) par l'auteur de ce sujet.

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

- Sujets similaires

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