New Spry Widgets Released

Hi All,
I know that we have been remiss in keeping up with our
ambitious release schedule.
As I mentioned earlier, we were shooting for a full new
release this month but didn't have the time.
Well, we decided to do a 'light launch' for our new Spry
widgets.
We have posted our new Spry widgets and 2 new beta docs here:
http://labs.adobe.com/technologies/spry/samples/preview.html
As you can see we have:
- Menu Bar
-Collapsible Panel
-Tabbed Panel
- Form Text Field
- Form Text Area
- Form Select
- Form Checkbox
- Tabbed Panel doc
- Collapsible Panel doc
As I say there, we are releasing these in this manner because
they are mostly done, but we don't have complete docs for
everything. Once we have full docs and some updates for data, we
will make a new zip and release Spry 1.4.
For now, you can check out these samples and play around with
them.
Let us know what you think.
We also added a new demo here:
http://labs.adobe.com/technologies/spry/demos/formsvalidation/
Hope you like the new stuff.
Thanks,
The Adobe Spry Team

Hi John,
So the thinking on that is this:
They are widgets because they are pieces of markup that
encapsulate advanced functionality. The actual validation is the
major part of the funtionality, but the actual widget is the span
tag container, the input itself, and then additional markup for the
messages. Basic mark-up, style with CSS and a constructor
script=Spry Widget.
As for structure, the 'widgets' folder is where we keep the
latest versions of the real thing. All required widgets resources,
like CSS and JS, plus the basic example file, go in the 'widgets'
folder.
The 'samples' directory is where we put samples that explain
or add onto the basic widget. This is more of a playing around
area.
But we reference the dependent files in the 'widgets'
directory so that we only need to have one copy of the files on the
site and in the zip. This helps ensure that every sample is working
off the same files.
But for you guys, it makes it a pain to get all the required
source files, I know. I was thinking of zipping the new samples and
putting them up so it's easier to download the new stuff.
Make sense?
Thanks,
Don

Similar Messages

New Spry Widgets

Hi,
Are there any tutorials explaining step by step how to create brand new widgets or functions in the Spry mould?
There's some additional stuff I've been acheiving through bits of other frameworks and would like to see if I can repeat the functionality through writing some Spry extensions.
If there's anything on turning them into dream weaver extensions so I can inthat would also be greatsert them just like other Spry functions and widgets that would also be great.
Cheers
Phil

A year ago I released a double featured article on insideRIA on creating your own custom slide menu. Using SpryDOMUtils.js and SpryEffects.js
Part 1: http://www.insideria.com/2009/02/creating-your-own-side-bar-wid.html
Part 2: http://www.insideria.com/2009/02/creating-your-own-side-bar-wid-1.html
So that would hopefully give you insights in how to easily create your own custom widgets.
It might also be wise to read the Spry primer:
http://labs.adobe.com/technologies/spry/articles/spry_primer/index.html
And the widget primer for understanding the Spry widgets model:
http://labs.adobe.com/technologies/spry/articles/spry_widget_model/index.html
Spry Effect coding:
http://labs.adobe.com/technologies/spry/articles/effects_coding/index.html
As for creating widgets for Dreamweaver I would really advice Donald Booth widget packer which is also available on the Adobe labs site:
http://labs.adobe.com/wiki/index.php/Dreamweaver_Widget_Packager
And extending the Spry Element selector for if you are interested in building extension for the Spry element selector:
http://groups.adobe.com/posts/15bd45fd3d
But the most important thing.. Don't hesitate to ask questions, I have build a quit few Spry plugins my self (public and private releases).

New Spry Widget

Hey Spry:users,
I know the Spry team has been quiet with the new stuff
lately, but we have a new widget for you all.
They Ratings Widget is now live in the Spry Preview:
http://labs.adobe.com/technologies/spry/preview/
Give it a whirl and let us know what you think.
Preview are things we think are done, but we want to give you
a chance to comment before we put it into the real zip.
Feedback is welcome.
Thanks,
The Spry Team

rathoz1 wrote:
> I'm really let down by how crappy the documentation is
for the star rating
> widget. I have scoured the Internet and given the code
to multiple LAMP
> developers with no success on how to send the rating to
a MySQL server (or any
> server for that). It's really sad that people are
getting paid to developer
> completely useless widgets. It might be the fanciest
widget in the world but
> with no docuementation it's pretty much useless and a
waste of Adobe's efforts
> and money. I have lowered my expectations of Adobe after
racking my brain
> trying to get the spy rating widget to post data (or
get) to my SQL server.
Perhaps you missed these examples:
GET form post values, so all you'll need to do is to have the
page that the form submits to handle the supplied form field
values:
http://labs.adobe.com/technologies/spry/samples/rating/RatingSample_FormSubmission.html
Using the built in ajax submit:
http://labs.adobe.com/technologies/spry/samples/rating/RatingSample_with_Observers.html
This uses the following option to automatically send the
selected value to a server:
{saveUrl: 'SpryRating.php?id=rating&val=@@ratingValue@@'}
id is the name of the rating form field and val is the value
that was selected by the user. Hopefully it'll be easy to take the
query string parameter and update/insert the selected rating.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

My VerticalTabs Spry widget not working - help

My HTML 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
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_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
</script>
</head>
<body onload="MM_preloadImages('images/01-akcija-popust-seva-obelezavanje.png','images/01-Bezbe dnosno-obelezavanje.png')">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" top="0px">
<tr>
    <td>
    <div class="container">
<div class="sidebar1"> </div>
<div class="content">
<div id="wrap">
<div id="apDiv2" style="position: inherit; left: 151px; top: 0px; width: 1100px; height: 145px; z-index: auto"><img src="images/01-poslovno-obelezavanje-header.png" width="1100" height="145" alt="poslovno obelezavanje header"></div>
<div class="apDiv7" id="apDiv7" style="position: inherit; left: 135px; top: 145px; width: 1100px; height: 53px; z-index: auto"><a href="SEVA-PORTAL.html">ŠEVA-PORTAL</a> | <a href="#" target="_self">Početna strana</a> | <a href="O-nama.html">O nama</a> | <a href="01-Reference.html">Reference</a> | <a href="Kontakt.html">Kontakt</a> | <a href="01-Kako-do-nas.html">Kako nas naći</a></div>
<div id="TabbedPanels1" class="VTabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0"><img src="images/01-Glavni-spoljni-natpis.png" name="Image2" width="240" height="163" border="0" id="Image2" /></li>
      <li class="TabbedPanelsTab" tabindex="10"><img src="images/01-Spoljni-putokazi.png" name="Image3" width="240" height="163" border="0" id="Image3" /></li>
      <li class="TabbedPanelsTab" tabindex="20"><img src="images/01-Centralna-INFO-tabla.png" width="240" height="163" /></li>
      <li class="TabbedPanelsTab" tabindex="30"><img src="images/01-Spratna-INFO-tabla.png" width="240" height="163" /></li>
      <li class="TabbedPanelsTab" tabindex="40"><img src="images/01-Unutrasnji-putokazi.png" width="240" height="163" /></li>
      <li class="TabbedPanelsTab" tabindex="50"><img src="images/01-Obelezja-prostorija.png" width="240" height="163" /></li>
      <li class="TabbedPanelsTab" tabindex="60"><img src="images/01-Oglasne-table-i-vitirine.png" width="240" height="163" /></li>
      <li class="TabbedPanelsTab" tabindex="70"><img src="images/01-Ostale-oznake.png" width="240" height="163" /></li>
      <li class="TabbedPanelsTab" tabindex="90"><img src="images/01-Bezbednosno-obelezavanje.png" width="240" height="188" /></li>
    </ul>
    <div class="TabbedPanelsContentGroup">
      <div class="TabbedPanelsContent">
        <div id="apDiv1" style="position: fixed; left: 661px; top: 209px; width: 361px; height: 51px; z-index: auto"><img src="images/02-Glavni-spoljni-natpis.png" width="361" height="51" alt="seva, novi sad, beograd, poslovno, obelezavanje, oznake, prostor, poslovni, opstina, hotel, centar, oznaka, oznake" /></div>
      </div>
      <div class="TabbedPanelsContent">
        <div id="apDiv1" style="position: fixed; left: 698px; top: 211px; width: 287px; height: 40px; z-index: 1"><img src="images/03-Spoljni-putokazi.png" width="287" height="40" alt="seva, novi sad, beograd, poslovno, obelezavanje, oznake, prostor, poslovni, opstina, hotel, centar, oznaka, oznake, srbija" /></div>
      </div>
      <div class="TabbedPanelsContent">Content 3</div>
      <div class="TabbedPanelsContent">Content 4</div>
      <div class="TabbedPanelsContent">Content 5</div>
      <div class="TabbedPanelsContent">Content 6</div>
      <div class="TabbedPanelsContent">Content 7</div>
      <div class="TabbedPanelsContent">Content 8</div>
      <div class="TabbedPanelsContent">Content 9</div>
    </div>
