nidhikandan Posted March 6, 2009 Share Posted March 6, 2009 Just got my head around how to create a grid of buttons with div tags.I now want to add the functionality of MultiBox to each button but the Phatfusion site is confusing to a noob like me. I have downloaded all the required files and looked at the source code on the page but can't figure out how to make the box work as the class appear as hidden.Its is working, But, not working ( invisible all buttons ) Close, right button and left botton. Any ideas?its my tag:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Grid</title><link href="grid/multibox.css" rel="stylesheet" type="text/css" /><!--[if lte IE 6]><link rel="stylesheet" href="/css/ie6.css" type="text/css" media="all" /><![endif]--><script type="text/javascript" src="grid/mootools.js"></script><script type="text/javascript" src="grid/overlay.js"></script><script type="text/javascript" src="grid/multibox.js"></script><style>/* These first two styles are just for looks */* { margin: 0;}body { margin: 5px; background-color: #444;}/* Bits you need are from here down */#container { width: 520px; margin: 0 auto;}#container .imageBox { float: left; width: 100px; height: 100px; margin: 0 4px 4px 0; background-color: #9f0;}.clear { clear: both;}</style></head><body><div id="container"> <div class="imageBox"> <a href="img/robin.jpg" id="mb10" class="mb" title="Image Title 10 (jpg)"><img src="img/robin_thumb.jpg" alt="" border="0" /></a> <div class="multiBoxDesc mb10">This is my description text 10. It can support html.</div> </div> <div class="imageBox"> <a href="img/robin.jpg" id="mb11" class="mb" title="Image Title 11 (jpg)"><img src="img/robin_thumb.jpg" alt="" border="0" /></a> <div class="multiBoxDesc mb11">This is my description text 11. It can support html.</div> </div> <div class="imageBox"> <a href="img/robin.jpg" id="mb12" class="mb" title="Image Title 12 (jpg)"><img src="img/robin_thumb.jpg" alt="" border="0" /></a> <div class="multiBoxDesc mb12">This is my description text 12. It can support html.</div> </div> <div class="imageBox"> <a href="img/robin.jpg" id="mb13" class="mb" title="Image Title 13 (jpg)"><img src="img/robin_thumb.jpg" alt="" border="0" /></a> <div class="multiBoxDesc mb13">This is my description text 13. It can support html.</div> </div> <div class="imageBox"> <a href="img/robin.jpg" id="mb14" class="mb" title="Image Title 14 (jpg)"><img src="img/robin_thumb.jpg" alt="" border="0" /></a> <div class="multiBoxDesc mb14">This is my description text 14. It can support html.</div></div> <div class="clear"></div></div> <script type="text/javascript"> var box = {}; window.addEvent('domready', function(){ box = new MultiBox('mb', {descClassName: 'multiBoxDesc', useOverlay: true}); }); </script></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.