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

Similar Messages

Images for tabs are not getting displayed in the page

Hi,
I have given images for tabs on a page. when iam applying images from the local disk, it is showing the images in edit mode. But when I view the page, it is not showing any images.
Where should i copy the images I use in my pages. I ahev copied all the images in the images directory of portal30 in server.
Please help.
Murthy

Hi,
Please check the httpd.conf file in your server for /images alias. The /images alias will point to a directory. Copy your
image files in that directory.
Thanks,
Sharmila

I can't view multiple images in tabbed panels in photoshop CC (do not have this problem in PS5 or 6)

I can't set up multiple images in tabbed panels in photoshop CC (do not have this problem in PS5 or 6). Has anyone had this problem with CC and if so do they know the fix?

I just discovered something really weird. If I open the images in
photoshop (and the tabs are not showing) and then open another window on
top of photoshop (for example word or safari) , then the images and tabs
show in the photoshop window. But if I move Pshop to the front screen then
the tabs disappear!

Can you use anchors with tabbed panels???

Im trying to use anchors with tabbed panels but they dont seem to work. I need to be able to link to specific tabs and specific areas within those tabs, but I haven't been able to find a way to do this. Does anyone know or have a work around?

Yes, that is an improvement in Muse, check release notes here, http://forums.adobe.com/message/5104247 - Widget Improvements
The selected tab in Design view for the Tabbed panel widget will now be selected/active when previewing, exporting or publishing the site to Business Catalyst.
- Abhishek Maurya

Difficultly using functions of tabbed panels

Hello everyone I have a problem. I am not sure how well I can
explain this because I am a beginner programmer. Anyway here goes.
I have oscommerce that I an modifying to suit my business
needs.
I put in a set of tabbed panels that are created off of
values coming from a Mysql dbase.
When a user makes changes to these tabbed panels I need to
pull the changes they made from the tabbed panels.
I got all the panels built and radio buttons made on each
tab. If a user selects one of the radio buttons I can successfully
update the dbase accordingly.
However I need to know which tab the user clicks on. I
believe that I can use the function getCurrentTabIndex() to do
this.
But I am not sure where in my code that this needs to be.
Can anyone help me out?
thanks

