Accordéon
3 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Re: Accordéon
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 :
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
Par la suite, vous n'avez plus qu'à personnaliser.
Cordialement.
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- Membre actif
-
Messages : 6218
Inscrit(e) le : 10/06/2010
Re: Accordéon
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.?
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.?
Re: Accordéon
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:
Cordialement.
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>
Cordialement.
Invité- Invité
Re: Accordéon
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....
Je peux mettre cette partie javascript dans ma page HTML, directement comme vous me le donnez? Si oui, ça ne fonctionne toujours pas....
Re: Accordéon
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:
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>
Invité- Invité
Re: Accordéon
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à --' )
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à --' )
Re: Accordéon
: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:
Dans Panneau d'admin' > Affichage > Généralités - message d'accueil, j'ai mis:
Quel modèle voulez-vous installer, et que voulez-vous personnaliser dessus?
Cordialement.
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.
Invité- Invité
Re: Accordéon
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.
Re: Accordéon
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:
Valider.
Etape 2:
Cliquez sur à coté de cette page nouvellement créer, et collez le code complet.
Cordialement.
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:
Valider.
Etape 2:
Cliquez sur à coté de cette page nouvellement créer, et collez le code complet.
Cordialement.
Invité- Invité
Re: Accordéon
Fait.
Aucun changement....
Je vire abc ou je le laisse?
Aucun changement....
Je vire abc ou je le laisse?
Re: Accordéon
Je n'y comprends plus rien.
En collant ceci dans votre message d'accueil, ça donne quoi?
Le "abc" vous l'enlevez.
Cordialement.
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.
Invité- Invité
Re: Accordéon
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...
Mais là c'est bon, ça apparaît correctement. Cependant pour la page HTML ça ne marche toujours pas...
Re: Accordéon
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.
1- Quel type d'accordéon voulez-vous? La démo 1 ou 2?
2- Où voulez-vous placer cet accordéon?
Cordialement.
Invité- Invité
Re: Accordéon
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?
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?
Re: Accordéon
Bonjour,
La largeur et la hauteur se modifient dans l'un des scripts:
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:
Cordialement.
La largeur et la hauteur se modifient dans l'un des scripts:
peekw => petit morceau visible des contenus pliés.<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>
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.
Invité- Invité
Re: Accordéon
Ah bah d'accord, je cherchais dans un truc comme la CSS ou dans le genre, j'y était pas du tout
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
En attendant, un petit + et un gros
:thanks:
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
En attendant, un petit + et un gros
:thanks:
Re: Accordéon
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:
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
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!
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:
Mais ça m'affiche toute le forum de test (où j'ai installé le script et la page).
- Code:
<iframe src="http://izzy-test.forumgratuit.org/h1-accordeon" frameborder="none" width="800" height="800" scrolling="no"></iframe>
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
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!
Re: Accordéon
Up!!
Re: Accordéon
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:
- mettre une image globale en ajoutant:
Pour le changement au click, je n'ai pas trouvé la modification à effectuer.Je ne suis pas sure que ce soit possible.
Cordialement.
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;
}
Pour mettre un fond au paragraphe en dessous de l'accordeon, 2 solutions:#hc1 li .hpanel{
padding: 5px; /*Padding inside each content*/
background: url('adresse de l'image de fond');
}
- mettre une image globale en ajoutant:
- mettre une image derrière chaque lien en ajoutant pour chaque lien:<p style="clear:left;url('adresse de l'image de fond');">
<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.
Invité- Invité
Re: Accordéon
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
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.
Re: Accordéon
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:
2. La partie script & CSS modifiable:
En orange, personnalisez le fond des volets de manière générale.
3. L'accordéon en lui-même:
4. Le paragraphe permettant de changer les onglets au clic:
Le code complet:
Si vous vous servez d'une page Html, vous pouvez placer l'accordeon en vous servant d'une iframe:
Pour centrer l'accordeon, placez le dans un tableau:
Cordialement.
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" />
2. La partie script & CSS modifiable:
En rouge, personnalisez les dimensions de l'accordéon: le morceau visible de chaque volet, la largeur globale, la hauteur globale.<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 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>
4. Le paragraphe permettant de changer les onglets au clic:
Personnalisable en ajoutant des class CSS.<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>
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>
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>
Cordialement.
Invité- Invité
Re: Accordéon
Là j'ai envie de dire chapeau! Vous pourriez envoyer ce message pour proposer un tutoriel
C'est parfait merci beaucoup
:thanks: :thanks: :thanks: :thanks:
Re: Accordéon
Vraiment merci Isolde
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
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
Re: Accordéon
ça pour du pro c'est du pro..... :lol!:
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum