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

Similar Messages

  • 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

  • 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>

  • 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 HTML Panel and Google Indexing

    I've started working with Google analytics and am now realizing that my use of the Spry HTML Panel as cool and efficient as it is, is not being index by Google.  I am using the links with php pages that query a FileMaker database for it's content and need to have Google be able to open and index the pages.  What changes can I make to the standard HTML Panel Code to allow this to happen.  I'm getting ready to take on a large project and this will be very necessary.
    Thanks in Advance
    Joe

    Ajax requests / all javascript are not seen by spiders / bots. Its a 
    common issue with Ajax applications.
    There a few ways to get them indexed. Point to it with a general site 
    map. So it get indexed through a other way.
    Place links on the page that does the ajax calls to the urls. And 
    replace the urls with your HTML panel content.
    So Spiders will follow the normal links and users will get the content.
    Other way it to completely ditch html panel and just show it on the 
    page it self :P
    Arnout Kazemier | Adobe Spry Community Expert
    Internet: http://www.3rd-eden.com
    Twitter: http://www.twitter.com/3rdEden | http://www.twitter.com/AdobeSpry

  • 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...

  • No Script are working in SPRY HTML panel

    I'm getting trouble with this website :
    http://dubezy-faure.com.linkfirst-preprod.linkeo.org/
    I've have 2 HTML fragments with lightbox and a spry contact
    form in them but no one is working. When I bypassed the HTML panel,
    my scripts work fine.
    I've use the evalScripts:true but still nothing.
    Below is the code :
    <div id="menuhaut">
    <ul>
    <li><a href="index1.htm"
    onclick="hpanel.loadContent(this.href); return
    false;">Accueil</a></li>
    <li><a href="real1.htm"
    onclick="hpanel.loadContent(this.href); return
    false;">R&eacute;alisations</a></li>
    <li><a href="contact1.htm"
    onclick="hpanel.loadContent(this.href); return
    false;">Contact</a></li>
    </ul>
    </div>
    <script language="JavaScript" type="text/javascript">
    var hpanel = new
    Spry.Widget.HTMLPanel("main",{evalScripts:true});
    </script>
    I've added the scripts in the HTML fragments as followed :
    FOR LIGHTBOX
    <link href="css/lx.css" rel="stylesheet" type="text/css"
    />
    <script type="text/JavaScript"
    src="script/lx.js"></script>
    FOR the SPRY VALIDATION SCRIPT
    <link href="css/validate.css" rel="stylesheet"
    type="text/css" />
    <script type="text/JavaScript"
    src="script/validate.js"></script>
    Could someone help me...

    Thanks Diana !
    My contact form is now working fine, but what about the
    lightbox for the page Realisation? It has a lightbox effect on
    clicking an image inside the HTML fragment. This lightbox do not
    work. No error message is reported in firebug. I find this odd.
    The lightbox effect works fine for the button plan, because
    it's found outside the HTML fragment. Anything in the HTML panel
    fails.
    Thanks in advance for the support

  • Edit JS on spry sliding panels widget to fix auto panel height problem

    Hi guys,
    Ive been trying for a while to make the sliding panels widget
    show each panel in its own height instead of the longest panel's height in the container.
    I tried reading all the js file to play with it and find a solution but the truth is i dont know how to do what i want.
    I do, however, have a list of things that i believe if implemented should work,
    could you  help me do these fixes on the js? ( any one you know how to or think will work )
    1. edit so that:  Panels dont have any height ( or panel content display none ) if it isnt current panel. If current panel is "id:1" the assume class 1 style properties. As soon as it looses focus/"currentpanel" class it looses its class 1 properties. And the new current panel ("id:2") assumes its own class 2 properties. And so on.
    2. edit so that:  PanelContainer ( the one that holds all the panels ) displays none BUT the current panel. So all panels could be display none unless they assume the "currentpanel" class and so they change to display. Maybe this way the container assumes only the height of the displayed panel and looses it once its no longer displayed assuming the next displayed one.
    3. edit so that:  Panel container checks for current panel's height and assumes that height instantly ( there is still a panel inside the container that would be longer than the current panel, maybe with overflow hidden this isnt a problem )
    4. Using SpryDOMUtils.js I am currently playing with the code pasted below,
    the idea came from Gramp's Spry Sliding Panels Group Navigation Buttons cookbook
    He addresses a different problem, but since it has to do with identifying the current panel and doing something when the panel is x number, i thought there could be a height property set for each panel when each is the current one, atleast something can be done with this, my problem is i dont know how to set that something. Please check out the following code:
    <script>
    // The following function - setPanelNavigation() - assumes the following
    // 1. Sliding Panels have a class of SlidingPanelsContent AND a unique ID
    // 2. The Previous Panel button has an ID of previousPanel
    // 3. The Next Panel button has an ID of nextPanel
    // 4. SpryDOMUtils.js has been linked
    function setPanelNavigation() {
        var current = sp1.getCurrentPanel(); // Get the current panel
        var panelCount = sp1.getContentPanelsCount(); // Get the total number of panels
        var panelNumber=1; // Give a value to the first panel number
        Spry.$$(".SlidingPanelsContent").forEach(function(node) { // Cycle through the panels
                     if (node.id==current.id){ // The current panel now receives a number
               if ( panelNumber==1 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 750); //
               if ( panelNumber==2 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 250); //
            panelNumber++; // Go to next panel after incrementing the count
    Spry.Utils.addLoadListener(setPanelNavigation); // Set buttons to initial value
    var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
    </script>
    What am i doing wrong in that bit ? I thought i had it there, but it didnt work.
    Anyone, please help. Thank you.

    wait my bad, the link to my page is:
    http://www.pupr.edu/department/industrial/students.asp
    ** no s on department

  • Spry Sliding Panel widget

    Okay, So I'm dense at times!
    I want to try and learn the Spry Sliding Panels.  Problem is that it does not appear in my Insert – Spry menu.  After reading at Labs it assumes that since I have DW CS4 that it is installed.  I can't be that dense.
    Yeah, I located the CSS and and JS files online at Adobe.  But that sure won't install it into my DW – Insert menu.
    Am I really that dense?

    To my knowledge it shouldn't appear in the insert menu?
    I did the below tutorial to learn all about sliding panels.
    The tutorial will show you how to link your js and css files to your html etc, which make the panels work.
    http://www.adobe.com/devnet/dreamweaver/articles/sliding_panel.html

  • 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.

  • Spry Sliding Panel Widget problem

    I have tried to use the Spry Widget Sliding Panel code from
    the Adobe tutorial and I keep getting an error message. The message
    is that "Spry" is undefined in line 26. Please help! I have been
    trying to figure this out for 2 days. Is there any code I have to
    change in the .css file or in the .js file that comes with the Spry
    Widget Sliding Panel download.
    I am just getting familiar with the on-line community and I
    have posted this to two other fora -- so please forgive the
    repetition. I am also new to Spry and am eager to learn how to use
    it. I hope it is not too advanced for my level.
    Attached, please find the code.
    Attach Code
    <!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>
    <link href="SprySlidingPanels3.css" rel="stylesheet"
    type="text/css" />
    <link href="SprySlidingPanels.js" rel="stylesheet"
    type="text/javascript"/>
    </head>
    <body>
    <a href="#" onClick="sp0.showPanel(0);"> Panel
    1</a>
    <a href="#" onClick="sp1.showPanel(1);">Panel
    2</a>
    <a href="#" onClick="sp2.showPanel(2);">Panel
    3</a>
    <a href="#" onclick="sp3.showPanel(3);">Panel
    4</a>
    <div id="slidingPanel_1" class="SlidingPanels">
    <div class="SlidingPanelsContentGroup">
    <div id="sp1"
    class="SlidingPanelsContent">Content1</div>
    <div id="sp1"
    class="SlidingPanelsContent">Content2</div>
    <div id="sp1"
    class="SlidingPanelsContent">Content3</div>
    <div id="sp1"
    class="SlidingPanelsContent">Content4</div>
    </div>
    </div>
    </div>
    <script language="JavaScript" type="text/javascript">
    var sp1 = new Spry.Widget.SlidingPanels("SlidingPanel_1");
    </script>
    </body>
    </html>

    quote:
    Originally posted by:
    kinblas
    If you're getting a "Spry is undefined" error, it probably
    means that the browser is not finding the JS files you included at
    the top of your HTML file. Make sure the path to your JS files are
    correct ... you can do this by trying to load the JS files directly
    in the URL field at the top of your browser.
    --== Kin ==--
    if u look at the code.. u will seee:
    <link href="SprySlidingPanels.js" rel="stylesheet"
    type="text/javascript"/>
    it should be
    <script src="SprySlidingPanels.js"
    type="text/javascript"></script>

  • Spry tabbed panel widget

    I am inserting the sprytabbed panels2 from adobe exchange.  I can't figure out how to change the width of the boxes above the tabbed panel content.  The default is extremely large and takes up too much space. 

    Open SpryTabbedPanels2.css file.
    #TabbedPanels2 {
        width: 250px;  /**adjust width in px as required**/
    Nancy O.

  • 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.

  • 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
    &quot;main&quot; 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
    &lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0
    Transitional//EN&quot; &quot;
    http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
    &lt;html xmlns=&quot;
    http://www.w3.org/1999/xhtml&quot;&gt;
    &lt;head&gt;
    &lt;style type=&quot;text/css&quot;&gt;
    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;
    &lt;/style&gt;
    &lt;script src=&quot;inc/SpryHTMLPanel.js&quot;
    language=&quot;javascript&quot;
    type=&quot;text/javascript&quot;&gt;
    Spry.Widget.HTMLPanel.evalScripts =
    true;&lt;/script&gt;
    &lt;link href=&quot;inc/SpryHTMLPanel.css&quot;
    rel=&quot;stylesheet&quot;
    type=&quot;text/css&quot; /&gt;
    &lt;meta http-equiv=&quot;Content-Type&quot;
    content=&quot;text/html; charset=iso-8859-1&quot; /&gt;
    &lt;title&gt;Document sans nom&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;div id=&quot;panelSpry&quot;
    style=&quot;&quot;&gt;text de base&lt;/div&gt;
    &lt;div&gt;&lt;a
    href=&quot;essai1.html&quot;
    onclick=&quot;panelWidget.loadContent(this.href);return
    false;&quot;&gt;changement&lt;/a&gt;&lt;/div&gt;
    &lt;script&gt;
    var panelWidget = new
    Spry.Widget.HTMLPanel(&quot;panelSpry&quot;, { evalScripts:
    true });
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;
    and here is the loaded file (essai1.html) :
    &lt;link
    href=&quot;inc/SprySlidingPanels.css&quot;
    rel=&quot;stylesheet&quot;
    type=&quot;text/css&quot; /&gt;
    &lt;script type=&quot;text/javascript&quot;
    src=&quot;inc/SprySlidingPanels.js&quot;&gt;&lt;/script&gt;
    &lt;p&gt;
    Navigate by index:
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel(0); return
    false;&quot;&gt;1&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel(1); return
    false;&quot;&gt;2&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel(2); return
    false;&quot;&gt;3&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel(3); return
    false;&quot;&gt;4&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel(4); return
    false;&quot;&gt;5&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel(5); return
    false;&quot;&gt;6&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel(6); return
    false;&quot;&gt;7&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel(7); return
    false;&quot;&gt;8&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel(8); return
    false;&quot;&gt;9&lt;/a&gt;
    &lt;/p&gt;
    &lt;p&gt;
    Navigate by id:
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel('ex2_p1'); return
    false;&quot;&gt;p1&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel('ex2_p2'); return
    false;&quot;&gt;p2&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel('ex2_p3'); return
    false;&quot;&gt;p3&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel('ex2_p4'); return
    false;&quot;&gt;p4&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel('ex2_p5'); return
    false;&quot;&gt;p5&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel('ex2_p6'); return
    false;&quot;&gt;p6&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel('ex2_p7'); return
    false;&quot;&gt;p7&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel('ex2_p8'); return
    false;&quot;&gt;p8&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPanel('ex2_p9'); return
    false;&quot;&gt;p9&lt;/a&gt;
    &lt;/p&gt;
    &lt;p&gt;
    Other navigation methods:
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showFirstPanel(); return
    false;&quot;&gt;First&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showPreviousPanel(); return
    false;&quot;&gt;Previous&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showNextPanel(); return
    false;&quot;&gt;Next&lt;/a&gt; |
    &lt;a href=&quot;#&quot;
    onclick=&quot;sp2.showLastPanel(); return
    false;&quot;&gt;Last&lt;/a&gt;
    &lt;/p&gt;
    &lt;p&gt;&amp;nbsp;&lt;/p&gt;
    &lt;div id=&quot;example2&quot;
    class=&quot;SlidingPanels&quot;
    tabindex=&quot;0&quot;&gt;
    &lt;div
    class=&quot;SlidingPanelsContentGroup&quot;&gt;
    &lt;div id=&quot;ex2_p1&quot;
    class=&quot;SlidingPanelsContent p1&quot;&gt;Panel
    1&lt;/div&gt;
    &lt;div id=&quot;ex2_p2&quot;
    class=&quot;SlidingPanelsContent p2&quot;&gt;Panel
    2&lt;/div&gt;
    &lt;div id=&quot;ex2_p3&quot;
    class=&quot;SlidingPanelsContent p3&quot;&gt;Panel
    3&lt;/div&gt;
    &lt;div id=&quot;ex2_p4&quot;
    class=&quot;SlidingPanelsContent p4&quot;&gt;Panel
    4&lt;/div&gt;
    &lt;div id=&quot;ex2_p5&quot;
    class=&quot;SlidingPanelsContent p5&quot;&gt;Panel
    5&lt;/div&gt;
    &lt;div id=&quot;ex2_p6&quot;
    class=&quot;SlidingPanelsContent p6&quot;&gt;Panel
    6&lt;/div&gt;
    &lt;div id=&quot;ex2_p7&quot;
    class=&quot;SlidingPanelsContent p7&quot;&gt;Panel
    7&lt;/div&gt;
    &lt;div id=&quot;ex2_p8&quot;
    class=&quot;SlidingPanelsContent p8&quot;&gt;Panel
    8&lt;/div&gt;
    &lt;div id=&quot;ex2_p9&quot;
    class=&quot;SlidingPanelsContent p9&quot;&gt;Panel
    9&lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
    &lt;script
    type=&quot;text/javascript&quot;&gt;
    var sp2 = new Spry.Widget.SlidingPanels('example2');
    &lt;/script&gt;
    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%;">
            <!-- Put Content Here -->
            <div class="HTMLPanelLoadingContent">Loading ...</div>
        </div>
    <script type="text/javascript" language="javascript1.2">
    <!--
    var body_content_area = new Spry.Widget.HTMLPanel("body_content_area");
    //-->
    </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%;">
            <!-- Put Content Here -->
            <div class="HTMLPanelLoadingContent">Loading ...</div>
        </div>
    <script type="text/javascript" language="javascript1.2">
    <!--
    var body_content_area_2 = new Spry.Widget.HTMLPanel("body_content_area_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

    a really strange behaviour...
    I'm trying to to make working html panel widget:
    first step
    1. not connected: if I test the html panel widget sample from
    the downloaded .zip folder it doesn't work with Safari (2), Firefox
    works
    2. connected: if I test the same sample from the internet
    doc... Safari and Firefox both work!!
    I verified code is the same.
    second step
    tried to build a page following the html panel widget docs
    instructions:
    Safari doesn't work
    Firefox works
    I can't consider myself a real master of web programming so
    any help appreciated...
    thanks
    mat

    You're absolutely right!!
    Online everything works... (www.matteopennese/test)
    But is this a known issue? I'm testing other spry as widgets
    and datas .js and everything works...
    However many thanks
    mat

Maybe you are looking for