How to apply different styles to multiple spry collapsible panels?

Hello every.
I would really appreciate some help with this problem I am coming up against.
I am creating a website which has multiple Spry collapsible panels in it. I applied the styles I wanted for the first Spry collapsible panel I did in the styles panel with no problems what so ever.
However when I go to apply the styles I want for my second and every other Spry collapsible panel, when I applied the style I wanted it changed the first panel I did. I’ve tried giving all my collapsible panels different Div ID’s but no luck. I just can’t seem to apply different styles to each of my collapsible panels.
Can someone please advise me how to do this?
Thank you in advance for your help.
Kind regards
Elliot

I've figured the most of it out.
By giving the Spry Collapsible Panel that you want to style differently a separate ID and class and then duplicating the original Spry Collapsible Panel style in the CSS style panel on the right and renaming them the same name as the panel you want to style differently it will allow you to style it differently to all the other panels apart from the Hover.
I've tried everything! Below is the code I'm using for the two Collapsible Panels I want to style Differently.
I only want to have different Tab backgrounds and Hover backgrounds
1st Spry CollapsiblePanel
Code:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
CSS Style
.CollapsiblePanelTab
.CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover
2nd Spry CollapsiblePanel
Code:
<div id="CollapsiblePanel2" class="CollapsiblePanel2">
<div class="CollapsiblePanel2Tab" tabindex="0">Tab</div>
<div class="CollapsiblePanel2Content">Content</div>
</div>
.CollapsiblePanel2Tab
.CollapsiblePanel2TabHover, .CollapsiblePanelOpen .CollapsiblePanel2TabHover
As I said the Tab works both I have two seperate background images for the Tabs but I can only seem to have one background for the hover.
Has anyone any ideas on how to get around this?
Kind regards
Elliot

Similar Messages

How to apply different styles to multiple spry accordian panels?

Hi all,
I have a website that I'm building that has multiple spry accordian features on it.
I am trying to apply different styles to each accordian. A problem arises when I try to place an accordian within another accordian.
I have styled two different background images for two of the accordians for the styles (AccordionPanelTab, AccordionPanelTabHover and AccordionPanelOpen AccordionPanelTabHover) which work fine.
When I try and place an accordian within another accordian the background image for this accordian for the styles (AccordionPanelTab and AccordionPanelOpen AccordionPanelTabHover) has the different style applyed that I stated in the accordion.css file, however the style (AccordionPanelTabHover) has the same style as the accordian it is within even though in the accordion.css file I stated a different background image.
I hope all this makes sence below is my source and CSS Code.
I appriciate any help that can be given to help resolve this issue I am running in too.
Source Code
<div id="content">
<p><span class="first_header_word_packages">Welcome</span> <span class="header_word_packages">to our packages page</span></p>
<p class="content_txt">Here you can build the website package that matches your business needs as well as being able to work out the cost of your site without having to worry about scary hidden costs at a later date.</p>
<p class="content_txt"> We have two packages available for our customers;</p>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
   <p>Text Goes Here</p>
    <div id="Accordion2" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
    <p>Text Goes Here</p>
    </div>
</div>
</div>
    </div>
</div>
</div>
<div id="Accordion3" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
         <p>Text Goes Here</p>
      <div id="Accordion4" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
     <p>Text Goes Here</p>
    </div>
</div>
</div>
    </div>
</div>
</div>
</div>
CSS
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
          border-left: solid 1px gray;
          border-right: solid 1px black;
          border-bottom: solid 1px gray;
          overflow: hidden;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
          margin: 0px;
          padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
          background-color: #CCCCCC;
          border-top: solid 1px black;
          border-bottom: solid 1px gray;
          margin: 0px;
          padding: 2px;
          cursor: pointer;
          -moz-user-select: none;
          -khtml-user-select: none;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
          overflow: auto;
          margin: 0px;
          padding: 0px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
          background-color: #EEEEEE;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
          color: #555555;
