Spry Tabbed Panels 2 widget: How to set images in the tabs

I have to create a picture gallery with this widget.
In the tabs to select the specific galleries, therefore, a thumbnail image with a short text explanation should be displayed.
With all the tried methods the inserted pictures are not visible in the browser.
I have also tried to solve the problem with background images. But I cannot define the individual tabs in css anywhere. As a result, the background image is the same for all tabs.
Please help !!

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

Similar Messages

Multi page recordset output from ASP page on Spry Tabbed Panel Widget

I am using a simple Spry Tabbed panel set on my asp page to show the output from different ASP pages, inside the tabbed panels. The tabbed panels on the page under consideration (destination page) display the output from different asp pages (source pages). The source asp pages generate multi page outputs which are paginated on the source page itself and pagination links are displayed on the source page itself.
However, we dont want to display the source page outside of the tabbed panel, but instead the output content from the source asp pages should show inside the tabbeed panels only. The first page generated by the source asp page displays correctly inside the tabbed panel. However, when the user clicks on the links for the next page generated by the source asp page, but which is being displayed inside the destination page tabbed panel, they dont display the next page inside the tabbed panel. Instead the source asp page displays the output outside the tabbed panel destination page.
Please advise on how to ensure that the user can page through the recordset generated by the source asp page by clicking on the pagination links at the bottom of the records, while ensuring that the output displays within the tabbed panels on the destination asp page.
I am enclosing the source code being used to generate the spry tabbed panel widget and also updating it with the output from the source asp page. In this case, the code given below is from the main page containing the widget and the source asp page is "sample.asp", which generates multi page output.
Please note that I am not too keen on using xml data sets output from the source asp page, but would be more comfortable with directly using the asp pages to fill the tabbed panel content.
Please help
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/xpath.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('two','sample.asp?page=' <%=i%>); Spry.Data.initRegions();" >Tab 1</li>
       <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div id=two class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>

I fully agree that the problem does not lie with tthe tabbed panels.
The solution would probably be first required to be tried using ajax on any div tab.
Then the same code would have to be used on Sprytabbed panel. Hence, the following may be advised:
1. Sample code for server side pagination and displaying inside any div tag and refreshing it using ajax. the update link would also lie inside the div tag which would show the next/ previous page without reloading the page.
2. Then adapting the refresh technique using ajax in the Spry Tabbed panel using the inbuilt updatecontent method of the Spry Tabbed panels.
In order to achieve the above, I am getting the recordset output in the tab content as expected. The recordset is also getting the pagination links from server side asp as required.
However, it is also generating the following error.
Webpage error details
Message: Unterminated string constant
Line: 9
Char: 56
Code: 0
URI: http://localhost/test/test5.asp
The sourcecode is as given below. If you can help with the error indicated above, my problem would probably get solved.
<html><head>
<title>Untitled Document</title>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<script src="/SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="/SpryAssets/xPath.js" type="text/javascript"></script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('one','untitled-5.asp');">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0" >Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div id=one class="TabbedPanelsContent">Content 1</div>
    <div id ="two" class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Tabbed panel widget vertical alignment

In IE9, Chrome and Mozilla I have a vertical alignment problem in all browsers with the labels of a tabbed panel widget when sub-element positioning is set to horizontally-centererd or horizontally-top aligned.
Also this tabbed panel in IE9 has a 50% opacity whereas in Chrome and Mozilla it is shown as expected.
Please press the horn icon on my website http://www.timberexpert.gr to see the problem.
I am frustrated! Please recommend a solution.

IE9
Mozilla
I have drawn a horizontal yellow line to show vertical alignment of tabbed legends

Tabbed Panel Widget

I have two questions about changing the behavior of the SPRY
tabbed-panel widget that come with CS3 DW. For those very familiar
with this widget the answers should be easy.
1) Is it possible to close all tabs and have each panel of a
tab open only when its tab is clicked?
2) In a similar light, is it possible to inactivate the
panels of certain tabs, so that their respective tabs can be used
as buttons to effectuate other kinds of behavior, such as closing
any tab that has been left open.
If you can answer affirmatively to any of the above
questions, please point me in the direction I need to go in order
to achieve my goal.

Hello. Thank you for responding to my delima.
I have "did" as you suggested. Except I see some code after my link href that is not included in yours.
See the page at www.AmericanContractorsExchange.com Now the upper "collapsable panel remains open and the tab is not in a closed state..
Date: Tue, 3 Jan 2012 00:03:25 -0700
From: [email protected]
To: [email protected]
Subject: Tabbed Panel Widget
Re: Tabbed Panel Widget created by altruistic gramps in Dreamweaver - View the full discussion
1) Is it possible to close all tabs and have each panel of a tab open only when its tab is clicked?
Have a look at the following example
.hidden
Tab 2
Content 1
Content 2
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
Spry.$$("li.TabbedPanelsTab").addEventListener("click", MyOnClickHandler, false);
function MyOnClickHandler(e) {
Spry.$$("div.TabbedPanelsContentGroup").removeClassName("hidden");
return false;
2) In a similar light, is it possible to inactivate the panels of certain tabs, so that their respective tabs can be used as buttons to effectuate other kinds of behavior, such as closing any tab that has been left open.
Have a look at the spry Element Selector http://labs.adobe.com/technologies/spry/articles/element_selector/
Gramps
Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4115011#4115011
To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4115011#4115011. In the Actions box on the right, click the Stop Email Notifications link.
Start a new discussion in Dreamweaver by email or at Adobe Forums
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

Spry Sliding Panel Widget Template

I have inserted the Spry Tabs and Accordion widgets and
adjusted using CSS. Can I do the same with a Spry Sliding Panel
Widget?, if so where can I access a sliding panel widget to
adjust?.
I have found a tutorial to create a Spry Sliding Panel Widget
inserting code, but my code experience is zero.
Thanks