</div>
</div>
</div>
<div class="sidebar2">
</div>
</div>
    </td>
</tr>
</table>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
and my modified SpryTabs CSS file is:
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container. For our
* default style, this container does not contribute anything visually,
* but it is floated left to make sure that any floating or clearing done
* with any of its child elements are contained completely within the
* TabbedPanels container, to minimize any impact or undesireable
* interaction with other floated elements on the page that may be used
* for layout.
* If you want to constrain the width of the TabbedPanels widget, set a
* width on the TabbedPanels container. By default, the TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabbedPanels container.
.TabbedPanels {
     overflow: hidden;
     margin: 0px;
     padding: 0px;
     clear: none;
     width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup container houses
* all of the tab buttons for each tabbed panel in the widget. This container
* does not contribute anything visually to the look of the widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in this selector is not
* necessary to make the widget function. You can use any class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
     margin: 0px;
     padding-left: 10px;
/* This is the selector for the TabbedPanelsTab. This container houses
* the title for the panel. This is also the tab "button" that the user clicks
* on to activate the corresponding content panel so that it appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1 pixel down from
* where it wold normally render. This allows each tab to overlap the content
* panel that renders below it. Each tab is rendered with a 1 pixel bottom
* border that has a color that matches the top border of the current content
* panel. This gives the appearance that the tab is being drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this selector is not
* necessary to make the widget function. You can use any class name you want
* to style this tab container.
.TabbedPanelsTab {
     position: relative;
     float: left;
     background-color: #FFF;
     list-style: none;
     -moz-user-select: none;
     -khtml-user-select: none;
     cursor: pointer;
     width: 240px;
     margin-bottom: 10px;
/* This selector is an example of how to change the appearnce of a tab button
* container as the mouse enters it. The class "TabbedPanelsTabHover" is
* programatically added and removed from the tab element as the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
     background-color: #CCC;
/* This selector is an example of how to change the appearance of a tab button
* container after the user has clicked on it to activate a content panel.
* The class "TabbedPanelsTabSelected" is programatically added and removed
* from the tab element as the user clicks on the tab button containers in
* the widget.
* As mentioned above, for our default style, tab buttons are positioned
* 1 pixel down from where it would normally render. When the tab button is
* selected, we change its bottom border to match the background color of the
* content panel so that it looks like the tab is part of the content panel.
.TabbedPanelsTabSelected {
     background-color: #EEE;
     border-bottom: 1px solid #EEE;
/* This selector is an example of how to make a link inside of a tab button
* look like normal text. Users may want to use links inside of a tab button
* so that when it gets focus, the text *inside* the tab button gets a focus
* ring around it, instead of the focus ring around the entire tab.
.TabbedPanelsTab a {
     color: black;
     text-decoration: none;
/* This is the selector for the ContentGroup. The ContentGroup container houses
* all of the content panels for each tabbed panel in the widget. For our
* default style, this container provides the background color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
     clear: both;
     border-bottom: solid 1px #CCC;
     border-top: solid 1px #999;
     border-right: solid 1px #999;
     background-color: #EEE;
     padding-left: 11px;
     height: auto;
     width: auto;
/* This is the selector for the Content panel. The Content panel holds the
* content for a single tabbed panel. For our default style, this container
* provides some padding, so that the content is not pushed up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this selector is
* not necessary to make the widget function. You can use any class name you
* want to style the Content container.
.TabbedPanelsContent {
     overflow: hidden;
     padding: 0px;
/* This selector is an example of how to change the appearnce of the currently
* active container panel. The class "TabbedPanelsContentVisible" is
* programatically added and removed from the content element as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
     background-image: url(../images/01-Pocetna-strana_23.png);
     background-repeat: repeat-y;
     background-position: left top;
     height: auto;
     width: auto;
     padding-left: 11px;
/* Vertical Tabbed Panels
* The following rules override some of the default rules above so that the
* TabbedPanels widget renders with its tab buttons along the left side of
* the currently active content panel.
* With the rules defined below, the only change that will have to be made
* to switch a horizontal tabbed panels widget to a vertical tabbed panels
* widget, is to use the "VTabbedPanels" class on the top-level widget
* container element, instead of "TabbedPanels".
.VTabbedPanels {
     overflow: hidden;
     zoom: 1;
/* This selector floats the TabGroup so that the tab buttons it contains
* render to the left of the active content panel. A border is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
     float: left;
     width: 240px;
     height: auto;
     background-color: #FFF;
     position: relative;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTab {
     float: none;
     /* [disabled]border-top: none; */
     /* [disabled]border-left: none; */
     /* [disabled]border-right: none; */
     height: auto;
     width: 240px;
/* This selector disables the float property that is placed on each tab button
* by the default TabbedPanelsTab selector rule above. It also draws a bottom
* border for the tab. The tab button will get its left and right border from
* the TabGroup, and its top border from the TabGroup or tab button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
     background-color: #FFF;
     width: 240px;
     height: auto;
/* This selector floats the content panels for the widget so that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
     clear: none;
     float: left;
     padding: 0px;
     width: auto;
     height: auto;
/* Styles for Printing */
@media print {
.TabbedPanels {
     overflow: visible !important;
.TabbedPanelsContentGroup {
     display: block !important;
     overflow: visible !important;
     height: auto !important;
.TabbedPanelsContent {
     overflow: visible !important;
     display: block !important;
     clear:both !important;
.TabbedPanelsTab {
      overflow: visible !important;
      display: block !important;
      clear:both !important;
I got preview in any browser OK, like I wanted but clicking on tabs not working and they not switching content per each tab. I maked tabindexes: 0, 10, 20,30, 40, 50, 60, 70, 80, 90 and nothing works.
Where is problem?

But the tabs do work and the content does show!
Clicking the first two tabs causes the content to fly over to the right, outside of the content panel, exactly as the style rules tell it to.
Clicking the other 7 tabs causes the content to show aligned to the left within the content panel, again as per the style rules.
The total height of the tabs is 882 px including the bottom margins.
The height of the content panels varies with the content, in case of the first two tabs there is no content contained within the content panel thus the height is zero; of the remaining content panels the height is about 1.5x the height of one line.
In other words there are no surprises except for the fact that it would have been better not to have used the SpryTabbedPanels widget for this.
Of course I am supposing that you have changed the personality of the TabbedPanel widget on purpose.
If this is not the case then a good start will be
to get rid of the modified SpryTabbedPanels.css and re-instate the original.
to get rid of the all of the apDiv's including those inside the content panel.
to reduce the overall height of the tabs to a manageable height by reducing the height of the images.
Gramps

Spry widget menu bar as a library item - problems

I created a spry vertical menu bar and made it a library item. The original works great, however when I insert the library item into its own div tag on another page, the submenus will not pop out, either in DW or the browser view. The div tag is the correct size and I made the z index high enough. Here is the code of the page that works properly:
<!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>DM Consulting Dry Dock Training</title>
<link href="css styles/drydock2.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="container">
<div id="header"><img src="images/header_title_white.png" width="645" height="116" alt="header" /></div>
<div id="logo"><img src="images/drydock_logo_blktxt.png" width="154" height="119" alt="logo" /></div>
<div id="mainContent">
    <div id="content">
      <p><span class="bolder1">D</span><span class="bolder1">M Consulting </span><span class="lineheight">provides Dry Dock Training, Dry Dock Conferences,<br />
        Dry Dock Software and Dry Dock Consulting      for:</span></p>
      <ul>
        <li class="lineheight"> Dock Masters</li>
        <li class="lineheight">Docking Officers</li>
        <li class="lineheight">Dry Dock Crews</li>
        <li class="lineheight">Engineers</li>
        <li class="lineheight">Naval Architects </li>
        <li class="lineheight"> Port Engineers</li>
        <li class="lineheight">Program/Project Managers</li>
        <li class="lineheight">Marine Surveyors</li>
        <li class="lineheight">Owners' Representatives</li>
        <li class="lineheight">On-site Representatives</li>
        <li class="lineheight">Consultants</li>
        <li class="lineheight">Others Involved or Interested in
          the <br />
          Dry Docking of Ships and Vessels</li>
      </ul>
      <div id="testimonials">"The course was excellent, straight forward and comprehensive. Instruction was great, expected <br />
        "death-by-power point" but was pleasantly surprised.
        I am better acquainted w/dry dock basics after the
        course and can trust the accuracy of the training
        based on the extensive experience of the instructors. Thank you!
        Very informative, very thorough."
          - David, Australia<br />
      </div>
      <div id="movie">
        <object width="560" height="340">
          <param name="movie" value="http://www.youtube.com/v/qLGUZEkbAwA?fs=1&hl=en_US&rel=0" />
          <param name="allowFullScreen" value="true" />
          <param name="allowscriptaccess" value="always" />
          <embed src="http://www.youtube.com/v/qLGUZEkbAwA?fs=1&hl=en_US&rel=0" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="560" height="340"></embed>
        </object>
      </div>
      <div id="moreTestimonials">»»» click here for more testimonials «««</div>
      <div id="footer">© COPYRIGHT 2010 DM CONSULTING</div>
    </div>
    <div id="navbar">
      
      <ul id="MenuBar1" class="MenuBarVertical">
        <li><a href="#index.html" title="DM Consulting home page">HOME</a></li>
        <li><a href="#" class="MenuBarItemSubmenu">TRAINING</a>
          <ul>
            <li><a href="#outline.html" title="Outline of our Training Course">General Information & Outline</a></li>
            <li><a href="#train_sched.html" title="Locations & dates of our Training Courses">Training Course Schedule</a></li>
            <li><a href="#drawings.html" title="Dry dock course drawings">Course Drawings</a></li>
            <li><a href="#testimonials.html" title="Read what our clients have to say">Testimonials</a></li>
          </ul>
        </li>
        <li><a href="#conference.html" title="Dry Dock Conference information">CONFERENCE</a></li>
        <li><a href="#software.html" title="Shop our software">DOCKMASTER SOFTWARE</a></li>
        <li><a href="#consulting.html" title="Dry Dock Consulting">CONSULTING</a></li>
        <li><a href="#clients.html" title="List of current and past clients">CLIENTS</a></li>
        <li><a href="#about.html" title="Learn about our company">ABOUT</a></li>
        <li><a href="#contact.html" title="Contact us">CONTACT US</a></li>
      </ul>
    </div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
Here is the code for the page that DOESN'T work:
<!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>Training Course Schedule</title>
<link href="../css styles/drydock2.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<div id="container">
<div id="header"><img src="../images/header_title_white.png" width="645" height="116" alt="header" /></div>
<div id="logo"><img src="../images/drydock_logo_blktxt.png" width="154" height="119" alt="logo" /></div>
<div id="mainContent">
    <div id="content">
      <h2><span class="bolder1">Training Course Schedule</span><span class="bolder1"></span></h2>
      <p><br />
      Class sizes are limited so please register early. Early registration and payment provides the best value.<br />
<br />
      </p>
<p class="underline"><strong>4-7 October 2010 •   Honolulu, HI, USA </strong></p>
      <div id="schedulephoto"><img src="../images/conference-rm_train_s.jpg" width="250" height="123" alt="image" /></div>
      <p>The training will be held in Pearl Harbor, Hawaii, USA. <br />
        <a href="Registration_Hawaii.html">Registration form</a><br />
        <br />
      </p>
      <p class="underline"><strong>15-18 November 2010   •   Virginia Beach VA, USA</strong></p>
      <p>The training will be held in Virginia Beach, Virginia, USA. <br />
        <a href="Registration_Virginia.html">Registration form</a><br />
        <br />
      </p>
      <p class="underline"><strong>11-14 May 2011 •   London, United Kingdom</strong></p>
        The training is held in conjunction with the Royal Institution of Naval Architects (RINA). Registration and payment will be made directly to RINA. <br />
        Visit RINA's <a href="http://www.RINA.org.uk" target="_blank">website</a> and go to "Events" or call +44 (0) 20 7201 2401.<br />
<br />
      </p>
      <p><strong>Your Location</strong></p>
      <p>Training tailored to your organization's needs, including training at your facilities, <br />
        is also available.    </p>
    </div>
    <div id="nav3">
    <ul id="MenuBar1" class="MenuBarVertical">
      <li><a href="#index.html" title="DM Consulting home page">HOME</a></li>
      <li><a href="#" class="MenuBarItemSubmenu">TRAINING</a>
        <ul>
          <li><a href="#outline.html" title="Outline of our Training Course">General Information & Outline</a></li>
          <li><a href="#train_sched.html" title="Locations & dates of our Training Courses">Training Course Schedule</a></li>
          <li><a href="#drawings.html" title="Dry dock course drawings">Course Drawings</a></li>
          <li><a href="#testimonials.html" title="Read what our clients have to say">Testimonials</a></li>
        </ul>
      </li>
      <li><a href="#conference.html" title="Dry Dock Conference information">CONFERENCE</a></li>
      <li><a href="#software.html" title="Shop our software">DOCKMASTER SOFTWARE</a></li>
      <li><a href="#consulting.html" title="Dry Dock Consulting">CONSULTING</a></li>
      <li><a href="#clients.html" title="List of current and past clients">CLIENTS</a></li>
      <li><a href="#about.html" title="Learn about our company">ABOUT</a></li>
      <li><a href="#contact.html" title="Contact us">CONTACT US</a></li>
    </ul>
    </div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
I understand about having the script and link element that connect my page to the dependent files in the SpryAssets folder in the header and the JavaScript function cal at the bottom on each page. I don't know what else to do - HELP!

Welcome to the Dreamweaver world!
Well, having your index.html page at the top/root level is important, as that is the default page by which people will enter your site.
Having other pages in folders is fine...I do it all the time in order to keep departments or categories of information sorted.
One characteristic of having pages in folders is that the hierarchy of files in folders (perforce) puts them at different depths in the site.
This is not inherently a bad thing! Just one to remain aware of. When you look at your site files in the Files Panel, you can see a graphical representation of those different levels.
But the nature of a library item is that it is identical in all its instances, which is what makes it useful...change it in the library, and it changes site-wide. The down-side of that identity is that when your files are at different depths in the hierarchy, their links back to, say, home (or any other same file) will change depending on the depth. You can see this if you make a link on a page, then drag the page (in the Files Panel) to a different depth...say, into a folder when it started at root level, or vice versa. Check the link, and you will see that it automatically adapted to the new path.
Library items do not do that; they do not change, so some of your links will be 'wrong' when you refer to pages that have different paths than the ones originally set up in the library item... because of the change in hierarchy.
All this is, of course, reliant on your creation of the site in the first place, as defining the root folder's location on your computer gives Dreamweaver a starting point for handling (juggling?) all the location-information for your site's files.
Beth

Spry Widget Issues - Deactivating after a while

Hi there,
I'm using Spry Widgets in DW CS3 and have been experiencing
the following strange issue.
When I insert a widget everything functions fine, the widget
is outline in blue, the little blue title appears when I roll over
it and the eye appears (for the Collapsible or the Accordion for
example) and allows me to close or open it with DW.
All in all, everything works sweet... I can edit it fine in
the Properties box etc.
And then after a while the widget just stops working. What I
mean is that there is no blue outline when rolling over it, there
is no Properties panel, there is no "eye", but the object is still
there, just not functioning.
I have obviously gone over the code as best I can. I've
created a new page within the same site and inserteda widget and
compared the code from one page to another and cannot find anything
off kilter.
Note that the CSS still woks fine, it just seems to lose its
Javascript capabilites (...)
This has happened with several different widgets in different
sites on different machines...
Any help would be much appreciated.
Thanks in advance

Here is a screenshot of a site I'm building atm. Please bear
in mind that I am not a coder and am building exclusively using
Design Mode.
LINK TO SCREENSHOT:
http://flickr.com/photos/7512606@N04/492179644"
>
-When I first inserted the Tabbed Panels widget, it
functioned fine...
-Now, something has happened and the widget is not editable
(other than going into the code) and the Panels are just displayed
one below the other.
-The widget functions normally when the page is previewed in
a browser, but I have lost my Design Mode editing capabilites.
-Now if I were to enter a new widget, it would start off
straight away in "non-editable" mode
-This has happened every time I have tried to use widgets.
Starts off fine and then loses editibility and/or functionality.
It's obviously something that I'm doing that is "breaking"
the widget, but any help would greatly appreciated.
Below is the code for that particular page:
<!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>Sisters, Pearls & MIssion Girls -
Info</title>
<style type="text/css">

</style>
<script src="../../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script src="../../SpryAssets/SpryEffects.js"
type="text/javascript"></script>
<link href="../../SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
<link href="../css/films.css" rel="stylesheet"
type="text/css" />
</head>
<body onload="MM_effectAppearFade('infoContainer', 2000,
0, 100, false)">
<div id="infoContainer">
<div id="infoTitle"><img
src="images/info/sisters_logo.png" alt="sisters_logo" width="195"
height="90" /></div>
<div id="infoCredits"><span
class="textDefault">Directed by David Batty<br />
Produced by Jeni McMahon</span><br />
<br />
<span class="textSmall">A Rebel Films Production<br
/>
Financed by Film Finance Corporation of Australia<br
/>
Produced with the assistance of the Australian Broadcasting
Corporation<br />
© Rebel Films and Film Finance
Corporation</span></div>
<div id="infoLinks"><img
src="../images/buttons/imdb.png" alt="imdbButton" width="195"
height="20" /></div>
<div id="panelProcontaioner">
<div id="panelContainer">
<div id="filmsPanels" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
<li class="TabbedPanelsTab"
onclick="MM_changeProp('panelContent','','opacity','0','DIV');MM_changeProp('panelContent ','','filter','alpha(opacity=00)','DIV');MM_effectAppearFade('panelContent',
500, 0, 100, false)" tabindex="0"></li>
</ul>
<div id="panelContent" div
class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><a
href="../veiled/index.html" target="_top"><img
src="../../images/tabbed_nav/veiledPanel.jpg" alt="veiledPanel"
width="195" height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../rodeo/index.html" target="_top"><img
src="../../images/tabbed_nav/rodeoPanel.jpg" alt="rodeoPanel"
width="195" height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../inventions/index.html" target="_top"><img
src="../../images/tabbed_nav/inventionsPanel.jpg"
alt="inventionsPanel" width="195" height="175"
border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="index.html" target="_top"><img
src="../../images/tabbed_nav/sistersPanel.jpg" alt="sistersPanel"
width="195" height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../thatsaustralia/index.html" target="_top"><img
src="../../images/tabbed_nav/taPanel.jpg" alt="taPanel" width="195"
height="175" border="0"/></a></div>
<div class="TabbedPanelsContent"><a
href="../taylor/index.html" target="_top"><img
src="../../images/tabbed_nav/taylorPanel.jpg" alt="taylorPanel"
width="195" height="175" border="0"/></a></div>
</div>
</div>
</div></div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Spry Widget as a Server Side Include

I am new to using SSI. I guess one question is: does the
include have to be saved as a .shtm or .shtml file? I am trying to
take a Spry Navigation bar and use it as an include in a site I am
building. I have saved it as a .html file and a .shtml file, but
neither is working. It shows up in design view, but not preview in
browser view. Here is the code of the SSI:
<script src="../SpryAssets/SpryMenuBar.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryMenuBarVertical.css"
rel="stylesheet" type="text/css" />
<div>
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="
http://www.j-boysentertainment.com">Home</a>
</li>
<li><a href="#"
class="MenuBarItemSubmenu">Projects</a>
<ul>
<li><a href="../pamperzpro.html">Pamperz
Pro</a></li>
</ul>
</li>
<li><a class="MenuBarItemSubmenu"
href="#">Creative Team</a>
<ul>
<li><a href="#">Jeff Reed</a> </li>
<li><a href="#">John
Elliott</a></li>
<li><a href="#">Jack Kelly</a></li>
<li><a href="#">J. Skylar
Testa</a></li>
<li><a href="#">Jonathan
Perkins</a></li>
</ul>
</li>
<li><a href="#">Connect</a></li>
</ul>
</div>
<script type="text/javascript">

</script>
Does anyone see what I am doing wrong? Also, when I insert it
as a SSI, does it matter if it is a file or a virtual?

Create a page that contains ONLY this -
<p>woohoo</p>
and save it as woohoo.monkeybutt.
Then create another page, click in the Design view, and
insert a server-side
include. Browse to and select woohoo.monkeybutt.
Save this new page as "page.shtml".
Preview it in the browser (with temp files enabled in your
PREFERENCES).
'nuff said?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"jp3rks" <[email protected]> wrote in
message
news:[email protected]...
>I am new to using SSI. I guess one question is: does the
include have to be
> saved as a .shtm or .shtml file? I am trying to take a
Spry Navigation
> bar and
> use it as an include in a site I am building. I have
saved it as a .html
> file
> and a .shtml file, but neither is working. It shows up
in design view,
> but not
> preview in browser view. Here is the code of the SSI:
>
>
> <script src="../SpryAssets/SpryMenuBar.js"
> type="text/javascript"></script>
> <link href="../SpryAssets/SpryMenuBarVertical.css"
rel="stylesheet"
> type="text/css" />
> <div>
> <ul id="MenuBar1" class="MenuBarHorizontal">
>
<a href="
http://www.j-boysentertainment.com">Home</a>
</li>
>
<a href="#" class="MenuBarItemSubmenu">Projects</a>
>
>
<a href="../pamperzpro.html">Pamperz
Pro</a></li>
>
> </li>
>
<a class="MenuBarItemSubmenu" href="#">Creative
Team</a>
>
>
<a href="#">Jeff Reed</a> </li>
>
<a href="#">John Elliott</a></li>
>
<a href="#">Jack Kelly</a></li>
>
<a href="#">J. Skylar Testa</a></li>
>
<a href="#">Jonathan Perkins</a></li>
>
> </li>
>
<a href="#">Connect</a></li>
>
> </div>
> <script type="text/javascript">
> 
> </script>
>
> Does anyone see what I am doing wrong? Also, when I
insert it as a SSI,
> does
> it matter if it is a file or a virtual?
>

New slideshow widget linking images

Hello, I am excited to use the slideshow for the first time now.
I have an issue, I want to link each image to an internal page inside the website. How can I do this if the link element points to the thumbnail. I am not using the thumbnails by the way.
Thanks
here is my code, well is the standard code I guess that everybody has:
<ul id="ImageSlideShow" title="">
    <li><a href="image_press/slideshow_SIMPSON_GALLERIES.jpg" title="White Orchids"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="photos-1.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-10.jpg" title="Sand"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="photos-10.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-11.jpg" title="Tree"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="photos-11.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-12.jpg" title="Canon"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="photos-12.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-13.jpg" title="Door"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="photos-13.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-14.jpg" title="Flowers at the Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-14.jpg" alt="photos-14.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-15.jpg" title="Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-15.jpg" alt="photos-15.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-2.jpg" title="Orchid Close Up"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-2.jpg" alt="photos-2.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-3.jpg" title="Dirt Road"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-3.jpg" alt="photos-3.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-4.jpg" title="Fence Post"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-4.jpg" alt="photos-4.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-5.jpg" title="Portrait of a Horse"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-5.jpg" alt="photos-5.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-6.jpg" title="Brown Horse"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-6.jpg" alt="photos-6.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-7.jpg" title="Spotted Horse Head"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-7.jpg" alt="photos-7.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-8.jpg" title="Spotted Horses"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-8.jpg" alt="photos-8.jpg" /></a></li>
    <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-9.jpg" title="Lone Horse"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-9.jpg" alt="photos-9.jpg" /></a></li>
</ul>

Scott,
I have the same problem, I would like to link the large image in the slideshow to a web page. Basically, when the someone clicks on the large image it should go to a web page. I was trying to understand your comment, but did not fully understand. Can you explain futher or suggest how the code would look like with an activated link. Here is my code that I interrupt, please let me know what you would do:
Thanks in advance!
<div class="container">
<div class="content">
    <ul id="ImageSlideShow" title="Donald Booth Photography">
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-1.jpg" title="White Orchids"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="photos-1.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-10.jpg" title="Sand"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="photos-10.jpg" border="0" onclick="MM_goToURL('parent','#');return document.MM_returnValue" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-11.jpg" title="Tree"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="photos-11.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-12.jpg" title="Canon"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="photos-12.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-13.jpg" title="Door"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="photos-13.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-14.jpg" title="Flowers at the Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-14.jpg" alt="photos-14.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-15.jpg" title="Palace of Fine Arts"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-15.jpg" alt="photos-15.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-2.jpg" title="Orchid Close Up"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-2.jpg" alt="photos-2.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-3.jpg" title="Dirt Road"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-3.jpg" alt="photos-3.jpg" /></a></li>
      <li><a href="http://labs.adobe.com/technologies/spry/ui/images/dbooth/images/photos-4.jpg" title="Fence Post"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-4.jpg" alt="photos-4.jpg" /></a></li>
    </ul>
    <script type="text/javascript">
// BeginOAWidget_Instance_2141543: #ImageSlideShow
var ImageSlideShow = new Spry.Widget.ImageSlideShow("#ImageSlideShow", {
    widgetID: "ImageSlideShow",
    widgetClass: "BasicSlideShowFS",
    injectionType: "replace",
    autoPlay: true,
    displayInterval: 8000,
    transitionDuration: 2000,
    componentOrder: ["name", "title", "view", "controls", "links"],
    sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
    plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin, Spry.Widget.ImageSlideShow.TitleSliderPlugin, Spry.Widget.ImageSlideShow.PanAndZoomPlugin ],
    TFSP: { pageIncrement: 8, wraparound: true }
// EndOAWidget_Instance_2141543
    </script>
</div>
</div>
</body>
</html>

Accordion Spry Widget default loading behaviour

Am using the accordion spry widget to display some
spring/summer courses and
I need all panels closed when the page first loads. I've
tried to find the
relevant code, but have not been successful in changing it to
make this
work. If I change the behaviour of the 'this.defaultPanel'
the whole
accordion stops working. How can I change the accordion
behaviour to have
all panels closed at page load?
Thanks for any help.
Marianne

Hello! I have been reading up on this and playing around with
the code for a few hours now and I can't seem to make it work.
Basically I would like to have the accordion load collapsed, and
get rid of the fixed height. Any clue what I'm missing?
Thanks!
Hello! I have been reading up on this and playing around with
the code for a few hours now and I can't seem to make it work.
Basically I would like to have the accordion load collapsed, and
get rid of the fixed height. Any clue what I'm missing?
Thanks!
<!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>Lorem Ipsum : about us</title>
<style type="text/css">

</style>
<script src="SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="css/main.css" rel="stylesheet" type="text/css"
/>
<style type="text/css">

</style>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet"
type="text/css" />
<style type="text/css">

</style></head>
<body
onload="MM_preloadImages('images/menu_images/nav_a2_f2.jpg','images/menu_images/nav_a3_f2 .jpg','images/menu_images/nav_a4_f2.jpg','images/menu_images/nav_a5_f2.jpg','images/menu_i mages/nav_a6_f2.jpg')">
<div id="homebg">
<div id="spry1">
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img
src="images/spry_background/about_spry1.jpg" width="747"
height="35" alt="Vision / Purpose / Mission" /></div>
<div class="AccordionPanelContent">
<table width="744" height="179" border="0">
<tr>
<td width="95" height="175"> </td>
<td width="581" valign="top"
bgcolor="#C2CAD2"><p><strong>Vision:</strong>
Lorem Ipsum Dolor</p>
<p><strong>Purpose:</strong> Lorem ipsum
dolor.</p></td>
<td width="54"> </td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img
src="images/spry_background/about_spry2.jpg" width="746"
height="34" alt="Guiding Principles / Core Values"
/></div>
<div class="AccordionPanelContent">
<table width="744" height="388" border="0">
<tr>
<td width="95"> </td>
<td width="581" valign="top"
bgcolor="#C2CAD2"><p><strong>Integrity</strong><br
/>
Lorem Ipsum</p>
<p><strong>Understanding</strong><br
/>
Lorem Ipsum</p>
<p> <strong>Innovation</strong><br
/>
Lorem Ipsum</p>
<p><strong>Perseverance</strong><br
/>
Lorem Ipsum</p>
<p><strong>Simplicity</strong><br />
Lorem Ipsum</p>
<p> <strong>Lorem
Ipsum</strong></p></td>
<td width="54"> </td>
</tr>
</table>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><img
src="images/spry_background/about_spry3.jpg" width="746"
height="34" alt="Lorem Ipsum" /></div>
<div class="AccordionPanelContent">
<table width="744" height="388" border="0">
<tr>
<td width="95"> </td>
<td width="581" valign="top"
bgcolor="#C2CAD2"><p><strong>Lorem
Ipsum</strong><br />
<br />
<br />
<a href="mailto:blahblah</a></p>
<p><strong>Lorem Ipsum</strong><br
/>
<br />
<br />
<a href="mailto:blahblah"</a></p>
<p><strong></strong><br />
Manager<br />
9<br />
<a href="mailto:blahblah</a></p></td>
<td width="54"> </td>
</tr>
</table>
</div>
</div>
</div>
<h6></h6>
</div>
<div id="text">
<h1>about us
<p>Lorem Ipsum </h1>
<p> </p>
</div>
<img src="images/bg_images/bg_interior.jpg" width="1374"
height="931" /></div>
<script type="text/javascript">

</script>
</body>
</html>

Different Intervals for each tab in Spry Widget TabbedPanels

Hi,
I have two tabs panels in my tab panels group and I would them to have different intervals between the two panels is this possible?
Heres my code for the tab panels:
<div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
       <li class="TabbedPanelsTab" tabindex="0" onFocus="blur();">Tab 1</li>
       <li class="TabbedPanelsTab" tabindex="1" onFocus="blur();">Tab 2</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
       <div class="TabbedPanelsContent">
               Tab 1 Content
      </div>
      <div class="TabbedPanelsContent">
               Tab 2 Content
     </div>
     </div>
</div>
and here's my code to specify the interval value at the moment:
<script type="text/javascript">

</script>
Thanks

-- When-New-Form-instance
IF :SYSTEM.Record_Status ='query' THEN
go_block('PLN_STOCK_TAKING_HEADER');
execute_query;
go_block('PLN_STOCK_TAKING_DETAIL');
execute_query;
go_block('PLN_STOCK_TAKING_DETAIL2');
execute_query;
END IF;
same behaviour,excute on tab2 not tab1,well i think it has something to do with the relation..!
Regards,
Abdetu..

Spry.Widget.ValidationTextfield is not a constructor

I have worked through the text field validation
documentation, but get "Spry.Widget.ValidationTextfield is not a
constructor" when I try to run.
I have been trying to debug this for a while. Pretty sure I
have referenced the js and css correctly. Sure I'm doing something
silly, but have spent too much time on it already. Any help would
be greatly appreciated.
thanks,
Chuck

Thanks kin - that did it. The one place that I was looking in
the documentation (articles/textfield_overview/index.html) had a
typo. It was correct every else it is referenced.
It’s important that you make sure the ID of the span
tag matches the ID parameter you specified in the
Spry.Widget.ValidationTextfield method. It’s also important
that you make sure the JavaScript call comes after the HTML code
for the widget.
8. Save the page. The complete code looks as follows:
<head>
<script src="includes/SpryValidationTextfield.js"
type="text/javascript"></script>
<link href="SpryValidationTextfield.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<span id="TextfieldWidget">
<input type="text" name="text1" id="text1" />
</span>
<script type="text/javascript">
var TextfieldWidgetObject = new
Spry.Widget.ValidationTextfield("TextfieldWidget");
</script>
</body>

Spry Widget Wont Load JS to Browser?!?

I have a Spry slide show widget on my website. I have it linked to the root folder and also in a folder for orginazaion reasons. When the page loads I get a lot of JS errors. If I open the file offline it works fine but when uploaded to the server it wont load the JS. I have checked all the links and they are okay. I can even follow the links and they open up the script. Dreamweaver added the JS files so im asuming that the JS codes are correct. The 2 links are http://tylerdickersondesign.com/classic/classic.html & http://tylerdickersondesign.com/classic.html. This is so frustrating!
Here is the my HTML 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>
<link rel="icon" type="image/ico" href="http://www.tylerdickersondesign.com/images/favicon.ico">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tyler Dickerson Design</title>
<link href="classic.css" rel="stylesheet" type="text/css" />
<link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SprySliderPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFilmStrip.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageLoader.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryImageSlideShow.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryThumbnailFilmStripPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryTitleSliderPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/ImageSlideShow/SpryPanAndZoomPlugin.js" type="text/javascript"></script>
<style type="text/css">
/* BeginOAWidget_Instance_2141543: #Tyler */
#Tyler {
    width: 650px;
    margin: 24px 0px 0px 0px;
    border: solid 1px #000000;
    background-color: #717c96;
    padding-top: 10px;
#Tyler .ISSName {
    top: -24px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 18px;
    text-transform: none;
    color: #000000;
#Tyler .ISSSlideTitle {
    top: -18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 12px;
    overflow: hidden;
    color: #000000;
    text-transform: none;
#Tyler .ISSClip {
    height: 400px;
    margin: 0 10px 10px 10px;
    border: solid 1px #333333;
    background-color: #ffffff;
#Tyler .ISSControls {
    top: 11px;
    height: 400px;
#Tyler .FilmStrip {
    height: 80px;
    background-color: #2a3a5b;
#Tyler .FilmStripPreviousButton, #Tyler .FilmStripNextButton {
    width: 25px;
    height: 80px;
#Tyler .FilmStripTrack {
    height: 80px;
#Tyler .FilmStripContainer {
    height: 80px;
#Tyler .FilmStripPanel {
    height: 80px;
    padding-left: 10px;
    margin-right: 0px;
#Tyler .FilmStripPanel .ISSSlideLink {
    margin-top: 10px;
    border: solid 1px #2a3a5b;
    background-color: #2a3a5b;
#Tyler .FilmStripPanel .ISSSlideLinkRight {
    border: solid 1px #404f6b;
    width: 126px;
    height: 50px;
    margin: 4px 4px 4px 4px;
#Tyler .FilmStripCurrentPanel .ISSSlideLink {
    background-color: #59647d;
    border-color: #59647d;
#Tyler .FilmStripCurrentPanel .ISSSlideLinkRight {
    border-color: #404f6b;
/* EndOAWidget_Instance_2141543 */
</style>
<script type="text/xml">

</script>
</head>
<body>
<div class="container">
<div class="header"><a href="http://tylerdickersondesign.com"><img src="images2/l2.png" alt="logo" /></a>
    </div>
    <float>
    <a href="http://www.facebook.com/TylerDickersonDesign"><img src="images2/ft.png"/></a>
    </float>
<div class="sidebar1">
    <ul class="nav">
      <li></li>
      <li></li>
      <li><a href="http://tylerdickersondesign.com/">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="http://tylerdickersondesign.com/contact.html">Contact</a></li>
    </ul>
</div>
<div class="content">
    <table width="90%" border="1" cellspacing="0" cellpadding="5">
      <tr>
        <th scope="col"><center>
          <ul id="Tyler" title="">
            <li><a href="images2/1.jpg"><img src="images2/1t.jpg" alt="photos-1.jpg" /></a></li>
            <li><a href="images2/2.jpg"><img src="images2/2t.jpg" alt="photos-10.jpg" /></a></li>
            <li><a href="images2/3.jpg"><img src="images2/3t.jpg" alt="photos-11.jpg" /></a></li>
            <li><a href="images2/4.jpg"><img src="images2/4t.jpg" alt="photos-12.jpg" /></a>
          </ul>
          <script type="text/javascript">
// BeginOAWidget_Instance_2141543: #Tyler
var Tyler = new Spry.Widget.ImageSlideShow("#Tyler", {
    widgetID: "Tyler",
    widgetClass: "BasicSlideShowFS",
    injectionType: "replace",
    autoPlay: true,
    displayInterval: 3000,
    transitionDuration: 2000,
    componentOrder: ["name", "title", "view", "controls", "links"],
    sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
    plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin, Spry.Widget.ImageSlideShow.PanAndZoomPlugin ],
    TFSP: { pageIncrement: 4, wraparound: true }
// EndOAWidget_Instance_2141543
          </script>
        </center>
<p><br />
          </p>
          <h1>Graphic Design</h1>
          <p>Welcome to Tyler Dickerson Design. We take pride in our commitment to the highest degree of excellence in graphic design, web design, and photography. Our goal is to provide each and every client with more than they imagined in terms of design and more than they have experienced in regard to customer service, while at the same time staying within each individual budget we are working with. We offer the highest quality of design that will take your company and clients to the next level. We are committed to achieving excellence. When you hire us as your creative designer, you have taken the first important step to a new way of doing business. Tyler Dickerson Design is a proud, experienced artist of Graphic Design, Web Design, and Photography. Our expertise-based knowledge of marketing, advertising, promotion, logo development, print production processes, and photography are unmatched. Select Tyler Dickerson Design to receive the highest level of personal attention and dedication to detail. We are the creative designers that stand for quality, uniqueness and value. We are quick, flexible, and great listeners.</p>
          <h2>Web Design</h2>
          <p>As your web designer it is our goal to develop elegant and affordable web solutions that enable small to large businesses to establish visibility online, increase sales, and improve productivity. Tyler Dickerson Design provides high-quality, professional web design and online marketing services to small businesses and non-profits at prices that fit their budgets. We work extremely hard to keep prices affordable for our clients, while giving them access to the same web site and marketing services that have always been available to large companies with big budgets.</p>
          <h3>Photography</h3>
          <p>Tyler Dickerson Design explores the connection between the eye, the camera, and the soul by raising the growth of artistic vision and technical knowledge. We strive to capture and deliver the highest quality photographs for our clients, while focusing on the genuine moments of life that are often fleeting and quickly forgotten. We promise to give the maximum level of service to each client, while respecting individual needs. Our hope is to develop a personal connection that supports an ongoing and long-lasting working relationship. </p>
          <p> Be aware that if you use the Property inspector to navigate to your logo image using the SRC field (instead of removing and replacing the placeholder), you should remove the inline background and display properties. These inline styles are only used to make the logo placeholder show up in browsers for demonstration purposes. </p>
          <p>To remove the inline styles, make sure your CSS Styles panel is set to Current. Select the image, and in the Properties pane of the CSS Styles panel, right click and delete the display and background properties. (Of course, you can always go directly into the code and delete the inline styles from the image or placeholder there.)</p>
          <h4>Marketing Materials</h4>
          <p>Tyler Dickerson Design uses the highest quality materials. We take pride in our work and want our clients to be 100% satisfied with their experience with us. Give us a chance to astonish you. </p></th>
      </tr>
    </table>
    <h1> </h1>
</div><br />
</wrap>
<div class="footer">
    <p><center><small>© 2013 Tyler Dickerson Design. All Rights Reserved.</center></p>
    </div>
</div>
</body>
</html>
Thanks guys!

It seems to function correctly here on my Windows 7 machine in...
Firefox 16
IE9
Opera 12.11
Chrome 24
Safari 5.1.7
There are a few errors in your HTML that could be causing an issue for you in an older browser. Make sure to clean them up after running the validator here:
http://validator.w3.org/

Iframes and spry widget issue

PLEASE HELP!
I am building a website for my company using Dreamweaver for the very first time. I have a spry accordian menu on my page (that probably has nothing to do with my issue).
Next I added an iframe in the page to hold a vertical spry menu (since it will appear in other pages and I only want to edit it once. The menu was working fine until I did this.
Now that I embedded it in the iframe it is opening behind other things on the page. What can I do? Code is below:
<!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>Arkansas Bankers Association</title>

<style type="text/css">
</style>
<link href="Dec28.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">

</script>
<style type="text/css">

</style>

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />

</head>
<body onload="MM_preloadImages('Images/HeaderHover_Files/images/aboutus_hover.png','Images/Head erHover_Files/images/education_hover.png','Images/HeaderHover_Files/images/banking_hover.p ng','Images/HeaderHover_Files/images/government_hover.png','Images/HeaderHover_Files/image s/products_hover.png','Images/HeaderHover_Files/images/partnership_hover.png','Images/Head erHover_Files/images/fraudcenter_hover.png','Images/HeaderHover_Files/images/consumer_hove r.png','Images/HeaderHover_Files/images/home_hover.png','Images/HeaderHover_Files/images/c ontactus_hover.png','Images/HeaderHover_Files/images/sitemap_hover.png','Images/Header_htm landimages/images/home_hover.png','Images/Header_htmlandimages/images/contactus_hover.png' ,'Images/Header_htmlandimages/images/sitemap_hover.png')">
<div id="wrapper">
<div id="header">
    <div align="center" "top">
     
<table id="Table_01" width="980" height="81" border="0" cellpadding="0" cellspacing="0" bgcolor="#2B4E74" >
<tr>
<td rowspan="2">
   <img src="Images/header_and_search/images/logo.png" alt="" width="597" height="81" border="0"></td>
<td>
   <img src="Images/header_and_search/images/home.png" alt="" width="250" height="33" border="0"></td>
<td>
   <img src="Images/header_and_search/images/contact-us.png" alt="" width="65" height="33" border="0"></td>
<td>
   <img src="Images/header_and_search/images/site-up'.png" alt="" width="68" height="33" border="0"></td>
</tr>
<tr>
<td colspan="3" valign="middle" background="Images/header_and_search/images/search-box.png" border="0"><form name="form1" method="post" action="">
    <label>
          <input name="search" type="text" id="search" value="Search by Keyword(s)" size="35">
    </label>
    <label></label>
              <label>
              <input name="submit2" type="image" id="submit2" src="Images/header_and_search/images/arrow.png" border="0" align="bottom">
          </label>
     </form> </td>
</tr>
</table>

    <a href="www.arkbankers.org/aboutus.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','Images/HeaderHover_Files/images/aboutus_hover.png ',1)"><img src="Images/HeaderFiles/images/aboutus.png" name="Image21" width="76" height="37" border="0" id="Image21" /></a><a href="education_training.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','Images/HeaderHover_Files/images/education_hover.p ng',1)"><img src="Images/HeaderFiles/images/education.png" name="Image22" width="133" height="37" border="0" id="Image22" /></a><a href="www.arkbankers.org/banking_news.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','Images/HeaderHover_Files/images/banking_hover.png ',1)"><img src="Images/HeaderFiles/images/banking.png" name="Image23" width="99" height="37" border="0" id="Image23" /></a><a href="www.arkbankers.org/government_relations.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','Images/HeaderHover_Files/images/government_hover. png',1)"><img src="Images/HeaderFiles/images/government.png" name="Image24" width="141" height="37" border="0" id="Image24" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','Images/HeaderHover_Files/images/products_hover.pn g',1)"><img src="Images/HeaderFiles/images/products.png" name="Image25" width="130" height="37" border="0" id="Image25" /></a><a href="www.arkbankers.org/partnership_opportunities.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','Images/HeaderHover_Files/images/partnership_hover .png',1)"><img src="Images/HeaderFiles/images/partnership.png" name="Image26" width="158" height="37" border="0" id="Image26" /></a><a href="www.arkbankers.org/fraud_center.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','Images/HeaderHover_Files/images/fraudcenter_hover .png',1)"><img src="Images/HeaderFiles/images/fraudcenter.png" name="Image27" width="94" height="37" border="0" id="Image27" /></a><a href="www.arkbankers.org/consumer_connection.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image28','','Images/HeaderHover_Files/images/consumer_hover.pn g',1)"><img src="Images/HeaderFiles/images/consumer.png" name="Image28" width="149" height="37" border="0" id="Image28" /></a></div>
</div>
</div>
<div id="body">

<table width="860" height="auto" border="0" align="center" cellpadding="0" cellspacing="0" id="Table_01">
<tr>
   <td width="3" rowspan="3" valign="top">       </td>
<td height="53" colspan="4" valign="top">
<div align="center"><img src="Images/education_images/education_top.png" alt="Education and Training" width="805" height="150" /></div>
</td>
<td width="29" rowspan="2" valign="top"><table width="20" border="0" cellspacing="5" cellpadding="2">
<tr>
    <td> </td>
</tr>
</table>
<br />
</td>
<td width="144" rowspan="2" valign="top"><img src="Images/Ads/ababannerad.jpg" width="140" height="325" /><br />
    <br />
    <img src="Images/Ads/Link_LiveEvents2010_CoverPic.jpg" width="144" height="186" /><br />
    <br />
    <img src="Images/Ads/SponsorshipBrochure2010_Link.gif" width="144" height="140" /></td>
</tr>
<tr>
<td colspan="4" valign="top" background="Images/bg_department_details.png"><table width="771" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
              <td width="135" valign="top">
              
            
            
            <iframe src="EducationMenu.html" width="145" height="auto" frameborder="0" scrolling="no"> </iframe>
            <br />
            <br />
                          <br /></td>
            <td width="616" valign="top"><div align="left">
              
              <div id="Accordion1" class="Accordion" tabindex="0">
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">ABA LIVE EVENTS</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/Live.png" width="150" height="110" align="left" /><br />
                    The Arkansas Bankers Association is your organization, dedicated to   serving the needs of Arkansas bankers. If you are an employee of an   ABA-member financial institution, then you are an ABA member.    Our educational offerings are available in a variety of formats to make   training as convenient, timely and cost effective as possible.<br />
                    <a href="educ_liveevents.html">View All Live Events</a> <a href="educ_liveevents.html"><img src="Images/more_arrow.png" width="12" height="12" border="0" /></a><br />
                    <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">ABA WEBINAR LIBRARY</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/Webinar_Library.png" width="150" height="124" align="left" /><br />
                    The Arkansas Bankers Association is your organization, dedicated to   serving the needs of Arkansas bankers. If you are an employee of an   ABA-member financial institution, then you are an ABA member.    Our educational offerings are available in<br />
                    a variety of formats to make   training as convenient, timely and cost effective as possible. We   encourage you to explore all the training options available to you.<br />
                    <a href="Jan5_2.html">View Webinar Library <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /><br />
                      </a><br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">COMPUTER BASED IN-HOUSE</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/ComputerBasedInHouse.png" width="150" height="110" align="left" /><br />
                    The Arkansas Bankers Association is your organization, dedicated to   serving the needs of Arkansas bankers. If you are an employee of an   ABA-member financial institution, then you are an ABA member.    Our educational offerings are available in a variety of formats to make   training as convenient, timely and cost effective as possible. <br />
                    <a href="Jan5_2.html">View Computer Based In-House Courses <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
                    <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">WEBINARS & PODCASTS</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/Webinars_Podcasts.png" width="150" height="110" align="left" /><br />
                    A webinar is an enhanced telephone seminar. The audio portion is delivered by speaker phone. You may also view a corresponding PowerPoint presentation by PC.
                    &A. You will receive a PIN, materials and instructions prior to the seminar.<br />
                    <a href="Jan5_2.html">View Webinars & Podcasts <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
                    <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">SELF-PACED ONLINE</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/SelfPacedOnline2.png" width="150" height="104" align="left" /><br />
                    ABA eLearning includes over 60 courses and 200 hours of training in the retail,   small business, personal trust, compliance, and
                    management development areas.<br />
            <br />
            <strong><a href="http://arbakc.abakc.com/kc/login/login.asp?kc_ident=kc0001">Register/Enroll/Take   a Demo - </a></strong><a href="http://arbakc.abakc.com/kc/login/login.asp?kc_ident=kc0001" target="_rpbrowser"><strong>Take the Demo   Now</strong></a><strong> </strong> <img src="Images/more_arrow.png" alt="" width="12" height="12" /><br />
            <a href="Education/ABA_eLearning_Price_and_Credit_List%20Jan_10.xls" target="_rpexternal">Brochure & Pricing</a> <img src="Images/more_arrow.png" alt="" width="12" height="12" /><br />
            <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab">INSTRUCTOR LED ONLINE</div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/InstructorLedOnline2.png" width="150" height="110" align="left" /><br />
                    Your instructor posts weekly assignments which includes a reading (either textbook or online) and   homework is submitted through the discussion board or via email. You complete each at your convenience   and take a weekly quiz.   Exams (proctored midterms and/or   finals) are all taken online. Your instructor is available to provide   feedback and answer questions. <a href="Jan5_2.html">View Courses <img src="Images/more_arrow.png" alt="" width="12" height="12" border="0" /></a><br />
                    <br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><strong>ANNUAL CONVENTION</strong></div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/Convention.png" width="160" height="106" align="left" /><br />
                    New Rules, New Opportunities, New Banking Environment<br />
                    <br />
                    <strong>121st Annual Arkansas Bankers Association Convention & Tradeshow</strong><br />
The Peabody Hotel & Statehouse Convention Center, Little Rock, Arkansas<br />
May 4-6, 2011 - <strong><em>Brochure Coming Soon!</em></strong><br />
                  </div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><strong>BANK MANAGEMENT SEMINAR</strong></div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/BankManagementSeminar.png" width="124" height="106" align="left" />Open to our Bank Members, Associate Members and non-members, this annual event will be held at Hilton Branson Convention Center in Branson, Missouri.<br />
                    <br />
                    <strong>2011 Bank Management Seminar</strong><br />
Hilton Branson Convention Center, Branson, Missouri.<br />
August 4-6, 2011<br />
<br />
</div>
                </div>
                <div class="AccordionPanel">
                  <div class="AccordionPanelTab"><strong>E<strong>MERGING LEADERS LEADERSHIP CONFERENCE</strong></strong></div>
                  <div class="AccordionPanelContent"><img src="Images/Icons_Education/LeadershipConference.png" width="160" height="106" align="left" />Make plans to join us for the 2011 conference in order to network with your peers, further your education and leadership skills, and accelerate your banking career!<br />
                      <br />
                          <strong>2011 ELS Leadership Conference</strong><br />
                      Doubletree Hotel and Robinson Center, Little Rock, Arkansas<br />
                      July 21-22, 2011<br />
                    <br />
                  </div>
                </div>
              </div>
              <br />
              <br />

              <div align="left"></div>
                <p align="left""top"> </p>
                <p> </p>
              </div></td>
          </tr>
          </table>
          
          <script type="text/javascript">

</script>
          <br />        </td>
    </tr>
</table>
<p> </p>
</div>

</div>
<div id="footer">
<table width="800" border="0" align="center" cellpadding="2" cellspacing="5">
    <tr>
      <td>Footer Contents Here</td>
    </tr>
</table>
<br />
</div>
</body>
</html>

I frame should not be used in this situation because its contents are not in the same flow as the main document.
You are far better off using serverside includes as per following article http://foundationphp.com/tutorials/sprymenu/ssi.php
Gramps

Spry.Widget.HTMLPanel evalScripts: true

My situation is simple
I am loading HTML fragments into HTML Panel Container. The frament is contains mostly of javascripts that display affiliate information, in other words buttons with company information.
When I execute with evalscript false I get everything but the javascripts, when I set it to true I only get the javascripts on an empty screen. Is there a solution to this issue?

OK here is the code. I have tried with an observer but honestly I did not
really understand how to do it right.
Thank you very much for taking this on.
Spry.Widget.HTMLPanel.evalScripts = true;
var tp1 = new Spry.Widget.TabbedPanels("tp1", );
var tab1 = new Spry.Widget.HTMLPanel("tab1",);
tab1.loadContent('tab1.htm');
PagePanel.addObserver(myObserverFunc);
var tab2 = new Spry.Widget.HTMLPanel("tab2");
var tab3 = new Spry.Widget.HTMLPanel("tab3");
var tab4 = new Spry.Widget.HTMLPanel("tab4");
var username = "12345";
function myObserverFunc(notificationType, notifier, data)
if (notificationType == "onPostUpdate")
Spry.Data.initRegions('tab1')
</script>
</body>
</html>
And here is tab1.htm. The others are similar.
Christian Gifts, Books & Music
document.write ('<a target="_blank" href="
http://click.linksynergy.com/fs-bin/click?id=8xfCXj3UleE&offerid=206329.10000005&subid=0&t ype=4&u1='username'"><IMG
border="0" alt="Kazoo Made in USA" src="
http://ad.linksynergy.com/fs-bin/show?id=8xfCXj3UleE&bids=206329.10000005&subid=0&type=4&g ridnum=11&u1='username
'">')
document.write ('<a target=\'new\' href="
http://click.linksynergy.com/fs-bin/click?id=8xfCXj3UleE&offerid=170445.10000159&type=4&su bid=0&u1='username'">alt="PetSmart Deals.Woot Logo for 12/12 promo" border="0" src="
http://affiliates.petsmart.com/images/petsmart_140x40.gif">
<IMG
border="0" width="1" height="1" src="
http://ad.linksynergy.com/fs-bin/show?id=8xfCXj3UleE&bids=170445.10000159&type=4&subid=0&u 1='username
'">');
<IMG border="0"
width="1" height="1" src="
http://ad.linksynergy.com/fs-bin/show?id=8xfCXj3UleE&bids=56753.10000237&type=4&subid=0&u1 ='username
'">');
</script></td>
</tr></table>
Alfred Laggner
Puerto Vallarta
322 205 0890

Accordian Spry Widget

Hi,
I have a page here:
CLICK HERE
That uses the Accordian Widget. My question is how can I
change the default open panel? I want the bottom panel open when
the page loads, with the 2 top panels closed.
Any help would be most appreciated.

I found the answer on the Lab forums:
Put this :
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Accordion1", {
defaultPanel: 2 });
</script>
Instead of this:
<script type="text/javascript">

</script>
near the bottom of your page

New Spry Widgets Released

Similar Messages

Maybe you are looking for