Featured Content Slider v2.4 + (Glossy) Accordion Menu

[GSimon]

1) Script Title: Featured Content Slider v2.4, Glossy Accordion Menu

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamici...tentslider.htm

http://www.dynamicdrive.com/dynamici...enu-glossy.htm

and (for extra reference)

http://www.dynamicdrive.com/dynamici...suppliment.htm

3) Describe problem: I am trying to combine these two scripts. What I want to do is toggle the accordion menu each time I hit 'previous' or 'next' when using the featured content slider script.

If that doesn't make sense I'll rephrase it a little. When you use the Content menu script and hit the previous and next links/buttons, its goes to the next content and displays that. I want to add previous and next links to the accordion menu script as well, so that when you hit the 'next' link it expands the heading and submenu of the next item on the list. Finally I want both these effects to happen together, so that they both increment simultaneously.

The best I've been able to do so far is have it so that the accordion menu heading is highlighted when you hit next on the menu, but that was just accomplished through modifying the css a little, I think to toggle the headings I'll need to make use of some additional javascript or modification to the existing javascript files.

Thanks for the help,

I came across this thread and solution: http://www.dynamicdrive.com/forums/s...ad.php?t=64615

It seems to be what I'm looking for but I can't figure out how to modify the code to work with the script I'm using (as straightforward as it may seem).

Last thing, here is the script I am using for the featured content slider:

        
        featuredcontentslider.init({
            id: "slider2",  //id of main slider DIV
            contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
            toc: "markup",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
            nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
            revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
            enablefade: [false, 0.2],  //[true/false, fadedegree]
            autorotate: [false, 3000],  //[true/false, pausetime]
            onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
                //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
                //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
            }
        })

[jscheuer1]

Assuming there have been no major changes to these scripts since that post you refer to, and assuming you have only one Content Slider and only one Accordion Menu on the page, then in your ddaccordion.init you could do like so (only add the highlighted, the rest of your ddaccordion.init should remain the same):

ddaccordion.init({
	headerclass: "mypets", //Shared CSS class name of headers group
	contentclass: "thepet", //Shared CSS class name of contents group
	revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", 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: [0], //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: ["", "openpet"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
	togglehtml: ["none", "", ""], //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
		// create next/previous button events
		var hc = this.headerclass, curindex = 0, subs = ddaccordion.contentgroup[hc],
		$ = jQuery, next, prev, subsl = subs.length, tog = this.toggleclass;
		function findcurrent(isprev){
			subs.each(function(i){
				if(this.style.display === 'block'){
					curindex = i;
					return !isprev;
				}
			});
			if(!this.collapseprev){
				subs.each(function(i){
					if(this.style.display === 'block'){
						this.style.display = 'none';
						$(headers[i]).removeClass(tog[1]).addClass(tog[0]);
					}
				});
			}
		}
		$('.next').click(function(e){
			e.preventDefault();
			findcurrent();
			next = (curindex + 1) % subsl;
			ddaccordion.expandone(hc, next);
		});
		$('.prev').click(function(e){
			e.preventDefault();
			findcurrent(true);
			prev = (curindex - 1 + subsl) % subsl;
			ddaccordion.expandone(hc, prev);
		});
	},
	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
		//do nothing
	}
});

Notes: This should work with any one Content Slider that has previous and next buttons used with any one Accordion. The part that you add to your ddaccordion.init is highlighted, the red parts are the only changes required from the code in the post you referred to.

The browser cache may need to be cleared and/or the page refreshed to see changes.

If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.

[GSimon]

Thank you so much John! Works perfectly, just what I was looking to do.

Update: The above solution worked great but it uncovered another issue, if there's a simple solution to this that would be great.

Here's the page I'm working on: http://www.westernclassfind.com/home1.php

The problem is that the Content Slider v2 automatically selects a slide when the page loads, and the first item on the menu list is highlighted by default when the page loads. I would like it so that none of the menu items are selected until a user clicks on the menu item.

On the above page the '3m Center' link is highlighted when you load the page, and I dont want that. I have tried including an empty menu item and setting it to display:none, but that conflicts with the content menu slider when I hit the previous/next links and brings up other issues.

I'm sure I'll be able to find some creative work-a-round to this, but just incase is there a way to make it so that content slider just shows nothing by default?

Thanks a bunch.

