Images for Spry Tabbed Widget Buttons

Hello,
I would like my tab buttons to be images like the ones here: http://labs.wip3.adobe.com/technologies/spry/home.html
It's the sample after this section:
Spry 1.6.1—Ensuring Adobe AIR compatibiity
Thanks,
Troy

I have created some nav button images with a gradient applied in Photoshop and saved them as GIFs. Am having a bit of a challenge applying them to my Spry menu tabs as Background Images. But there is no reason why this shouldn't work, isn't that correct? (All software CS4).
I went out and bought a book offering CSS tips and tricks. Though the book isn't specific to Dreamweaver -- more of an HTML/CSS how-to-- it did offer a number of ways to apply images to nav bar, but all of them advised avoiding Javascript to accomplish this, which doesn't seem to be an option if I'm using Spry (which certainly seems to have its advantages, so I'd like to stick w/it if possible).
Any advice, insight or directions to a tutorial would be much appreciated. I did find this: http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WSc78c5058ca073340dcda9110b1f693f21-7b0 3a.html
Will parse through it in the morning, but am not sure it's the right set of instructions. Thought I'd ask an expert before spending much time on it.
Thank you,
Paula

Similar Messages

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

Images in Spry Tabbed Panels Tabs

I am completely new to the Spry options in Dreamweaver and
need help customizing the Tabs in the Spry Tabbed Panel.
I would like to substitute the text in each tab for a
different image in each tab, and have each image change by using
behaviors, depending on the user actions (hover, select, etc.).
If you can provide samples of this, it will truly be
appreciated. Thanks

First add an ID to the tab as follows or similar
<h2 id="second">Tab 2</h2>
Then add a style rule to add a background image as follows or similar
.TabbedPanelsTab#second {
background:url(myImage.gif);
Gramps

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!

Different images for spry menu button jpg or gif?

Hi I have just been reading James Branstons "questions and answers", just what I was looking for many thanks to gramps.
I am new to dreamweaver and spry and what I am wanting to achieve is a spry menu bar horizontal, I would like to have my own font "Cheri" for the about etc. To do this would I need to save text as a gif or a jpg? The jpg looks crisp where as the gif is not so sharp, the jpg has a black background white text, gif white text transparent background, the gif works well with hover, the jpg has the boxed background, if using a jpg do I need to create another file for hover? If so where do I place this in code?
I did what gramps descibed in James Branstons question works well, but the sub menu boxes have disappeared.
Hope this all makes sense, hard to explain what you want when you don't know exactly what you're doing. Many many thanks in advance.

Hi back on the website today just tried out the mouseover and mouseout, I must be doing something wrong as it looks like goulash at the moment, sorry to be a pain and thankyou in advance, as coding is something quite new and frightening for me help is really appreciated.
Currently code is:
    </script>
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li><a href="#">about</a></li>
      <li><a href="#">recipes</a></li>
      <li><a href="#">shopping</a></li>
      <li><a href="#">contact</a></li>
    </ul>
</div>
<div id="mainNavspace"></div>
When I added the code below to the about region thats when I made goulash.........
<li><a class="MenuBarItemSubmenu" href="#"><img name="about" src="jpgs/about.jpg" onMouseOver="about.src='jpgs/about_over.jpg'" onMouseOut="about.src='jpgs/about.jpg'" /></a>
Thank you for patience in advance, if you could show me how the code should look I would be very grateful, kind regards.

Troubleshoot Main Image for spry photo gallery

