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

[GSimon]

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]

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]

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]

YESSSS!!! thanks, that worked out great.

Woohoo 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]

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]

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.