PDA

View Full Version : Glossy Accordion Menu



adam2308
11-10-2008, 01:19 PM
1) Script Title: Glossy Accordion Menu

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

3) Describe problem: I have created a new page on my website (not yet visible through the website) as a test page for the above script - http://littlewigan.pwp.blueyonder.co.uk/accordion_menu.htm. My problem is that when i click on a header with a submenu underneath it doesn't open the link attached to that header.

For example if you click on 'apartments' it opens up the sub-menu but it doesn't go to the page hyperlinked to 'apartments'

Regards,
Adam.

jscheuer1
11-10-2008, 03:56 PM
That's how it's supposed to work.

adam2308
11-10-2008, 04:28 PM
oh right... maybe i've understood this script wrong, i was hoping to use it as a neater left hand nav system than the one i currently use.

I was wanting it to work like this for example http://www.totesport.com

Also i was hoping this would solve my issue with when people translate my site into another language the left hand nav woulod translate too.

If this script is no use for what i am after, is there another more suited for my needs?

jscheuer1
11-10-2008, 05:45 PM
That would mean that you would have to have persistence on and that the menu would have to be on all pages. Once you have that, edit the script here:


$('.'+config["headerclass"]).bind(config.revealtype, function(){
if (config.revealtype=="mouseenter"){
clearTimeout(config.revealdelay)
var headerindex=parseInt($(this).attr("headerindex"))
config.revealdelay=setTimeout(function(){ddaccordion.expandone(config["headerclass"], headerindex)}, config.mouseoverdelay || 0)
}
else{
$(this).trigger("evt_accordion")
return false //cancel default click behavior
}
})

Change it to:

return true //cancel default click behavior

Let me know how that works out. I haven't tested it.

adam2308
11-14-2008, 01:24 PM
I've put the menu on each of the pages in the site and change the script as you mentioned.

This has fixed my original problem, for example clicking on 'Apartments' opens the page hyperlinked to that text and also opens the submenu of different apartments below in the menu.

However, there still seems to be some issues:

* If you click home from the home page (not likely, i know), you get a 404 error.
* Photo Gallery page doesn't have '+' or '-' symbols against headers with sub-menus
* Clicking a header with no submenu (for example 'home') from contact us page leaves the contact us sub-menu open.

Have a play around going from page to page using the left hand nav, you may find more issues.

http://www.bulgaria2rent.com

Cheers.

jscheuer1
11-14-2008, 04:41 PM
There is no:


http://www.littlewigan.pwp.blueyonder.co.uk/index.htm

from your source code:


<a class="menuitem" href="index.htm">Home</a>

That should be:


<a class="menuitem" href="index.html">Home</a>

However, since that appears to be hard coded and you don't want the page to change when the user is already on the index, it could be:


<a class="menuitem" href="javascript:void(0);">Home</a>

on index.html. Perhaps even:


<a class="menuitem">Home</a>

But that will cancel hover effects (if any) for that item in some browsers.

The problem on the photo gallery page is at least (there could be other issues) a conflict between jQuery and prototype. See:

http://www.dynamicdrive.com/forums/showpost.php?p=131578&postcount=2

to resolve that.

With persistence on, you are going to get the expanded sections carried back to pages that have no expansion of their own. To change that, this may work - On those pages with no expansion of their own, just after the config, set the cookie to empty, ex:



<script type="text/javascript">


ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click" or "mouseover
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})
ddaccordion.setCookie(config.headerclass, '')
</script>


Alternatively, instead of doing that, you could turn persistence off, and use the:


defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content

property on each page to set its expanded state when it loads.

adam2308
11-14-2008, 05:46 PM
I'm sorry John. What do you mean by persistence?

jscheuer1
11-14-2008, 05:52 PM
The:


persiststate: true, //persist state of opened contents within browser session?

property. To turn it off, set it to false - then you can use the:


defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content

property to set the expanded menu (if any) for each page. This would be better than relying upon the cookie (persiststate: true), as some browsers will not allow the cookie, others may not react to it as expected.

adam2308
11-14-2008, 06:47 PM
thanks john. i've done that too the pages with no sub-menus and they are working fine. I am still having trouble with the pages with sub-menus, the results seem to be very temperamental.

jscheuer1
11-14-2008, 06:58 PM
Turn persistence off on all pages. Use the defaultexpanded property on each page to indicate which item (if any) should be expanded on that page.

adam2308
11-14-2008, 11:19 PM
all done john!! :)

Thanks for your help. It all seems to be working great now!!

jscheuer1
11-15-2008, 12:01 AM
Looking good! But it appears that you still haven't (at this writing) resolved the conflict with Frog on the photo gallery page:


The problem on the photo gallery page is at least (there could be other issues) a conflict between jQuery and prototype. See:

http://www.dynamicdrive.com/forums/showpost.php?p=131578&postcount=2

to resolve that.

You can make that change and it will not affect any of the other pages using the script, but should fix the photo gallery, or at least allow me to see any other problems with that page.

adam2308
11-15-2008, 11:58 AM
oh yes... i'd forgot about that one. I'll have a look at that tomorrow as i am busy all today.

adam2308
11-16-2008, 11:02 AM
i've replaced $ with $j in ddaccordion.js and added the code
var $j - jQuery.noconflict() to the top of the ddaccordion.js file.

jscheuer1
11-16-2008, 01:18 PM
It should be:


var $j = jQuery.noConflict()

adam2308
11-16-2008, 03:38 PM
i've done that change now but still not working.

jscheuer1
11-16-2008, 04:02 PM
OK, the other pages are working now (if you can't see that refresh the browser - you are seeing a cached version), but there is still some problem on the photo gallery, I will have to investigate that. But at least the major source of conflict there appears to have been removed, though I'm not even 100% sure of that yet. I'll get back to you.

jscheuer1
11-16-2008, 05:15 PM
I'm really at a loss, we've done what you're supposed to do to remove the conflict, and I tried a few other ways as well (there are a couple), but the problem persists. I have a clue - the conflict is with scriptaculous or effects, not with prototype itself, so that explains why merely removing the $ conflict of prototype/jQuery is not enough, but I can't seem to track down the precise problem. You could use a different gallery, or even show frog on that page via an iframe. If I get any more info, I'll let you know.

adam2308
11-17-2008, 03:55 PM
I've just noticed an issue between FF and IE.

In IE (6+7), if i click 'apartments', this opens the list of apartments page and expands the submenu under 'apartments'. If i then click into one of the apartments (say Imperial Fort) and then click on 'apartments' again it closes the 'apartments menu when you go back to the list of apartments.

Firefox doesn't have this issure as the +/- symbols don't open and close the menu (this i am not worried about).

adam2308
11-17-2008, 04:31 PM
ignore last post... my mistake!!