Also not to be nitpicky, but the above solution works except that if the user hits the 'next' and 'previous' repeatedly (and quickly) the order starts to mess up and the accordion menu goes out of sync with the content menu slider. This isn't a big issue, but I feel that this problem wouldn't occur if there was coding in place telling a particular dropdown menu to expand when a particular content slider menu item is loaded up, rather than using an array to increment both scripts when you hit a 'next/previous' button.

[GSimon]

Update from my last update.

I figured out a good workaround to my problem, so the issue of the first menu item being selected on page load isn't really a problem any more.

However, if there is a solution to the issue mentionned before:

the above solution works except that if the user hits the 'next' and 'previous' repeatedly (and quickly) the order starts to mess up and the accordion menu goes out of sync with the content menu slider. This isn't a big issue, but I feel that this problem wouldn't occur if there was coding in place telling a particular dropdown menu to expand when a particular content slider menu item is loaded up, rather than using an array to increment both scripts when you hit a 'next/previous' button.

Thank would be great, as it probably isn't the best for me to continue to use the script if it can go out of sync.

[jscheuer1]

I'm not sure which browser you're using or how rapidly you mean, but I've tried in IE 9, Firefox 14.0.1 and Chrome 21.0.1180.60 m, all under Windows 7 and I can't duplicate the problem.

Perhaps I'm using the wrong browser or OS, or not clicking rapidly enough. Or perhaps you've left something out of the description of what exactly must be done to see this problem.

Please describe exactly what browser and OS and the exact sequence of events required to duplicate the problem.

[GSimon]

I originally tested it using Chrome, this version:

21.0.1180.60 beta-m

Although I've been able to re-create the problem in Firefox and Internet Explorer as well.

I should point out again though that you have to be hitting the previous/next button pretty quickly for it to go out of sync, but it isn't hard for me to trigger the problem if I am looking to do it. The problem isn't likely to occur unless you're aggressively clicking the left and right arrow.

Edit: Ok the problem seems to occur primarily when the menu reaches the end of the list and restarts at the top of the list again, or vice versa. Its when it restarts the cycle (going from WSC to 3M Ctr) that the order can get messed up if it happens too quickly.

Thanks again for the help,

I think what might be an easy fix to this is making it so that the accordian menu doesn't ease in when you click it so that it happens as quickly as the content slider does, but I do like the easing in affect included in the accordion script.

[GSimon]

Another thing that could work is for the menu to stop once its at the end of the list and not restart back at the top, so the problem never has a chance to occur in the first place.

Although I don't know how to modify the content slider to stop once it's at the end of the list.

[jscheuer1]

It's really hard to make it happen.

Anyways, now that I've been able to duplicate it, I think we're going about this the wrong way. Instead of making the next/prev buttons of the Slider also next/prev buttons for the Accordion, let's make it so that whenever the Slider slides, for whatever reason, that the Accordion just goes to the corresponding menu.

That way it can't get out of sync, because there's no sync, just one action following after the other. This is actually a simplification.

First backup a copy of the page. Then get rid of all that stuff we added to ddacordion.init. Next remove this and similar (highlighted and red) from all the links in the map:

<a class="removingsteptwo" href="javascript:ddaccordion.toggleone('submenuheader', 1);featuredcontentslider.jumpTo('slider2', 2)">

Finally add the highlighted to the featuredcontentslider.init function:

        featuredcontentslider.init({
            id: "slider2",  //id of main slider DIV
            contentsource: ["inline", ""],  //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
            toc: "markup",  //Valid values: "#increment", "markup", ["label1", "label2", etc]
            nextprev: ["Previous", "Next"],  //labels for "prev" and "next" links. Set to "" to hide.
            revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
            enablefade: [false, 0.2],  //[true/false, fadedegree]
            autorotate: [false, 3000],  //[true/false, pausetime]
            onChange: function(previndex, curindex){  //event handler fired whenever script changes slide
                //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
                //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
		setTimeout(function(){ddaccordion.expandone('submenuheader', curindex - 1);}, 0);
            }
        })

[GSimon]

Awesome! I will try this out and report back (watching Mars rover landing, could be a few minutes). And I agree, this approach seems more solid and straightforward.

[GSimon]

Thanks for the updated help.

This seems to have fixed the problem! but it also creates another issue which is that the first menu item it open by default when the page loads. I'm looking into if it's a simple tweak in the code than can fix this, hoping there's some easy workaround so I can move on to other aspects of this site.

Appreciate all the help, although I may later refer back to my other question of whether or not its possible for the content menu slider to load nothing by default.