Dreamweaver Club Forums

Dreamweaver Club Forums (http://www.dreamweaverclub.com/forum//index.php)
-   Spry (http://www.dreamweaverclub.com/forum//forumdisplay.php?f=189)
-   -   Multiple Spry Collapsible Panels (http://www.dreamweaverclub.com/forum//showthread.php?t=42063)

BullDog 11-14-2011 06:13 AM

Multiple Spry Collapsible Panels
 
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 06: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:

Code:

/* 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 06: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 07:16 PM

ok, I tried that and it didnt show the extra tabs so I duplicated this section:

Code:

/* 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 07:25 PM

My bad, I didn't remove your edits when I updated that rule. It should be:

Code:

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


BullDog 11-14-2011 07:52 PM

Quote:

Originally Posted by DWcourse (Post 200994)
My bad, I didn't remove your edits when I updated that rule. It should be:

Code:

#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 07: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 08: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 08: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:

Code:

<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:

Code:

<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.

Code:

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


BullDog 11-14-2011 08: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:
Code:

<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.


All times are GMT. The time now is 01:53 PM.

Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com