Hello, I am modifying some spry files to see if I can get the
hang of it using my images. I have taken the photo gallery files
gallery.js
SpryData.js
SpryEffects.js
xpath.js
The folder structure contains images and thumbnails on the
root folder as well as the ap.css sheet and photos.xml
The page is
http://www.proximita.com/learning/index.html.
Since I only have 1 photo gallery (and I did the getting
started tutorial and worked fine I wanted to add the slideshow
effect in the spry demo functionality) I only have one xml doc and,
as mentioned, the both image folders and the css sheet are on the
root, and the all the js files are in an includes folder.
The thumbnails show up fine, but, the main image does not
show up at all. I am almost sure this is a bad reference somewhere
or a begginners mistake but I cant find it.
I did modify the gallery.js because it referenced 2 or three
variables (like dsPhotos and dsGalleries that are used for the demo
I only have dsGallery) and I cahnged all of the other refrences to
dsGallery.
I think I am having problems here:
function ShowCurrentImage()
var curRow = dsPhotos.getCurrentRow();
SetMainImage("galleries/" +
dsGalleries.getCurrentRow()["@base"] + "images/" + curRow["@path"],
curRow["@width"], curRow["@height"], "tn" + curRow["ds_RowID"]);
you can check out the whole code here:
http://proximita.com/learning/includes/gallery.js
Im unconcerned with appearance for the moment, and would just
like to see the main image and the slideshow functionality.
If you can help, please do. Thanks, Mario.

