PDA

View Full Version : Accordion Menu script (v1.3) action onrollover rather than click?



berrypicker
05-21-2008, 12:54 AM
1) Script Title: Accordion Menu script (v1.3)

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ddaccordion.htm

3) Describe problem: Hello, I've been fiddling with this script and what a lot of fun it is. Thank you for posting the script on DD

A sample of my manipulation is here:
http://www.connectec.com/design_stunts_menus_accordion.htm

The part I have a question about is this: If you look at the bar that says "cats," you can see there are two additional links over at the right edge. When I click on those, I just want them to be regular links that take me to a new page, instead of collapsing the cat on the sidewalk picture as they do now. Any idea how I could accomplish this?

here is the code that makes the cat bar and image:
<div class="mypets"><a href="#" onmouseover="ddaccordion.expandone('mypets', 1); return false">Cats</a>
<ul><li><a href="hunters.htm" onClick="return(this)">hunters</a></li><li><a href="history.htm">history</a></li></ul>
</div>

<div class="thepet"><img src="images/sidewalk_cat.jpg" alt="sidewalk cat" width="422" height="67" />
<p span class="paleOnTop">Cats are often valued <BR />
for their <a href="companionship.htm">companionship</a> <BR />
and ability to hunt.<BR /></p>
</div>

I am attempting to achieve the same effect that is used at http://www.brown.edu/ But I am pretty sure they are not using this script to do it.

Thanks,
Carolyn

berrypicker
05-21-2008, 02:18 AM
the onmouseover part of things is working fine. The menus expand and collapse on rollover as desired. I have the variables set so that only one div can be open at a time.

The default for this script is for the action to happen on click, and I want to be able to click on a hyperlink on the currently expanded menu bar and browse to that link. I never need any div to collapse 'onClick.'
Thanks.

ddadmin
05-21-2008, 06:25 AM
Firstly, if you're looking to get the headers to expand onMouseover, you don't need to physically include the codes:


onMouseover="ddaccordion.expandone('mypets', 0); return false"

inside your HTML. A modified version (http://www.dynamicdrive.com/forums/showthread.php?t=31394) of ddaccordion.js does this.

Regarding disabling the headers from collapsing onClick, find the line:


$('.'+config["headerclass"]).click(function(){ //assign behavior when headers are clicked on

and change that to:


$('#nosuchid').click(function(){ //assign behavior when headers are clicked on

Either in the original ddaccordion.js, or the modified one I mentioned earlier.

berrypicker
05-21-2008, 03:41 PM
Thank you for your quick reply and accurate resolution.

I still have some tweaking before I put the pages on the public part of the site, but this is 90% there...

Kudos!
C.

berrypicker
07-21-2008, 08:45 AM
Hello,
Here is a sample of what I am working on.
http://www.connectec.com/accordion_sample20080721.htm

I love this script, and have made the modifications you suggest so that it works onmouseover. Is there anyway to delay the opening of the sub menus? Onmouseover makes me a little seasick if I accidently roll my mouse over several menus in succession. I want something that works a little more like "hover,"
So the menu doesn't drop if you just rollover it briefly, but only opens if you pause the mouse on that menu heading.

Thanks.

ddadmin
07-22-2008, 03:24 AM
This is based on the newer 1.5.1 version of ddaccordion.js. To add a delay, try replacing the line:


ddaccordion.expandone(config["headerclass"], parseInt($(this).attr("headerindex")))

with:


var headerobj=this
setTimeout(function(){ddaccordion.expandone(config["headerclass"], parseInt($(headerobj).attr("headerindex")))}, 500)

where 500 is the delay in milliseconds.