PDA

View Full Version : Featured Content Slider v2.4 + (Glossy) Accordion Menu



GSimon
08-05-2012, 09:49 AM
1) Script Title: Featured Content Slider v2.4, Glossy Accordion Menu

2) Script URL (on DD):

http://www.dynamicdrive.com/dynamicindex17/featuredcontentslider.htm

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu-glossy.htm

and (for extra reference)

http://www.dynamicdrive.com/dynamicindex17/ddaccordion_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/showthread.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
08-05-2012, 05:42 PM
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
08-05-2012, 08:27 PM
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
08-05-2012, 11:37 PM
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
08-06-2012, 01:53 AM
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
08-06-2012, 02:04 AM
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
08-06-2012, 03:06 AM
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
08-06-2012, 06:06 AM
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
08-06-2012, 06:14 AM
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
08-06-2012, 06:34 AM
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.

GSimon
08-06-2012, 07:42 AM
Last (maybe final?) update. The script is now working to my liking except for one little thing I would like to fix.

I had to put in a dummy/blank item as the first item in the menu so that the page loads that by default. This way when the page loads the menu displays nothing (height is set to 0px so nothing is visible, display:none didn't work because script reveals it).

This works good except for ideally I would prefer not to have a dummy item and just have it so that content slider/menu loads nothing by default.

Having said that I can work with the dummy item, but its a bit annoying how the accordion shifts down approx. 2 pixels each time a menu item is selected before it shifts back up 2 pixels to its original state. How can I stop the menu from shifting down those 2 pixels each time the menu expands?

To see what I mean click on Western Science Center link and hit the right arrow, you'll see the menu shift downward and return back to its original state.

GSimon
08-06-2012, 08:28 AM
I just wanted to add that this site is great and has allowed me to add in functionality to my website designs that I otherwise would not have, so thanks!

Seeing as I use the scripts on here often I would likely need further assistance for similar issues related to the one experienced here. Is the ''DD scripts Paid Help' forum typically the best way to get a hold of a programmer/developer? I don't mind paying for assistance to my problems as it saves me a lot of time that I would otherwise spend troubleshooting. If that is the place that is best to post my next inquiry than let me know! The response on the forum so far has been great.

jscheuer1
08-06-2012, 10:58 AM
That only happens in IE I think. In any case, this fixes it:


featuredcontentslider.first = true;
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)
if(!featuredcontentslider.first){
setTimeout(function(){ddaccordion.expandone('submenuheader', curindex - 1);}, 0);
} else {
featuredcontentslider.first = false;
}
}
})

GSimon
08-06-2012, 11:16 AM
YESSSS!!! thanks, that worked out great.

Woohoo :D Very happy with the result.

Edit: I left a donation on your paypal link, my email resembles my username here, also I sent you a pm but I'm not sure if it sent because my 'Sent Items' folder is empty.

jscheuer1
08-06-2012, 04:52 PM
Thanks! Also I got the PM. Whether or not to save items to your sent folder is a toggle, at least for some. Either you have it off or you haven't enough posts yet to have the option.

At the risk of reopening something you might think is solved, my last post in this thread referred to how to avoid a default open item without resorting to a dummy item.

I've looked into the issue of:


. . . the accordion shifts down approx. 2 pixels each time a menu item is selected before it shifts back up 2 pixels to its original state. How can I stop the menu from shifting down those 2 pixels each time the menu expands?

And I'm not sure there is a solution to it. It happens because there are two animations running at the same time. One is collapsing the previous item, the other is expanding the current one. Although they both run at the same rate, for some reason one completes a little sooner than the other. I tried playing with the rate of the collapse independently, but there seems to be no happy medium. It either completes too soon or too late, with at least a 2px jog in one direction or the other.

I might be missing something. I tried other things, but none of them made any difference.

As I think you already mentioned, perhaps not with regard to this, you can kill the animation. The easiest way to do that is to set the animatespeed to 0 in the init:


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", "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: [], //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: false, //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: [""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs)
animatespeed: 0, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

Then there's no jump, but you loose the smooth action of the menu.

Another thing I just noticed is, if you change the animatespeed to "slow" and change the height of this container from 377 to 375 as shown (highlighted and red, scroll the code block to see it):


<div id="paginate-slider2" class="pagination">

<div style="background-image:url('/labels/selectbuilding.gif');background-repeat:no-repeat;background-position:bottom center;height:375px;width:298px;border-left:1px solid black;border-right:1px solid black; margin-left:auto;margin-right:auto;position:relative;float:left;">


<div class="glossymenu">


It still does it, but it's less annoying.

GSimon
08-07-2012, 01:34 AM
Hey John, thanks for looking into the issue. I realized soon after my post about the 'two animations running at the same time' issue after staring at the menu for a while.

Its not a problem really however, when I had the dummy item it was because the menu would appear to shake for no reason once it met that item. Now that there's no dummy item my OCD is cool with the effect and everything.

I feel the cool animation is worth the hardly noticeable trade-off so I'll probably leave the animation speed settings the way they are and keep things on 'high' speed.

Thanks for the response!

Edit: I also tried the height thing, I looked into that before and it does hide the white border at the bottom which works ok, but I still prefer to have it showing despite how it disappears momentarily during animation.

Edit: 376px in height seems to work good, the white border actually did get annoying.