PDA

View Full Version : Multiple Spry Collapsible Panels


BullDog
11-14-2011, 05:13 AM
I am trying to setup multiple collapsible panels. I have managed to do this with multiple css files. I duplicated the first, renamed it and renamed the references, etc. The problem I see so far is the rollover images all still refer to the first date/image. I've been fighting with this for a couple days and would appreciate any help.


bugorama.com/test


I'm hoping I use this file when finished as a php include for my sidebar.
Thank you in advance.

DWcourse
11-14-2011, 05:27 PM
The rollover image is governed by this style rule:

.CollapsiblePanelTabHover

That style is applied dynamically by the Javascript so you can't simply add a number to the end as you did. You'll need to write a rule that applies to that selector but only for a particular panel. Like this:

/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
*/
#CollapsiblePanel2 .CollapsiblePanelTabHover2, #CollapsiblePanel2 .CollapsiblePanelOpen2 #CollapsiblePanel2 .CollapsiblePanelTabHover2 {
background-image: url(../graphics/event2_over.jpg);
}

A few thoughts:

The same type of issue might affect other style rules.

Have you thought about trying this with Accordion Panels?

You don't need a style sheet for each panel. They can all reside in one style sheet and you only need to create new rules for the things that are different in each panel.

BullDog
11-14-2011, 05:33 PM
Thank you I'll try that. I have used the accordion multiple times with no problem but I want all dates prominently displayed.

BullDog
11-14-2011, 06:16 PM
ok, I tried that and it didnt show the extra tabs so I duplicated this section:

/* This is the selector for the CollapsiblePanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open or close the panel.
*
* The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* CollapsiblePanel panel tab container.
*/
.CollapsiblePanelTab {
margin: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-repeat: no-repeat;
font-family: sans-serif;
font-size: 0.7em;
line-height: 191px;
font-weight: bold;
height: auto;
background-image: url(../graphics/event1.jpg);

I am still somewhat new to css and trying to learn how to use it and more dynamic code. but I am still missing something here. I've now lost the panel bg color and the rollovers are still all pointing to the first rollover.

DWcourse
11-14-2011, 06:25 PM
My bad, I didn't remove your edits when I updated that rule. It should be:

#CollapsiblePanel2 .CollapsiblePanelTabHover, #CollapsiblePanel2 .CollapsiblePanelOpen {
background-image: url(../graphics/event2_over.jpg);
}

BullDog
11-14-2011, 06:52 PM
My bad, I didn't remove your edits when I updated that rule. It should be:

#CollapsiblePanel2 .CollapsiblePanelTabHover, #CollapsiblePanel2 .CollapsiblePanelOpen {
background-image: url(../graphics/event2_over.jpg);
}

Is the "#CollapsiblePanel2 .CollapsiblePanelOpen" needed for the tab hover? Is this possibly why I lost the panel bg color on all but the first one?

DWcourse
11-14-2011, 06:55 PM
Either version of my code should not affect anything other than the second panel (#CollapsiblePanel2 limits it to that panel)

BullDog
11-14-2011, 07:20 PM
Last thing I want is for you to do the work for me. I am trying to learn from this so I can do it on my own in the future. can I ask you to look one more time please. I have lost the content panel bg color on all but the first and somehow the last is pulling in an image I didnt specify.

Thank you!

DWcourse
11-14-2011, 07:36 PM
I think you're trying to run before you can walk with CSS but you're close to hang onto your hat, here we go.

You altered you html like this:

<div id="CollapsiblePanel2" class="CollapsiblePanel2">
<div class="CollapsiblePanelTab2" tabindex="0">&nbsp;</div>
<div class="CollapsiblePanelContent2">panel content</div>
</div>

All you needed to do was change the code for the first div like this:

<div id="CollapsiblePanel2" class="CollapsiblePanel2">
<div class="CollapsiblePanelTab" tabindex="0">&nbsp;</div>
<div class="CollapsiblePanelContent">panel content</div>
</div>

Then whenever you want to change a style rule for a particular object you just add the id selector to the front of the rule as I suggested.

#CollapsiblePanel2 .CollapsiblePanelTabHover, #CollapsiblePanel2 .CollapsiblePanelOpen {
background-image: url(../graphics/event2_over.jpg);
}

BullDog
11-14-2011, 07:52 PM
Thanx a million! I had to remove the numbers from "CollapsiblePanelContent" but leave them on ""CollapsiblePanelTab". As it changed all my tabs to "event1.jpg".

giving me this:

<div id="CollapsiblePanel2" class="CollapsiblePanel2">
<div class="CollapsiblePanelTab2" tabindex="0">&nbsp;</div>
<div class="CollapsiblePanelContent">Panel Content.</div>
</div>
Otherwise, maybe I've over complicated the css code causing this. either way it is working now. Thank you for that... I was going bald pulling my hair out. if you have time to clarify that I'd appreciate it.

Now my hope is that I can simply cut and paste this into my site in another established div.

BullDog
11-15-2011, 07:04 AM
moved to bugorama.com/2012

BullDog
11-17-2011, 09:09 PM
Still in the process of recoding everything without tables and validating as I go.

Can anyone please look at my spry panels? I recreated the site based on what I did last time and in dreamweaver it only see's the first one as a spry collapsible panel. there is no blue spry identifier outlining the the others.

On validation I am also seeing an error for my specialLink rule. this is to override the link color in the spry panels only. (fixed this part. I didnt realize a capital "a" in an anchor tag would cause validation problems.)

http://bugorama.com/test/

Thank you!

DWcourse
11-18-2011, 03:42 AM
There's a line of javascript at the end of the file that "activates" the panel. At the moment you only have that for the first panel. You need to add it for all six panels:

<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen:false});
var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", {contentIsOpen:false});
var CollapsiblePanel6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel6", {contentIsOpen:false});
</script>

BullDog
11-18-2011, 04:22 AM
THANK YOU! I must have compared old to new at least 20 times in the last 10 hours or so and found all differences other than that. should have been obvious with the numbers!

Now I have to figure out this sprite method for the rollovers and cut the divs, ie... logo, nav, sidebar, etc... out into include files.

Still in over my head but have learned a lot already using validation now. Proud to see only browser specific errors on this site. validating my past sites makes me see how screwed up they all are. code errors, typos, syntax errors, etc...

BullDog
12-01-2011, 08:34 PM
When my events page is loaded or re-loaded all my spry collapsible and accordion panels flash expanded for a second now. I have no idea what could be causing this. All I've done on this page is swap the tab order on the accordions.

http://bugorama.com/test/events.php

BullDog
12-02-2011, 03:56 AM
I have tested this in all browsers and all pages and its only the events page. There must be something I inadvertently changed the other day but cant find it yet.