Also copy the required Javascript file and CSS file to the
correct location..
in the <head></head> of the page u will see
<script src=""> go to the location of the src.. copy and
paste the files to your new location in the same folder, or change
the src to match the new location of the file. Do the same for the
CSS wich is included at the <link href=

SPRY Collapsible Panel widget

Hi.
I've built a page with several collapsible panels and
inserted some flash animations on the tabs. When I click on a part
of the panel tab that is not filled with the animation, it opens
and closes normally. When I click on the animation, however, it
does nothing. Can anyone tell me how to solve this?
Thank you in advance.

Post a link to the page please so we can see what you have
tried to do so far.

How to set Image to ListView?

How to set Image to ListView？

There is an example about customizing the content of a list view using the cell factory: http://docs.oracle.com/javafx/2/ui_controls/list-view.htm#CEGGEDBF

Tabbed panel widget - broken line

Why does this happen with the tabbed panel widget (see pink arrow in screenshot)? I've tried moving the elements around and stroking the individual right element tab but nothing works.
http://www.cancerdxpathology.org.au/useful-links.html
Chris

Under Layers go to the content Area and move the Textfields to the left and/or remove the pictures , after that you can resize the tabbed panel.
Hope that helps

Tabbed Panel Widget is too wide for the Phone Layout.

Is it possible to reduce the width of the Tabbed Panel Widget for use on the Phone layout? When I grab a handle on the widget box and re-size it to the smaller width of the Phone layout, it springs back. There does not seem to be a way to adjust the width.

Under Layers go to the content Area and move the Textfields to the left and/or remove the pictures , after that you can resize the tabbed panel.
Hope that helps

How to set image icon to JFrame

Hi all,
how to set image icon in the title bar of JFrame
Thank for your help in advance

thanks
I have done as:
Image image;
image=getToolkit().getImage("database_yellow.png");
if(image==null)System.out.println("fault
n("fault image");
this.setIconImage(image);
but when I run my application, I can't see the database_yellow.png in the
title barHm, strange ... from the code snippet you just posted I can't find the error.
This may seem weird, but try to load a small .gif image instead ...
Are you sure the Image is not equal to null?
kind regards,
Jos

How to set images to your contacts to see their picture when there calling? Like their facebook picture.

How to set images to your contacts to see thier picture when someone is calling? Like for instance facebook picture.(on the iPHONE 4s)

You can manually add a photo to each contact on your iPhone - from an existing photo of the contact on your iPhone or capture a photo of the contact when together. Or add a photo for each contact in the address book app on your computer that is supported for syncing contacts with the iPhone followed by a sync.
For FaceBook check this link, which I found with a Google search.
http://www.iphonestuffs4u.com/how-to-sync-facebook-contacts-to-iphone/

Spry HTML Panel Widget breaks ICE

I'm using the spry html panel widget to load a side bar
across my site. It has Ice tags as do the main pages its loaded
into. When editing a main page, it will not save saying. "the html
sent to save was not in the page". (referring to my spry sidebar).
Taking ICE out of the side bar page allows it to work.
Is there a work around to use this adobe spry widget with in
context editing? It would be a shame is the sidebar can't be
edited, or has to be done for every page it loads into not using
the spry widget.

Hello Addis,
I'm not entirely clear on your workflow, but InContext
Editing does not support editable or repeating region groups inside
Spry Dynamic Regions.
You can create editable regions on the html page that loads
into the spry html panel widget, but you cannot have editable
regions on the
dynamic widget region itself.
Essentially, you can apply InContext Editing editable regions
to the content in the external HTML page (e.g.,
panelWidget.loadContent('
widget_contents.html'). Then, when you want to edit the
content that loads into the widget on the main pages, you would
edit the
widget_contents.html page with InContext Editing. You can
also apply InContext Editing editable regions to any
static content regions on your main pages.
Please let me know if this needs clarification.
Best regards,
Corey

How to set focus on the title of JTabbedPane

I have created a JTabbedPane and added three JPanels to it. They are titled, say "Panel 1", "Panel 2" and "Panel 3". And each of them contains buttons and text areas. Since this app is for physically disabled users, it must provide navigation through these three tabs with keyboard operations only (i.e. without mouse clicks).
When the title "Panel 1" gets focused, users can go to "Panel 2" by the right arrow key. When Panel 2 is brought up, however, the title "Panel 2" does not get focused. Instead the first button inside panel 2 is focused. In order for users to navigate to 'Panel 3" by the arrow key, the title "Panel 2" has to be focused. How do I set focus on the tab title?
I have tried 'requestFocus()' on Panel 2, but it does not work. Please help me with this issue. Thanks in advance.

I'd be quite interested to know if this can be doen as well so I thought I'd post this message to move it to the top of the board.
Thanks.

Setting image over the checkbox of JCheckBox

hi everybody,
I m new new to the forum so dont know about any rule but I am in trouble to setting image over the check box in JCheckBox(not side of the checkbox). I just want to cover the checkbox by some icon. I just wanna know is it possible? if ya how? it will be great help to me.
thanks in advance for any kinda suggesion.

Hi sudip;
use JCheckBox(String text, Icon icon); to display icon instated of checkbox. and to differ checked & unchecked box use setSelectedIcon(Icon) on checkbox object to display some other icon whenever box is selected.

How can i print all the tab pages not just the first page (tab)

how can i print all the tab pages not just the first page (tab)

You would need to do this programmatically. Here's one way:
Attachments:
Example_VI_BD6.png ‏3 KB

Spry Tabbed Panels 2 widget: How to set images in the tabs

Similar Messages

Maybe you are looking for