PDA

View Full Version : Need toggled arrows with Spry Collapsible Panel


shaitiger
03-06-2009, 02:17 AM
I'm sorry if this is a really stupid question. I'm new to the forum. I have multiple working Spry Collapsible Panels on my website but I wanted to add a toggle image effect to it's function. Currently, to my knowledge that function isn't built into this Spry object. I want an arrow down to be active when the panels are untouched. Then I would like an up arrow to appear when the panel is opened. Any help would be appreciated. Thanks

dolftek
06-18-2011, 12:16 PM
Yes, i need too like *link removed*

gentleone
06-18-2011, 02:47 PM
Dolftek, don't do that anymore. That link was irrelevant to this 2 year old topic.

dolftek
06-18-2011, 08:26 PM
Ok but how i can solve it ?

DWcourse
06-19-2011, 12:06 AM
The style rule .TabbedPanelsTab controls the appearance of all the tabs. Use the background image property to insert the down arrow image for unselected panels.

The style rule .TabbedPanelsTabSelected governs the look of the tab for the currently displayed panel. So set your up arrow (select image) as the background for that rule. Since it appears after the rule above it will overwrite it.

You can also add a background image to the .TabbedPanelsTabHover rule to give you a rollover effect.

dbepp
06-29-2011, 08:21 PM
Dolftek, don't do that anymore. That link was irrelevant to this 2 year old topic.

I, myself, am new to these forums. I want to learn as much as I can while following forum etiquette but could not find anything in the FAQ. Is there some place that outlines the dos and don'ts? Or are we bound to be reprimanded like children until we figure it out? .. Though to be fair, I don't know what Dolftek had a link to... common sense should be used when posting.

DWcourse
06-30-2011, 01:12 AM
Use CSS to insert a background image with the appropriate arrow:

For the closed state insert in rule: .CollapsiblePanelTab

For the open state insert in rule: .CollapsiblePanelOpen .CollapsiblePanelTab

Note there is also a focus state that governs the appearance when the panel tab is selected whether it is open or not.

I'll leave you to figure out how to deal with the hover state

dolftek
06-30-2011, 01:40 PM
ok some controls is useful but i couldn't fing how edit to rounded edge option at "border line-stly"

DWcourse
06-30-2011, 07:38 PM
Rounded corners are not yet an option in Dreamweaver's CSS Rule Definition dialog although you can insert them manually in your CSS. The CSS property is border-radius (and you should also include moz and webkit options also). Here's an example:

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

Note: Not supported in IE8 and earlier or in SW Design View

(BTW, when you move on to a totally new topic - even if it's about the same site - it's good to start a new thread with a relevant title)

dolftek
07-02-2011, 02:16 PM
OK, i have achived it but don't finish all issues. The another one is "background image adding" problem. No any picture on the front page if i put any background image according to following code:


@charset "UTF-8";

.CollapsiblePanel {
margin: 0px;
padding: 0px;
border-bottom: solid 1px #CCC;
width:525px;
}
.CollapsiblePanelTab {
background-color: #666;
background-image:url(../images/blue_arrow_down%20(1).png);
border-bottom:medium;
margin: 0px;
padding: 0.09em;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-align: left;
text-indent: 10mm;
font-family: sans-serif;
height: 50px;
vertical-align: middle;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 10px;
}

.CollapsiblePanelContent {
margin: 0px;
padding: 0px;
}





.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
background-color: #CCC;
}


.CollapsiblePanelFocused .CollapsiblePanelTab {
background-color: #444444;
}


Please look at to SerhanTAvas (http://www.serhantavas.com)

DWcourse
07-03-2011, 01:25 AM
You can't have parentheses in a file name:

background-image:url(../images/blue_arrow_down%20(1).png);

dbepp
07-07-2011, 02:05 PM
OK, i have achived it but don't finish all issues. The another one is "background image adding" problem. No any picture on the front page if i put any background image according to following code:

Please look at to SerhanTAvas (http://www.serhantavas.com)

I believe you are asking how to add a background image that will be included on all pages.. if so, you can easily add that in the "page properties" panel (CSS and HTML) and will apply to all pages