.AccordionPanelOpen .AccordionPanelTabHover {
          color: #555555;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
          background-color: #3399FF;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
          background-color: #33CCFF;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg1.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/package_spry_tab_bg1_RO.png);}
#Accordion2 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry1.png);}
#Accordion2 .AccordionPanelTabHover,
#Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/packages_spry1_ro.png);}
#Accordion3 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg2.png);}
#Accordion3 .AccordionPanelTabHover,
#Accordion3 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/package_spry_tab_bg2_RO.png);}
#Accordion4 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry2.png);}
#Accordion4 .AccordionPanelTabHover,
#Accordion4 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/packages_spry2_ro.png);}

Okay guys,
I figured it out, if anyone was having the same problem as me and looking on this thread for the answer, here it is.
Firstly if you're wanting to seperatly style two or more Spry Accordions that are not within each other e.g.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
You don't have to do this, as long as you have seperate ID's for the divs (which dreamweaver automatically does anyway) you'll be fine.
However if for some reason you want to put one accordion inside another like I did e.g.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
</div>
</div>
</div>
Too style Accordian 1 & 2 so their tabs both have different backgrounds and Hover background when the content panel is open and closed you have to style it in the CSS they following way;
CSS
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg_RO.png);}
#Accordion2 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry.png);}
#Accordion2 .AccordionPanelClosed .AccordionPanelTabHover,
#Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
height:44px;
width:469px;
background:url(../images/packages_spry_ro.png);}
Normally when styling two seperate spry accordions you can just use the following code
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg_RO.png);}
The only difference with styling a Spry accordion within another to ensure they have different hover backgrounds when the content panel is open and closed is ".AccordionPanelClosed".
Hope this helped anyone who was having the same issue I was.

How to apply different styles to Portlets on the same Portal page?

How do you apply different styles to Portlets on the same Portal page?
I'm new to this kind of thing, but understand that something called "cascading style sheets" can help here?
What are these, how do you use them, and can you make different Portlets (all types - PL/SQL, Java, Applications, etc) on the same Portal page have different styles assigned?
Thanks!

Jeff,
Apply Oracle Portal styles at the region level. Your portlets within each region will inherit the style defined for the region.
You may want to check out Report #40050 at portalcenter.oracle.com, "Design an Attractive and Compelling Portal Interface" for a good overview of the various design features of Oracle Portal.
Here is the link:
http://portalcenter.oracle.com/pls/ops/docs/FOLDER/COMMUNITY/OTN_CONTENT/MAINPAGE/OWSF_2003_PAPERS/40050_STOVER.PDF
Regards,
Jay

Multiple Spry Collapsible Panels with different Open-Close defaults

Hello,
The site I am working on has a page with (5) Spry collapsable panels. (4) are set default open, (1) is set default closed.
I am trying to get (3) Open, and (2) closed. However, setting a second panels default to closed gives a syntax error.
Anyone know how to make it work, if it can at all?

Remove the closing parenthesis after "CollapsiblePanel5". It should be like this:
var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", {contentIsOpen: false} );

How to maintain the state of a spry collapsible panel

how can i get the index of an open collapsible panel dynamically... i've used two collapsible panels...if the second panel is open, then after page refresh, automatically the second one closes and the default one i.e. the first panel opens....

It is best if you supply a link to your site so that we can see for ourselves what you need to do thus eliminating the need for me to ask you if you have used a collapsible panel group or two single panels. Also it would save my time in trying to reconstruct what I think it is what you want.
Gramps

Multiple SPRY Collapsible Panel Defaults

I have a page with three collapsible bars and want the only the first to be open and the other two to be closed when the page loads. How do I do this?

I figured this one out - duh! The properties panel allows you to set the panel defaults to opened or closed.

How to Apply adjustment layers to multiple layers that have different blending modes ...

