Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder
    Join Date
    Aug 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Can't figure out mouse event...

    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?
    Last edited by WA; 04-01-2009 at 04:09 AM.

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,853
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Aug 2008
    Posts
    105
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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);
    });
    });


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •