Tabbed Panel menu + HTML Panel submenu?

I'm using spy tabbed panels for my top level menu and HTML
panels for the sublevels, and it works great...for one tab. The
other tabs display their submenus but don't respond with panel
content.
Looking at my site, you can see that the tabs work and that
the submenus are displayed, but only the panels under "Our Public
Responsibility" function. I guess each tab needs a separate panel
widget instance, but I don't know how to accomplish that.
Any input very much appreciated!
UPDATE: Just needed to sleep on it, I guess. I figured it
out.

I'm sure you will get more answers in this forum: "Spry Framework for Ajax":http://forums.adobe.com/community/labs/spry
Good point. I'll post it there.
I do not see a problem with what you want to do. Keep in mind though, that, unlike the tabbed panel widget, you will be taken to a new page when clicking a link.
Also, do you know if it's possible to have an entire web page (separate html file), display in a panel?
Have a look here http://labs.adobe.com/technologies/spry/samples/htmlpanel/html_panel_s ample.html
Yup, link to another page (e.g., my forum), would be right.
I'm trying to wrap my brain around the html panel link you provided. Thanks.

Similar Messages

Html panel - inside html panel?

hi everyone
i have a page with a main content div which is an html panel theat will load different content
one of the (fragment) pages it loads has xml data etc on it.
i now need on this dynamic page a little html in a div too, but that means an html panel within an html panel!
i declared var infolpanel; on the main page, and the maincontent htmlpanel div has evalscripts set true
on the dynamic fragment page, the xml datasets are working etc, but i need another html panel
infopanel = new Spry.Widget.HTMLPanel("info");
infopanel.loadContent('products/'+ product + '/info.html');}};
now when i load the page, none of the xml data populates either, instead showing {dataset::variable} instead :-s
removing the above javascript again fixes it.
so, is there any (other?) way for this fragmented page to load a smaller fragment into the div?
thanks
delboy

How do I open another collapsible panel, on a different page
through a link? I have tried many different ways, including trying
to use SpryURLUtils.js and am not having any luck? I really wanted
to jump to a different pages' collapsible panel, open it, and then
populate the SpryHTMLPanel, located inside that targeted
collapsible panel. My collapsible panels and HTML panels all work
fine on the target page, when just interacting on the page itself,
with mouseclicks. Inside the collapsible panels I have unordered
list of links, that populate HTMLpanels, with the appropriate HTML
fragments. My problems lies in crosslinking from other webpages to
the exact collapsible panel, and then populating the exact HTML
fragment, just as if I had clicked on the link in the list, if I
had been on the target page in the first place.
<a href="../OA_qi_docreq.html?panel=0#cp1">
<a href="../OA_qi_docreq.html#cp1">
<a href="../OA_qi_docreq.html#cp1.open();">

HTML Panel into HTML Panel

Hello,
I know this topic has been seen a lot, but I still can't find
the answer for me...
Well, it's easy, I use html panels to load content into my
website (I have a SPRYMenu wich loads content into the
"main" div)
But, when I load content including another HTML Panel, it
doesn't work...
I've set the evalscripts to true, but it doesn't work...
here is a small portion of code coming from the exaples, wich
looks like what i want to do, even if in this code, it loads a
slidingPanel, not a HTLMPanel, but I think if I can make it work,
I'll be able to do what I want then !
here is the main file
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
hr, .clearAll {
clear: both;
.SlidingPanels {
width: 300px;
height: 300px;
.SlidingPanelsContent {
width: 300px;
height: 300px;
.p1 {
background-color: #CCCC66;
.p2 {
background-color: #FFFFCC;
.p3 {
background-color: #6699FF;
.p4 {
background-color: #99CCCC;
.p5 {
background-color: #FF99CC;
.p6 {
background-color: #339933;
.p7 {
background-color: #9933FF;
.p8 {
background-color: #669966;
.p9 {
background-color: #00FFCC;
#example2.SlidingPanels {
float: left;
#example2 .SlidingPanelsContentGroup {
float: left;
width: 10000px;
#example2 .SlidingPanelsContent {
float: left;
</style>
<script src="inc/SpryHTMLPanel.js"
language="javascript"
type="text/javascript">
Spry.Widget.HTMLPanel.evalScripts =
true;</script>
<link href="inc/SpryHTMLPanel.css"
rel="stylesheet"
type="text/css" />
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
</head>
<body>
<div id="panelSpry"
style="">text de base</div>
<div><a
href="essai1.html"
onclick="panelWidget.loadContent(this.href);return
false;">changement</a></div>
<script>
var panelWidget = new
Spry.Widget.HTMLPanel("panelSpry", { evalScripts:
true });
</script>
</body>
</html>
and here is the loaded file (essai1.html) :
<link
href="inc/SprySlidingPanels.css"
rel="stylesheet"
type="text/css" />
<script type="text/javascript"
src="inc/SprySlidingPanels.js"></script>
<p>
Navigate by index:
<a href="#"
onclick="sp2.showPanel(0); return
false;">1</a> |
<a href="#"
onclick="sp2.showPanel(1); return
false;">2</a> |
<a href="#"
onclick="sp2.showPanel(2); return
false;">3</a> |
<a href="#"
onclick="sp2.showPanel(3); return
false;">4</a> |
<a href="#"
onclick="sp2.showPanel(4); return
false;">5</a> |
<a href="#"
onclick="sp2.showPanel(5); return
false;">6</a> |
<a href="#"
onclick="sp2.showPanel(6); return
false;">7</a> |
<a href="#"
onclick="sp2.showPanel(7); return
false;">8</a> |
<a href="#"
onclick="sp2.showPanel(8); return
false;">9</a>
</p>
<p>
Navigate by id:
<a href="#"
onclick="sp2.showPanel('ex2_p1'); return
false;">p1</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p2'); return
false;">p2</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p3'); return
false;">p3</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p4'); return
false;">p4</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p5'); return
false;">p5</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p6'); return
false;">p6</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p7'); return
false;">p7</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p8'); return
false;">p8</a> |
<a href="#"
onclick="sp2.showPanel('ex2_p9'); return
false;">p9</a>
</p>
<p>
Other navigation methods:
<a href="#"
onclick="sp2.showFirstPanel(); return
false;">First</a> |
<a href="#"
onclick="sp2.showPreviousPanel(); return
false;">Previous</a> |
<a href="#"
onclick="sp2.showNextPanel(); return
false;">Next</a> |
<a href="#"
onclick="sp2.showLastPanel(); return
false;">Last</a>
</p>
<p>&nbsp;</p>
<div id="example2"
class="SlidingPanels"
tabindex="0">
<div
class="SlidingPanelsContentGroup">
<div id="ex2_p1"
class="SlidingPanelsContent p1">Panel
1</div>
<div id="ex2_p2"
class="SlidingPanelsContent p2">Panel
2</div>
<div id="ex2_p3"
class="SlidingPanelsContent p3">Panel
3</div>
<div id="ex2_p4"
class="SlidingPanelsContent p4">Panel
4</div>
<div id="ex2_p5"
class="SlidingPanelsContent p5">Panel
5</div>
<div id="ex2_p6"
class="SlidingPanelsContent p6">Panel
6</div>
<div id="ex2_p7"
class="SlidingPanelsContent p7">Panel
7</div>
<div id="ex2_p8"
class="SlidingPanelsContent p8">Panel
8</div>
<div id="ex2_p9"
class="SlidingPanelsContent p9">Panel
9</div>
</div>
</div>
<script
type="text/javascript">
var sp2 = new Spry.Widget.SlidingPanels('example2');
</script>
I hope somebody can help....
Thanks !

Thank you for your quick reply.
I still have a problem here.
Would you please see my 3 files for my problems.
Thank you very much for your time.
1. index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test for Spry HTML Panel</title>
<script src="../spry/SpryHTMLPanel.js" language="javascript" type="text/javascript"></script>
<link href="../spry/SpryHTMLPanel.css" rel="stylesheet" type="text/css">
</head>
<body>
<input type="button" value="Click Here to Load Document Level 2" onclick="body_content_area.loadContent('doc_level_2.php');" />
    <div id="body_content_area" style="clear:both; width:100%;">
        
        <div class="HTMLPanelLoadingContent">Loading ...</div>
    </div>
<script type="text/javascript" language="javascript1.2">

</script>
</body>
</html>
2. doc_level_2.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="../spry/SpryHTMLPanel.js" language="javascript" type="text/javascript"></script>
<link href="../spry/SpryHTMLPanel.css" rel="stylesheet" type="text/css">
</head>
<body>
<H1>Here is a content of document level 2</h1>
<br /><br />
<input type="button" value="Click Here to Load Document Level 3" onclick="body_content_area_2.loadContent('doc_level_3.php');" />
    <div id="body_content_area_2" style="float:left; width:100%;">
        
        <div class="HTMLPanelLoadingContent">Loading ...</div>
    </div>
<script type="text/javascript" language="javascript1.2">

</script>
</body>
</html>
3. doc_level_3.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<div style="float:left;">
<h2>Here is the content of document level 3</h2>
</div>
</body>
</html>

HTML Panel with Tabs like Sliding Panel tabs

Hi, what do I need to add/change to have HTML panels
switching with tabs that switches background image like the tabs in
sliding panels example?
Or can I modify the
sp_withTabs.js to have graphic tabs work with HTML
Panels?

Nevermind, I got it. I used the SpryTabbedPanels.js and
modified the SpryTabbedPanels.css with my graphics, size, position
and what not.
I do have one more question. I'm using HTML Panels with Fade
in and out and when loading my page I have to have default content
in the main html doc for something to display when the page loads.
Then when I click on the first button, it then loads the real
external HTML panels. Is there any way I can load my first external
HTML page right when my site loads?

In the Animation Timeline panel menu "create frames from layers" is not showing.

I am watching a tutorial on basic animation and when it gets to the point where they say to open the "Animation Timeline Panel Menu" the panel that opens for me is not the same one in the tutorial. I am supposed to click on "create frames from layers" but that is not an option. I'm confused as to why my panel is not the same as the one in the tutorial.

It could be that you are using a different version of photoshop. Some of the older versions were split into two versions a standard version and an extended version, in most of those versions, it was required to have the extended version to use video editing features.
Perhaps you could tell us what version of photoshop you have and what operating system.

Controlling a Spry HTML panel with a Jump Menu

Hi, I wonder if anyone can help.
I've implemented a HTML panel within a page to display different page elements and have it working no problem with a simple href and an onClick event but I would like to control what is displayed by using a jump menu (drop down list) - any idea how I can control that to populate the necessary DIV?
eg: <select name="site" size=1 onChange="hpanel.loadContent(this.href); return false;"> (obviously this doesn't work!)
Thanks in advance
Neil

It works fine, but your pages arent found;
http://www.thedesignforge.co.uk/clients/elsevier/laure/v2/dollar_rates.html
See its missing.
But
http://www.thedesignforge.co.uk/clients/elsevier/laure/v2/dollar_rate.html
Exists. So it seems to me you are linking to a incorrect file.

Menu was working until HTML Panel Widget was added

My Horizontal Menu was working fine. Then I decided to add the HTML Panel widget to change some HTML content based on the Menu Item choosen.
The HTML Panel widget actually works but the menus no longer drop down.
Am running CS3
If I take out the <script src="SpryAssets/htmlpanel/SpryHTMLPanel.js" language="javascript" type="text/javascript"> from the head the menus drop down as they should. Putting the one line back in and the menus stop working.
Tha in Advance for any help!!

Here is the URL that I am trying to get to work.
http://www.corporateinstruction.com/test.html
The menu items don't work right now but if I remove the first line under the head tag
<script src="SpryAssets/htmlpanel/SpryHTMLPanel.js" language="javascript" type="text/javascript">
Then the menu drop downs will work once again. I tried your suggestion evalScript:true, that didn't seem to do anything.
The HTML panel does work. I put an anchor at the top level of the menu just to see if the main content would change and it does.
Thx for responding...

Images not loading in Spry HTML Panel

Hallo everyone
I am using links to load html fragments in a Spry HTML Panel, just like in the example page
http://labs.adobe.com/technologies/spry/widgets/htmlpanel/SpryHTMLPanel.html
The whole structure is inside a Spry Tabbed Panel.
All works ok if the target html pages are in the same directory as the mother page.
Images are standard in the "images" folder
The problem starts when I try to organise all the html fragments in a separate directory.
Updating links in all the html files is of course done correctly, images included.
Then the problem starts.
The html fragments load but with no images.
When I open the html fragments directly by the browser all is ok.
Any ideas would be appreciated
Thanks!

Can you upload your pages to a server and give us a link?
If your images are in your site folder (no matter which directory), but they are not showing up in your fragments, it is likely that the paths are wrong. The images (it seems to me) should exist on the fragment and be linked from there.
I won't have a chance to fiddle around with this right now, but if your images are linked to the fragment locations and that does NOT work, try linking them as if they were on the page that is showing the fragments. I'm not familiar (yet) with this widget.
Beth

QR code on the blue pull tab of the back panel protection film on new devices

Has anyone tried to scan the tiny QR code on the blue pull tab of the back panel protection film?
I tried but it's too tiny for the camera to focus on it.
Does anybody know what it is?

You don't need to upgrade your software. But if you're struggling with Spry, IMO you should cut your losses and switch to something better for the longrun.
If you have a budget to work with, I highly recommend Project Seven's Pop-Menu Magic 3. It's easy to use in DW CS4, 5, 6 or CC. More importantly, it's bullet proof and works in all devices.
Pop-Menu Magic3 by PVII (commercial DW extension)
http://www.projectseven.com/products/menusystems/pmm3/index.htm
If you don't have a budget to work with, you can roll your own menus with jQuery plugins. A bit more effort on your part, but they perform better than Spry.
jQuery Superfish
http://users.tpg.com.au/j_birch/plugins/superfish/
jQuery MegaMenu2
DEMO:
http://www.geektantra.com/projects/jquery-megamenu-2/
DOWNLOAD:
http://code.google.com/p/jquery-megamenu/
Nancy O.

Spry Accordions, Tabbed Panels, and Collapsible Panels: changing colors

I wanted to alert everyone to a great new Community article published by our very own David Powers. The article details the various best practices and methods for changing the colors of Accordion, Tabbed Panels, and Collapsible Panels widgets, including tab backgrounds, borders, and so on.
Here's the article:
http://kb2.adobe.com/community/publishing/504/cpsid_50437.html
Customization questions are pretty frequent in both the Spry and Dreamweaver forums. This new styling guide is sure to answer lots of peoples' questions.
Furthermore, the appearance of such an article is a great example of how Community content can interact and live symbiotically with Adobe Help. We've linked directly to David's piece from our own customization pages for the Spry Accordion, Tabbed Panels, and Collapsible Panels widgets:
Customize the Accordion widget
Customize the Tabbed Panels widget
Customize the Collapsible Panels widget
Thanks a lot to David for hammering out this article.
If you're interested in publishing Community articles of your own, you can download the Community Publishing AIR application and get right to work!

The borders you see, are called outline, its a accesiblity feature of the browsers,
Actually called 'focus' lines :-)
Here's an article about the Bluefocus lines seen in Safari.
http://www.brunobergher.com/blog/2009/01/19/safaris-blue-focus-lines/
Without creating a Spry widget myself right now to test, but I'm sure thata there is a 'focus' rule in the css...
trying the
{outline:none;}
on that rule.

Photoshop HTML Panels Tips - tutorial series

Hello,
I've been putting together a series of tips on HTML Panels creation - both from personal experiments and collecting information around. Each tip focuses on a particular topic, it's quite short and provides the code for a demo panel.
You can find the whole series here, so far I've covered:
Tip #1 - Debugging
Tip #2 - Including multiple JSX
Tip #3 - Get data from JSX and send it to HTML
Tip #4 - Passing Objects from HTML to JSX
Tip #5 - Passing Objects from JSX to HTML
Tip #6 - Integrating Topcoat CSS library
Tip #7 - Photoshop Events, Take 1
Tip #8 - Photoshop Events, Take 2
Tip #9 - Panel Persistence (to be published asap)
Tips are about Photoshop panels, but general principles apply to other apps too.
I'll share more as soon as... I have new finding to share!
Best,
Davide Barranca
www.davidebarranca.com

Update (December 5, 2014)
Two new tips, #15 and #16 have been added, enjoy :-)
Recently added/updated Tips in bold - You can find the whole series here, so far the topic list is:
Tip #16 - AngularJS Binding bug patch
Tip #15 - Asynchronous vs. Synchronous
Tip #14 - Flyout Menu
Tip #13 - Automate ZXP Packaging with Gulp.js
Tip #12 - CEP Application Events
Tip #11 - CEP Events (ExternalObject)
Tip #10 - Packaging / ZXP Installers
Tip #9 - Panel Persistence
Tip #8 - Photoshop Events, Take 2
Tip #7 - Photoshop Events, Take 1
Tip #6 - Integrating Topcoat CSS library
Tip #5 - Passing Objects from JSX to HTML
Tip #4 - Passing Objects from HTML to JSX
Tip #3 - Get data from JSX and send it to HTML
Tip #2 - Including multiple JSX
Tip #1 - Debugging

ID CS6 Pages Panel menu QUESTION!

In ID CS6 the Pages panel menu has a page attributes submenu and one of the items is Optional in Liquid HTML5. Can anyone explain what this does when turned on/off?

There was an Adobe tech demo some time ago showing an export to HTML5 which dynamically retains liquid layout capabilities in the browser. The demo was pre-CS6, so I'm guessing they didn't get the feature ready in time for the initial release or even reserved it for a Creative Cloud update to ID CS6 on purpose.
Here is a video recording demonstrating liquid layout (which has since shipped) and then the HTML5 export:
http://www.youtube.com/watch?v=JZJ6r3VyU5g

Problem with menu and panel

hi,
i m new to java still learning new concepts. When i was working with menu and panel i got this problem and i tried a lot but still i havn't got any success. the problem is i m creating a menu with two menuitem - one for "add item" and another for "modify item". What i want to do that on the same frame i want to create two panel of these two item. when i click "add item" option it should show add window and so with modify option. but the problem is if i click add item it shows the addpanel but when i click modify option (add item panel goes- ok ..) but it doesn't show the modify panel, it shows only the main frame on which menu is there.
i cannot understant what is happing here plz guide me.
thanx

import java.awt.*;
import java.awt.event.*;
import java.sql.*;
import javax.swing.*;
public class ajitAutomobile extends JFrame implements ActionListener
     JMenuBar mb;
     JMenu jobmenu;
     JMenuItem newJobCard,modifyJobCard;
     Font ft;
     JPanel pnlnewJobCard,pnlmodifyJobCard;
     Container con;
     ajitAutomobile()
     ft=new Font("Arial",0,12);
     mb=new JMenuBar();
     setJMenuBar(mb);
     jobmenu=new JMenu(" Job Card Form");
     mb.add(jobmenu).setFont(ft);
     newJobCard=new JMenuItem("New Job Card Detail");
     modifyJobCard=new JMenuItem("Modify Job Card Detail");
     jobmenu.add(newJobCard).setFont(ft);
     jobmenu.add(modifyJobCard).setFont(ft);
     mb.add(requisition).setFont(ft);
     con=getContentPane();
     // setting panel for new JOb Card Entry
     pnlnewJobCard=new JPanel();
     pnlmodifyJobCard=new JPanel();
     con.add(pnlmodifyJobCard);
     con.add(pnlnewJobCard);
     pnlnewJobCard.setBackground(Color.RED);
     pnlnewJobCard.setVisible(false);
     pnlmodifyJobCard.setBackground(Color.YELLOW);
     pnlmodifyJobCard.setVisible(false);
     //setting JFrame resources
     setVisible(true);
     setTitle("Ajit Automobile Service Center");
     setSize(750,300);
     setResizable(false);
     newJobCard.addActionListener(this);
     modifyJobCard.addActionListener(this);
     public void actionPerformed(ActionEvent ae)
          if (ae.getSource()==newJobCard)
               pnlnewJobCard.setVisible(true);
                                                                pnlmodifyJobCard.setVisible(false);
          if(ae.getSource()==modifyJobCard)
                                                                         pnlnewJobCard.setVisible(false);
                                                                pnlmodifyJobCard.setVisible(true);
     public static void main(String args[])
     ajitAutomobile objajit=new ajitAutomobile();
     objajit.show();
}so, this is the code and as i m expecting that when i click on "New Job Card Detail" then it should display pnlnewJobCard and when i will click "Modify Job Card Detail" it should display pnlmodifyJobCard panel but it is not working.It shows only that panel which is clicked first.
plz help
thnx, any answer will be appriciated.

Print only a specific control or indicator on a front panel to HTML document

Is there any way to print a specific control or indicator (not the whole front panel) to HTML document? I am trying to print a report that has a graph and some indicator value on it.

There is a VI called "Append Control Image to Report.vi" which will allow you to do this. It's located in the Functions>>Report Generation pallette. Take a look at this and see if it's what you're looking for.
J.R. Allen

Can I add more than one horizontal separator to the PanelUI (the new panel menu)

Steps:
1. Click the new panel menu button (hamburger)
2. Click Customize
3. On the left, drag "Separator (for panel menu)" from "Additional Tools and Features" to the panel on the right. A horizontal separator appears. "Separator (for panel menu)" no longer appears in the "Additional Tools and Features".
I can add many "Separator" (vertical separator) to toolbars, but it appears I can only add one "Separator (for panel menu)" (horizontal separator) to the panel.
I would like to add additional horizontal separators to the panel. Is there a way to do that?
Firefox version: 33.1.1

Yes, I do have Classic Theme Restorer installed (I love it!), but missed these customization nuances. After reading more threads, searching, and reviewing prefs.js, I saw the ctraddon_puib_separator.
A while back, I had problems with vertical separators, specifically with AIOS, and had also looked for horizontal separators. The solution at that time was customizableui-special-separator{d}, where d was a unique digit.
I always found the customization menu to be difficult to use, especially if a buttons addon was installed, mainly because it was unordered. I recently installed Sort and Search Customization Dialog and it has made a world of difference.
I just started changing my FF ways and using the new menu. I wanted to divide up the menu into sections or activities. On top I'd have a row of user tools like history, bookmarks, then a divider and have a row of customization tools, another divider and development tools. The divider which provides the visual separation and grouping is really nice. I hope FF adopts them. I'll take my questions and feedback to the Classic Theme Restorer Forum thread shown on the addon page:
https://addons.mozilla.org/en-US/firefox/addon/classicthemerestorer
Thank you.

Tabbed Panel menu + HTML Panel submenu?

Similar Messages

Maybe you are looking for