Tabbed panels: switching images for each tab?

Hi,
I am a spry newbie. I have three tabs in a tabbed panel. I
have been able to put images into the tabs; these are my three tab
labels. But I'd like to switch the image of a tab when it's being
clicked or hovered over, and then again when it's the foreward-most
tab. Is there a way to do this? If so, could you please explain or
point me to an example? Thank you very much.

My education in spry continues. I realized that I didn't have
to use images, as I had been doing, since my labels were just text
on a color background. I quickly learned how to work with the css,
and now the tabs look very nice. So, problem solved!

Similar Messages

Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like

Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like it was all created on one page, plus mouse over doesnt work on them.
This started all of a sudden.
The entire website is a series of spry tabbed panels.
http://pacificlaser.com/const.html
if you click on General construction tab things work ok...
if you click on Machine control tab, mouse over doesnt work and all page content of each tab show through.
ive been looking for the answer for 4 months with no success.
Hope a fellow dreamwever-person can help
Thanks Rick

You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
Correct these links:
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
And you should be good to go.
Beth
ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
B

Spry tabbed panels - Different Hover Class for each tab

Already posted this in the general Dreamweaver section, but just realized there was a specific Spry section. So, my apologies for the repost.
I'm setting up spry tabbed panels, and I'm wanting to use an image for each tab, with the text already on it. I've figured this much out by creating a different class for each in the spry tabbed panel css.
However, I'd also like to have a second hover image for each tab. I'm having trouble figuring out how to set up separate classes for each tab's hover state.
Any help?
Thanks.

Just in case you did not notice the announce at the top of this forum's main page, I have copied it here.
Announcement: New to Spry, or the Spry forums?
Hide Details
Before you post a topic please verify that:
You are using the latest Spry files
The latest version of the Adobe Spry Framework is 1.6.1, this is the same version that ships with Dreamweaver CS4. If you use Dreamweaver CS3 (uses Spry 1.4), its wise to upgrade your files to the latest version. This can easily be done using the Spry Updater that can be found here.
Your question was not asked before
Using the search functionality on forums you can easily find out if your question has been answered before. While you are in search, you can specify the search locations. The Spry forum can be found under:
Adobe Labs > Spry Framework for Ajax
Yoru question can not be found in the existing documentation
Spry provides you with allot of documentation this can found on different locations. In the sidebar of this forum you can find a small summary of resources that will help you on your way.
If these options do not apply to your question, please be so kind to also supply the following information in your topic together with a clear description of your issue:
What browsers does this issue occure:
example: Internet Explorer 8 on Window 7 and Firefox 3.0 on Mac OSX
What version of Spry are using:
example: Spry 1.6.1 ( the version number can be found in license header of the .css and .js files )
What is the url of your website or page in issue:
example: http://www.example.com/page/in/issue.html
Step to reproduce the issue:
example: Scroll down till you find the header "help", there you will see a Spry Accordion. When you click on it it will not open or close.
So users can provide you with a better answer, without having to ask you for further details.
by Arnout Kazemier at Oct 23, 2009 2:47 PM
landon_tc wrote:
Actually, I do remember posting that, and have updated it with what worked for me. However, I could not recall posting it in a specific ajax spry forum, so I assumed I just posted in the general forum. Hence the current situation.
Yeah and my name is not Ben Pleysier.
landon_tc wrote:
Any help with the current problem?
Please have a look at this thread http://forums.adobe.com/message/2662019#2662019
I hope this helps.
Ben Pleysier

How to insert more items for each tab in WAD 7.0

Hello to everyone,
My problem is confined to the WAD 7.0
I would like to insert 4 different queries into a new Web Template.
Two of them have to stay in one page and the others in one page each; therefore, the result would be a Web Template with three tabs.
Unfortunately the system creates automatically four different tabs with one query each.
Anybody knows how to insert more items in one page/tab?
Thank you very much
Savino Pompa

Hi Savino
In the WAD bring up the properites of the tabstrip_container web item, under the Internal Display group in the Tab Panel List, create 3 tabs, then drag 3 contatiner_layout web items into the tab web item.
In each conatiner item drag the analysis web item, 2 in the first container, then 1 each for the others, then point each analysis web item at a dataprovider(query).
Setup the contatiners so that the analysis items displays, to do this in the container properties create a row then on the following screen a column and then set the Subordinate web item to the analysis item, these web items control layout and are useful for dealing with multiple web items, for the first tab with 2 queries you will need to play with the layout, either 1 row 2 column or 2 row 1 column.
For each tab you created add the corresponding contatiner as the Subordinate Web Item in the Tab Panel parameters for each tab.
Hope this helps
Josh

How to make a tabbed panel in fireworks for a web page?

