Spry Widget placement

Hi,
I have developed a landing page for my Sign In page. I have an image that I want to use for the page background and have placed the image in the content area of the html. I now want to insert a validation text box for the Sign In form in the middle of the image. I have the corrdinates for where I want to place the widget but I don't know how to code it. Can anyone tell what I may be doing wrong with the image, OR how to set the corridinates for the spry widget?
Thanks.

If you first place a normal textbox where you want it, the textbox can then be converted into a validation textbox.
Gramps

Similar Messages

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

I am using the Spry.Widget.AutoSuggest as part of another
object. I have the details VERY close, but am missing a small
detail somewhere, and while I think I've tried everything, I'm
still missing something.
In my init, I have the following code:
quote:
* Callbacks used for Predictive Search -------Fails
Spry.Widget.PredictiveSearch.prototype.regionCallback =
Object;
Spry.Widget.PredictiveSearch.regionCallback.prototype.onPostUpdate
= function(notifier, data)
alert("onPostUpdate called for " + data.regionID);
var typedText = this.predictiveSearch.typedTextField.value;
boldTextInChildDivs( data.regionNode, typedText );
this.setMatchIgnoreCase( typedText );
resetSessionTimeoutCheck();
self = this;
var regionCallback = this.regionCallback;
var suggestionsDiv = this.suggestionsDiv;
alert(self.suggestionsDiv)
Spry.Data.Region.addObserver( self.suggestionsDiv,
self.regionCallback );
When I type in the field, everything works as expected,
except that the suggestions div is not populated (it shows as an
empty div in firebug). The alert inside the region callback never
fires, so there is something wrong with how I am creating either
the addObserver, or the function itself. If I make this a function,
and use the 3rd parameter, AND make it a child of the window with a
unique name, it works fine... The idea was to try to make this a
little more like Spry.Widget.CollapsiblePanel in how the callbacks
are handled.
If you're wondering why I'm doing it this way, I am trying to
optimize some pages which use this widget several times per page,
and currently have it hard coded on the page (this is being pulled
into a separate javascript file.)
Thanks in advance.