yes, I suspect that is because the tutorial talks about
building this from scratch and uses that name for the "thumbnails"
div rather than what they actually use in the demo files...
confusing, to say the least.
It would be nice if there were a simple document with demo
files that didn't include other stuff unrelated to JUST the slide
show (gallery)... and if the whole layout were more simple,
css-layout-wise...
or, if the demo files were commented with what each bit is
for and how to modify it.
quote:
Originally posted by:
Dragos GEORGITA
Hi Mario,
I took a look at your sample and I've noticed you change the
ID of the container that holds the thumbnails (it was called:
"thumbnails". now it's "thumbContainer").
You need to open gallery.js and change the observer to point
to the new container:
Change
Spry.Data.Region.addObserver("thumbnails", function(nType,
notifier, data) {
To
Spry.Data.Region.addObserver("
thumbContainer", function(nType, notifier, data) {
Regards,
Dragos

Using Images for Tabbed Panels

I'm trying to use button images that I created in photopshop as the background for the tabs of my tabbed panel widget in dreamweaver. I tried this by inserting the folling code into the css (note bold line):
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.9em sans-serif;
background-image:url(images/tabs.gif);
list-style: none;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
color: #FFF;
I also tried using background:url(images/tabs.gif) in place of background-image:url(images/tabs.gif) but it still won't work. What do I need to know about using images for my tabs?

Have a look here
http://www.adobe.com/devnet/dreamweaver/articles/spry_widgets_design.html

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 Use an Image to Customize the Static Button Widget

Can I just get someone to help me figure out how to use an image to customize the static button widget, please?
I have tried using several different types of images, but none of them seem to actually change the appearance of the button.
Thanks!
Laura
Captivate 5.5

I tried to use the tools within the widget itself - it offers you the opportunity to use an image (see screenshot below).
I also opened it in Flash and tried to replace the images for one of the button styles there w/ my own, but in re-publishing the SWF from there I broke the widget. When I attempted to use the edited widget, there were no customization controls available after I inserted it (see screenshot two below).

Spry Tabbed Panels does not work as I want

Sorry, but this is an utter NOOB question.
I tried to use a Gooey ment on my page, but it does not work as intended.
Here it works OK: http://ppbm5.com/DB-PPBM5-2.php
Here it does not work: http://ppbm6.com/Planning.html
I assume it is related to the menu already on this page. Anyway, since this did not work, I tried to replace the Gooey menu with Spry Tabbed panels, but being an utter noob in this area, I have made some mistakes that the experts here can probably help solve easily. What happens:
It looks OK in DW:
Go to Live View and it still looks OK:
but then go to the actual page and it looks like this:
Why do the tabbed panels not display at the top of the page next to the vertical menu, like it does in DW?
Second question: How can I add text to each page/ tabbed panel, like here http://ppbm6.com/Planning.html

Spry Tabbed Panels 2.0 have a number of support files to make them run.

<script type='text/javascript' src='../Spry-UI-1.7/includes/SpryTabbedPanels2.js'></script>
<script type='text/javascript' src='../Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryFadingPanelsPlugin.js'></script>
<script type='text/javascript' src='../Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryTabbedPanelsKeyNavigationPlugin.js'></script>
<link type='text/css' href='../Spry-UI-1.7/css/TabbedPanels2/SpryTabbedPanels2.css' rel='stylesheet'/>
Below, I have a Spry demo page with 3 widgets on it. If you look at the source code, you'll see how the the various support files are organized.
Function code is near the bottom of the page.
http://alt-web.com/DEMOS/Spry-test.html
Second question: How can I add text to each page/ tabbed panel, like here http://ppbm6.com/Planning.html
Turn off CSS. View > Style Rendering > un-tick Display Styles. You'll see an unstyled HTML page in Design View. But this won't effect styles in Live View or Preview.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Google Analytics on Spry Tabbed Panels

I have created a website where I am using a few main html pages and have vertical Spry Tabbed panels for sections of information within most of the pages. I wish to track the clicks on the vertical Tabbed panels, but I am not having much luck implementing it. I could probably figure it out if I saw an example somewhere. I have also implemented a "back button" feature (thanks to Arnout Kazemier!) and clicking to go directly to a tab on a page using the SpryUtils into the default tab option for Spry Tabbed Panels. The Google Analytics web pages have information on gadget tracking, and one on tracking AJAX, and one on using the newer asynchronous tracking (which is supposed to be better for Ajax, etc).   I have tried to implement asynchronous tracking along with the "Tracking AJAX" recommendation by Google with no information being posted in a couple of days.
My website page where I have tried to implement it is here:
http://www.phostech.com/opt_con_v2.html
I have also seen examples where a counter is used just to count, but I would like the information on which pages were clicked.
I would rather not do this using the event tracking (but if that's the only way I'm OK), partly because the event tracking would be separate from the page tracking and the other features woudn't be as useful (exit page, sorting based on content, etc.).
I am not a great programmer, but I could probably manage it I saw an example close enough to what I need.
If anyone has any ideas, solutions, implemented examples that could help me, I would greatly appreciate it.
Thanks!

I have checked out your page using Firefox, firebug net panel that monitors requests from and to your page. And i do see a successful call to the google servers. But I also noticed a JavaScript error on your page caused by these lines of code:
http_request.onreadystatechange = sendAlert;
       http_request.open('GET', url, true);
       http_request.send(null);
You might want to remove those.

Spry Tabbed Panels changing bkg on hover?

I'm trying to use a tabbed panel widget for a client but each
tab uses a different background image for each tab. Now it was easy
to use a different background for each tab when they first appear.
Just make a series of classes and assign one of them per each tab.
Fine. Now my problem is I also want different images when you
rollover each tab and I can't figure that out. Right now I get the
same background image on hover no matter which tab I rollover. I
saw here on the forums a way to have a different background for
each selected tab, but I want this for the hover effect instead? Is
it possible without having to play around with the .js file?

Turns out I figured it out myself from the other link. You do
something like this:
.TabbedPanelsTabHover#TabbedPanelsCF {
background-image: url(../images/tabs/1_off.gif);
.TabbedPanelsTabHover#TabbedPanels2 {
background-image: url(../images/tabs/2_off.gif);
.TabbedPanelsTabHover#TabbedPanels3 {
background-image: url(../images/tabs/3_off.gif);
and it works....

Spry Tabs Panels: Limit to number of tabs?

I have set up simple tabs on my site to separate a weekly
newsletter. Across my page, there should be room for at least 10
tabs, but when I reach placing 5 tabs on the page, the content
mysteriously disappears! The first time this happened, I thought I
might have accidentally caused this, but then it happened a second
time. I had been very careful not to mess with the code, mainly
using the properties panel to add tabs, then clicking in the
preview window to paste content. So I can see all the tabs, but the
content disappears. So I have to start all over again by adding a
new Spry tabs widget.
http://www.austinhighschoolptsa.com/weekly.htm

V1 Fusion I was going through Spry forums and saw a problem
that another user had similiar to mine and was wondering if you
could offer some support. I am using the Tabbed panel from Spry and
can only get 5 tabs across before it starts a new tab below the
others. I was looking thru CSS file but not sure what can be
changed so I can allow 6 tabs accross. I'd send you link but it's
behind a firewall. I can send you a screen shot with email address.
Any help greatly appreciate it!!!!!!

Images for the TLN of AFP

Hi,
I noticed in one of SAP's demo screens, they had customized the the imgaes that show up against the names on the TLN. There is a separate image for "Welcome" tab and the rest of the tabs like MSS, ESS have a same image. Anybody know from where we can change these images ? I understand that in the Theme editor, there is an option to set the images, but how do we do it for each specific tab/role ?
Thanks
Murali

Hi,
There is no way to do it using Theme editor,
You will need to write your own TLN, Here you can see how it can be done:
http://www.sdn.sap.com/irj/scn/go/portal/prtroot/docs/library/uuid/001bfa1a-958e-2e10-c2be-d914f673e21e?QuickLink=index&overridelayout=tru
Regards,
Naama

Spry Tabs Panel help

Am just using this on a page, but using some icons.
At the moment it :
looks
like this
Is it possible to move the images into the tabs, so that they
change from the faded image to the colour one of each as they're
moused over?
I see it working if the image is the same for each tab, ie
set a background image for the tabs, and a different background
image for when they're moused over.
But how can I use different images in the tabs that change to
different images when each tab is moused over, a bit more like this
(just with the images in the tabs, but no mouse over change yet :
like
this
The CSS for the firs one with the text tabs looks like :
.TabbedPanels {
margin: 0px;
padding: 0px;
width: 100%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
height: 150px;
.TabbedPanelsTabGroup {
margin: 0px;
margin-left:7px;
padding: 0px;
.TabbedPanelsTab {
position: relative;
top: 0px;
float: left;
padding: 4px 5px;
margin: 0px 16px 0px 0px;
font: bold 1em sans-serif;
background-color: #FFFFFF;
list-style: none;
color:#999999;
border-left: solid 1px #fff;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width:94px;
text-align:center;
.TabbedPanelsTabHover {
background-color: #990000;
color:#24303C;
border-bottom: solid 1px #FFFFFF;
.TabbedPanelsTabSelected {
background-color: #FFFFFF;
color:#24303C;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
border-left: solid 1px #fff;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
background-color: #FFFFFF;
margin-left:0px;
height:120px;
display:inline;
.TabbedPanelsContent {
margin-left:0px;
width:500px;
padding-right:5px;
border-left: solid 1px #fff;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels */
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 400px;
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;
clear:both;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 400px;
height:150px;
#tp1 p { margin: 0; }
Hope that makes sense. Cheers.

Am just using this on a page, but using some icons.
At the moment it :
looks
like this
Is it possible to move the images into the tabs, so that they
change from the faded image to the colour one of each as they're
moused over?
I see it working if the image is the same for each tab, ie
set a background image for the tabs, and a different background
image for when they're moused over.
But how can I use different images in the tabs that change to
different images when each tab is moused over, a bit more like this
(just with the images in the tabs, but no mouse over change yet :
like
this
The CSS for the firs one with the text tabs looks like :
.TabbedPanels {
margin: 0px;
padding: 0px;
width: 100%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
height: 150px;
.TabbedPanelsTabGroup {
margin: 0px;
margin-left:7px;
padding: 0px;
.TabbedPanelsTab {
position: relative;
top: 0px;
float: left;
padding: 4px 5px;
margin: 0px 16px 0px 0px;
font: bold 1em sans-serif;
background-color: #FFFFFF;
list-style: none;
color:#999999;
border-left: solid 1px #fff;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width:94px;
text-align:center;
.TabbedPanelsTabHover {
background-color: #990000;
color:#24303C;
border-bottom: solid 1px #FFFFFF;
.TabbedPanelsTabSelected {
background-color: #FFFFFF;
color:#24303C;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
border-left: solid 1px #fff;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
background-color: #FFFFFF;
margin-left:0px;
height:120px;
display:inline;
.TabbedPanelsContent {
margin-left:0px;
width:500px;
padding-right:5px;
border-left: solid 1px #fff;
border-bottom: solid 1px #fff;
border-top: solid 1px #fff;
border-right: solid 1px #fff;
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels */
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 400px;
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;
clear:both;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 400px;
height:150px;
#tp1 p { margin: 0; }
Hope that makes sense. Cheers.

Images for Spry Tabbed Widget Buttons

Similar Messages

Maybe you are looking for