Spry Wonderlust Content Slide show

Can someone clarify if it is possible  to change the text of the slide/panel buttons/links numbered 1-4 on the Wonderlust content slide show. Any  knowledge and help is appreciated. Many thanks.
reference link: http://labs.adobe.com/technologies/spry/ui/samples/ContentSlideShowWLB .html

This will require some JS. The 2 lines of code in SpryContentSlideShow.js starting at line 417 is as follows
for (var j = 0; j < elements.length; j++)
    linksCC.appendChild(this.createButtonElement((j+1)+"", this.slideLinkClass, null, true));
If you change the second line to read
    linksCC.appendChild(this.createButtonElement(('M')+"", this.slideLinkClass, null, true));
You will get an 'M' rather than a number.
Rather than a fixed value we need to translate this into a variable value. We can do that by modifying the two lines to read
                for (var j = 0; j < elements.length; j++) {
                    var myValue;
                    switch (j)
                    case 0:
                        myValue= 'A';
                        break;
                    case 1:
                        myValue= 'B';
                        break;
                    case 2:
                        myValue= 'C';
                        break;
                    case 3:
                        myValue= 'D';
                        break;
                    default:
                        alert("The JS code in SpryContentSlideShow does not contain a value for this");
                    linksCC.appendChild(this.createButtonElement((myValue)+"", this.slideLinkClass, null, true));
Be sure to rename the JS file so that it does not cause a confusion with the original.

Similar Messages

  • Spry content slide show

    Hello i'm not great at dreamweaver, my background is more in print, I'm teaching my self dreamweaver.
    how do you change the colors of the buttons in spry content slide show?

    Modify the CSS attributes
    http://forums.adobe.com/thread/691654?tstart=0

  • Spry content slide show shadow

    Hello, how do you  take of the shadow the the spry content slideshow widget?

    To remove them, open your SlideShow.css file and delete all box-shadow properties from your code:
    -moz-box-shadow: 5px 5px 10px gray;
    -webkit-box-shadow: 5px 5px 10px gray;
    box-shadow: 5px 5px 10px gray;
    Nancy O.
    Alt-Web Design & Publishing
    Web | Graphics | Print | Media  Specialists 
    http://alt-web.com/
    http://twitter.com/altweb

  • Help needed with spry image slide show

    Im new to dw and am currently building a site for my buisness.  I installed a spry image slide show and it works fine in live view but when I view it on the web
    it was looking for sever .js files. I then checked out the spry forums and noticed that it seems to be a common problem. I tried removing the ui1.7 file from the server and reloading,tried removing from local and remote and reloading, tried to change the line <script.src=spry-ui-1.7 etc. to the adobe site as per gramps advise to another having the same issue.  Now when I view on the web the slideshow wheel keeps turning but images donot apear.  Im lost and can use some help, enclosed is my code also sight is www.patsiga.net
    <!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>pats iga supermarket</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <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="http://labs.adobe.com/technologies/spry/ui/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>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
    background-color: #AF692A;
    </style>
    <link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /* BeginOAWidget_Instance_2141543: #frontpageslideshow */
    #frontpageslideshow {
    width: 960px;
    margin: 0px 0px 0px 0px;
    border: solid 0px #aaaaaa;
    background-color: #FFFFFF;
    padding-top: 0px;
    #frontpageslideshow .ISSName {
    top: -24px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 18px;
    text-transform: uppercase;
    color: #AAAAAA;
    #frontpageslideshow .ISSSlideTitle {
    top: -18px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: normal;
    font-size: 12px;
    overflow: hidden;
    color: #AAAAAA;
    text-transform: none;
    #frontpageslideshow .ISSClip {
    height: 361px;
    margin: 0 0px 0px 0px;
    border: solid 0px #ffffff;
    background-color: #ffffff;
    #frontpageslideshow .ISSControls {
    top: 0px;
    height: 361px;
    #frontpageslideshow .FilmStrip {
    height: 0px;
    background-color: #CCCCCC;
    #frontpageslideshow .FilmStripPreviousButton, #frontpageslideshow .FilmStripNextButton {
    width: 10px;
    height: 0px;
    #frontpageslideshow .FilmStripTrack {
    height: 0px;
    #frontpageslideshow .FilmStripContainer {
    height: 0px;
    #frontpageslideshow .FilmStripPanel {
    height: 0px;
    padding-left: 10px;
    margin-right: 0px;
    #frontpageslideshow .FilmStripPanel .ISSSlideLink {
    margin-top: 10px;
    border: solid 1px #AAAAAA;
    background-color: #FFFFFF;
    #frontpageslideshow .FilmStripPanel .ISSSlideLinkRight {
    border: solid 1px #AAAAAA;
    width: 56px;
    height: 47px;
    margin: 4px 4px 4px 4px;
    #frontpageslideshow .FilmStripCurrentPanel .ISSSlideLink {
    background-color: #ffffff;
    border-color: #000000;
    #frontpageslideshow .FilmStripCurrentPanel .ISSSlideLinkRight {
    border-color: #AAAAAA;
    /* EndOAWidget_Instance_2141543 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2141543" binding="#frontpageslideshow" />
    </oa:widgets>
    -->
    </script>
    </head>
    <body>
    <div class="container">
      <div class="header"><!-- end .header --><a href="index.html"><img src="images/logoimg.jpg" width="259" height="136" alt="pats_logo" /></a><img src="images/H1180T2.jpg" width="699" height="120" alt="header_graphic" /></div>
      <div class="container">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="weekly_ad.html" title="weekly ad">Weekly ad</a></li>
          <li><a href="recepies.html" title="recepies">Recepies</a></li>
          <li><a href="entertainment.html" title="entertaining" class="MenuBarItemSubmenu">Entertaining</a>
            <ul>
              <li><a href="bakery_brochure.html" title="bakery_brochure">Bakery brochure</a></li>
              <li><a href="deli_platters.html" title="Deli_platters">Deli platters</a></li>
              <li><a href="catering_menu.html" title="Catering_menu">Catering Menu</a></li>
            </ul>
          </li>
          <li><a href="pats_best.html" title="pats best">Pat's Best</a></li>
          <li><a href="organics.html" title="organics">Organics</a></li>
          <li><a href="gift_cards.html" title="gift cards">Gift Cards</a></li>
          <li><a href="#" title="departments" class="MenuBarItemSubmenu">Departments</a>
            <ul>
              <li><a href="meats.html" title="dept_meats">Meats</a></li>
              <li><a href="seafood.html" title="dept_seafood">Seafood</a></li>
              <li><a href="deli.html" title="Dept_deli">Deli</a></li>
              <li><a href="prep_foods.html" title="Dept_prep_foods">Prepared Foods</a></li>
              <li><a href="produce.html" title="dept_produce">Produce</a></li>
              <li><a href="bakery.html" title="Dept_bakery">Bakery</a></li>
            </ul>
          </li>
        </ul>
        <p> </p>
        <ul id="frontpageslideshow" title="">
          <li><a href="images/fall.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="photos-1.jpg" /></a></li>
          <li><a href="images/apples.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="photos-10.jpg" /></a></li>
          <li><a href="images/pumpkinsoup.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="photos-11.jpg" /></a></li>
          <li><a href="images/roast.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="photos-12.jpg" /></a></li>
          <li><a href="images/applepie.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="photos-13.jpg" /></a></li>
        </ul>
        <script type="text/javascript">
    // BeginOAWidget_Instance_2141543: #frontpageslideshow
    var frontpageslideshow = new Spry.Widget.ImageSlideShow("#frontpageslideshow", {
    widgetID: "frontpageslideshow",
    widgetClass: "BasicSlideShowFS",
    injectionType: "replace",
    autoPlay: true,
    displayInterval: 4500,
    transitionDuration: 2000,
    componentOrder: ["name", "title", "view", "controls", "links"],
    sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
    plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin ],
    TFSP: { pageIncrement: 4, wraparound: true }
    // EndOAWidget_Instance_2141543
        </script>
    <p>Since this is a one-column layout, the .content is not floated. </p>
        <h3>Logo Replacement</h3>
        <p>An image placeholder was used in this layout in the .header where you'll likely want to place  a logo. It is recommended that you remove the placeholder and replace it with your own linked logo. </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>
      <!-- end .content --></div>
      <div class="footer">
        <p><a href="about_us.html" title="about_us">About Us</a><a href="#">  </a>   <a href="employment.html" title="employment">Employment</a>    <a href="store_info.html" title="store_info"> Store Info.</a>     <a href="#" title="contact_us">Contact Us</a>    <a href="terms_of_use.html" title="terms_of_use">Terms of Use</a>   <a href="privacy.html" title="Privacy_policy"> Privacy Policy</a><br />
    &copy;2011 Pat's IGA     <br />
        </p>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

    Your spry assets folder MUST be in the same folder as that of your webpage with the slideshow (html, php... whatever)
    Check your folder configuration on the server by clicking on the "Remote Button" on the DW Assets Tab.
    Example 1:  This will not work:
    WEBPAGE HERE:    /server/public/myfolder/slideshow.html
    SPRY ASSETS HERE:  /server/public/SpryAssets/....your javascript files
    Example 2: This will work:
    WEB PAGE HERE:  /server/public/myfolder/slideshow.html
    SPRY ASSETS HERE:  /server/public/myfolder/SpryAssets/....your javascript files
    Hope this helps.

  • Problems with the Spry Content Slider Widget in DW6

    Hello there,
    I have been wrestling with a problem I'm having with the Spry Content Slider Widget that I hope someone has an answer for.
    I have 2 widgets on a page, but the problem I'm having occurs whether there is 1 or 2 on the page.
    No matter how many slides I have in the widget, it only shows the first 3. The 2 widgets per page occurs on every html page (9 in total.)
    In there a setting in the inline or linked .js code limiting the number of slides to 3?
    In addition to these widgets, I also use a DWUser_EasyRotator Slider on the pages, and both the easyRotator and Spry Widgets launch a fancyBox jQuery Gallery. Tho it's a possibility, I don't think the mixing of sliders/js is the problem, as I was having the problem with the Spry Widget showing only the first 3 upon the first insert of the Widget.
    Any suggestions on settings I should be aware of, as regards the Widget, would be greatly appreciated… (;

    On line 66 of your code, you have an extra </head> tag that doesn't belong.    Remove that and validate your code again. 
    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.gallerynumber9.com.au%2Findex ---778.html
    Nancy O.

  • Having trouble with spry image slide show

    Im new to dw and i inserted a image slide show into my index.htm file, it works fine when i preview it in dw cs5.5.  When I try it on a web browser I get a dialog box that says that the spry panel selector .js requires spry widget.js and continues thru several other dialog boxes until my website loads only to see my image slideshow as a list.  Im not sure if its in the code or the support files can anyone help?  I would greatly appreciate it if someone can set me on the right path with this, Thank you in advance.
    <!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>Pats IGA Supermarket</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <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>
    <link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    body {
        background-color: #9D5F16;
    </style>
    <link href="Spry-UI-1.7/css/ImageSlideShow/basicFS/basic_fs.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    /* BeginOAWidget_Instance_2141543: #frontpageslideshow */
    #frontpageslideshow {
        width: 951px;
        margin: 0px 0px 0px 0px;
        border: solid 0px #aaaaaa;
        background-color: #FFFFFF;
        padding-top: 0px;
    #frontpageslideshow .ISSName {
        top: -24px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal;
        font-size: 18px;
        text-transform: uppercase;
        color: #AAAAAA;
    #frontpageslideshow .ISSSlideTitle {
        top: -18px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: normal;
        font-size: 12px;
        overflow: hidden;
        color: #AAAAAA;
        text-transform: none;
    #frontpageslideshow .ISSClip {
        height: 361px;
        margin: 0 0px 0px 0px;
        border: solid 0px #ffffff;
        background-color: #ffffff;
    #frontpageslideshow .ISSControls {
        top: 0px;
        height: 361px;
    #frontpageslideshow .FilmStrip {
        height: 0px;
        background-color: #CCCCCC;
    #frontpageslideshow .FilmStripPreviousButton, #frontpageslideshow .FilmStripNextButton {
        width: 10px;
        height: 0px;
    #frontpageslideshow .FilmStripTrack {
        height: 0px;
    #frontpageslideshow .FilmStripContainer {
        height: 0px;
    #frontpageslideshow .FilmStripPanel {
        height: 0px;
        padding-left: 10px;
        margin-right: 0px;
    #frontpageslideshow .FilmStripPanel .ISSSlideLink {
        margin-top: 10px;
        border: solid 1px #AAAAAA;
        background-color: #FFFFFF;
    #frontpageslideshow .FilmStripPanel .ISSSlideLinkRight {
        border: solid 1px #AAAAAA;
        width: 56px;
        height: 47px;
        margin: 4px 4px 4px 4px;
    #frontpageslideshow .FilmStripCurrentPanel .ISSSlideLink {
        background-color: #ffffff;
        border-color: #000000;
    #frontpageslideshow .FilmStripCurrentPanel .ISSSlideLinkRight {
        border-color: #AAAAAA;
    /* EndOAWidget_Instance_2141543 */
    </style>
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2141543" binding="#frontpageslideshow" />
    </oa:widgets>
    -->
    </script>
    </head>
    <body>
    <div class="container">
      <div class="header"><a href="index.html"><img src="images/logoimg.jpg" width="259" height="136" alt="logo" /></a><img src="images/topheader.jpg" width="701" height="136" alt="header_logo" /><!-- end .header --></div>
      <div class="content">
        <ul id="MenuBar1" class="MenuBarHorizontal">
          <li><a href="#">Weekly Ad</a>      </li>
          <li><a href="#">Recepies</a></li>
          <li><a href="#" class="MenuBarItemSubmenu">Entertaining</a>
            <ul>
              <li><a href="#">Bakery Brochure</a></li>
              <li><a href="#">Deli Platters</a></li>
              <li><a href="#">Catering Planner</a></li>
            </ul>
          </li>
          <li><a href="#">Pat's Best</a></li>
          <li><a href="#">Organics</a></li>
          <li><a href="#">Gift Cards</a>      </li>
          <li><a href="#" class="MenuBarItemSubmenu">Departments</a>
            <ul>
              <li><a href="#">Meats</a></li>
              <li><a href="#">Deli</a></li>
              <li><a href="#">Prepared Foods</a></li>
              <li><a href="#">Seafood</a></li>
              <li><a href="#">Produce</a></li>
              <li><a href="#">Bakery</a></li>
            </ul>
          </li>
        </ul>
        <p> </p>
        <ul id="frontpageslideshow" title="">
          <li><a href="images/fall.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-1.jpg" alt="fall.jpg" /></a></li>
          <li><a href="images/apples.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-10.jpg" alt="apples.jpg" /></a></li>
          <li><a href="images/applepie.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-11.jpg" alt="applepie.jpg" /></a></li>
          <li><a href="images/pumpkinsoup.jpg" title=""><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-12.jpg" alt="pumpkinsoup.jpg" /></a></li>
          <li><a href="images/roast.jpg" title="r"><img src="http://labs.adobe.com/technologies/spry/ui/images/dbooth/thumbnails/photos-13.jpg" alt="roast.jpg" /></a></li>
        </ul>
        <script type="text/javascript">
    // BeginOAWidget_Instance_2141543: #frontpageslideshow
    var frontpageslideshow = new Spry.Widget.ImageSlideShow("#frontpageslideshow", {
        widgetID: "frontpageslideshow",
        widgetClass: "BasicSlideShowFS",
        injectionType: "replace",
        autoPlay: true,
        displayInterval: 4500,
        transitionDuration: 2000,
        componentOrder: ["name", "title", "view", "controls", "links"],
        sliceMap: { BasicSlideShowFS: "3slice", ISSSlideLink: "3slice" },
        plugIns: [ Spry.Widget.ImageSlideShow.ThumbnailFilmStripPlugin ],
        TFSP: { pageIncrement: 4, wraparound: true }
    // EndOAWidget_Instance_2141543
        </script>
    Since this is a one-column layout, the .content is not floated.
        Logo Replacement
        An image placeholder was used in this layout in the .header where you'll likely want to place  a logo. It is recommended that you remove the placeholder and replace it with your own linked logo.
        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.    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.) <!-- end .content --></div>
      <div class="footer">
        <p>About us  Other Services Employment Contacy us Terms of use Privacy Policy</p>
        <!-- end .footer --></div>
      <!-- end .container --></div>
    <script type="text/javascript">
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
    </script>
    </body>
    </html>

    Your spry assets folder MUST be in the same folder as that of your webpage with the slideshow (html, php... whatever)
    Check your folder configuration on the server by clicking on the "Remote Button" on the DW Assets Tab.
    Example 1:  This will not work:
    WEBPAGE HERE:    /server/public/myfolder/slideshow.html
    SPRY ASSETS HERE:  /server/public/SpryAssets/....your javascript files
    Example 2: This will work:
    WEB PAGE HERE:  /server/public/myfolder/slideshow.html
    SPRY ASSETS HERE:  /server/public/myfolder/SpryAssets/....your javascript files
    Hope this helps.

  • Spry Slide Show-how to use one size photo for large photo and thumbnail?

    Hi all,
    I'm am using Adobe's Spry Slide Show. I can only use one size photo 640x480px for both the large photo and the thumbnail.
    I changed the size of the small thumnail on the html:
                     <li><a href="Photos/TestPhoto640x480.jpg" width="490" height="367"><img src="Photos/TestPhoto640x480.jpg" width="63" height="47" alt="photos-1.jpg" /></a></li>
    The thumbnail looks fine until you hit Live View or Preview in Browser then photo comes in full size and you can only see the upper left hand corner.
    I assume that the java is doing this. But I have no training in Java.
    How can I change the Java Code so the thumbnail comes in at 63x47px?
    Many thanks.

    Wish I could use scaled down versions of the thumbnails-but I can't.
    Why not?
        img.src = info.src;
        img.style.width =  "490px";<!--Large Photo size on internet-changed from info.width + "px"; to "490px";  *********-->
        img.style.height =  "368px";<!--Large Photo size on internet-changed from info.height + "px"; to "368px";  *******-->
    You're shooting yourself in the foot with this.  It's overriding your HTML and CSS  values.
    As an FYI, Adobe Abandoned the Spry framework late last year.
    http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l
    You might want to cut your losses right now and switch to something better suited to modern web devices & browsers.
    jQuery Fancybox
    http://fancybox.net/
    20 of the best jQuery Slideshows
    http://vandelaydesign.com/blog/web-development/jquery-slideshow/
    Nancy O.

  • SPRY MENU BAR SUBMENUS-Showing up Under other Page Content

    Hello. I need help. My spry menu bar is showing up beneath content located in another div tag. My code is as below.
    <!DOCTYPE html>
    <html>
    <head>
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>NEW TEMPLATE</title>
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    .wrapper {
    background-color: #fffee8;
    margin: auto;
    padding: 5px;
    height: auto;
    width: 980px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    text-align: left;
    color: #FFF;
    position: static;
    overflow: visible;
    .header {
    margin: 0px;
    padding: 0px;
    height: auto;
    width: 980px;
    background-color: #fffee8;
    border: 0px solid #09C;
    .logoarea {
    margin: 0px;
    padding: 0px;
    height: auto;
    width: 980px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    background-image: url(/Graphics/LOGOS%20AND%20BANNER/GRADIENTHEADER3.jpg);
    .navbar {
    background-color: #666;
    height: 30px;
    width: 980px;
    margin: 1px;
    padding: 1px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    .subnavmenu {
    background-color: #CCC;
    height: 30px;
    width: 980px;
    font-family: "Felix Titling", "Engravers MT";
    font-size: 14px;
    font-style: normal;
    line-height: normal;
    color: #999;
    text-decoration: blink;
    margin: 0px;
    padding: 0px;
    border-top-color: #333;
    border-right-color: #333;
    border-bottom-color: #333;
    border-left-color: #333;
    .leftcontent {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-style: normal;
    line-height: normal;
    color: #333;
    padding: 5px;
    height: auto;
    width: 485px;
    margin-right: 0px;
    margin-left: 0px;
    border: 0px none #CCC;
    background-color: fffee8;
    .rightcontent {
    background-color: #333;
    padding: 5px;
    height: auto;
    width: 450px;
    margin-right: 5px;
    margin-left: 5px;
    border: 5px ridge #06F;
    float: right;
    font-family: Arial, Helvetica, sans-serif;
    color: #FFFee8;
    font-size: 12px;
    position: static;
    .footer {
    background-image: url(/Graphics/MORGAN%27S%20PIC.jpg);
    background-repeat: repeat;
    margin: 0px;
    padding: 0px;
    height: 165px;
    width: auto;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    text-align: center;
    clear: both;
    color: #666;
    position: relative;
    left: 0px;
    bottom: 0px;
    #logo {
    position:relative;
    left:auto;
    top:-5px;
    width:272px;
    height:auto;
    z-index:1;
    #apDiv4 {
    position:relative;
    width:544px;
    height:53px;
    z-index:1;
    background-color: #fffee8;
    float: right;
    -->
    </style>
    <style type="text/css">
    <!--
    #apDiv2 {
    position:absolute;
    left:857px;
    top:123px;
    width:49px;
    height:50px;
    z-index:1021;
    #apDiv3 {
    position:absolute;
    left:956px;
    top:122px;
    width:150px;
    height:50px;
    z-index:1022;
    #apDiv5 {
    position:static;
    width:200px;
    height:auto;
    background-color: #FFFEE8;
    float: right;
    -->
    </style>
    <!-- TemplateBeginEditable name="head" -->
    <!-- TemplateEndEditable -->
    <style type="text/css">
    <!--
    #apDiv1 {
    position:absolute;
    left:439px;
    top:23px;
    width:336px;
    height:155px;
    z-index:1021;
    #apDiv6 {
    position:relative;
    left:0px;
    top:0px;
    width:154px;
    height:153px;
    z-index:1021;
    float: right;
    -->
    </style>
    <script src="/Web Site Root Folder/SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <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>
    <link href="/Web Site Root Folder/SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css">
    </head>
    <body background="/Graphics/LOGOS AND BANNER/GRADIENT BACKGROUND 5-8-12.png" class="body" id="body" onLoad="MM_preloadImages('/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png')">
    <div class="wrapper" id="wrapper">
      <div class="header" id="header">
        <div class="logoarea" id="logoarea"><div id="apDiv6">
            <p> </p>
            <p> </p>
            <p><br/>
              <a href="http://www.facebook.com/pages/Mifflin-Juniata-Special-Needs-Center-Inc/129756770511336" target="_blank" align="left"><img src="http://www.niftybuttons.com/blackink/facebook.png" width="60" height="59"></a><a href="https://twitter.com/MJSNC1" target="_blank" align="left"><img src="http://www.niftybuttons.com/blackink/twitter.png" width="57" height="59"></a>
              <br/>
            </p>
            <p>
              <!-- Facebook Badge END -->
            </p>
        </div><div id="apDiv4" >   
          <script>
    (function() {
      var cx = '004600001770955757780:ub1su5xae54';
      var gcse = document.createElement('script'); gcse.type = 'text/javascript';
      gcse.async = true;
      gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
          '//www.google.com/cse/cse.js?cx=' + cx;
      var s = document.getElementsByTagName('script')[0];
      s.parentNode.insertBefore(gcse, s);
    </script>
          <gcse:search></gcse:search></div>
        <div id="logo" onClick="document.location.href='http://www.mjsnc.org';" style="cursor:pointer;"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><img src="/Graphics/LOGOS AND BANNER/slogan and logo editable_edited-2.png" width="244" height="242" alt="Mifflin-Juniata Special Needs Center, Inc."></div>
        <a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a><a href="http://www.mjsnc.org" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('slogan','','/Graphics/LOGOS AND BANNER/logo with white bg for other publications.png',1)"></a></div>
        <div class="navbar" id="navbar">
          <img src="/Graphics/LOGOS AND BANNER/navbar_edited-3.jpg" alt="navigation menu" width="980" height="25" border="0" usemap="#Map">
          <map name="Map">
            <area shape="rect" coords="59,4,149,24" href="/NAVBAR/ABOUT US/AboutUs.html" target="_parent" alt="About Us">
            <area shape="rect" coords="157,3,255,23" href="/NAVBAR/CONTACT US/ContactUs.html" target="_parent">
            <area shape="rect" coords="263,4,423,22" href="/NAVBAR/BOARD OF DIRECTORS/BoardOfDirectors.html" target="_parent">
            <area shape="rect" coords="429,3,578,22" href="/NAVBAR/VISION AND MISSION/MissionVisionStatementsAdopted2012.pdf" target="_blank">
            <area shape="rect" coords="586,3,698,23" href="/NAVBAR/GET INVOLVED/GetInvolved.html" target="_parent">
            <area shape="rect" coords="704,5,815,24" href="/NAVBAR/DONATE NOW/DonateNow.html" target="_parent">
            <area shape="rect" coords="822,5,920,24" href="/NAVBAR/AFFILIATES/Affiliates.html" target="_parent">
          </map>
        </div>
        <ul id="MenuBar1" class="MenuBarHorizontal">
         <li><a class="MenuBarItemSubmenu" href="#">Adults</a>
           <ul>
             <li><a href="/SUBNAVMENU/ADULT REC/ADULT REC.html">Adult Rec</a></li>
             <li><a href="/SUBNAVMENU/ADULT TRAINING FACILITIES/AdultTrainingFacilities.html">Adult Training Facilities</a></li>
             <li><a href="/SUBNAVMENU/FAMILY LIVING/FAMILY LIVING.HTML">Life Sharing</a></li>
             <li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">Summer Rec</a></li>
             <li><a href="/SUBNAVMENU/AKTION CLUB/AktionClub.html">Aktion Club</a></li>
           </ul>
         </li>
         <li><a href="#" class="MenuBarItemSubmenu">Youth</a>
           <ul>
             <li><a href="/SUBNAVMENU/AFTER SCHOOL PROGRAM/AfterSchool.html">After School Program</a></li>
    <li><a href="/SUBNAVMENU/CHALLENGER/Challenger.html">Challenger Division</a></li>
             <li><a href="/SUBNAVMENU/EARLY INTERVENTION/EarlyIntervention.html">Early Intervention</a></li>
             <li><a href="/SUBNAVMENU/SUMMER REC/Summer Rec.html">Summer Rec</a></li>
             <li><a href="/SUBNAVMENU/T-BALL/TBall.html">T-Ball</a></li>
             <li><a href="/SUBNAVMENU/TEEN CLUB/TeenClub.html">Teen Club</a></li>
             <li><a href="/SUBNAVMENU/TRAINING N TRANSITION/TrainingTransition.html">Training &amp; Transition</a></li>
           </ul>
         </li>
         <li><a class="MenuBarItemSubmenu" href="#">Events</a>
           <ul>
             <li><a href="/SUBNAVMENU/EVENTS/LipSync.html">Lip Sync</a>          </li>
             <li><a href="/SUBNAVMENU/EVENTS/Fundraisers.html">Fundraisers</a></li>
             <li><a href="/SUBNAVMENU/EVENTS/AnnualPicnic.html">Annual Picnic</a></li>
             <li><a href="/SUBNAVMENU/EVENTS/TouringFriends.html">Touring Friends</a></li>
           </ul>
         </li>
         <li><a href="#" class="MenuBarItemSubmenu">Employees</a>
           <ul>
             <li><a href="/SUBNAVMENU/MEET OUR STAFF/MeetOurStaff.html">Meet Our Staff</a></li>
             <li><a href="/SUBNAVMENU/AGENCY WITH CHOICE/AgencyWithChoice.html">Agency With Choice</a></li>
             <li><a href="/SUBNAVMENU/EMPLOYEE ACCESS/RegisterPage.html">Employee Access</a></li>
           </ul>
         </li>
         <li><a href="#" class="MenuBarItemSubmenu">Other</a>
           <ul>
             <li><a href="/SUBNAVMENU/EDUCATION & THERAPY/EducationandTherapy.html">Education &amp; Therapy</a></li>
             <li><a href="/SUBNAVMENU/EQUIPMENT LOAN/EquipmentLoan.html">Equipment Loan</a></li>
             <li><a href="/NAVBAR/VOLUNTEER/Volunteer.html">Volunteer</a></li>
           </ul>
         </li>
       </ul>
       <div class="subnavmenu" id="subnavmenu"> </div>
      </div>
      <div class="rightcontent" id="rightcontent"><!-- TemplateBeginEditable name="editrightcontent" -->
        <p>Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
    <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. </p>
      <!-- TemplateEndEditable --></div>
      <div class="leftcontent" id="leftcontent"><!-- TemplateBeginEditable name="editleftcontent" -->
        <p>Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
        <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
        <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. Duis laoreet iriure tation eros molestie dolor feugiat vel quis et autem   dolor et et veniam augue eu in nisl iusto suscipit vulputate, aliquam, laoreet.   Vulputate dignissim dolor adipiscing ad qui tation te at diam augue quis,   aliquip exerci wisi erat luptatum, luptatum adipiscing in nostrud zzril nisl   consequat et. Feugait te ullamcorper consequat lobortis eros facilisis augue   nisl diam. </p>
        <p>Dignissim in ut ullamcorper vulputate autem ullamcorper aliquip nulla delenit   blandit nulla odio dolor odio consequat. Luptatum duis in iriure eum zzril eum   odio suscipit veniam wisi praesent facilisi nulla vero molestie dignissim   consequat nulla duis eu minim ea. Feugait iriure feugiat ut enim lobortis   consequat delenit hendrerit volutpat, consectetuer nonummy nostrud sed ea velit   suscipit duis blandit. Vel illum accumsan et veniam facilisis molestie, ea vel   dolor duis qui, ipsum et nostrud accumsan feugait odio dolore magna feugiat nibh   accumsan velit illum. </p>
      <!-- TemplateEndEditable --></div>
      <div class="footer" id="footer"><a href="/NAVBAR/CONTACT US/ContactUs.html">Contact Us </a>| <a href="/NAVBAR/ABOUT US/AboutUs.html">About Us</a> | <a href="/FOOTER AND DISCLAIMER/Disclaimer.pdf">Disclaimer</a></div>
    </div>
    <script type="text/javascript">
    <!--
    var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"/Web Site Root Folder/SpryAssets/SpryMenuBarDownHover.gif", imgRight:"/Web Site Root Folder/SpryAssets/SpryMenuBarRightHover.gif"});
    //-->
    </script>
    </body>
    </html>

    @charset "UTF-8";
    /* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    LAYOUT INFORMATION: describes box model, positioning, z-order
    /* The outermost container of the Menu Bar, an auto width box with no margin or padding */
    ul.MenuBarHorizontal
    margin: 0;
    padding: 0;
    list-style-type: none;
    cursor: default;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    /* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
    ul.MenuBarActive
    /* Menu item containers, position children relative to this container and are a fixed width */
    ul.MenuBarHorizontal li
    margin: 0;
    padding: 1;
    list-style-type: none;
    position: relative;
    text-align: center;
    cursor: pointer;
    width: 191px;
    height: 30px;
    float: left;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    background-color: #CCC;
    /* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
    ul.MenuBarHorizontal ul
    margin: 0;
    padding: 5;
    list-style-type: none;
    z-index: 1020;
    cursor: default;
    position: absolute;
    left: -1000em;
    width: 9em;
    height: auto;
    clear: both;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
    left: auto;
    /* Menu item containers are same fixed width as parent */
    ul.MenuBarHorizontal ul li
    width: 15em;
    border: thin solid #666;
    /* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
    ul.MenuBarHorizontal ul ul
    position: absolute;
    margin: -5% 0 0 95%;
    /* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
    ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
    DESIGN INFORMATION: describes color scheme, borders, fonts
    /* Submenu containers have borders on all sides */
    ul.MenuBarHorizontal ul
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    /* Menu items are a light gray block with padding and no text decoration */
    ul.MenuBarHorizontal a
    display: block;
    cursor: pointer;
    height: 30px;
    width: auto;
    padding: 0px;
    background-color: #CCC;
    text-decoration: none;
    margin: 0px;
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    color: #424edd;
    font-size: 16px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    text-align: center;
    /* Menu items that have mouse over or focus have a blue background and white text */
    ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
    color: #FFF;
    /* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
    ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
    color: #FFF;
    SUBMENU INDICATION: styles if there is a submenu under a given menu item
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenu
    background-image: url(SpryMenuBarDown.gif);
    background-repeat: no-repeat;
    background-position: 95% 50%;
    border-top-width: 0px;
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-left-width: 0px;
    border-top-style: none;
    border-right-style: none;
    border-bottom-style: none;
    border-left-style: none;
    /* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
    /* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
    ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
    BROWSER HACKS: the hacks below should not be changed unless you are an expert
    /* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
    ul.MenuBarHorizontal iframe
    position: absolute;
    filter:alpha(opacity:0.1);
    /* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
    @media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
    display: inline;
    f\loat: left;

  • Spry/Slide Show problems from new host

    Recently I moved my site from TDS to godaddy.  Everything worked well on TDS, now people get 4 error merssages before the site loads through Godaddy.  These are:1) SpryPannelSet.js requires SpryWidget.js! Then 2) SpryFadingPanel.js requires SpryPannelSet.js! Then 3) SpryImageSlideShow.js requires Spry Widget.js! Then 4)  SpryPanAndZoomPlugin.js requires Spry Immage Slide Show.js!  Most of my pages have slide shows downloaded from the widget browser.  When I moved the site, I didn't move the site from TDS, I just loaded the site up from my computer.  Is there something I can do to allow people to get on my index page without having to click these error messages.  My site is www.tailgatershandbook.com.

    SpryWidget.js is corrupt. Try re-uploading and if that does not work try linking to the Adobe JS as per
    <script src="http://labs.adobe.com/technologies/spry/ui/includes/SpryWidget.js"></script>
    Gramps

  • Is it possibe to place a slide show background behind a spry accordion

    i have found a background image transition slideshow on
    http://www.willmaster.com/library/features/background-image-transition-slide-show.php
    i cant get it to work yet - but am hoping to use it in my website
    http://mandyevansartist.com
    and was hoping someone could tell me if it will work or not - or if there is something i need to research for it to be possible ( gramps mentioned an "event listener" to load the javascript after the spry - is this one of those moments)
    kind regards
    mandy evans

    Try the jQuery Accordion instead http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&extid=2174022
    Gramps

  • Spry slide show is choppy..what can I do to fix this.

    Are the spry slide show always so choppy? Do I have too many photos? (5) Here is my site mudroomstudios.com. Please, any advise would be appreciated. Otherwise I'll have to ditch the slides.
    thanks
    ~erin

    Ralph 9430, simplify for us dummies...define device ? ios is a what  ...just a slow step by step explaination if you could..
    Thank you in advance      2-20-2013

  • IDVD slide shows and DVD ROM contents?

    No problem making slide shows, but iDVD will not copy ALL of the hi-res pics, seems to have a mind of its own and drops short. ie. 3 slide shows of 100 pics each it will copy 87, 55, 85 hi-res pics only. 5 slide shows of 100 each it will copy 80, 52, 85, 88, 90 hi-res pics only. Has anybody got any ideas please.

    George,
    iDVD isn't always happy about working with lots of multi-megapixel images and can't use all the quality. See iDVD 6.0 Help-Preparing images for DVD slideshows at http://docs.info.apple.com/article.html?path=iDVD/6.0/en/17.html for information on recommended sizes. Things will go a lot faster with the smaller images mentioned in that help file.
    You can always manually add content to the DVD-ROM area. See iDVD 6.0 Help - Adding files to the DVD-ROM portion of a disc at http://docs.info.apple.com/article.html?path=iDVD/6.0/en/74.html
    My recommendation: use 720x540 images for the slideshow and manually add the high res images to the DVD-ROM area.

  • Remove source code names for Spry Content Slides

    I installed the widget Spry Content Slides and then removed it because it extended beyond the main column into a sidebar. Even though the code is gone the labels remain at the top with all the other source code labels. I want to reinstall Spry Content Slides but how do I stop it from flowing into the adjacent column? When I reinstall will I have duplicating labels?
    John

    If the labels still remain on the page, there is a good chance there is some code that was not entirely deleted.  To answer your second question we would need to see the code from your page to see what is going on and how to fix it.

  • How can I change div content to create a slide show?

    Hello, Dreamweaver newbie here. I would like to have the content of a sidebar change every 20 seconds or so. So basically behave like a slide show on autoplay. I've found Javascript code that does this for images, but my sidebar contains some text and a simple image. I would like to loop through perhaps four sets of content.
    I realize I can convert the text and image into a single image, but I was curious if this is really necessary. Is there a technique for swapping out the html in the sidebar <div>?
    Thanks in advance,
    Dave

    Hi Dave
    It is done with jQuery, but it is really a simple matter of cut and past (from the demo page), for the code, there are also links to the required jQuery files on the tutorial page.
    Modifying the code is reasonably simple as the list they show can be cut down to the required number of items, (it is just a demo of the capability and you can display from 1 to xxx items).
    PZ

  • Spry Slides Showing on Load

    The Spry Slideshow I built shows all the slides at once while
    it is loading for the first time. Is there a way to quell this, as
    it makes the viewer a little queasy -- especially on slow-loading
    connections. I tried moving the "unobtrusive" javascript file to
    the end of the page, but that did nothing.
    Suggestions?

    I should add there is only one item initially selected like a
    simple form.

Maybe you are looking for

  • Slideshows in iweb

    Hello. I made a slideshow in iphoto. How do you put it into an iweb website and be able to use the features for slideshows in the inspector of iweb? Thanks.

  • Pages and letters with addresses

    I'm sorry I can't find how to add names form the address book into a pages document. If this isn't built in "it is seriously missing" if it is I can't find it. I could go on but I know the device (iPad) is limited in power and memory. It just keeps g

  • Firefox cannot load a certain website, but other people I have talked to can access that same website.

    I was at a chat site today, when it suddenly went blank. I tried to go back to that chat site, but I get the problem loading page error, that says Firefox can't establish a connection to the server at that site. I have asked a few people on my messen

  • Printing elements of a table

    I've got the printing problem fixed but I'm trying to print elements of an array onto paper. It keeps giving me an unclosed character compiler error. Am I using the wrong method? class PaintCover implements Printable{ Font fnt = new Font("Helvetica-B

  • Adobe Updater Glitch after 10.5.2

    I have been running Adobe CS3 on my new Mac Pro (early 2008) without any real issues for the past couple weeks. The only problem is "Updates" was grayed out in the Help Menus ever since I switched to Leopard OS (10.5.1). I just ran the Combo-Updater