Setting the width of a division dynamically
I have a jScrollPane on a magento product page which is f开发者_运维知识库etching in options which are displayed as an inline list (see screenshot - http://awesomescreenshot.com/06dlbao6b ).
Is it possible to dynamically set a division size depending on the content as some products will only have 2 options but some may have 27.
So far I've only worked out a way of showing more than 4 options if I manually set the division width, this isn't really an option as if I only have 3 products I don't need to show the scroll controls.
The division in question is the product-options-chooser div.
Not sure if it helps but here is the code in question from \template\catalog\product\view\options\type\select.phtml :
<?php /* @var $this Mage_Catalog_Block_Product_View_Options_Type_Select */ ?>
<?php $_option = $this->getOption() ?>
<script>
jQuery(function()
{
var pane = jQuery('.product-options-container');
pane.jScrollPane(
{
showArrows: true,
animateScroll: true
}
);
});
</script>
<div class="product-options-title">
<dt>
<label<?php if ($_option->getIsRequire()) echo ' class="required"' ?>>
<?php if ($_option->getIsRequire()) echo '<em>*</em>' ?>
<?php echo $this->htmlEscape($_option->getTitle()) ?></label>
</dt>
</div>
<div class="product-options-container">
<div class="product-options-chooser">
<dd<?php if ($_option->decoratedIsLast){?> class="options-last"<?php }?>>
<div class="input-box"> <?php echo $this->getValuesHtml() ?>
<?php if ($_option->getIsRequire()): ?>
<?php if ($_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO || $_option->getType() == Mage_Catalog_Model_Product_Option::OPTION_TYPE_CHECKBOX): ?>
<span id="options-<?php echo $_option->getId() ?>-container"></span>
<?php endif; ?>
<?php endif;?>
</div>
</dd>
</div>
</div>
Have a workaround for this now as managed to set widths to specific classes for specific products
精彩评论