MooTools Can't figure out mouse event... [Archive]

sethwb

04-01-2009, 12:41 AM

I have searched my brains out and after hours of tinkering with the code I'm spent.

The problem I am having is with the mootools accordion script.

There is a gap between the div and the next accordion item in the list (about 10 pixels). I have set all margins and padding to 0 in the style sheet as such:

* {margin: 0px; padding: 0px;}

I am wondering if there is a way to add a mouse event handler that will push everything below the opened div up 10 pixels so that unsightly gap goes away...

how could I do that?

abduraooft

04-01-2009, 08:55 AM

I am wondering if there is a way to add a mouse event handler that will push everything below the opened div up 10 pixels so that unsightly gap goes away... We are not psychic. Can we have a link to your page?

sethwb

04-01-2009, 09:47 PM

This one is actually right on my PC:

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css" media="screen">
@import url('global.css');
</style>
<link rel="shortcut icon" href="/images/favicon.ico" />
<script type="text/javascript"
src="mootools.js"></script>
<script type="text/javascript"
src="demo.js"></script>
</head>

<body>
<div id="top">
<img src="topbgL.jpg" width="934" height="84" />
</div>
<div id="strip">
</div>
<div id="bod">
<ul id="accordion">
<li>
<ul class="toggler"><li></li></ul>
<div class="element"><img src="pl.png" /></div>
</li>
<li>
<ul class="toggler"><li></li></ul>
<div class="element"><img src="d3.png" /></div>
</li>
<li>
<ul class="toggler"><li></li></ul>
<div class="element">Hello.</div>
</li>
<li>
<ul class="toggler"><li></li></ul>
<div class="element">Hello.</div>
</li>
</ul>
</div>
<div id="foot">
</div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-000000-0";
urchinTracker();
</script>

</body>
</html>

demo.js:
window.addEvent('domready', function() {

//create our Accordion instance
var myAccordion = new Accordion($('accordion'), '.toggler', 'div.element', {
opacity: false,
onActive: function(toggler, element){
toggler.setStyle('color', '#41464D');
},
onBackground: function(toggler, element){
toggler.setStyle('color', '#528CE0');
}
});

//add click event to the "add section" link
$('add_section').addEvent('click', function(event) {
event.stop();

// create toggler
var toggler = new Element('li', {
'class': 'toggler',
'html': 'Common descent'
});

// create content
var content = new Element('div', {
'class': 'element',
'html': '<p>Content here.</p>'
});

// position for the new section
var position = 0;

// add the section to our myAccordion using the addSection method
myAccordion.addSection(toggler, content, position);
});
});