Full Width of Horizontal Accordion (HTML, CSS, JQuery)
I am using an horizontal accordion from here: http://www.dynamicdrive.com/dynamicindex17/haccordion.htm
I got it to display a full height but i'm having trouble with the width, it keeps either not working at all or generating a inline width of 500px on each list item, which I'm not sure where it is pulling it from. I tried to upload my code to JS Fiddle but i was having trouble :( Here's the code below:
HTML: http://pastebin.com/4UuwJXSi
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="redo.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../scripts/accordion.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>
<script type="text/javascript">
haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'50px', fullw:'100%', h:'100%'},
selectedli: [0, true], //[selectedli_index, persiststate_bool]
collapsecurrent: false //<- No comma following very last setting!
})</script>
</head>
<body>
<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://www.fourseasons.com/images/generated/property/langkawi/landing_pages/basics_welcome.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>
</body>
CSS:
html, body
{
height:100%;
width: 100%;
}
*
{
margin:0px;
padding:0px
}
#hc1, #hc1 ul, #hc1 li
{
height: 100%;
}
#hc1, #hc1 ul
{
width: 100%;
}
li
{
border: 1px solid black;
height: 100%;
}
/* -- Start Accordion -- */
.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*/
overflow: hidden; /*leave as is*/
float: left; /*leave as is*/
}
/* -- End Accordion -- */
Javascript:
/ * Horizontal Accordion script * Created: Oct 27th,
2009.This notice must stay intact
for usage * Author: Dynamic Drive at http: //www.dynamicdrive.com/
* Visit http: //www.dynamicdrive.com/ for full source code
* /
var haccordion={
/ / customize loading message
if accordion markup is fetched via Ajax: ajaxloadingmsg: '<div style="margin: 1em; font-weight: bold"><img src="ajaxloadr.gif" style="vertical-align: middle" /></div>',
accordioninfo: {},
//class that holds config information of each haccordion instance
expandli: function(accordionid, targetli) {
var config = haccordion.accordioninfo[accordionid]
var $targetli = (typeof targetli == "number") ? config.$targetlis.eq(targetli) : (typeof targetli == "string") ? jQuery('#' + targetli) : jQuery(targetli)
if (typeof config.$lastexpanded != "undefined") //targetli may be an index, ID string, or DOM reference to LI
config.$lastexpanded.stop().animate({
width: config.paneldimensions.peekw
}, config.speed) //contract last opened content
$targetli.stop().animate({
width: $targetli.data('hpaneloffsetw')
}, config.speed) //expand current content
config.$lastexpanded = $targetli
},
urlparamselect: function(accordionid) {
var result = window.location.search.match(new RegExp(accordionid + "=(\\d+)", "i")) //check for "?accordionid=index" in URL
if (result != null) result = parseInt(RegExp.$1) + "" //return value as string so 0 doesn't test for false
return result //returns null or index, where index is the desired selected hcontent index
},
getCookie: function(Name) {
var re = new RegExp(Name + "=[^;]+", "i") //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},
setCookie: function(name, value) {
document.cookie = name + "=" + value + "; path=/"
},
loadexternal: function($, config) { //function to fetch external page containing the entire accordion content markup
var $hcontainer = $('#' + config.ajaxsource.container).html(this.ajaxloadingmsg)
$.ajax({
url: config.ajaxsource.path,
//path to external content
async: true,
error: function(ajaxrequest) {
$hcontainer.html('Error fetching content.<br />Server Response: ' + ajaxrequest.responseText)
},
success: function(content) {
$hcontainer.html(content)
haccordion.init($, config)
}
})
},
init: function($, config) {
haccordion.accordioninfo[config.accordionid] = config //cache config info for this accordion
var $targetlis = $('#' + config.accordionid).find('ul:eq(0) > li') //find top level LIs
config.$targetlis = $targetlis
config.selectedli = config.selectedli || [] //set default selectedli option
config.speed = config.speed || "normal" //set default speed
$targetlis.each(function(i) {
var $target = $(this).data('pos', i) //give each li an index #
$target.data('hpaneloffsetw', $target.find('.hpanel:eq(0)').outerWidth()) //get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
$target.click(function() {
haccordion.expandli(config.accordionid, this)
config.$lastexpanded = $(this)
})
/*if (config.collapsecurrent){ //if previous content should be contracted when expanding current
$target.click(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(func开发者_JS百科tion() {
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
}
}
Any help on this would be great. In the end I want the open accordion to take up the users full screen no matter what resolution they're in. Here's the not working JSFiddle: http://jsfiddle.net/HGh3V/
Note I figured out that it is not taking the 100% for a width because of the peekw value having a pixel width. Is it taking a percentage of the peek width. How do I fix this?
That library wasn't designed to handle % widths, nor to prevent accordions from overflowing.
To fix, you need to edit haccordion.js (which you've apparently renamed "accordion.js").
Change this code snippet:
$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)
To this:
var maxWidth = $targetlis.parent ().width ();
$targetlis.each ( function () { maxWidth -= $(this).outerWidth (true); } );
$targetlis.each(function(i){
var $target=$(this).data('pos', i) //give each li an index #
var lclMaxWidth = maxWidth + $target.find ('.hpanel:eq(0)').outerWidth (true);
$target.css ('width', config.paneldimensions.fullw);
//get offset width of each .hpanel DIV (config.dimensions.fullw + any DIV padding)
var hpaneloffsetw = $target.find ('.hpanel:eq(0)').outerWidth (true);
if (hpaneloffsetw > lclMaxWidth)
hpaneloffsetw = lclMaxWidth;
$target.data('hpaneloffsetw', hpaneloffsetw);
$target.css ('width', '');
I also put the file, with the changes made, at http://pastebin.com/yXZNmn7C .
Your accordion is set up using the following piece of JavaScript :
haccordion.setup({
accordionid: 'hc1', //main accordion div id
paneldimensions: {peekw:'50px', fullw:'500px', h:'158px'},
selectedli: [0, true],
collapsecurrent: false
})
Simply, adjust peekw and fullw values to achieve desired accordion's width.
加载中,请稍侯......
精彩评论