Collapsable Panel Question
am trying to have a several tabs right next to each other
that have drop down panels that are wider than the tabs them
selves...
say a row of tabs 100px wide 125px high with 5px margin
between them that have dropdown panels with widths of 500px, all
while keeping the tabs 5px withing eachother... could you let me
know if this possible and maybe how to make it happen?
am trying to have a several tabs right next to each other
that have drop down panels that are wider than the tabs them
selves...
say a row of tabs 100px wide 125px high with 5px margin
between them that have dropdown panels with widths of 500px, all
while keeping the tabs 5px withing eachother... could you let me
know if this possible and maybe how to make it happen?
Similar Messages
-
Quick Collapsable Panel Question
Hi,
Working with the Collapsable Panel within the Sliding Panel framework. So far all is going and gone well. One minor thing. I want the collapsable panels to be closed on default. I did add this piece of coding
<script type="text/javascript"> var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", { contentIsOpen: false }); </script>
in the head of my document but looks like I am missing something else here.
Appreciate any help on this and thanks in advance.
URL: Easy Excel Newsletter DisplayHi,
The basic code for four collapsible panels is as follows
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryCollapsiblePanel.js"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet">
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<div id="CollapsiblePanel3" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<div id="CollapsiblePanel4" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<script>
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 });
</script>
</body>
</html>
You will notice that there are 4 constructors, one for each panel and that these constructors are placed after the CollapsiblePanel regions.
I hope this helps.
Ben -
Spry Collapsable Panel Question
I just started using Spry and was wondering if there is an
way to have a plus sign display next the the title when the panel
is contracted but then when somebody clicks to open the content
area it would change to a minus symbol?
Thanks for your help in this matter.Thanks... This mostly worked. The problem is that those
panel's which are preset to be open show the plus sign when the
should show the minus. As you can see here
http://www.ourbombers.com.
The minus only shows when you actually click to open a panel.
here is my css code.
.CollapsiblePanel {
margin-bottom: 2px;
padding: 0px;
border-left: solid 1px #CCC;
border-right: solid 1px #999;
border-top: solid 1px #999;
border-bottom: solid 1px #CCC;
/* 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 {
font: bold 0.7em sans-serif;
background-color: #DDD;
border-bottom: solid 1px #CCC;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-image: url(images/plus.gif);
background-position: right;
background-repeat: no-repeat;
/* This is the selector for a CollapsiblePanel's Content
area. It's important to note that
* you should never put any padding on the content area
element if you plan to
* use the CollapsiblePanel's open/close animations. Placing
a non-zero padding on the content
* element can cause the CollapsiblePanel to abruptly grow in
height while the panels animate.
* The name of the class ("CollapsiblePanelContent") used in
this selector is not necessary
* to make the widget function. You can use any class name
you want to style a
* CollapsiblePanel content container.
.CollapsiblePanelContent {
margin: 0px;
padding: 0px;
font-size: 12px;
/* An anchor tag can be used inside of a CollapsiblePanelTab
so that the
* keyboard focus ring appears *inside* the tab instead of
around the tab.
* This is an example of how to make the text within the
anchor tag look
* like non-anchor (normal) text.
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open. The class "CollapsiblePanelOpen" is
programatically added and removed
* from panels as the user clicks on the tabs within the
CollapsiblePanel.
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #EEE;
background-image: url(images/minus.gif);
background-position: right;
background-repeat: no-repeat;
/* 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.
.CollapsiblePanelTabHover, .CollapsiblePanelOpen
.CollapsiblePanelTabHover {
background-color: #CCC;
/* This is an example of how to change the appearance of all
the panel tabs when the
* CollapsiblePanel has focus. The "CollapsiblePanelFocused"
class is programatically added and removed
* whenever the CollapsiblePanel gains or loses keyboard
focus.
.CollapsiblePanelFocused .CollapsiblePanelTab {
background-color: #3399FF; -
My Spry collapsable panel works on Dreamweaver but not on my published site
I created a one page static microsite for a client and inserted Spry collapsable panel in the content div. It looks perfect on Dreamweaver and even when I previewed it on Chrome, Firefox, and Safari, it looked great. After I uploaded the page, the panel's dissapeared and the text center justified. Any help?
The site is http://www.laurawoodsexposed.com (it's a political website, not a porn website)
Any help would be great.I created a one page static microsite for a client and inserted Spry collapsable panel in the content div. It looks perfect on Dreamweaver and even when I previewed it on Chrome, Firefox, and Safari, it looked great. After I uploaded the page, the panel's dissapeared and the text center justified. Any help?
The site is http://www.laurawoodsexposed.com (it's a political website, not a porn website)
Any help would be great. -
Problem w/ Tooltips & Collapsable Panels in Safari
Hi,
I have a page that has Collapsable panels along with Tooltips
that are used for a help tip in each panel. My problem is when the
page loads in Safari, the contents of the bottom most Col Panels
are displayed elsewhere in the page. The Col Panels tabs and
containers remain where they should though.
Heres a page displaying the issue:
http://dev.meetingsintelligenceexchange.com/planner/tooltip.php
There are 2 columns with 3 Panels in each. All of the Panels
have a help icon in tab of the panel that acts as the Tooltip
trigger. If you collapse the top most panel in each column then
reopen it, the layout corrects itself.
I can't figure out what is happening. I've tried removing the
help icon to see if the float is causing the problem but it still
occurs.
Any help would be appreciated.
Thanks, ScottThanQ everyone for reviewing my problem. I solve the issue myself... ThanX...
-
Spry Tabs + Collapsable Panels
Hello,
I have tabs within collapsable panels and in firefox and IE you can see the tabs even if that panel is not open. Any ideas on how to fix this situation?
Thanks, here's my example:
http://www.robvanwyen.com/cv/rfblair/
Best,
RobV1 Fusion I was going through Spry forums and saw a problem
that another user had similiar to mine and was wondering if you
could offer some support. I am using the Tabbed panel from Spry and
can only get 5 tabs across before it starts a new tab below the
others. I was looking thru CSS file but not sure what can be
changed so I can allow 6 tabs accross. I'd send you link but it's
behind a firewall. I can send you a screen shot with email address.
Any help greatly appreciate it!!!!!! -
CS4: Collapsed panels won't stay open
I messed up my regular workspace view and reverted to a preset and noticed the collapsed panels won't stay open when expanded. I'm not sure if this is how it used to work, but it just feels wrong.
Let's say I want to move an object to another layer. I click on the collapsed Layer-panel icon to open it, then select (click) the object on artboard and Layer panel collapses back to icon. Then I need to click the panel icon again to open it and now I can move the object to another layer, but layer panel collapses again when I select another objet.
I remember having this same UI problem with Flash CS4. Have I messed up some setting, or is this really how UI works in Illustrator? I would like to save screenspace by having panels collapsed and only keeping open the one I need. InDesign works like this, keeping expanded panels open until they are collapsed again.Thank you! It must've have switched on when I reverted to another screenset, because I can't remember ever seeing this setting (or even reading about it).
-
Collapsable Panel Group: close previous panel on next panel focus
Hello All,
I am playing around with Spry and started off with the Accordian. But I wanted to be able to 'expand all' so moved on to the collapsable panel.
However, I also want the accordian effect, whereby when one panel is clicked and opened, the previous panel will close. Is there a variable to include in the collapsablepanelgroup to acheive this?
Looking at it another way, I want to 'close open panel(s), open new panel', when the mouse clicks on the new panel.
I'm using Spry Pre-Release 1.6.1
You can see my efforts so far at http://yabbox.com/spry.php
Many thanks for your help and direction.
AndyMy first answer would be.. Use the accordion ;D
However, I also want the accordian effect, whereby when one panel is clicked and opened, the previous panel will close. Is there a variable to include in the collapsablepanelgroup to acheive this?
Not with out modifications to the collapsible panel code.
But you could just create a custom for you that remembers the previouse panel that was clicked...
and add onclick="" to each panel tab to activate the function -
Issues with spry collapsable panel
hey guys, i am very new, thank you in advance for your patience. i posted this in the spry forum as well.
i created a spry collapsable panel with 3 drop down options. when i preview the object in a browser, there is a blue box around the object, i presume to tab around the page. how do i get rid of this? i have done all i know in CSS, is this a JS issue? how can i get rid of it?
thank you for dealing with my ignorance!
-rickthis was answered in the spry forums.
http://forums.adobe.com/thread/506212?tstart=0 -
I am trying to create a vertical navigation bar that has 5 large main categories and then up to 15 sub pages underneath. I want the 5 large main categories to autocollapse but also when someone navigates to a sub-page it highlights that particular nav button and also keeps that menu group expanded. I like things neat and tidy but also like the web visitor to know where they are at all times.
I tried a pure collapsable panel with hotlinked graphic buttons. But, I cannot achieve the auto open when at a sub page. (maybe if I bail on template mode?) Then I tried to place a Spry nav within the sub collapsable panel but again that does not achieve my goals.As far i understand you want the last opened panel to be open on other pages that the user might go to..
What you could use is cookies to save the last used state example: go.spry-it.com/cookie -
Is there a way to get a collapsable panel to open to the
right instead of to the bottom? Basically take a the panel and lay
it on it's left side.
ThanksHi,
did you try the sliding panels widget?
You can see an working
sample
here.
Thanks,
Diana -
In Swing how to implement a collapsable Panel , similar like task panes
As much as I'm against posting whole classes, in your case I'll make and exception. I hop ethis class is useful, atleast I found it suited my purposes.
import java.awt.*;
import java.awt.event.*;
import java.util.*;
import javax.swing.*;
import javax.swing.border.*;
import javax.swing.plaf.*;
import javax.swing.table.*;
* Emulates a Task Pane component
* Example Usage:
* Vector<Object> fileGroup = new Vector<Object>();
fileGroup.addElement("File Tasks");
fileGroup.addElement( new Action[] {newOrgAction, openOrgAction, closeOrgAction } );
Vector<Object> editGroup = new Vector<Object>();
editGroup.addElement("Edit Tasks");
editGroup.addElement( new Action[] {addMemberAction, addMultiMember,
editProfileAction, deleteProfileAction,
saveDatabaseAction } );
Vector<Object> displayGroup = new Vector<Object>();
displayGroup.addElement("Display Options");
displayGroup.addElement( new Action[] {quickEditAction, showFTotalsAction,
genListAction, freezeNamesAction});
Vector<Object> toolsGroup = new Vector<Object>();
toolsGroup.addElement("Tools");
toolsGroup.addElement( new Action[] {formBuilderAction, dirCleanerAction} );
Vector<Object> actions = new Vector<Object>();
actions.addElement(fileGroup);
actions.addElement(editGroup);
actions.addElement(displayGroup);
actions.addElement(toolsGroup);
taskPane.setTaskActions( actions );
public class TaskPane extends JPanel {
public JButton closer;
public JLabel titleLabel;
public Vector<Object> taskActions;
public JPanel taskArea;
//util
private String titleText = "";
public TaskPane(String title) {
this(title, (Vector<Object>)null );
public TaskPane(String title, Vector<Object> actions) {
super( new BorderLayout() );
setTitleText(title);
setBackground(Color.white);
add( getTitleLabel(), BorderLayout.NORTH );
setTaskActions(actions);
public void setTitleText(String title) {
titleText = title;
createTitleLabel();
public String getTitleText() {
return titleText;
public void setTaskActions(Vector<Object> actions) {
taskActions = actions;
if(taskArea != null) {
taskArea.removeAll();
createTaskArea();
validate();
repaint();
public void createTitleLabel() {
titleLabel = new JLabel( getTitleText() );
titleLabel.setOpaque(true);
titleLabel.setBackground( new Color(30,30, 110) );
titleLabel.setForeground(Color.white);
Font defont = UIManager.getDefaults().getFont("Label.font");
titleLabel.setFont( new Font(defont.getFamily(), Font.BOLD, defont.getSize() ) );
//titleLabel.setPreferredSize( new Dimension(180, 20) );
titleLabel.setBorder( BorderFactory.createEmptyBorder(3,3,3,3) );
public Component getTitleLabel() {
if(titleLabel == null) {
createTitleLabel();
return titleLabel;
public void addAction(Action action) {
if(taskActions == null) {
taskActions = new Vector<Object>();
taskActions.addElement(action);
taskArea.add( getTaskButton( action ) );
validate();
repaint();
public void createTaskArea() {
if(taskArea == null) {
taskArea = new JPanel();
taskArea.setLayout( new BoxLayout(taskArea, BoxLayout.Y_AXIS) );
taskArea.setBackground(Color.white);
if( taskActions != null) {
for(int i = 0; i < taskActions.size(); i++) {
if(taskActions.elementAt(i) instanceof Action) {
taskArea.add( getTaskButton( (Action)taskActions.elementAt(i) ) );
taskArea.add( new JSeparator() );
} else if( taskActions.elementAt(i) instanceof Vector ) {
Vector<Object> group = (Vector<Object>) taskActions.elementAt(i);
String title = group.elementAt(0).toString();
Action[] actions = (Action[])group.elementAt(1);
TaskGroup tgroup = new TaskGroup(title, actions);
taskArea.add(tgroup);
ScrollablePanel area = new ScrollablePanel( new FlowLayout(FlowLayout.CENTER) );
area.setBackground(Color.white);
area.add( taskArea );
JScrollPane scroller = new JScrollPane( area );
scroller.getViewport().setBackground(Color.white);
add( scroller );
public JButton getTaskButton(Action action) {
final JButton taskButton = new JButton(action);
taskButton.setBackground(Color.white);
taskButton.setBorder( //BorderFactory.createCompoundBorder(
//BorderFactory.createLineBorder(Color.black) ,
BorderFactory.createEmptyBorder(3,5,3,3) /*)*/ );
taskButton.setForeground( new Color(140, 140, 255) );
taskButton.setHorizontalAlignment( JLabel.LEFT );
taskButton.setPreferredSize( new Dimension(140, 20) );
taskButton.setCursor( Cursor.getPredefinedCursor(Cursor.HAND_CURSOR) );
taskButton.addMouseListener( new MouseAdapter() {
public void mouseEntered(MouseEvent e) {
taskButton.setForeground( new Color(0, 0, 80) );
public void mouseExited(MouseEvent e) {
taskButton.setForeground( new Color(140, 140, 255) );
if(taskButton.getIcon() == null) {
taskButton.setIcon( new EmptyIcon() );
return taskButton;
public void expandAll() {
for(int i = 0; i < taskArea.getComponents().length; i++) {
Component c = (Component) taskArea.getComponent(i);
if(c instanceof TaskGroup) {
((TaskGroup)c).expandTasks();
public void expandTaskGroup(String title) {
for(int i = 0; i < taskArea.getComponents().length; i++) {
Component c = (Component) taskArea.getComponent(i);
if(c instanceof TaskGroup) {
TaskGroup tg = (TaskGroup)c;
if(tg.getTitleText().equalsIgnoreCase(title.trim()) ) {
tg.expandTasks();
class TaskGroup extends JPanel {
JLabel groupTitle;
String titleText;
Action[] actions;
JPanel actionsPanel;
Border up = BorderFactory.createMatteBorder(0, 0, 1, 0, new Color(0,50,110));
Border down = new JLabel().getBorder();
public TaskGroup(String title, Action[] actions) {
super( new BorderLayout() );
setTitleText(title);
setActions(actions);
setBackground(Color.white);
setBorder( BorderFactory.createEmptyBorder(3,3,5,3) );
public void setTitleText(String title) {
titleText = title;
createTitle();
public String getTitleText() {
return titleText;
public void createTitle() {
groupTitle = new JLabel( " + " + getTitleText() );
groupTitle.setOpaque(true);
//groupTitle.setBackground( new Color(170, 170, 220) );
groupTitle.setBackground( UIManager.getColor("Table.selectionBackground") );
groupTitle.setForeground(Color.black);
Font defont = UIManager.getDefaults().getFont("Label.font");
groupTitle.setFont( new Font(defont.getFamily(), Font.BOLD, 10 ) );
groupTitle.setPreferredSize( new Dimension(175, 20) );
//groupTitle.setBorder( up );
groupTitle.addMouseListener( new MouseAdapter() {
public void mouseClicked(MouseEvent e) {
if(actionsPanel.isShowing()) {
remove(actionsPanel);
groupTitle.setText(" + " + getTitleText() );
//groupTitle.setBorder(up);
} else {
add( actionsPanel, BorderLayout.CENTER );
groupTitle.setText(" - " + getTitleText() );
//groupTitle.setBorder(down);
validate();
repaint();
add( groupTitle, BorderLayout.NORTH );
public void setActions(Action[] actions) {
this.actions = actions;
if(actionsPanel != null) {
actionsPanel.removeAll();
createActionsPanel();
public Action[] getActions() {
return actions;
public void createActionsPanel() {
actionsPanel = new JPanel( new GridLayout(0,1,5,5) );
actionsPanel.setBackground(Color.white);
for(int i = 0; i < actions.length; i++) {
actionsPanel.add( getTaskButton( getActions()) );
//add( actionsPanel, BorderLayout.CENTER );
public void expandTasks() {
if(actionsPanel.isShowing()) {
return;
add( actionsPanel, BorderLayout.CENTER );
groupTitle.setText(" - " + getTitleText() );
validate();
repaint();
}ICE -
Collapsable Panel Group: Button Toggle
Hello,
I have a Collapsable Panel Group with the buttons 'open all' and 'close all'
Is there a way to make this into one button which toggles? So, if they're open, then close, and vice versa.
<input type="button" value="Open All" onclick="cpg.openAllPanels();" />
<input type="button" value="Close All" onclick="cpg.closeAllPanels();" />
Thanks for any info.
AndyThanks for that, works just fine.
I put it into the SpryCollapsiblePanel.js file with this explanation.
// extra code to make the [open all], [close all] buttons into one toggle button. Thanks to http://forums.adobe.com/people/.V1
// works with this button in the main code .. <input type="button" value="Toggle" onclick="toggle();" /> -
Collapsable Panel conflict?
I am having an issue with a page containing a Spry horizontal menu bar ( which works fine) and a Spry Collapsable Panel (which does not). The page also contains a WOW jQuery Slider which is functioning correctly with the menu bar so I do not believe it involves a conflict of Javascript vs. jQuery scripts on the same page. When I placed the panel it simply fails to collapse in either Dreamweaver's live view or on any browser. Has anyone seen this in the past? Amy ideas?
Thanks in Advance.Please post a link so we can see the problem page in our browsers.
-
Spry collapsable panel transparency
hey all,
i have a spry collapsable panel, when it drops down, i want it to have a 100% opacity white background. when i simply code background:#FFF, it is completely transparent. when i use a different color (i.e. #666), the color still exists, but it is transparent. how can i make this a solid dropdown box?
thanks!this was just a test, but i can paste some code
.CollapsiblePanelTab {
font: bold 10pt sans-serif;
background-color:#FFF;
margin: 0px;
padding: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
outline: none;
and a screenshot of the active tab
i hope this is enough
Maybe you are looking for
-
I have my GMail account forwarding my emails to my @iCloud.com account which I like, but when I reply, it shows my address as @iCloud.com instead of the email address that was originally addressed to. Anyway to have iCloud reply to emails using the e
-
Snapshot naming: - Default to date, date/time or last edit name (default naming selectable via preferences)
-
Do I need a airport base station to extend my network or can i use my network router?
I bought a Airport express to enhance my current wifi in the house, and i can't seem to get it to enhance it. There is one room that dont have wifi and it is the room i bought it for. Now when i talked with apple they said all i needed was the expres
-
Blu-ray compatibility with Panasonic DMP-BD60
I made a blu-ray disk from Encore CS4 with my internal Pioneer blu-ray burner using Power DVD9 and it played back fine with this burner. But when played through the Panasonic which is connect with HDMI to Denon receiver to HD TV it stops and starts
-
AXF_SOAPCALL response error 302 Moved Temporarily
DECLARE STRREQUEST VARCHAR2(32767); strResponse VARCHAR2(32767); BEGIN STRREQUEST :='<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"> <soap:Header> <Security xmlns="http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecur