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 03-06-2009, 02:17 AM   #1
shaitiger
 
Join Date: Mar 2009
Posts: 2
Default Need toggled arrows with Spry Collapsible Panel

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
shaitiger is offline   Reply With Quote
Old 06-18-2011, 12:16 PM   #2
dolftek
 
Join Date: Jun 2011
Posts: 12
Default

Yes, i need too like *link removed*

Last edited by gentleone; 06-18-2011 at 02:45 PM.. Reason: removed link
dolftek is offline   Reply With Quote
Old 06-18-2011, 02:47 PM   #3
gentleone
gentleone's Avatar
 
Join Date: Nov 2009
Location: Rhodes, Greece
Posts: 2,837
Default

Dolftek, don't do that anymore. That link was irrelevant to this 2 year old topic.
__________________
www.gentlemedia.nl
gentleone is offline   Reply With Quote
Old 06-18-2011, 08:26 PM   #4
dolftek
 
Join Date: Jun 2011
Posts: 12
Default

Ok but how i can solve it ?
dolftek is offline   Reply With Quote
Old 06-19-2011, 12:06 AM   #5
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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.
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 06-29-2011, 08:21 PM   #6
dbepp
dbepp's Avatar
 
Join Date: Jun 2011
Location: Indiana
Posts: 93
Default Forum Etiquette

Quote:
Originally Posted by gentleone View Post
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.
dbepp is offline   Reply With Quote
Old 06-30-2011, 01:12 AM   #7
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 06-30-2011, 01:40 PM   #8
dolftek
 
Join Date: Jun 2011
Posts: 12
Default

ok some controls is useful but i couldn't fing how edit to rounded edge option at "border line-stly"
dolftek is offline   Reply With Quote
Old 06-30-2011, 07:38 PM   #9
DWcourse
DWcourse's Avatar
 
Join Date: Apr 2009
Posts: 3,276
Default

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:

Code:
-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)
__________________
If my answer helped, check out DWcourse.com for Dreamweaver tips and tutorials.
DWcourse is offline   Reply With Quote
Old 07-02-2011, 02:16 PM   #10
dolftek
 
Join Date: Jun 2011
Posts: 12
Default

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
dolftek 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 10:16 AM.


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