logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 11-14-2011, 05:13 AM   #1
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default 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.
BullDog is offline   Reply With Quote
Old 11-14-2011, 05:27 PM   #2
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 11-14-2011, 05:33 PM   #3
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

Thank you I'll try that. I have used the accordion multiple times with no problem but I want all dates prominently displayed.
BullDog is offline   Reply With Quote
Old 11-14-2011, 06:16 PM   #4
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

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.
BullDog is offline   Reply With Quote
Old 11-14-2011, 06:25 PM   #5
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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);
}
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 11-14-2011, 06:52 PM   #6
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

Quote:
Originally Posted by DWcourse View Post
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?
BullDog is offline   Reply With Quote
Old 11-14-2011, 06:55 PM   #7
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

Either version of my code should not affect anything other than the second panel (#CollapsiblePanel2 limits it to that panel)
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 11-14-2011, 07:20 PM   #8
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

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!
BullDog is offline   Reply With Quote
Old 11-14-2011, 07:36 PM   #9
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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);
}
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 11-14-2011, 07:52 PM   #10
BullDog
 
Join Date: Nov 2011
Location: Alameda, CA
Posts: 156
Default

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.

Last edited by BullDog; 11-14-2011 at 08:02 PM..
BullDog is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 02:08 AM.


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