quote:
Originally posted by:
karozans
Hello everyone I have a problem. I am not sure how well I can
explain this because I am a beginner programmer. Anyway here goes.
I have oscommerce that I an modifying to suit my business
needs.
I put in a set of tabbed panels that are created off of
values coming from a Mysql dbase.
When a user makes changes to these tabbed panels I need to
pull the changes they made from the tabbed panels.
I got all the panels built and radio buttons made on each
tab. If a user selects one of the radio buttons I can successfully
update the dbase accordingly.
However I need to know which tab the user clicks on. I
believe that I can use the function getCurrentTabIndex() to do
this.
But I am not sure where in my code that this needs to be.
Can anyone help me out?
thanks
well im actually working on the same thing atm. atleast the
same concept.
I have add a function on the tabs, so when they click it
fires the check function;
<div class="TabbedPanels" id="tp1">
<ul class="TabbedPanelsTabGroup">
<li onclick="loadContent();">tab0
</li>
<li onclick="loadContent();">tab1
</li>
<li onclick="loadContent();">tab2
</li>
<li onclick="loadContent();">tab3
</li>
</ul>
^ like that.
function loadContent(){
// other function code like updatecontent that i have heere
setTimeout('checkTab();',0); // this is what its all about ..
function checkTab(){
var curIndex = tp1.getCurrentTabIndex();
if(curIndex == 0){ // if its pannel nr 0
do something
}else if(curIndex == 1){ // if its pannel nr 1
do something when user comes to pannel 1
}else if (curIndex > 1 ){
they press a pannel greater than pannel 1, it will fire
this;
maby it will help u out.. atleast it works for me :)
i use that code to show and hide certain buttons on the page.

I use images for presentations. Recently I've noticed a decrease in quality ( sharpness and definition) of pictures copied into Keynote. Same problem with both JPEGs and TIFF files. I've recently upgraded to keynote 09, but with no improvement.

I use images of paintings for presentations. Over the last 3 months or so I've noticed that I cannt copy images (either JPEg or TIFF) without a reduction in sharpness and definition. Hope someone can help with this problem.

Figured it out myself! yay! (only took my entire moring)
The solution:
Dont print to PDF!
SAVE AS COPY, then select Adobe PDF and click SAVE, this will bring up a dialog box with the options you need (including the "High Quality Print" Adobe PDF Preset)
This was not clear in any of the instructions i read

Spry menus - using images for buttons

A search of the forums shows two approaches, to use an image
for a button in a Spry menu.
One of them uses HTML to put an <img> into the
<li>. Here is the example I found cited [contributed by
arandlett - though said there not to work in IE7].
<ul class="MenuBarVertical" id="MenuBar1">
<li><img src="images/bullet.png" align="left"
/><a class="MenuBarItemSubmenu"
href="index.htm">home</a></li>
<li><img src="images/bullet.png" align="left"
/><a href="#">About</a> </li>
</ul>
The other advises "find "background-color" and change it to
"background-image: url(link/to/image)" " [contributed by The only
RaM].
Underlying of course, is the question, how does the HTML
interplay (or not!) with the Spry javascript?
By this time, there must be pretty wide experience. After
all, putting interesting buttons in the popups/dropdowns is in many
ways what this is about.
We would be quite appreciative to learn what experience
indicates, now, is best practice. Or, does it depend, on ... ?
Thanks in advance for your help, David Allen

Let me add a note to my own post.
We would still be delighted to hear others' experience, with
images in Spry menus. One thing does emerge with a little further
look: The Spry menu is suited to using the _same_ image for each
button. If the desire is to vary that image (such as to use an
unusual font, so that the text changes on each image), then
Fireworks clearly is the tool of choice.
Again, we would be pleased to hear other experiences, David
Allen

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

Feature Req: Ability to use CFGrid in Tabbed Panels.

Currently, there is no way to use a data grid in a tabbed
panel in cold fusion ... this is really sad. I hope in the future,
you can do such a thing ..
Now this may be a little misleading. But as if CF 8.0.1, if
you place a CF grid into a spry panel, you cannot see any data
until you click on a column header to sort by that column. At that
time, the grid will expand to show all columns, and rows of data.
Until then, cfgrid refuses to show anything.

> Currently, there is no way to use a data grid in a
tabbed panel in cold fusion
Really? What makes you say that?
[code]
<cfscript>
// mock-up some data
q = queryNew("id,firstName,lastName");
queryAddRow(q); querySetCell(q, "id", 1); querySetCell(q,
"firstName",
"Adam"); querySetCell(q, "lastName", "Cameron");
queryAddRow(q); querySetCell(q, "id", 2); querySetCell(q,
"firstName",
"Jane"); querySetCell(q, "lastName", "Smith");
queryAddRow(q); querySetCell(q, "id", 3); querySetCell(q,
"firstName",
"Bob"); querySetCell(q, "lastName", "Brown");
queryAddRow(q); querySetCell(q, "id", 3); querySetCell(q,
"firstName",
"Sarah"); querySetCell(q, "lastName", "Williams");
</cfscript>
<cfform method="post" action="#CGI.script_name#"
format="flash">
<cfformgroup type="tabnavigator">
<cfformgroup type="page" label="Grid Tab">
<cfgrid name="myGrid" format="Flash" query="q"
selectmode="edit"/>
</cfformgroup>
<cfformgroup type="page" label="Another Tab">
<cfinput type="text" name="someText" />
</cfformgroup>
</cfformgroup>
<cfinput type="submit" name="submit" value="Submit" />
</cfform>
<cfif structKeyExists(form, "fieldNames")>
<cfdump var="#form#">
</cfif>
[/code]
Seems to work OK to me. Am I misreading your statement?
Adam

How are Tab Groups superior to using windows for tab groupings?

With Mac OS 10.5 I have been using windows as a defacto method for tab groupings. When tabs get two crowded, I open a new window. I have to move between windows to get to all tabs in a group.
The Tab Grouping instructions don't address moving tabs from multiple windows into a single large group, say, for charts on a large number of stocks.
[A disadvantage with my multiple window system has been my occasional misstep, e.g., closing a window full of tabs with the red button when I intended to minimize the widow with the yellow button, or, worse, when I get the option after a Firefox crash or power loss to Restore windows and tabs or Start a New Session and I hit the Start New session Button; in either event I lose the tabs and/or windows affected.]

I don't ever use it because I think it is odd to have tabs floating around my desktop but you can drag Snippets, Connections and Reports outside the SQL Developer Window - Detail tabs and the Worksheet can't be. Not sure if this works on a Mac or if this is what you were looking for but wanted to mention it.
-- Sharon

Help needed for tabbed panels

I'm having problems with my html pages that utilize Spry
tabbed panels. The majority of them look as expected but when a
page requires a scroll bar because of it's increased length,
there's a noticeable shift from page to page.
Almost looks like the pages jump horizontally. Can someone
take a look & offer some help?
Thanks much, VSE_driver
http://www.monocacyequine.com/newweb/index.html

Nothing to do with tabbed panels. This is to do with Firefox
etc adding a scroll bar on the right and then the outer div
"wrapper" being centered horizontally on the page.
Try adding a css relative position attribute to the wrapper
id element
#wrapper{
position: relative;
left: 100px;
</style>
Adjusting the left element as required.
Phil

Images for tabs are not getting displayed in the page if Iam using a template

I have page with a unstructured template. I have arranged tabs on page with images attached. But images are not getting displayed. why

Hi,
Please check if the images are in the server and in the /images alias path.
thanks,
Sharmila

Create a ready to use image for SharePoint 2013 development environment.

Hi
I have a requirement in which we are required to have an Image of the whole SharePoint 2013 environment, (ideally single server installation/standalone as I believe multi-tier would not be possible, or if possible suggest on that also), with all the installations
done- SQL server, SharePoint , language pack if any, App configured, search, service applications, etc etc. so that if at all required we would have that image in a server and provide that image to the developer, he would either mount it or run it and start
the SharePoint 2013 App development.
Please suggest on this.
Thanks in advance.

Not for imaging purposes.
You could have an environment that is ready-to-go with the bits installed, but not configured. You would then have a post-imaging script that would configure the farm. In this process, you would also need to make sure SQL Server was aware of the server's
new name (see http://technet.microsoft.com/en-us/library/ms143799.aspx).
Trevor Seward
Follow or contact me at...
&nbsp&nbsp
This post is my own opinion and does not necessarily reflect the opinion or view of Microsoft, its employees, or other MVPs.

Using anchors for Sliding panel

I want to use external links with anchors to specific panel in Spry Sliding Panels i.e.
www.mysite.com/Portfolio.html#Panel1
www.mysite.com/Portfolio.html#Panel2
Is it possible to do so? kindly guide me

You can use this technique http://foundationphp.com/tutorials/spry_url_utils.php. You can then use the Spry Loadlistener to trigger the showpanel instead of of an onclick event that is used here http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
Gramps

Use Images for Top of CSS Menu

Is it possible in FW 8 to create an imaged based top level
menu with text based CSS drop down menu?

surfstoke wrote:
> Is it possible in FW 8 to create an imaged based top
level menu with text based CSS drop down menu?
Yes. Check out the pop-up menu feature.
Linda Rathgeber [PVII] **Adobe Community Expert-Fireworks**
http://www.projectseven.com
Fireworks Newsgroup:
news://forums.projectseven.com/fireworks/
CSS Newsgroup: news://forums.projectseven.com/css/
Design Aid Kits:
http://www.webdevbiz.com/pwf/index.cfm

Using Images for Tabbed Panels

Similar Messages

Maybe you are looking for