Spry Tabbed Pannels - Moving the tabs down

I am trying to learn Spry tabbed pannels. i opened dreamweaver and inserted a div and then a spry tabbed pannels into the div.
How do i move the tab 1, tab 2 ect.. down so its not above the changing content but rather hovering over it.
I am trying to create a simple efect where when you press each tab, it changes the picture, but i want the buttons to hover over the picture.
thank you in advance

Ok but to make that specific modification, what style sheet do i edit? spry creates several

Similar Messages

I have a perplexing problem, in firefox the iframe in the spry tabbed panel doesn't work any ideas?

I have made a page with spry tabbed panels, i have embedded an iframe in the content section of the second tab, this works perfectly well with Google, IE, Safari, Opera etc but just doesnt work in Firefox.
If I make the tab panel containing the iframe the Default tab then it works, i just cant figure out why,
By the way new to all this so be gentle please
<div id="main_column">
     <div class="section_w500">
        <h2>North Bali Listings</h2>
        <div id="TabbedPanels1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">About North Bali</li>
            <li class="TabbedPanelsTab" tabindex="0">Land</li>   <<<<< This is the tab where the iframe is embedded in the content panel>>>>>
            <li class="TabbedPanelsTab" tabindex="0">Houses / Villas /Apartments / Rooms</li>
            <li class="TabbedPanelsTab" tabindex="0">Commercial</li>
</ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">A property analyst recently said that limited land availability in the southern parts of Bali, especially in and around the Badung and Denpasar areas, has driven investors northward, in our opinion   at this time it is an ideal opportunity to acquire property still at very sensible prices in this area, be it for investment or as a place of residence.. <br />
              <p> <img src="../../../Images/Bali Scenes General/panoramic-views.jpg" alt="views" width="183" height="140" align="left" />Over the last few of years, investors have been targeting the northern area, principally along the coastline , with its variety of pristine black sandy beaches, pebble beaches and rugged coastline, offering a variety of activities; scuba diving, snorkelling, water sports, fishing, sailing. trekking gives this area the potential to be world-class tourist destination. Research has shown that property prices are set to rise above the average due to increased infrastructure development, and the planned opening of a new International Airport in the North shows the Bali Government's commitment to the develop this area as a future tourist destination.<br />
                <br />
                The Northern part of Bali is also an excellent base for exploration further afield, close to the main portal for trips to other parts of Indonesia. <br />
              Although it is largely undeveloped there is a wide range of properties and land with beach front to panoramic rice paddy views still to be found at good value for money. </p>
              <table width="100%">
                <tr>
                  <td align="left" valign="top"><div class="AreasOfBaliHighlight" style="color: #60C; font-weight: bolder;">This is an ideal time to consider your dream property in this area; be it for investment, development or private use.</div></td>
                </tr>
              </table>
              <p> The main tourist area in the North is arguably <span style="color: #F00">Lovina</span>, with property prices reflecting this especially beach front or with panoramic views so expect to see prices a little bit more expensive in and around this area. However inland prices are still very reasonable.<br />
                <br />
                <img src="../../../Images/Bali Scenes General/Traditional-lifestyle.gif" alt="village life" width="188" height="137" hspace="2" align="right" />Other areas to be found in the North going towards <span style="color: #F00">Gillimanuk</span> the main portal for the ferry to and from Java; include: <span style="color: #F00">Pemuteran</span> popular diving area, <span style="color: #F00">Menjangan</span> <span style="color: #F00">Island</span>, a popular diving and nature reserve; are also beginning to attract investors, resulting in prices rising.<br />
                The area of the North of Bali travelling East from <span style="color: #F00">Lovina</span> towards the eastern part of Bali is quieter and more rural, with stunning coastline and secluded traditional village life, here life slows down, people are very friendly and happy to integrate with "Bule (Foreigner), this life style is definitely completely different to the hustle and bustle of the South of Bali, perfect for future development and peaceful retirement, and with the development of the new <span style="color: #F00">International Airport</span> in this area, about 1/2 way between <span style="color: #F00">Singaraja</span> and <span style="color: #F00">Almpura</span> in the East, which makes this area an ideal investment opportunity as property and land prices are set to grow in this part of North Bali faster than other areas.<br />
                <br />
                <img src="../../../Images/Bali Scenes General/img_bali_1.jpg" alt="Quiet Lanes" width="189" height="124" hspace="2" align="left" />It has to be said that facilities for schooling, medical services and shopping are not as good as in the South or around Ubud area, which have higher concentrations of established ex pat communities, and better facilities also the job opportunities are not anywhere near as plentiful as in the South or Ubud areas, which limits the lifestyle for many people looking to settle in Bali, careful consideration has to be given if your intention is for a place for you to reside, and it is possibly an area for consideration as an investment opportunity, or for a development of hotel or villa resort, or as a second retirement home. </p>
              <p>There are of course facilities for all the usual services and plenty of job opportunities, and a small but growing ex-pat community, especially in and around <span style="color: #F00">Lovina</span> and <span style="color: #F00">Singaraja</span> just not as many as in the other popular areas for ex pat's. </p>
            </div>
            <div class="TabbedPanelsContent">
              <p> </p>
              <table width="100%" border="0">
                <tr>
                  <td valign="top"><h7 style="color: #C03"><span style="font-weight: bold"><span style="font-size: 12px; color: #FFF;">Property Code BSP 00130101</span><span style="font-size: 16px"> </span>SAMBIRENTENG - North East Bali 7,300 meters (</span></h7>
                    <span style="font-weight: bold; color: #B90033;">73 ARE) Beach front flat wooded land for Sale/ Rent</span></td>
                  <td><span class="button_01"><a href="#" onclick="MM_openBrWindow('North Bali/Gold Package Listings/BSP-00130101/Sambirenteng Property Location Map.html',width=750,height=200')">Location Map</a></span></td>
                </tr>
                <tr>
                  <td width="77%" valign="top"><p>A golden opportunity to acquire a prime plot of beach front land in the North East of Bali in an area that enjoys newly awarded "Tourism Status" ideal for the development of a small hotel or villa complex, easy access to many popular tourist spots already developing in the North.</p>
                    <p> A 3 meter wide sealed road gives acces to the whole length of this prime plot of land: Electric (PLN) Water (PDAM) Telephone & Internet close to hand and readilly available</p></td>
                  <td width="23%"><a href="Carousel Sambirneteng Listings.html target="_parent"></a><iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></td>
                </tr>
                <tr>
                  <td valign="top">Purchase price<span style="color: #33C; font-weight: bold;"> 12,500,000,000 Rp</span><br />
                    Rental Price (25 years) <span style="font-weight: bold">9,450,000,000</span> <span style="font-weight: bold">Rp</span> <span style="color: #FFF"> (<span style="font-weight: bold; color: #3333D0;"> 5,200,000 Rp</span><span style="color: #3933D5"> </span> per are per year )<br />
                      Min Rental Period 25 Years, extendable to to a max of 75 years
                      (with full "Right Of Use" issued by owner)</span></td>
                  <td valign="top"><p class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101 Details.html">Find out more</a></p>
                    <br />
                    <span class="button_01"><a href="../Gold Package Listings/BSP-00130101/BSP00130101_Enquiry Form.html" target="_parent">Make Enquiry</a></span></td>
                </tr>
              </table>
              <p><br />
              </p>
              <hr width="100%" noshade="noshade" />
              <p> </p>
            </div>
<div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.<iframe src="Carousel Sambirneteng Listings.html" allowtransparency="yes" frameborder="no" height="111" width="156" scrolling="No" align="middle" marginheight="0"></iframe></div>
            <div class="TabbedPanelsContent">Sorry we don't have any listings under this catagory at the moment,,, Check back later or register with us, and we will send you regular updates of any new properties we list.</div>
</div>
        </div>
        <p> </p>
      <p>
        <h7 style="color: #C03"></h7>
      </p>
<h2></h2>
     </div>
     <div class="cleaner"></div>
    </div> 

Could you share a link to the page?
Seeing it in context and in our browsers is much easier to debug.
If not, make sure to run the validator here The W3C Markup Validation Service and clear out any problems. HTML errors, especially structural ones, will cause all kinds of display problems in various browsers/versions/platforms.

Dear all, I have a MacBook Pro bought in April 2011. Last April, it got stuck while the wheel was spinning and I had to force it shut. That cost me my hard drive. Now, it's stuck again. I tried esc, cmd tab, moving the trackpad on the apple, but no. HELP!

