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
-
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 />
©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 & 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 & 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 evansTry 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
~erinRalph 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?
JohnIf 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,
DaveHi 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 -
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
-
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
-
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
-
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