How to Apply adjustment layers to multiple layers that have different blending modes and keep the colours the same as the adjusment done?
I work in Animation painting Backgrounds. My files are sometimes upwards to 200+ layers.
I will use adjustment layers to quickly balance colours and constrast on top of those many many layers.
The only way that I know of how to apply adjustment layers it to every single layer ( by applying I mean I need to get rid of the adjustment layers because we cant use them in production but i need the new colours be applied to all layers underneath ) in a psd is to manually do it By duplicating the adjusment layer 200+ times and then merging each layer to one of those adjustment layers so that that layer can take the adjustment layers effect permanently.
The issue is that Within Those 200 layers I have some layers set to Multiply or OVERLAY.    IT obviously wont apply the adjustment layer properly to those layers because those layer blend mode affect the layers under them. The colour wont be the same anymore in the spots that had the multiply blended mode.
HEres an example of a simple File. to show what i mean.
https://dl.dropboxusercontent.com/u/3408266/ball%20layers.jpg
https://dl.dropboxusercontent.com/u/3408266/ball.psd
I have 2 adjustment layers up top. I need to get rid of them by applying them to each layer! I cannot merge any of the layers. We need all those layers for production.
I can apply the adjustment layers manually and this works GREAT for all Layers set to normal. THey take on the colour change just FINE.
However, The issue is that layer 6 and layer 4 are both set to mutiply and this screws up the colour once i apply the adjustment layers to each layer manually...
How can i apply my adjustment layers to a file like this with some layers being set to multiply while keeping the layers exactly the same configuration and The new colour taking efffect exactly how i looks before i apply the adjustment layers?
Now the simple solution is to merge the multiply layers to the layer that it affects HOWEVER I NEED those multiply layers to be seperate!
I'm assuming what I want to do is impossible? Hope this isnt confusing. As far as i know its impossible to do what I want it to do. but just wanted to ask and see.
I would REALLY REALLY love to talk to a adobe programmer/ technician/pro working at adobe about this. Theres just no way to get in touch with anyone... =(
any thoughts ?

Sure... if you want to put it that way. Either way its not the desirable outcome.
its just frustrating that theres no way to apply adjustment layers to hundreds of layers while keeping them in the same configuration ( blendmodes, layer order , without merging) while keeping the same end result.
works great if all your layers are set to normal though..    But I really need to keep shadow layers seperately and be able to adjust on the fly aswell as apply those adjusment to all my layers.
I suppose that just isnt possible.   I understand the math required for this would be tremendous/ complicated if something like this would ever be implemented. Would be nice if adobe could come up with some solution to this. Its really a huge issue in my work flow and theres no alternatives.    How else can I adjust colours to 100+ layers with a few clicks that lets me play around the the adjustment until im happy with the outcome.    Really wish i could adjust and the quickly apply that adjustment to all my layers regardless of blend mode.   LIke If the Layers with blendmode could somehow take the properties of the adjustment layer and keep adjusting those layers undereathe on top of that blended mode that its doing...

How to apply different CSS styles to different table cells?

I have an h:dataTable table and I would like to apply different CSS styles to different table cells depending on their content. If I were doing JSP I would probably have a <c:if> test on the cells, and give them a style name depending on contents, and then define the styles in a separate style sheet. Is there a way in JSF to do the equivalent? Thanks.

mitchgart wrote:
BalusC wrote:
How to achieve a cell-specific style is already answered in my 1st reply of this topic.That tells how to apply a style to the text (or other content) inside a cell but not how to apply a style to the <td> as a whole. It would work for something like text font or text color but not cell border.
I'm thinking I can mark the content somehow and then have javascript traverse the DOM, find marked content, and traverse outward to the enclosing <td>. Is there a better way?BalusC already spoke about rowClasses and columnClass attributes, I assume those are insufficient.
The Tomahawk dataTable component has the rowStyleClass and rowStyle attributes for assigning CSS to the HTML tr tag. One is allowed to reference the row data variable when assigning values to these. However, see https://issues.apache.org/jira/browse/TOMAHAWK-523 for workarounds to bugs in some implementations.
The Tomahawk column component has the styleClass and style attributes for assigning CSS to the HTML td tag. These also may reference the row data variable.

Apply text styles to multiple objects

Hey everyone,
So here's another interface issue I can't seem to resolve.
I've figured out how to save a text's style to be applied later (thanks Qbert), but now how do I apply that style to multiple text items without having to go to each individual item, press the text tab in the inspector, press the style sub-tab, press the style preset drop menu and press the saved preset I want to use. I have 7 project files each with 5-8 text items that need this particular style applied to it and it would be much faster to be able to do this once for each project file rather than have to repeatedly do these 5 steps for each text item. I've already tried highlighting all of the text items I want to apply this style to and there is no way to drag anything into or out of the style sub-menu.
Thanks in advance.
-G

Hey Graham,
Your question got answered on the other thread here.

How to apply paragraph styles to xml tag?

Hi All,
How to apply paragraph style to xml tag?

Hi Learner,
Try the below js code.
var myDoc = app.activeDocument;
try{
    mySel=app.selection[0];
    myDoc.xmlElements[0].xmlElements.add({markupTag:"TEST", xmlContent:mySel});
    }catch(e){
        alert(e);
var myDocument = app.activeDocument;
app.findGrepPreferences.appliedParagraphStyle = "test";
app.findGrepPreferences.findWhat = ".+(?=\\r)"
var mySearch = myDocument.findGrep(false);
for (a=0; a<mySearch.length; a++){
    myDocument.xmlElements[0].xmlElements.add({markupTag:"TEST", xmlContent:mySearch[a]});
thx,
csm_phil

How to apply List box for multiple selection of rows in ALV report ?

Hi Exprots,
1: How to apply List box for multiple selection of rows in ALV report ?
Thanking you.
Subash

hi,
check the below program.
REPORT zalv_dropdowns.
*Type pools declarations for ALV
TYPE-POOLS : slis.
*data declarations for ALV container,ALV grid, Fieldcatalogues & layout
DATA: g_grid TYPE REF TO cl_gui_alv_grid,
      g_custom_container TYPE REF TO cl_gui_custom_container,
      gt_fieldcat TYPE lvc_t_fcat,
      gs_layout TYPE lvc_s_layo.*INTERNAL TABLE AND WA DECLARATIONS FOR t517 A table
DATA: gt_outtab TYPE STANDARD TABLE OF t517a INITIAL SIZE 0,
      wa_outtab TYPE t517a.
START-OF-SELECTION.*Call to ALV
CALL SCREEN 600.*On this statement double click it takes you to the screen painter SE51.
*Create a Custom container and name it CCONT and OK code as OK_CODE.
*Save check and Activate the screen painter.
*Now a normal screen with number 600 is created which holds the ALV grid.
PBO of the actual screen , Here we can give a title and customized menus
Here we also call the subroutine for ALV output.
      MODULE PBO OUTPUT                                             *
MODULE pbo OUTPUT.
PERFORM alv_output.
ENDMODULE.                    "pbo OUTPUT
      MODULE PAI INPUT                                              *
MODULE pai INPUT.
ENDMODULE.                    "pai INPUT
*&      Form BUILD_FIELDCAT
FORM build_fieldcat.
DATA ls_fcat TYPE lvc_s_fcat.
*Build the field catalogue
CALL FUNCTION 'LVC_FIELDCATALOG_MERGE'
    EXPORTING
      i_structure_name = 'T517A'
    CHANGING
      ct_fieldcat      = gt_fieldcat.
To assign dropdown in the fieldcataogue
LOOP AT gt_fieldcat INTO ls_fcat.
CASE ls_fcat-fieldname.
   WHEN 'SLART'.
*is the first list box
        ls_fcat-drdn_hndl = '1'.
        ls_fcat-outputlen = 15.
        MODIFY gt_fieldcat FROM ls_fcat.
is the second list box
WHEN 'ABART'.
        ls_fcat-drdn_hndl = '2'.
        ls_fcat-outputlen = 15.
        MODIFY gt_fieldcat FROM ls_fcat.
ENDCASE.
ENDLOOP.
ENDFORM.                    "build_fieldcat
*&      Form ALV_OUTPUT
FORM alv_output .*Create object for container
CREATE OBJECT g_custom_container
         EXPORTING container_name = 'CCONT'.
*create object for grid
CREATE OBJECT g_grid
         EXPORTING i_parent = g_custom_container.
Build fieldcat and set column
*Assign a handle for the dropdown listbox.
PERFORM build_fieldcat.
*Build layout
PERFORM build_layout.
Define a drop down table.
PERFORM dropdown_table.
*fetch values from the T517A table
SELECT * FROM t517a INTO TABLE gt_outtab.
*Display ALV output
CALL METHOD g_grid->set_table_for_first_display
    EXPORTING
      is_layout       = gs_layout
    CHANGING
      it_fieldcatalog = gt_fieldcat
      it_outtab       = gt_outtab.ENDFORM.                               "ALV_OUTPUT
*&      Form dropdown_table
      text
--> p1        text
<-- p2        text
FORM dropdown_table.*Declarations for drop down lists in ALV.
DATA: lt_dropdown TYPE lvc_t_drop,
        ls_dropdown TYPE lvc_s_drop.
First SLART listbox (handle '1').
ls_dropdown-handle = '1'.
ls_dropdown-value = '01 Primary school'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '1'.
ls_dropdown-value = '02 Lower Secondary'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '1'.
ls_dropdown-value = '03 Upper Secondary'.
APPEND ls_dropdown TO lt_dropdown.
ls_dropdown-handle = '1'.
ls_dropdown-value = '04 Professional School'.
APPEND ls_dropdown TO lt_dropdown.
ls_dropdown-handle = '1'.
ls_dropdown-value = '05 College'.
APPEND ls_dropdown TO lt_dropdown.
ls_dropdown-handle = '1'.
ls_dropdown-value = '06 University'.
APPEND ls_dropdown TO lt_dropdown.
ls_dropdown-handle = '1'.
ls_dropdown-value = '09 Other Establishment'.
APPEND ls_dropdown TO lt_dropdown.* Second ABART listbox (handle '2'). ls_dropdown-handle = '2'.
ls_dropdown-value = '10 Primary School certificate'.
APPEND ls_dropdown TO lt_dropdown.
ls_dropdown-handle = '2'.
ls_dropdown-value = '20 Lower secondary/Junior high'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '2'.
ls_dropdown-value = '30 High school diploma(B-levels)'.
APPEND ls_dropdown TO lt_dropdown.
ls_dropdown-handle = '2'.
ls_dropdown-value = '31 Vocational'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '2'.
ls_dropdown-value = '32 Matriculation'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '2'.
ls_dropdown-value = '40 Specialist vocational certificate'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '2'.
ls_dropdown-value = '50 College degree Level1'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '2'.
ls_dropdown-value = '51 College degree Level2'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '2'.
ls_dropdown-value = '52 Masters degree'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '2'.
ls_dropdown-value = '60 Univ Degree level1'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '2'.
ls_dropdown-value = '61 Bachelors degree'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '2'.
ls_dropdown-value = '62 Masters degree'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '2'.
ls_dropdown-value = '63 Licenciate'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '2'.
ls_dropdown-value = '64 Doctors Degree Ph.D'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '2'.
ls_dropdown-value = '89 None'.
APPEND ls_dropdown TO lt_dropdown. ls_dropdown-handle = '2'.
ls_dropdown-value = '90 Unknown'.
APPEND ls_dropdown TO lt_dropdown.*method to display the dropdown in ALV
CALL METHOD g_grid->set_drop_down_table
    EXPORTING
      it_drop_down = lt_dropdown.ENDFORM.                               " dropdown_table
*&      Form build_layout
      text
*layout for ALV output
FORM build_layout . gs_layout-cwidth_opt = 'X'.
gs_layout-grid_title = 'ALV DROPDOWN LISTS'.
gs_layout-no_toolbar = 'X'.ENDFORM.                    " build_layout
endform.
Edited by: S.r.v.r.Kumar on Jun 1, 2009 2:48 PM

Applying different style sheets

I'm not sure if this is possible, but I would like to apply
different style sheets to different outputs.
For example: (Both outputs use the same data)
Output to PDF = Style Sheet 1
Output to WebHelp = Style Sheet 2
Is there an easy way to do this?

It would be lovely to select a style sheet as you are
generating the output, wouldn't it? As far as I can see, however,
style sheets are assigned per topic thru a reference RH sticks in
the HTML header.
Which leaves you two options:
1) The simple but tedious way: In the Topics list (on the
right), select all the topics. Right-click and pick Properties.
When the Properties window opens, choose the stylesheet you want on
the Appearance tab. Click OK. You would need to do this each time
you switch from generating WebHelp to generating PDF.
2) The complex but cool if it works way: I don't use the PDF
plug-in - do you still generate PDF from the Printed Documentation
layout? If so, can you use the StyleMapping.dot template? (I seem
to remember that the PDF goes through a Word stage behind the
scenes.) You can open StyleMapping.dot in Word (be sure to use File
> Open so you get the .dot) and change the styles into what is
effectively a new style sheet. It may take some tweaking - I still
can't get my bulleted styles to come out quite right - but it's
great for global changes.
HTH,
Elisa

How to make Spry Collapsible Panels open one at a time?

Hello,
I am using CS5 and want to use the spry collapsible panels. What I notice (and I think this wasn't the case in cs3) is that all panels can be open at the same time. I don't want that happen. I only want one panel to be open at a time. If someone clicks on a panel that is closed, I want the current panel to close and the one they clicked on to open. I don't want multiple panels to be opne at once. How can I do this? I am not a web developer by any means, so please be easy on me with code. I think in CS3 it used to work this way. Any help would be appreciated! Thank you in advance!

GRAMPS!! That's it!! It was the accordian panel I had used in the past!!!! Oh, thank you, I was driving myself crazy as to why it wasn't working the way I had remembered!!!!!!!! THANK YOU!!
I was told you would probably help me find the right answer by Hans-g!
Thanks again!

Spry Collapsible Panel at bottom of page - how to make the browser scrolldown automatically

The question is -
i have a collapsible panel at the bottom of my page that I'm using as a footer menu.
It is 200px tall. The visitor clicks on "FIND OUT MORE", then the panel opens 200px tall.
I want the viewing area of browser to focus on the content of this panel, and automatically scroll down 200px to accomodate the new real estate at the bottom of the page.
Now they click on it, but then have to manually scroll down.
How can I do this? What do I add to the Spry Collapsible Panel js scripts?
I tried using a tag at the bottom of the 200px but can't get it to work correctly.
Dreamweaver CS5.
thanks

I have been closing IE and reopening it for 7 months now. I don't of any other way to reload an applet.
Jason

Linking page to Named Anchor on multiple spry tabbed panels

I am a Dreamweaver (cs5) "beginner" with little HTML knowlege. I am doing a site for an artist friend with several art gallery images. I have created a separate .html page for each image from the gallery (the gallery pages are built within several tabs in a spry tabbed set). When it came time to link my image page back to the particular gallery page, it did not work, only the default panel could be linked. I found Gramps' answer to another persons question that was similar to mine, only that person was using spry collapsible panels. Gramps answer: <a name="myAnchor"></a>, then URL origin page: ourPage.html?col2=open#myAnchor, and it apparently worked. I tried this using "tabbedpanel2" which is probably wrong; at any rate.... nothing seems to work.
For my first time doing this, can anyone put this in the simplest form, using my own page, link names? I have spent several day not getting anywhere.
Spry Panel page is called: store_sheet.html
namedAnchor on this page is called: o-pg2
origin page is called: 009.html
Because I'm not very good in HTML, I usually highlight what I am going to code so that I can find where it is at in the split screen, then I edit. This is how raw my knowledge-base is at this point.
Any help and advise would be greatly appreciated. I'm several days behind because of this glitch.

On the first page, the peeling turnips image looks like this -
<p><a href="shop_originals/001.html"><img src="shop_originals/peelingturnips.jpg" width="188" height="254" alt="original"></a></p>
The next image in the row looks like this -
<p><img src="shop_originals/02.jpg" width="188" height="254" alt="original"></p>
So, just select that image and link it to the detail page, e.g.,
<p><a href="shop_originals/002.html"><img src="shop_originals/02.jpg" width="188" height="254" alt="original"></a></p>
The on that detail page, make the continue shopping link like this -
<a href="../store_sheet.html#o-002"><strong>Continue Shopping</strong></a>
Is that what you wanted?

How to apply different styles to multiple spry collapsible panels?

Similar Messages

Maybe you are looking for