Jump to content

Multibox Within Div Tags


Recommended Posts

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...