I know fireworks is not the best place to make a web page. I have to use this because it is a mockup for school. i have the tabs up and each state made in each tab i have the appropriate tab merging with the content area. I also have 3 other states I have created for each tab. first problem i am having is that when I click on state 2,3 and 4 I my content disappears including my master page and all of my other content I don't know how to make it show like it does in state 1. my second problem is I don't want to slice the hotspots to make the tabs. I just want to make the hotspots navigate to each state is that at all possible? or do I just have to slice it? the reason I don't want to slice is because the instructor does not like it when we slice content don't ask me why.

Searched for a solution and I found a video tutorial about this:
http://www.imoviehowto.com/imovie-ios-8-how-to-reverse-a-video-clip/

Using Firefox 26. How do I get a close button for each tab at the top of the screen?

Some time ago, I had a close tab button for each tab on the top of the screen. I want that back. I have no additional add ons and the close tab is set to 1. Changing it to 2 does nothing.

Do you have installed this extension?
*Firefox/Tools > Add-ons > Extensions
If you do not have the extension and also have no need for the feature that it provides then you can ignore this.
If it works in Safe Mode and in normal mode with all extensions (Firefox/Tools > Add-ons > Extensions) disabled then try to find which extension is causing it by enabling one extension at a time until the problem reappears.
Close and restart Firefox after each change via "Firefox > Exit" (Windows: Firefox/File > Exit; Mac: Firefox > Quit Firefox; Linux: Firefox/File > Quit)
You can use one of these to start Firefox in <u>Safe Mode</u>:
*On Windows, hold down the Shift key while starting Firefox with a double-click on the Firefox desktop shortcut
*On Mac, hold down the Options key while starting Firefox
*Help > Restart with Add-ons Disabled
*https://support.mozilla.org/kb/Safe+Mode
*https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes

If I have multiple tabs, the history is not for each tab, so if I drop down it shows history from other windows too, possibly eliminating all history for the current window. How do I get each tab separate?

The drop down list when the History menu option is clicked, has only provided history information for the tab currently being used. (You could go to all history of course and it was cumulative). It is now showing cumulative history for all tabs including for other Firefox windows if I have more than one copy running.
Is there an option to separate the histories for each tab again?
I do not know if this is because of Windows 7. This computer is new as my previous one was stolen and they no longer sell XP versions or Vista versions.
Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.8) Gecko/20100722 Firefox/3.6.8
Windows 7 build 7600 - all updates current.
My e-mail is [email protected]

I use that add-on. Works great.

Navigation bar different colors for each tab

I want to have the top horizontal navigation bar with different background colours for each tab on the bar.
I don't want to change the background colour for the entire navigation bar. How do I change them individually?
thanks!

Hi lorrscorpio,
As far as I know it is difficult to change background color of top navigation link OOTB, better to create a html menu for that and add it to your page .In that you can easily change background color of your top navigation link.
Whenever you see a reply and if you think is helpful, click "Vote As Helpful"! And whenever you see a reply being an answer to the question of the thread, click "Mark As Answer

Can Firefox 6 be configured to remember more than 5 prior pages for each tab so that the "go back one page" feature will allow me to retrace my steps as many as 20 pages back?

Before Firefox 5, the "go back one page" history would show 10 or more prior pages for each tab, so that I could go back quite a way in retracing my browsing steps. With Firefox 5.0.1 and 6, however, the list of prior pages seems to have been capped at 5. I would like to configure Firefox to remember 20 or 25 prior pages for each tab. Is there any way to do that?

(1) Firefox's built-in post-crash page has not been a real HTML page for a long time (for example, from the time of Firefox 22, see: [https://support.mozilla.org/en-US/questions/968212 Want to save LOTS of versions of "Restore Session.xht" from the "oops ..." page for later use]). If you had this working differently with Firefox 25, that might have been created by an extension.
You can check to see whether extensions are disabled or need an update on the Add-ons page. Either:
* Ctrl+Shift+a
* orange Firefox button (or Tools menu) > Add-ons
In the left column, click Extensions. The disabled extensions cluster toward the bottom of the list. To poll for updates, use the "gear" button above the list and choose Check for Updates.
If you used the Reset feature (or Firefox automatically did a reset due to some problem during upgrading), you will need to reinstall missing extensions. The reset feature creates a folder on the desktop named Old Firefox Data. Do you have that folder? There may be data you can recover from it.
(2) There are many ways for history to get cleared, both internal to Firefox and external. Could you double-check your Privacy settings?
orange Firefox button (or Tools menu) > Options > Privacy
* The "Firefox will" drop-down says Remember History: Firefox shouldn't be clearing history, but an add-on or external software could do it
* The "Firefox will" drop-down says Use custom settings for history: inspect the "Clear history when Firefox closes" setting to make Firefox isn't set to clear history. Also check your add-ons and consider external software.
Firefox normally accumulates months of history. However, some of Firefox's database sizes are based on disk space available. If your hard drive is very full, Firefox might reduce the amount of history stored.

RAW JPEG PROBLEM I'm new to Aperture and neglected to mark RAW JPEG pairs when I imported (from iPhoto). Now I have two images for each photo. Help!! How can I change this?

