Slide show in a Tabbed Panel
I created a moving slide show using Creative DW Image Show Pro (a Dreamweaver extension) and inserted it into a tabbed panel created in Dreamweaver using the Tabbed Panel Widget. It's a three tab panel with an image show, SWF, planned for each tab. The first tab accepted the image show and seems to be working fine. But when I loaded the second show in the second tab, it did not work.
I have read the code a number of times and have found nothing wrong, but my knowledge in that area is limited.
I am working in Mac OS 10.6.2 and in Dreamweaver CS4.
You can find the uncooperative page at
http://dcarchts.com/projects.html
Thanks,
Merle
This can be done in iweb using 'my albims' page, I posted various versions of this (of the same javascript). But here it is (again), add the following to your 'My Albums' pae using HTML Snippet:
<script type='text/javascript'>
function redoMediaGridWidget() {
headerControlsDiv = parent.document.getElementsByClassName('com-apple-iweb-widget-headercontrols')[ 0];
headerControlsWidget = headerControlsDiv.widget;
mediaGridID = headerControlsWidget.p_mediaGridID();
mediaGrid = parent.document.getElementById(mediaGridID);
if (mediaGrid) {
mediaGridCount = mediaGrid.childNodes.length;
for (mgi = 0; mgi<mediaGridCount; mgi++) {
mediaDiv = parent.document.getElementById('gridEntry' + mgi);
mediaDiv.removeAttribute('onclick');
slideDiv = mediaDiv.widget.getElementById('slideshow_placeholder');
mediaDiv.widget.p_startSlideshow(slideDiv);
mediaDiv.addEventListener('mouseover', function(){mediaDiv.widget.p_scrub(slideDiv);});
mediaDiv.addEventListener('mouseout', function(){mediaDiv.widget.p_startSlideshow(slideDiv);});
clearInterval(chkMediaGridWidget);
chkMediaGridWidget = setInterval('redoMediaGridWidget()', 500);
</script>
here is my example: http://widgets.cyclosaurus.com/ImageRotate2/ImageRotate/ImageRotate.html
Similar Messages
-
Spry tabbed panels, all content showing on one page, please help?
Hi there,
I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DND Perspective</title>
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
background-color: #2B3856;
.style1 {
color: #FFFFFF;
.style4 {
color: #FFFFFF;
font-size: 36px;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
margin-left: 250px;
.style5 {color: #CCCCCC}
.style11 {
font-size: 18pt;
font-style: italic;
a:link {
color: #FFFF00;
a:visited {
color: #000000;
a:hover {
color: #000033;
-->
</style></head>
<body>
<div align="center">
<p align="left" class="style4">DND </p>
</div>
<p align="left">
<img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" /> </p>
<p align="center">
<p align="center">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup" >
<li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
<li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
<li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
<li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
<li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
<li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent style1">
<div align="center">
<p class="style11">Welcome to DND </p>
<p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
<p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
<p>Please visit our services page to discover all photography sessions we have available such as:</p>
<p>Wedding Photography</p>
<p> Engament Photos</p>
<p>Senior Portraits </p>
<p>Anniversary</p>
<p>& More!!!</p>
<p> </p>
</div>
</div>
<div class="TabbedPanelsContent">
<p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
</div>
<div class="TabbedPanelsContent">Under Construction...</div>
<div class="TabbedPanelsContent">Under Construction....</div>
<div class="TabbedPanelsContent style1">
<p>We hear at DND understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &
packages, custom videos, thank you cards and albums.</p>
<hr width="50%" align="left" />
<p><strong>Package 1 - $500.00</strong></p>
<p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
<p><strong>Package 2 - $575.00</strong></p>
<p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
<p><strong>Package 3 - $700.00</strong></p>
<p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
<p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
<hr width="50%" align="left" />
<p><strong>Prints</strong>: (Fine Art High Quality)**</p>
<p>Individual prices: 8"x10" = $12.99; 10"x13" = $19.99; 2 - 5"x7" = $12.99; 4 - 4"x6" = $11.99</p>
<p>(Custom sizes available - Custom framing available)</p>
<p><strong>Package 1:</strong></p>
<p>3 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $50.00</p>
<p><strong>Package 2:</strong></p>
<p>5 - 8"x10"; 6 - 5"x7"; 6 - 4"x6" = $90.00</p>
<p><strong>Package 3:</strong></p>
<p>8 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $125.00</p>
<p><strong>Package 4:</strong> (Basic Prints)</p>
<p>Any 100 photos printed 4"x6" = $100.00</p>
<hr width="50%" align="left" />
<p><strong>Custom video:</strong>**</p>
<p>Any 100 photos put to royalty-free music = $50.00</p>
<hr width="50%" align="left" />
<p><strong>Custom thank you cards for your guests:</strong>**</p>
<p>300 cards - 4"x6" = $350.00</p>
<p>100 cards - 4"x6" = $150.00</p>
<hr width="50%" align="left" />
<p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
<p>Bride & Groom Albums</p>
<p>Parent Albums</p>
<hr width="50%" align="left" />
<p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
</div>
<div class="TabbedPanelsContent style5">
<p> Contact DND Perspective:</p>
<p>The best way to reach us is via email .</p>
<p>You can alternately reach us anytime at ...!</p>
</div>
<div class="TabbedPanelsContent">
<div align="center">
<p><span class="style1">About Info</span></p>
<p> </p>
</div>
</div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">
<!--
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html>You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
Correct these links:
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
And you should be good to go.
Beth
ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
B -
Tabbed panels no longer showing up
Hi folks, for quite some time I have used the widge Spry Tabbed Panels 2.0 in this page: www.arrowmark.co.nz/clients and on this pagehttp://tatlerprime.co.nz/conference.html but the tabs no longer show up and all the content is laid out vertically down the page. With Altruistic Gramps' help I have customised my pages to enable quick links to tabs and named anchors and other helpful tweaks to help visitors navigate around the tabs and their contents.
Several things have happened since I built those pages: my Windows 7 profile became corrupted and I had to start a new profile which meant I lost access to app data. I also upgraded to DW cs6. And I also lost access to my widgets panel.
Any one of these issues could have caused the problem but it may also be that this widget no longer works in Cs6.
However, there is a further possibility: that I have inadvertently made a change in code which is preventing the tabs from appearing. Is anyone able to take a quick look and let me know which is the most likely before I start a rebuild from scratch?
Thanks in advance,
Jo
[update: I have narrowed down the problem. The panels fall apart when I change the defaultTab value from 0 to "params.tab ? params.tab : 0", (which I am using as part of a script that enables me to send email links and set menu bar links to particular tabs and their contents. If anyone knows another way to achieve this aim without affecting tab behaviour, I'd be really grateful. As Altruistic Gramps kindly provided me with the code I have messaged him but am also asking here in case anyone is able to help me before he gets on line next]
Message was edited by: BoppyW to provide updateThe problem is because you're linking to Adobe Labs for SpryURLUtils.js:
<script src="http://labs.adobe.com/technologies/spry/includes/SpryURLUtils.js"></script>
Adobe announced a couple of weeks ago that it was no longer investing in the development of Spry (see
http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framework-availability.htm l). As a consequence, the files are no longer available on Adobe Labs.
You need to download the Spry files from GitHub. Copy SpryURLUtils.js into your local site, and link to the local version rather than the one on Adobe Labs. -
Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like it was all created on one page, plus mouse over doesnt work on them.
This started all of a sudden.
The entire website is a series of spry tabbed panels.
http://pacificlaser.com/const.html
if you click on General construction tab things work ok...
if you click on Machine control tab, mouse over doesnt work and all page content of each tab show through.
ive been looking for the answer for 4 months with no success.
Hope a fellow dreamwever-person can help
Thanks RickYou called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
Correct these links:
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
And you should be good to go.
Beth
ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
B -
Both Photoshop and Bridge open as usual. But when I open an image, the image does not show in the image area. The image filename does show in a tab and the layers show in the layer panel. What is going on and how do I fix this.
I resolved the problem. It was somehow related to my using Microsoft
theme pictures. I set Windows to use the basic theme and the problem
went away. Thank you for the suggestions.
Jac -
My html table is not showing on the 2nd tab panel (muse widget)
The same table works just fine on the first tab however when I try to click on the second table in browser mode or preview page on browser, my table does not show up. Any tips for fixing this issue?
If I get this right, you're using the Tabbed panel widget to display a HTML table in each of the tabs. If that is the case, please make sure you insert the HTML content on each the tab's content area respectively. In order to verify this, switch between the tabs in Design mode to check your content.
Thanks,
Vinayak -
Tabbed Panels Show on Hover, Not Click
Hi,
I'm using the Spry Tabbed Panels widget (obviously). I'd like
the content panels to show on hover, rather than on click.
Reason being is my content in the content panels are images
-- as you hover over a tab, the image changes. Clicking on the tab
takes you to the tab's page. That's the end goal, at least.
The answer's in the SpryTabbedPanels.js file, I'm positive.
All my tinkering hasn't produced the desired result, though. Spare
a few minutes and direct me to the sections of the javascript file
I need to change?
var Spry;
if (!Spry) Spry = {};
if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.bindings = [];
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
Spry.Widget.TabbedPanels.setOptions(this, opts);
// If the defaultTab is expressed as a number/index, convert
// it to an element.
if (typeof (this.defaultTab) == "number")
if (this.defaultTab < 0)
this.defaultTab = 0;
else
var count = this.getTabbedPanelCount();
if (this.defaultTab >= count)
this.defaultTab = (count > 1) ? (count - 1) : 0;
this.defaultTab = this.getTabs()[this.defaultTab];
// The defaultTab property is supposed to be the tab element
for the tab content
// to show by default. The caller is allowed to pass in the
element itself or the
// element's id, so we need to convert the current value to
an element if necessary.
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.TabbedPanels.prototype.getElementChildren =
function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.TabbedPanels.prototype.addClassName =
function(ele, className)
if (!ele || !className || (ele.className &&
ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.TabbedPanels.prototype.removeClassName =
function(ele, className)
if (!ele || !className || (ele.className &&
ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" +
className + "\\b", "g"), "");
Spry.Widget.TabbedPanels.setOptions = function(obj,
optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName]
== undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
return children[0];
return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup =
function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
return children[1];
return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels =
function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele,
arr)
ele = this.getElement(ele);
if (ele && arr && arr.length)
for (var i = 0; i < arr.length; i++)
if (ele == arr
return i;
return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex =
function(ele)
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex =
function()
return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount =
function(ele)
return Math.min(this.getTabs().length,
this.getContentPanels().length);
Spry.Widget.TabbedPanels.addEventListener = function(element,
eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e,
tab)
this.showPanel(tab);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver =
function(e, tab)
this.addClassName(tab, this.tabHoverClass);
Spry.Widget.TabbedPanels.prototype.onTabMouseOut =
function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e,
tab)
this.hasFocus = true;
this.addClassName(this.element, this.tabFocusedClass);
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e,
tab)
this.hasFocus = false;
this.removeClassName(this.element, this.tabFocusedClass);
Spry.Widget.TabbedPanels.ENTER_KEY = 13;
Spry.Widget.TabbedPanels.SPACE_KEY = 32;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e,
tab)
var key = e.keyCode;
if (!this.hasFocus || (key !=
Spry.Widget.TabbedPanels.ENTER_KEY && key !=
Spry.Widget.TabbedPanels.SPACE_KEY))
return true;
this.showPanel(tab);
if (e.stopPropagation)
e.stopPropagation();
if (e.preventDefault)
e.preventDefault();
return false;
Spry.Widget.TabbedPanels.prototype.preorderTraversal =
function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
var child = root.firstChild;
while (!stopTraversal && child)
stopTraversal = this.preorderTraversal(child, func);
try { child = child.nextSibling; } catch (e) { child = null;
return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners =
function(tab, panel)
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "click",
function(e) { return self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover",
function(e) { return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout",
function(e) { return self.onTabMouseOut(e, tab); }, false);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex
dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to
enable keyboard navigation
// by default.
// Find the first element within the tab container that has
a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
if (tabIndexAttr)
tabIndexEle = node;
return true;
if (!tabAnchorEle && node.nodeName.toLowerCase() ==
"a")
tabAnchorEle = node;
return false;
if (tabIndexEle)
this.focusElement = tabIndexEle;
else if (tabAnchorEle)
this.focusElement = tabAnchorEle;
if (this.focusElement)
Spry.Widget.TabbedPanels.addEventListener(this.focusElement,
"focus", function(e) { return self.onTabFocus(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement,
"blur", function(e) { return self.onTabBlur(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(this.focusElement,
"keydown", function(e) { return self.onTabKeyDown(e, tab); },
false);
Spry.Widget.TabbedPanels.prototype.showPanel =
function(elementOrIndex)
var tpIndex = -1;
if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >=
this.getTabbedPanelCount())
return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++)
if (i != tpIndex)
if (tabs)
this.removeClassName(tabs
, this.tabSelectedClass);
if (panels)
this.removeClassName(panels
, this.panelVisibleClass);
panels.style.display = "none";
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
Spry.Widget.TabbedPanels.prototype.attachBehaviors =
function(element)
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs
, panels);
this.showPanel(this.defaultTab);near line 282 u will see the function:
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners =
function(tab, panel)
in there u will find
Spry.Widget.TabbedPanels.addEventListener(tab, "click",
function(e) { return self.onTabClick(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover",
function(e) { return self.onTabMouseOver(e, tab); }, false);
change this to:
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover",
function(e) { self.onTabClick(e, tab);return self.onTabMouseOver(e,
tab); }, false);
and it should work. -
Spry tabbed panels: Shows everything when it shouldn't
I have a spry tabbed panel with 2 tabs.
In design view, this correctly shows me the contect of each of the tabs (a different table in each) when I click on the tab.
When I run it in live view or the browser however, it displays both tabs TOGETHER, (i.e both table) and I can't select either of the tabs.
I've attached a screen print.
Any suggestions.The problem is with the tag name "s_phone".
If iPhone Safari sees a tag name containing "phone", it automatically assumes you need the phone keypad. (Something similar goes for "zip".)
Here's a test case setup someone made:
http://www.iphonewebdev.com/examples/input.html -
Placing an image in a tabbed panel content area, it shows up on all three panels
This is crazy. It should be so simple. But sometimes this happens to me. Like today.
I have many pages that use a simple tabbed panel feature with three tabs.
Each content area has a text frame and an image frame.
Sometimes when I try to place an image into the content area of the first tab, the image shows up on all three content areas. I have tried and tried placing the image, making very sure I am in the "content area" on not just on the page. But nevertheless, the image seems to be "stuck" on the page, in front of the accordian feature, and therefore showing on all three tabs.
How am I not targeting the placement of those images correctly? There just aren't that many options for me to screw up, it's a simple tabbed panel, that's all!
Help please.
BarbaraAre you using the latest version of Muse/Air?
The borders of the Content Area of a tab gets highlighted as soon as you drag over an element over it so it is very unlikely that something like this could happen. However, I believe it could be due to messed up Layers configuration as the only way I could reproduce this problem is through moving the image into a layer above a layer that contains the Tabbed panel or in case of just one layer, you might have the image at the very top.
Thanks,
Vinayak -
Tabbed panel changes not showing up
I'm using Dreamweaver CS5 on a Mac. A couple of years ago I created a website using tabbed panels (http://www.4dtr.com/Communication_Interpersonal.html), Recently, I went to make some modification to the tabs:
1. altered the text in the tab
2. Changed background colour of the tabbed panel)
3. Changed the font size
When I preview the changes in DW they seem to have worked...they also show up when I look in the Adobe Browser Lab. When I upload to the server however only the "altered text" modifications shows up. The change to background color as well as change to font size do not. What am I doing wrong? Help please...The first thing I notice as I look at your CSS Panel is that many of your styles are existing in the page itself instead of in a linked CSS stylesheet.
Before you proceed, check through the list of styles in the CSS Styles Panel and delete styles that you don't need. Any style that has been completely superseded by another style further down on the list can be deleted. You should be left with only styles you want to be active.
It is simple to move those styles to an external stylesheet; you can do it right in the CSS Panel.
The aim is to have styles associated with the tabbed panels in the "SpryTabbedPanels.css" file, and to have no styles embedded in the page. Then you will make sure those external stylesheets are attached to all the pages that need those style. The on-page, embedded styles are shown in the CSS Panel (with "all" selected as the view) under labels that read: "<style>".
I would also recommend creating a global.css stylesheet for those other styles that also should occur throughout your site. Do File > New > Blank Page > CSS to create the new stylesheet. After you have created this stylesheet, attach it to your page. If you are working with a true template file (file extension is .dwt), I suggest attaching it to that template. With the page in question open, open the CSS Panel and click the chain icon at the bottom of the Panel. Select the newly created stylesheet to link it to the page.
Then select the styles you want to move, and keep holding the mouse down while you drag them under the appropriate stylesheet name in the CSS Styles Panel. You could also select them and right click, choosing 'move CSS styles'.
Here's some links to info about the CSS Styles Panel: http://help.adobe.com/en_US/Dreamweaver/CS5/Using/WSbb8fae38174aec9d-4fb84361126e2b2aaf3-8 000.html
The long and the short of it is: If a style was changed and the style sits on the page, that change is not reflected throughout the site, only on that page. If the style is moved (or created) on an external stylesheet, and the stylesheet is linked to all pages, that change will be reflected throughout the site.
N.B.: If you change the template file, be sure to propagate the changes to all the pages that are based on that template. And don't forget to upload the changed files...
Beth -
Using Srpy tabbed panels with slidding panels
I am very new to spry and so I am still just figuring it all
out. How I found it was I wanted a tabbed panel like the one on the
IBM website. Anyway, I am trying to
use the tabbed panels with the sliding panels and it just does not
seem to be working. I found
this
tutorial and followed the codes but it still only works as just the
tabbed panels - nothing has changed at all. Can someone tell me
what I might be doing wrong? I am attaching both my html and css
code for you to inspect.
HTML Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<script
src="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<link
href="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"><a
href=”#Tab1″>Tab 1</a></li>
<li class="TabbedPanelsTab" tabindex="0"><a
href=”#Tab1″>Tab 2</a></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1");
//-->
</script>
</body>
</html>
css code to follow in post below - too many characters.and here is the css code
CSS Code
@charset "UTF-8";
/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab
buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container.
For our
* default style, this container does not contribute anything
visually,
* but it is floated left to make sure that any floating or
clearing done
* with any of its child elements are contained completely
within the
* TabbedPanels container, to minimize any impact or
undesireable
* interaction with other floated elements on the page that
may be used
* for layout.
* If you want to constrain the width of the TabbedPanels
widget, set a
* width on the TabbedPanels container. By default, the
TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this
selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabbedPanels container.
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup
container houses
* all of the tab buttons for each tabbed panel in the
widget. This container
* does not contribute anything visually to the look of the
widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in
this selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This
container houses
* the title for the panel. This is also the tab "button"
that the user clicks
* on to activate the corresponding content panel so that it
appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1
pixel down from
* where it wold normally render. This allows each tab to
overlap the content
* panel that renders below it. Each tab is rendered with a 1
pixel bottom
* border that has a color that matches the top border of the
current content
* panel. This gives the appearance that the tab is being
drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this
selector is not
* necessary to make the widget function. You can use any
class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
/* This selector is an example of how to change the appearnce
of a tab button
* container as the mouse enters it. The class
"TabbedPanelsTabHover" is
* programatically added and removed from the tab element as
the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #CCC;
/* This selector is an example of how to change the
appearance of a tab button
* container after the user has clicked on it to activate a
content panel.
* The class "TabbedPanelsTabSelected" is programatically
added and removed
* from the tab element as the user clicks on the tab button
containers in
* the widget.
* As mentioned above, for our default style, tab buttons are
positioned
* 1 pixel down from where it would normally render. When the
tab button is
* selected, we change its bottom border to match the
background color of the
* content panel so that it looks like the tab is part of the
content panel.
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
/* This selector is an example of how to make a link inside
of a tab button
* look like normal text. Users may want to use links inside
of a tab button
* so that when it gets focus, the text *inside* the tab
button gets a focus
* ring around it, instead of the focus ring around the
entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The
ContentGroup container houses
* all of the content panels for each tabbed panel in the
widget. For our
* default style, this container provides the background
color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in
this selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
/* This is the selector for the Content panel. The Content
panel holds the
* content for a single tabbed panel. For our default style,
this container
* provides some padding, so that the content is not pushed
up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this
selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the Content container.
.TabbedPanelsContent {
padding: 4px;
/* This selector is an example of how to change the appearnce
of the currently
* active container panel. The class
"TabbedPanelsContentVisible" is
* programatically added and removed from the content element
as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels
* The following rules override some of the default rules
above so that the
* TabbedPanels widget renders with its tab buttons along the
left side of
* the currently active content panel.
* With the rules defined below, the only change that will
have to be made
* to switch a horizontal tabbed panels widget to a vertical
tabbed panels
* widget, is to use the "VTabbedPanels" class on the
top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons
it contains
* render to the left of the active content panel. A border
is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so
that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door
and CSS Sprites */
/* Revision by Craig Malcolm Petrou of CPMMUG.com */
.TabbedPanels {
margin: 10px 0 5px 0;
.TabbedPanelsTab {
font-weight: bold;
font-size: 100%;
background-color: #FFF;
border: solid 0 #FFF;
.TabbedPanelsTabHover {
background-color: #FFF;
.TabbedPanelsTabSelected {
background-color: #FFF;
border-bottom: 1px solid #FFF;
position: relative;
.TabbedPanelsContentGroup {
background-color: #FFF;
ul.TabbedPanelsTabGroup a {
display: block;
ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
background: url(/images/brown.png) no-repeat 0 0;
margin: 0 0 0 -1px;
padding: 0 0 0 10px;
ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
background: url(/images/brown.png) no-repeat 100% 0;
padding: 7px 10px 5px 0;
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
background: url(/images/brown.png) no-repeat 0 -41px;
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
background: url(/images/brown.png) no-repeat 100% -41px;
/* END: Spry Horizontal Tabbed Panels meets Sliding Door and
CSS Sprites */
Also - is there a way to get rounded corners on the tabs in
spry? Any good tutorials I can follow about spry - more
specifically about using widgets and effects together.
Thanks so much -
Tabbed Panels - Tab shows over a dropdown menu
Hello,
As you see in this link
Tab
Problem i have a problem the tabbed panel widget. The tab seems
to come in front of a drop-down menu that i have (not spry)
Any suggestions are much appreciatedHi,
most probably you have a css problem in your page that refers
to z-index. Check to see which one, the menu or the tabbed panel
(if you added a z-index) have the z-index value grater. Normally
the menu bar should have a bigger z-index to be displayed in top of
the other elements.
If you use the Spry menu bar and the Tabbed panel you don't
have this problem.
If you want more help from us, please give us a live url to
investigate the problem.
Thanks,
Diana -
The mini bridge tab does not show up on my panel
Hello,
I'm trying to use mini bridge in Photoshop, but it does not show up on my panel on the lower left. I currently have Bridge open. I just want to access it through Photoshop. Thanks for any suggestions you might have.As far as I everything is up to date. I have a Macbook Pro. here is the screen shot
-
http://www.projectseven.com/products/galleries/ssm/
Leaps beyond the ordinary...
Efficient code and buttery smooth animations make for a truly
engaging
user experience. Slide Shows and individual images can be
bookmarked and
all images can be viewed - even if JavaScript is disabled.
Search Engine Friendly
Unlike many of today's Flash and AJAX applications, Slide
Show Magic
markup is always fully visible and indexable by leading
search engines.
Auto-Choreographed Animation
Slide Show Magic detects the size of each incoming full-size
image. If
it's the same size as the current image, the system will
employ a smooth
cross-fader - simultaneously fading out the current image as
the new one
fades in. If the incoming image is a different size than the
current
one, the system will fade out the current image, glide the
image
container to the size of the incoming image, then fade the
new image in.
It's all automatic.
Staged preloader
When the slide show is running in automatic mode, the system
will
preload the next image as the current one is being shown,
providing a
seamless experience in most cases.
Intuitive toolbar controls
The on-page toolbar contains conventional media controls:
First,
Previous, Play, Pause, Next, and Last buttons. It also
contains a slider
bar that allows users to adjust the slide show timing, plus
buttons to
toggle visibility of the thumbnail display and navigation
menu, and an
image counter.
Drag-enabled thumbnail panel
The Thumbnail panel can be dragged about the screen, enabling
users to
fine-tune the interface for best viewing of the show.
Full-Size images can be hyperlinks
Each full-size image can optionally be set as a hyperlink to
another
page, programmed to open in a new window or tab.
Image descriptions
Each full-size image can display an optional description,
which can
contain any type of valid markup (paragraphs, tables, DIVs,
lists,
links, or images).
Automated image processing with Fireworks...
Web-ready images are automatically produced from your
original images,
which can be located on any drive connected to your computer
- including
drives mounted by your digital camera. Slide Show Magic
handles all
image processing automatically - preserving your original
files in their
original locations in their original and unaltered states.
Your images
are scaled, optimized, and neatly organized into folders
within your
defined site.
Import your existing images...
Point to a folder (or folders) that contain your existing
full-size and
thumbnail image and Slide Show Magic will match them up and
add them to
your slide show - unaltered and ready to view.
Organize Images into sets
Slide Show Magic enables you to define logical image sets and
organizes
the thumbnail panel into navigable sets.
Mix landscape and portrait orientations
Your images are never distorted in any way. Original aspect
ratios are
always preserved. Use both landscape and portrait images in
the same
slide show.
Deploy alone or inside existing layouts
Slide Show Magic can be inserted on a page by itself or
inside an
existing page.
Select from 6 Themes
Select a dark toolbar, a light toolbar, shadow boxes (in 3
sizes), or an
image rotator interface. Style themes can even be switched
for existing
slide shows.
Manage it all inside a dedicated Dreamweaver Interface
Add (append) new images
Delete images or re-order them
Manage Descriptions, links, and ALT text
Edit existing full-size or Thumbnail images
Reprocess all of your slide show's images
And lots more, including a comprehensive manual and free tech
support.
$95
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"Al,
Wow. That's extremely cool. I currently don't have a need for
a slideshow,
but in the future if I do, you know where I'm heading to.
Nice product!
Shane H
[email protected]
http://www.avenuedesigners.com
=============================================
Back for 2007, close-up magic:
http://deceptivemagic.com
Web dev articles, photography, and more:
http://sourtea.com
=============================================
Proud GAWDS member
http://www.gawds.org/showmember.php?memberid=1495
Delivering accessible websites to all ...
=============================================
"Al Sparber- PVII" <[email protected]> wrote in
message
news:[email protected]...
>
http://www.projectseven.com/products/galleries/ssm/
>
>
> Leaps beyond the ordinary...
>
> Efficient code and buttery smooth animations make for a
truly engaging
> user experience. Slide Shows and individual images can
be bookmarked and
> all images can be viewed - even if JavaScript is
disabled.
>
>
> Search Engine Friendly
>
> Unlike many of today's Flash and AJAX applications,
Slide Show Magic
> markup is always fully visible and indexable by leading
search engines.
>
>
> Auto-Choreographed Animation
>
> Slide Show Magic detects the size of each incoming
full-size image. If
> it's the same size as the current image, the system will
employ a smooth
> cross-fader - simultaneously fading out the current
image as the new one
> fades in. If the incoming image is a different size than
the current one,
> the system will fade out the current image, glide the
image container to
> the size of the incoming image, then fade the new image
in. It's all
> automatic.
>
>
> Staged preloader
>
> When the slide show is running in automatic mode, the
system will preload
> the next image as the current one is being shown,
providing a seamless
> experience in most cases.
>
>
> Intuitive toolbar controls
>
> The on-page toolbar contains conventional media
controls: First, Previous,
> Play, Pause, Next, and Last buttons. It also contains a
slider bar that
> allows users to adjust the slide show timing, plus
buttons to toggle
> visibility of the thumbnail display and navigation menu,
and an image
> counter.
>
>
> Drag-enabled thumbnail panel
>
> The Thumbnail panel can be dragged about the screen,
enabling users to
> fine-tune the interface for best viewing of the show.
>
>
> Full-Size images can be hyperlinks
>
> Each full-size image can optionally be set as a
hyperlink to another page,
> programmed to open in a new window or tab.
>
>
> Image descriptions
>
> Each full-size image can display an optional
description, which can
> contain any type of valid markup (paragraphs, tables,
DIVs, lists, links,
> or images).
>
>
> Automated image processing with Fireworks...
>
> Web-ready images are automatically produced from your
original images,
> which can be located on any drive connected to your
computer - including
> drives mounted by your digital camera. Slide Show Magic
handles all image
> processing automatically - preserving your original
files in their
> original locations in their original and unaltered
states. Your images are
> scaled, optimized, and neatly organized into folders
within your defined
> site.
>
>
> Import your existing images...
>
> Point to a folder (or folders) that contain your
existing full-size and
> thumbnail image and Slide Show Magic will match them up
and add them to
> your slide show - unaltered and ready to view.
>
>
> Organize Images into sets
>
> Slide Show Magic enables you to define logical image
sets and organizes
> the thumbnail panel into navigable sets.
>
>
> Mix landscape and portrait orientations
>
> Your images are never distorted in any way. Original
aspect ratios are
> always preserved. Use both landscape and portrait images
in the same slide
> show.
>
>
> Deploy alone or inside existing layouts
>
> Slide Show Magic can be inserted on a page by itself or
inside an existing
> page.
>
>
> Select from 6 Themes
>
> Select a dark toolbar, a light toolbar, shadow boxes (in
3 sizes), or an
> image rotator interface. Style themes can even be
switched for existing
> slide shows.
>
>
> Manage it all inside a dedicated Dreamweaver Interface
>
> Add (append) new images
> Delete images or re-order them
> Manage Descriptions, links, and ALT text
> Edit existing full-size or Thumbnail images
> Reprocess all of your slide show's images
>
> And lots more, including a comprehensive manual and free
tech support.
> $95
>
> --
> Al Sparber - PVII
>
http://www.projectseven.com
> Extending Dreamweaver - Nav Systems | Galleries |
Widgets
> Authors: "42nd Street: Mastering the Art of CSS Design"
>
>
>
> -
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.
Maybe you are looking for
-
My iTunes library is larger than my mini will hold, so iTunes created a "selection" for it, which I have been able to edit. However, I can't figure out how to move playlists to the mini - it seems as though the "selection" overrides playlists. Also,
-
Hi Gurus, We are running application on Oracle 10g RAC with ASM storage (NETAPPS) on IBM machine with Windows 2003 64-bit OS. Planning to upgrade the storage, note that the new storage is EMC. Please kindly help me with moving the database from one s
-
Hi , I am facing problems in working with partial processing BPEL Processes. I am able to work with this in a Standalone / sinlge node SOA Environment , but the process fails in Clustered environment . Any one faced similar problem , is there any sol
-
InDesign CS5.5 crashes at launch in specific user account
restarted in safe boot - repaired permissions - deleted .plist file. App launches when logged in as a different user. what next?
-
Hello Gurus, I have following three question about active and inactive program: (1) what is the difference for active program and inactive program ? (2) I wonder if there are inactive and active version for all program ? (3)