The partial answer is that I was using incorrect syntax. I
started going through the SimpleAutosuggest, and found the
following:
quote:
Spry.Data.Region.addObserver(regionID, { onPostUpdate:
function(notifier, data) {
self.attachClickBehaviors();
Which was basically the syntax I was looking for, which
allows me to use the object notation instead of the function
notation, and call through an object that each autosuggest object
is tied to.
However, it brings me back to my original problem. I've gone
through the Region Observer Notifications documentation here:
http://livedocs.adobe.com/en_US/Spry/SDG/help.html?content=WS57937FB2-D8C1-424d-B3E4-655FD 7A7899B.html
... and in another place, I read that in a callback, you cannot
pass variables because it will run the call back immediately, and
not when you expect it to. That seems to be my problem, but
regardless of if I pass parameters, I get no call back when I
expect it. If I pass parameters, I get the call back immediately,
but not later, if I don't pass parameters, I never get the
callback.
It's got to be something dumb, but I don't see what it is,
and unfortunately, I have no way of putting the code outside our
firewall until it goes live. :(
Thank you for trying.

Behaviors vs Spry Widgets

What's the difference between them?
Ok, I know that spry widges require a separate file whereas behaviors don't. But I'm not interesting in the difference in code (css, javascript, etc.).
I want to know what's the difference between the "effects" of each one. What can you achieve (visually) with behaviors and what with spry widgets?
Can somebody explain this please?

Widgets are code snippets of HTML, CSS and Javascript to create interactive parts to one's web pages.
Behaviors are Javascript code one uses to add specific Javascript effects to a page.
Their fairly simmilar in that Javascript is used in both. But Widgets provides you with pre-built code that puts it all together while Behaviors you would have to already have the HTML and CSS in place and know how to apply the behavior to get the effect you're looking for.
HTML = structure and content
CSS = recommended way to render the structure and content
Javascript = client-side scripting allowing more interactive behaviors and effects

Dreamweaver CS4 Errors, Spry widget not working. Please Help!

I am redesigning a website and downloaded an html file from the present contact page. I opened it in Dreamweaver and I started to have this errors. The html file I opened has some JavaScripts in it and I believe, the the scripts got a conflict with Dreamweaver CS4. I already deleted these files I tried to open and still I'm encountering these errors.
These are the errors I'm getting:
1. When I open the Dreamweaver, this message pop-ups:
   "While executing onLoad in RecordsetFind.htm, the following JavaScript error(s) occured:
    In file "RecordsetFind"
    findRs is not defined."
2. I click OK. Then I'm getting this message:
   "While executing onLoad in Design Notes_onOpen.htm, the following JavaScript error(s) occured:
    In file "Design Notes_onOpen"
    onOpen is not defined."
3. I just click OK. Then, when I open an html file to edit or create a new one, this error pops up again:
   "While executing onLoad in Design Notes_onOpen.htm, the following JavaScript error(s) occured:
    In file "Design Notes_onOpen"
    onOpen is not defined."
4. I will again just click OK, then this error appears:
   "The following translators were not loaded due to errors:
    Coldfusion.htm: has configuration information that is invalid.
    SpryWidget.htm: has configuration information that is invalid."
5. Then, I will just click OK again. Then, when I'm working with the projects or creating a new project with Spry, it is not working properly anymore. I have to go the code and update the Spry list or content manually.
6. When I close Dreamweaver, I'm always having this error:
   "While executing onLoad in TeamAdminTempDelete.html, the following JavaScript error(s) occured:
    In file "TeamAdminTempDelete"
    delTempFile is not defined"
I tried uninstalling the Dreamweaver and installing it again, but it did not work.
What should I do to make the spry working again and to remove all these annoying errors? By the way, all my Spry widgets are not working and these errors I'm encountering in all of the Sites I'm working on. How can I make it work again? I tried looking for troubleshoot in CS4, but I could not see one, only in CS3.
Please help.

See if the following helps (found in Dreamweaver FAQ)
JavaScript and other unexpected errors
Mark A. Boyd
Keep-On-Learnin' :-)
This message was processed and edited by Jive.
It shall not be considered an accurate representation of my words.
It might not even have been intended as a reply to your message.

Spry Widget SlideShow Basic (IE8 not showing all images)

Hi everyone:
I've read through the past posts, trying to find the solution so I wouldn't have to bother everyone if the solution to my problem was already here. I couldn't find it, although I did find similar posts about this problem but no out and out solution.
My problem:
I have added the Spry Image Slideshow-Basic into an .html page. The widget works well in Firefox, Chrome, Safari and IE7!! It does not work properly in IE8 as IE8 skips every second images...the even numbers. It does not work on my local computer and it also doesn't work on the server. I have uploaded all the files to the server and it still doesn't work properly.
I cannot seem to find the solution and I am reaching out to the great Adobe supporters for help.
You can see the test web page here:
http://www.fernweb.com/test/
There are six images in this group but it only shows numbers 1, 3 and 5.
Could someone please have a look and give me direction as to where the problem is?
Thanks so much everyone.
Daryl

The problem is with the Spry.Widget.ImageSlideShow.PanAndZoomPlugin
If you leave that out, then all is well
A dirty fix is to add the following to the HEAD section of your document
<meta http-equiv="X-UA-Compatible" content="IE=7" />

Add Spry Widgets to Dreamweaver Insert Bar Spry Group

Hi. I'm trying to work out how to add Spry widgets to
Dreamweaver's
Insert bar.
I downloaded Spry for Ajax 1.6 and copied the the contents of
the
SpryTooltip Folder.
I did a search in Adobe Dreamweaver's program folder for
everything Spry.
I pasted SpryTooltip everywhere in Dreamweaver that Spry
references
exist. I even created a .png icon for Spry ToolTip in:
Adobe Dreamweaver CS3\configuration\Objects\Spry
I opened Dreamweaver and there it was in my insert bar! My
icon for Spry
tooltip!
I tried to insert it into a blank age and got the message:
"Trigger
event missing" or something like that.
I'm sure there must be a way to add these new widgets to
Dreamweaver's
insert bar in the Spry group.
Can someone please tell me how to do it. Starting with
SpryTooltip.
and...
I might as well go ahead and ask how to add new Spry Effects
to
Dreamweaver's behavior panel as well. Let's say "Pulsate" for
an example.
PS. I've already asked this at the Spry Forum. No one has
replied yet.
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid =1312010&enterthread=y
Thank you!
Dameon

hey,
I am a newbie to Spry too. I asked a similar question in the
Spry Forum.
It seems that you can not get the widgets into the Insert Bar
or on theBehavioral Panel.
To get the widgets to work, you only have the option to link
to them from your spry folder.
Spry is exciting, yet, it is still a new method, so the
WYSIWYG interface thing is still developing. Unfortunaly, if you
want to use Spry, you need to get dirty with the code stufff.
So, I too, use Spry sparingly.....
Hope that helps.

Spry Validations not working javascript:Spry.Widget.Form.destroyAll() in popup

iam using spry to validate controls in a popup.in that
validations are working fine but the problem is when we click
cancel button also thse validations are firing...
i am using
javascript:Spry.Widget.Form.destroyAll() to destroy
validations...but it is not working.
when we click on cancel button how to destroy the validations
as well as hide the popup...
can anyone help me...

Thanks! (While I'm REALLY not comfortable with code yet (working on it :-) I atleast understood that it was a PHP issue (yay).
Studied the code in the examples in the book. And added:
<pre>
<?php if ($_POST) {print_r($_POST);} ?>
</pre>
It worked. (I'm local testing, with no connection to a database yet. Just trying to get the basic pages to work first.)
Hopefully the more I work on all of this, the more I'll begin to "get it"! And I'm almost up to the Chapter on PHP. So, I'm hoping to will become clearer as I read on.
Thanks for the help in pointing me in the right direction!!!
-- Jami

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>

Can't add spry widget to page created from dreamweaver template

Please help! I have created a template in Dreamweaver and
from that template I have created an html page. I want to add
different tabbed and/or accordion spry widgets to multiple pages
however I keep getting an error when I try to add a widget to an
editable region. I can add the widgets to the dwt file, but I do
not want the same widget on all pages created from that template.
Please advise!
Thanks
cycleguy

If that's all that's on the child page you are in trouble.
Anyhow, it appears to me that the template has not been
properly created
since I do not also see an editable region around the
<title> tag in your
code. Please read my previous post and follow the
instructions.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"cycleguy" <[email protected]> wrote in
message
news:fu01pk$s7k$[email protected]..
> Thank you for your reply.
> I started with one of the built-in templates offered in
Dreamweaver then
> added
> additional div's and formatting then saved it as a dwt
file and created my
> html
> page from that template. I did not start the page from
scratch. Below is
> my
> source code from the child 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>Untitled Document</title>
> <style type="text/css">
> <!--
> body {
>

Add Spry Widgets to Dreamweaver Insert Bar

Hi. I'm trying to work out how to add Spry widgets to
Dreamweaver's Insert bar.
I downloaded Spry for Ajax 1.6 and copied the the contents of
the SpryTooltip Folder.
I did a search in Adobe Dreamweaver's program folder for
everything Spry.
I pasted SpryTooltip everywhere in Dreamweaver that Spry
references exist. I even created a .png icon for Spry ToolTip in:
Adobe Dreamweaver CS3\configuration\Objects\Spry
I opened Dreamweaver and there it was in my insert bar! My
icon for Spry tooltip!
I tried to insert it into a blank age and got the message:
"Trigger event missing" or something like that.
I'm sure there must be a way to add these new widgets to
Dreamweaver's insert bar in the Spry group.
Can someone please tell me how to do it. Starting with
SpryTooltip.
Thank you!
Dameon

For the dreamweaver related questions, i think u have more
luck ( & faster awnser) asking it in the Dreamweaver forum
selection that can be found here;
http://www.adobe.com/cfusion/webforums/forum/index.cfm?forumid=12

I'm having problems with the Spry Widgets, Help!

I'm using Dreamweaver CS6 and Have installed it twice, to no avail. When I try to insert any of the spry widgets, I get the HTML code for the widget but none of the javascript or css code and I cannot figure out why. Also, The Spryassets folder never get created. Is there anyone that help me figure out what I might be doing wrong. If all you got is "Spry is no good, use Javascript", then don't bother responding. All other useful suggestions are greatly appreaciated,
K

Hi Fehmi76,
The article linked below details how to go about seeing what apps on your iPhone are using what amounts of space.
See how much storage you've used on your iPhone, iPad, and iPod touch
https://support.apple.com/en-us/HT201656
Regards,
Allen

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

Spry Widget placement

Similar Messages

Maybe you are looking for