I’m new to Aperture and neglected to mark RAW+JPEG pairs when I imported (from iPhoto). Now I have two images for each photo. Help!! How can I change this?

How did you import from iPhoto? If you saw the Import panel with raw -jpeg pairs, then you probably did not import your iPhoto library as library, but as files, and then you will see plenty of duplicates - previews, thumbnails, originls, edited versions. If that should be the case, it would be better to delete the import from iPhoto and to import your iPhoto library again, but this time using "File > Import > Library".
Only that would require compatible versions of iPhoto and Aperture. What are your Aperture and iPhoto version numbers?

How to change background image for each individual page in a template?

I've been working for hours to try to figure out how to change the background image for each individual page in a template. I have tried making a div in the body and adding a CSS and setting a background picture. Unfortunately even after I made it editable all templated webpages changed. I tried looking at different forum results which didn't really help me out. http://forums.adobe.com/message/2670005#2670005#2670005. I've also tried embeding a CSS style on the webpage instead of the external CSS which again didn't work. I'm not sure where to go from here. Is there a good video that explains this clearly. Please help. Thanks.

Adjust inline styles to suit your needs.
<li><a tabindex="-1" href="giving/index.html" class="MenuBarItemSubmenu" style="background:none; color:#FFF; background: #000;">GIVING</a>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Adding A Separate Background Image For Each Menu Item

I asked this in the Spry forum, and not sure I understand the answer. Plus, I should have been more specific in asking how to do it, as I'm still pretty new to this stuff. Nothing I'd found indicated it could be done, or how.
Org question -
I know you can apply a background image to the menu bar items, but is it possible to add a background image for each individual item? What I'm basically trying to keep are the effects (bevel/emboss, etc.,) that I attached to the text, when I created it in PS CS4.
Answer -
Yes you can. The widget is just normal plain html markup so you can just add other classNames or id attributes to the elements. And style the elements through those classes/ids.
Does this mean I'd have to write a new rule for each menu item? What?
Thank you.

Did an Adobe Tutorial for creating/entering a Spry Menu Bar. This is the HTML, after I took out the submenus.
<ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="news.html">Features</a></li>
      <li><a href="news.html">News</a></li>
      <li><a href="news.html">Fashion</a></li>
      <li><a href="news.html">Lifestyle</a></li>
      <li><a href="news.html">Calendar</a></li>
    </ul>
This is from the SpryMenuBarHorizontal.css (It seems like I need to make changes in the Design Info section of this code. But nothing I've tried has worked):
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
text-transform: uppercase;
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
z-index: 1000;
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 7em;
float: left;
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
left: auto;
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
width: 8.2em;
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
position: absolute;
margin: -5% 0 0 95%;
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
left: auto;
top: 0;
DESIGN INFORMATION: describes color scheme, borders, fonts
/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
border: 1px solid #CCC;
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
display: block;
cursor: pointer;
background-color: #EEE;
color: #333;
text-decoration: none;
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
background-color: #33C;
color: #FFF;
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
background-color: #33C;
color: #FFF;
SUBMENU INDICATION: styles if there is a submenu under a given menu item
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
background-image: url(SpryMenuBarDown.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
background-image: url(SpryMenuBarRight.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarDownHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
background-image: url(SpryMenuBarRightHover.gif);
background-repeat: no-repeat;
background-position: 95% 50%;
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
ul.MenuBarHorizontal li.MenuBarItemIE
display: inline;
f\loat: left;
background: #FFF;

Using Images for each button

I am trying to create a spry menu that has 5 buttons and each button will have 3 different images for each state (something like this http://jjcstudios.com/woof_wallet/ ) I was going to use the insert > navigation bar but I read that this method creates a lot of extra javascript and they recommended using Spry instead. Can anyone point me in a direction to create a clean method of doing java rollovers or modifying the spry menu so it will work as a rollover. thanks john

John,
To place the javascript in an external file, grab the code that is producedon the page
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_nbGroup(event, grpName) { //v6.0
var i,img,nbArr,args=MM_nbGroup.arguments;
if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
} else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
} else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
} else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
and place it in a file called menu.js or similar.
In your page place the following in between the <head></head> tags
<script src="menu.js" type="text/javascript"></script>
to link the Javascript.
If you want to put menu.js in a different folder, make sure you adjust the link accordingly, like "js/menu.js"
Ben

When I open a link in a new tab, firefox switches to the new tab

When I open a link and instruct to open in a new tab , it switches me to that tab !
I have under tools>options>tabs>
unchecked "switch to new tab immediately"
And it still switches to the new tab, this is frustrating...

I fixed it by disabling the Divx add-ons in Firefox. Hope that helps you

Designate a tab in a tabbed panel as the default start tab on page load?

How can I designate a tab in a tabbed panel as the default start tab on page load? Anyone know?

Hi Lightcatcher,
By default, the first tab opens when a page loads. You can drag the tabs left/right and make the desired tab first tab.
Regards,
Aish

Tabbed panels: switching images for each tab?

Similar Messages

Maybe you are looking for