Dear all, I have a MacBook Pro bought in April 2011. Last April, it got stuck while the wheel was spinning and I had to force it shut. That cost me my hard drive. Now, it's stuck again. I tried esc, cmd+tab, moving the trackpad on the apple, but no. HELP!

Dear John,
thank you for your prompt reply. After I sent the email, I left the wheel spinning to see if it would eventually stop. It didn't, but after a while the screen turned blue, so I decided to switch everything off with a forced shut-down. I could not restart with the OS DVDs because I am currently away from home, but fortunately everything was more or less fine after restarting. It then got stuck again, I forced it shut again, restarted again, and now it seem to work but I won't overdo it and will switch off smoothly after writing this (unless it gets stuck again). Last April I have replaced the HD, so it's now just under 6 months old. And, of course, since the crash occurred when I was abroad and had backed up just before I left, I have lost only a few days' work. Still, and I know this will make me hugely unpopular here, with my 5 previous laptops running on MS Windows I never had a problem. Which does not mean I loved the OS, or I would not have switched to Mac.
Anyway, and this is the main reason for this message, thank you very much again for your speedy intervention.
Claudia

Is it possible to change the selectedTab text color in SPRY Tabs?

Was working with SPRY tabs and the client would like the font color to change to white on roll over and select.
Is this possible through simply adding a single line of code to the css file of the SPRY file under
.TabbedPanelsTabSelected {
    height: 46px;
    width: 168px;
    background-color: #a7b9c3;
    color: #f7f7f7;
as you can see I already attempted to change the color and wasn't able to achieve the results on
http://ebnerproductions.com/index22.html
If it is possible, awesome, if not, I will replace with rollover images to get the desired result.
Adam Ebner
Thank you again to everyone in the forum as you have all helped me big time in the last couple of days!!!!!

I've gone through the coding now for a couple of days and still cannot get the font color to change on select.
I tried to inserted the recommended
<style>
.TabbedPanelsTabSelected,
.TabbedPanelsTabHover {
     color: #FFF;
</style>
coding that was offered earlier, and it did nothing....
here is the CSS for my tabbed panels... PLEASE LET ME KNOW WHAT I HAVE DONE WRONG, OR FORGOT!!!!
site is ... http://ebnerproductions.com/index22.html
Here is the Spry css ....
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
    margin: 0px;
    padding: 0px;
    float: left;
    clear: none;
    width: 810px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    position: absolute;
    left: auto;
    top: auto;
    color: #666;
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
    margin: 0px;
    padding: 0px;
    width: 840px;
    color: #666;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
    position: relative;
    top: 0px;
    float: left;
    padding: 0px;
    margin: 0px;
    list-style: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    height: 41px;
    width: 158px;
    outline:none;
    text-align: center;
    font-family: Archer-Medium-Pro.otf;
    font-size: 1.4em;
    font-weight: normal;
    color: #666;
    font-style: normal;
    padding-top: 8px;
    -moz-border-top-right-radius: 8px;
    -moz-border-top-left-radius: 8px;/* for older versions of Firefox) */
    -webkit-border-top-right-radius: 8px;
    -webkit-border-top-left-radius: 8px;/* for older versions of Safari and Chrome */
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;/* Newer browsers */
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
    background-color: #EEE;
    color: #FFF;
    width: 158px;
    outline:none;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
    height: 41px;
    width: 158px;
    background-color: #a7b9c3;
    font: Archer-Pro-Medium;
    color: #FFF;
    outline:none;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
    color: #666;
    text-decoration: none;
    outline:none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
    clear: both;
    background-color: ;
    outline:none;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
    padding: 0px;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
    float: left;
    width: 10em;
    height: 20em;
    background-color: #EEE;
    position: relative;
    border-top: solid 1px #999;
    border-right: solid 1px #999;
    border-left: solid 1px #CCC;
    border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
    float: none;
    margin: 0px;
    border-top: none;
    border-left: none;
    border-right: none;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
    background-color: #EEE;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
    clear: none;
    float: left;
    padding: 0px;
    width: 30em;
    height: 20em;
Thank everyone again for all the help!

Spry Tabbed Panels overwritting Flash drop down menu in IE

I am having an issue with Spry Tabbed Panels appearing above
a Flash drop down menu in IE6 & IE7 but it works fine in
Firefox. Would someone be able to educate me on what I can do to
fix this problem. The page that is exhibiting this problem is
http://us.shuttle.com/performance.aspx
I’ve tried adding “WMODE” to my flash menu,
also updated “SpryTabbedPanels.js to version 0.5 –
pre-release 1.6”, but neither way is
helping…….

Thank you very much for the suggestion. Yes, this is how I
tried:
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%;
z-index: 1000;
I’ve been tried setting Z-index to from 50 to 2000 in
attached css, but still not working.

Spry Tabbed Panels overwritting Flash drop down menu in IE but display fine in Firefox

I am having an issue with Spry Tabbed Panels appearing above
a Flash drop down menu in IE6 & IE7 but it works fine in
Firefox. Would someone be able to educate me on what I can do to
fix this problem. The page that is exhibiting this problem is
http://us.shuttle.com/performance.aspx
I’ve add “WMODE” to my flash menu,
also updated “SpryTabbedPanels.js to version 0.5 –
pre-release 1.6”, but neither way is
helping…….

Thank you very much for the suggestion. Yes, this is how I
tried:
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%;
z-index: 1000;
I’ve been tried setting Z-index to from 50 to 2000 in
attached css, but still not working.

How to hide the default panels of a dreamweaver spry tabbed panel?

i put several spry tabbed panels in the same page (one widget inside the other). the problem is that when the page loads all of the default panels (4 in total) appear for about 6 seconds and then they collapse into the main pannel. how do i fix this?
you can see this problem in this page:
http://www.eye-dealswing.com/Parents/WhereToStay/index1.html
do i need to add something in this section?
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
<script type="text/javascript">

</script>
thank you
Alejandra

im sorry, i dont understand what you mean. i am using the tabbed panels spry and not the accordion. i am just a rookie with html coding. can you please explain me what do i need to do?
thank you very much
Alejandra

Spry Tabbed Pannel Trouble

Sorry for the newbie question, but I'm really in a bind right
now. I am using a spry tabbed pannel on my company's website that
I'm in the process of designing, and yesterday it worked perfectly.
At the end of the day yesterday, I did something and I'm not sure
what did it exactly, and now when I test it in the browser, I click
on one tab it shows me the contents of the wrong tab.
To try and paint a picture, I work for a small communications
company/ISP, so I have tabs for "home" "internet" "telus mobility"
"bell expressvu" "products" "about us".
Everything works left of "telus mobility". Once I click on
the telus one, it comes up blank. When I click on "bell expressvu"
the telus page comes up. When I click on "products" it comes up
blank. When I click on "About us" the telus page comes up.
I've tried making a new page and copying and pasting the
contents of the screwed up tab, but that just came up with the same
problems, so I'm thinking the problem is with the contents, and not
necessarily the CSS coding, but then again, I'm a total newbie and
I could be way off base. If anyone has any ideas I'm totally open
to hearing them. If you want to look at the page, I'd be happy to
send you the root folder.
I guess another option for me would be to just write the
whole page out again, which I guess wouldn't be the end of the
world, and might be faster. I was just hoping someone might have
had this problem before and knows what to do.
Thanks so much in advance.
-caleb

Post a link to the page, please.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"calskin" <[email protected]> wrote in
message
news:fp4ive$b0i$[email protected]..
> Sorry for the newbie question, but I'm really in a bind
right now. I am
> using
> a spry tabbed pannel on my company's website that I'm in
the process of
> designing, and yesterday it worked perfectly. At the end
of the day
> yesterday,
> I did something and I'm not sure what did it exactly,
and now when I test
> it in
> the browser, I click on one tab it shows me the contents
of the wrong tab.
>
> To try and paint a picture, I work for a small
communications company/ISP,
> so
> I have tabs for "home" "internet" "telus mobility" "bell
expressvu"
> "products"
> "about us".
>
> Everything works left of "telus mobility". Once I click
on the telus one,
> it
> comes up blank. When I click on "bell expressvu" the
telus page comes up.
> When I click on "products" it comes up blank. When I
click on "About us"
> the
> telus page comes up.
>
> I've tried making a new page and copying and pasting the
contents of the
> screwed up tab, but that just came up with the same
problems, so I'm
> thinking
> the problem is with the contents, and not necessarily
the CSS coding, but
> then
> again, I'm a total newbie and I could be way off base.
If anyone has any
> ideas
> I'm totally open to hearing them. If you want to look at
the page, I'd be
> happy to send you the root folder.
>
> I guess another option for me would be to just write the
whole page out
> again,
> which I guess wouldn't be the end of the world, and
might be faster. I
> was
> just hoping someone might have had this problem before
and knows what to
> do.
>
> Thanks so much in advance.
>
> -caleb
>

Spry tabbed panel- align tabbs to the right? is it possible?

Hi ,
I'm working on CS4 and implimented spry tabbed pannel in my site, which is in hebrew-from right to left. how do I change the tabbed pannels to be from r-t-l and not as default?
Thanx,
Adi

Hi,
Thanks for your response.
he issue is that I need the Tabs-to strat on the right side , instead of the left side.
the above solution didn't help....
do you have another idea on getting it to work?
Thanks!

Spry Tab/Drop Down Menu conflict

When using spry tabs, my drop down menus go behind the tabs
and can't be read. This only happens on pc's. I am creating the
website on a mac running leopard. The template company is not
familiar with spry. It does not occur with spry accordiom.
http://www.gloucestertownshipschools.org/parentassoc.htm
Thanks for any insight anyone can provide.

Webkil wrote:
> I just created a spry horizontal drop down menu and have
a transparent
> background on the main menu. The transparency is there
with all browsers except
> IE. Wondering if anyone knows the problem.
>
> Thanks
>
> @charset "UTF-8";
>
> /* SpryMenuBarHorizontal.css - Revision: Spry Preview
Release 1.4 */
First thing you should do is to update to the latest version
of Spry which is Spry 1.6.1. Install the updater:
http://www.macromedia.com/go/labs_spry_download
Or grab the files from the Spry download package, I think
that they are in there:
http://labs.adobe.com/technologies/spry/home.html
Or pull directly from:
http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarHorizontal.css
http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBarVertical.css
http://labs.adobe.com/technologies/spry/widgets/menubar/SpryMenuBar.js
Also, there's a forum dedicated to Spry, so it would be
better to be asking Spry questions there:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Regardless, you should post a link to your page, as it is
quite common to need to look at code from many of the files that
comprise the final page your visitors receive.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Putting Spry Tabs below the content

I need to put the navigation tabs below the content and have
tried to cut-n-paste the <ul></ul> tags that hold the
navigation but I just mess up the structure.
How can I do this?
Thanks ahead of time.
C

SecretSanta wrote:
> I need to put the navigation tabs below the content and
have tried to
> cut-n-paste the tags that hold the navigation but I just
mess
> up the structure.
>
> How can I do this?
FYI: Spry questions are probably best asked in the Spry
forums:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
The Spry tabbed panels are set up for top tabs or vertical
left tabs (although you have to change classes in code view to get
a vertical view of the tabs). So you'd have to go in and rearrange
the HTML code, change a little CSS and a couple of lines of
JavaScript for the tabbed panels in order to accomplish what you're
trying to do.
Please note that you'll not see this visually within
Dreamweaver properly as these changes will change the code base and
Dreamweaver won't recognize what to do with the changes, however, a
browser should show you what you want.
Ok, first add a tabbed panel to your document and save the
page to get the Spry assets into place. Next go into code view and
move the UL that has the tabs below the DIV that has the content
panels.
Next we'll make the changes to the CSS and JavaScript within
this page rather than modifying the Spry files. This will allow you
to override the Spry defaults without messing up the base files in
case you need the "regular" functionality later.
So add a STYLE block to your page and open the
SpryTabbedPanels.css file. Copy the .TabbedPanelsTab selector
(lines 67-83) into your new style block. Then copy
.TabbedPanelsTabSelected selector (lins 105-108) into the style
block.
In .TabbedPanelsTab change top:1px to top: -1px. Then in
.TabbedPanelsTabSelected change border-bottom to border-top. These
changes will allow the bottom tab to overlap the bottom of the
content making it look seamless for the "selected" tab.
You'll have this when you're done:
<style type="text/css">

</style>
Next create a SCRIPT block then copy the
Spry.Widget.TabbedPanels.prototype.getTabGroup function (lines
124-133) and
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup (lines
144-153) into your script block. Next change the
Spry.Widget.TabbedPanels.prototype.getTabGroup function return to
return children[1] in its 7th line, and change
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup to return
children[0] in its 7th lines as well. You'll have something like
this in your page:
<script type="text/javascript">

</script>
Basically what this JavaScript change does is to move from
the tabs being the first element within the div that wraps the tabs
and panels, that is children[0] to its new position of the second
element children[1]. Same thing with the content panels, except in
the opposite direction, moving from second child element to first
child element (JavaScript uses a start position of 0 for the first
element).
Should be good to go from there. If not, please post in the
Spry forums.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Master Password Feature: After sometime (10-15 min.) the drop down list for the field on any site does not show; opening new window (not refresh or new tab) drop down appears.?

I manage a ton of accounts for different customers suing the same login pages (GoDaddy, WordPress, etc.) I use the Master Password Feature to help keep track of the many variants in logins and passwords.
After some unknown period of time, even closing the page tab so a new page session is started at the remote server, Firefox does not provide me with the usual drop-down selection list of the previously used login names. However, if I open a new FF window (file/new window) from the menu bar, the drop down becomes available.
How can I refresh the original window session in FF or change the timeout length?

Well, you said LOV...that might mean you are using JDev 11g. Are you? If so what technology stack are you using?
Assuming you are using JSF (?) you might be "backing" your list component in the application scope...but that is not likely.
If you are using ADF/BC on your business component level, you can clear your view object from which you are querying the possible values of this list...unless your you have made a method to compile this list...in which case you know what you are doing...so that is probably not the case.
Essentially you want to requery the VO upon which your LOV is based...unless you are using JPA or something...and then I know "requery" is not the right word...is it?

I need to open up the same web site in two separate tabs. Since I upgraded to Firefox 6 when I try to open the web page in a new tab from the list in the drop down in the address window it only gives be the option to switch to the tab already have open.

When I go the drop down from the address window, rather than showing the URL of the website I want open in a second tab it says "Switch to tab." But I don't want to switch to the tab - I want to open a second tab on the same URL. If I want to open it a second time I have to manually key in the address. Is there some way to turn this off so I can open up the second tab using the same address from the drop down? I have always been able to do this with previous versions of Firefox.

'''''"Is there some way to turn this off so I can open up the second tab using the same address from the drop down?"'''''
You can install this Add-on: https://addons.mozilla.org/en-US/firefox/addon/switch-to-tab-no-more/
'''If this reply solves your problem, please click "Solved It" next to this reply when <u>signed-in</u> to the forum.'''
Not related to your question, but...
You need to update some plug-ins:
*Plug-in check: https://www-trunk.stage.mozilla.com/en-US/plugincheck/
*Adobe Shockwave for Director Netscape plug-in: [https://support.mozilla.com/en-US/kb/Using%20the%20Shockwave%20plugin%20with%20Firefox#w_installing-shockwave Installing ('''''or Updating''''') the Shockwave plugin with Firefox]
*Next Generation Java Plug-in for Mozilla browsers: [https://support.mozilla.com/en-US/kb/Using%20the%20Java%20plugin%20with%20Firefox#w_installing-or-updating-java Installing or Updating Java in Firefox]

How do i link to a specific tab using the spry tabbed widget

Hello i'm working on a microsite using the spry tabbed widget. I'm having trouble figuring out how to link to a specific tab using a an external link.
here is the site. http://www.efaxcorporate.co.uk
for example: if i wanted to give a user a url link specifically tab#2.
Im sure this is really easy i just can't seem to figure it out.

Try http://foundationphp.com/tutorials/spry_url_utils.php

How do I adjust the width of a spry tab container without affecting others on website?

I have a spry tab container with 3 tabs and I want to add more width to the container as a whole, but when I change the width in the CSS styles panel, it affects all the containers on my site. How can I make a change that only affects the one container I'm working on? Thanks!

No problem. Here you go.
http://victorylcms.org/newsite/recipes.html
As you can see, I have it as two separate spry tabs. I want one that goes the width of the page, but if I change the width it affects the other spry tab I have here.
http://victorylcms.org/newsite/sermons.html
I know how to add more tabs, I just don't know how to adjust the width on the top container only.

Spry Tabbed Pannels - Moving the tabs down

Similar Messages

Maybe you are looking for