Insert collapsible panel in Spry menu
Hi,
Can a collapsible panel be inserted into a Spry menu.
When clicked, I would like one of my menu items to slide open exposing another menu. Kind of a sub catagory of the menu item.
Sorry for the poor discription.
Thanks
Dennis
I think that an accordion will serve you purpuse better. Have a look at the following
<!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>Old English Sheepdog Club of America</title>
<link href="/css/oescaHRC.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div class="header"><img src="images/header_03.gif" alt="OESCA Banner" width="789" height="239" />
<!-- end .header --></div>
<div class="sidebar1">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="http://www.oldenglishsheepdogclubofamerica.org/" title="OESCA home page">Home - OESCA</a></div>
<div class="AccordionPanelContent"><!-- no content --></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="index.php" title="OES Health home page">Home - OES Health</a></div>
<div class="AccordionPanelContent"><!-- no content --></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><!-- no link just open panel -->Cerebellar Abiotrophy Center</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="#" title="CA Infected Dogs">CA Infected Dogs</a></li>
<li><a href="#" title="Video's of Infected Dogs">Video's of Infected Dogs</a></li>
<li><a href="#" title="CA Articles">CA Articles</a></li>
</ul>
</div>
</div>
</div>
<img src="images/animations/32402508.gif" width="130" height="182" alt="Vet Dog" /><br />
<!-- end .sidebar1 --></div>
<div class="content">
<!-- begin .content -->
<h1>OES Health & Open Health Registry</h1>
<h1>The Official Online Resource...<br />
Promoting the Health & Welfare of the OES</h1>
<h2>from the OESCA Health & Research Committiee</h2>
<br />
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<!-- end .content -->
</div>
<div class="footer"> This site belongs to the Old English Sheepdog Club of America, Inc. <br />
No part can be linked to or copied without express permission of the Old English Sheepdog club of America, Incorporated<br />
<br />
Web Design by Idea Patio Creative Services
<!-- end .footer --></div>
<!-- end .container --></div>
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
// the event listener to override the default tab behaviour when clicked
Spry.$$('.Accordion a').addEventListener('click',function(){return window.location = this.href;},true);
</script>
</body>
</html>
The above is only an example to give you an idea of what the outcome can be when using an accordion. You will still need to tweak your CSS to suit.
I hope this helps.
Ben
Similar Messages
-
Spry collapsible panel with spry data
I have created a spry collapsible panel and wanted to put
srpy data in it, to dynamically load.
i also want to hide the entire panel if no data is available.
It will show the data, but the click to open/close does not
work.
here is the code.I have made some progress, thanks, however im still getting
some odd formatting issues, for example, the 1st panel shows with
different design to the rest of the panels.
this is my code;
<div id="region" spry:region="ds1">
<div id="repeat" spry:repeat="ds1">
<div id="CollapsiblePanel{ds_RowID}"
class="CollapsiblePanel">
<div class="CollapsiblePanelTab"
tabindex="{ds1::ds_RowID}"> <h1>{title} - last amended
{amended}</h1></div>
<div
class="CollapsiblePanelContent"><strong>{message}</strong>
Added by <strong>{owner}</strong> on
<strong>{added} </strong>(REF:
<strong>{id}</strong>) <a href="/service/index.asp"
target="_self">View full details</a></div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel{ds_RowID} = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel{ds_RowID}");
//-->
</script>
As you can see, I am inserting {ds_RowID} in the variable
name, in order for the panels to operate independantly, however
have I coded it correctly? -
Insert layout 'collapsible panel groups' on DW Spry common view
Hello,
I am using CS4 for Windows and frequently use the 'collapsible panel groups'. The only way I can use this at the moment is when in code, and pasting the <div id="CollapsiblePanelGroup" class="CollapsiblePanelGroup"> but I often miss out one of the divs which screws with my life.
At the moment all I have on the insert menu is Menu Bar / Tabbed Panel / Accordian / Collapsible Panel .. and on the 'Spry common tab', the addition of Spry Tooltip.
Is there a way to add an option for 'collapsible panel groups' to the insert menu (and even the spry common use tab) so it includes all the necessary code and asks you how many panels you want, etc, etc?
Thanks!No
Unless you know code DW extensions, but thats a whole different subject -
Need help with spry collapsible panel (menu)
I learn as I go when I created my website http://www.invitation-fascination.com/shapes.html and so far I've created a page with 13 spry collapsible panels- I think it came out pretty well. Now this is what I want to add to the page:
I want to create a selector (drop down) menu above the panels with the option to select any one of the 13 panels.
Once selected it will move directly to that panel and open it.
I've tried the piselect thing and with the "open" and "close" button that will programatically open the panels, but what I want is for the panel to be selected from the menu and then the page goes directly to that panel and it then opens.
Is there a way this can be done? Please help
I'm really not that good at this stuff- please be easy with your response- thank youHave a look at the last example http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Gramps -
Spry Collapsible Panel problem when previewing in web browser
Hello.
I have inserted a spry collapsible panel into my website, made ZERO adjustments to any of the scripting or even css styling, and previewed the panel in my Safari browser. It does not seem to be working correctly. I've attached a couple of images showing what the panel looks like in the browser. My site is not published yet, so I cannot give out the url.
Is something wrong with the js file? I tried the panel earlier on a different site on the same computer and it was working fine.
the "Tab" menu text does not fit inside the grey box. Everything collapses fine, however, the gray box is too thin for the text. I've tried adjusting it in the CSS sheet, but it doesn't seem to change anything.
This is the panel in the collapsed state. It looks bad. I know it's not supposed to work like this.
When I preview the site in "live view" everything works fine...
// SpryCollapsiblePanel.js - version 0.8 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
// * Redistributions of source code must retain the above copyright notice,
// this list of conditions and the following disclaimer.
// * Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
// * Neither the name of Adobe Systems Incorporated nor the names of its
// contributors may be used to endorse or promote products derived from this
// software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.CollapsiblePanel = function(element, opts)
this.element = this.getElement(element);
this.focusElement = null;
this.hoverClass = "CollapsiblePanelTabHover";
this.openClass = "CollapsiblePanelOpen";
this.closedClass = "CollapsiblePanelClosed";
this.focusedClass = "CollapsiblePanelFocused";
this.enableAnimation = true;
this.enableKeyboardNavigation = true;
this.animator = null;
this.hasFocus = false;
this.contentIsOpen = false;
this.openPanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_DOWN;
this.closePanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_UP;
Spry.Widget.CollapsiblePanel.setOptions(this, opts);
this.attachBehaviors();
Spry.Widget.CollapsiblePanel.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.CollapsiblePanel.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.CollapsiblePanel.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.CollapsiblePanel.prototype.hasClassName = function(ele, className)
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
return false;
return true;
Spry.Widget.CollapsiblePanel.prototype.setDisplay = function(ele, display)
if( ele )
ele.style.display = display;
Spry.Widget.CollapsiblePanel.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.CollapsiblePanel.prototype.onTabMouseOver = function(e)
this.addClassName(this.getTab(), this.hoverClass);
return false;
Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(e)
this.removeClassName(this.getTab(), this.hoverClass);
return false;
Spry.Widget.CollapsiblePanel.prototype.open = function()
this.contentIsOpen = true;
if (this.enableAnimation)
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, true, { duration: this.duration, fps: this.fps, transition: this.transition });
this.animator.start();
else
this.setDisplay(this.getContent(), "block");
this.removeClassName(this.element, this.closedClass);
this.addClassName(this.element, this.openClass);
Spry.Widget.CollapsiblePanel.prototype.close = function()
this.contentIsOpen = false;
if (this.enableAnimation)
if (this.animator)
this.animator.stop();
this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, false, { duration: this.duration, fps: this.fps, transition: this.transition });
this.animator.start();
else
this.setDisplay(this.getContent(), "none");
this.removeClassName(this.element, this.openClass);
this.addClassName(this.element, this.closedClass);
Spry.Widget.CollapsiblePanel.prototype.onTabClick = function(e)
if (this.isOpen())
this.close();
else
this.open();
this.focus();
return this.stopPropagation(e);
Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e)
this.hasFocus = true;
this.addClassName(this.element, this.focusedClass);
return false;
Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e)
this.hasFocus = false;
this.removeClassName(this.element, this.focusedClass);
return false;
Spry.Widget.CollapsiblePanel.KEY_UP = 38;
Spry.Widget.CollapsiblePanel.KEY_DOWN = 40;
Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e)
var key = e.keyCode;
if (!this.hasFocus || (key != this.openPanelKeyCode && key != this.closePanelKeyCode))
return true;
if (this.isOpen() && key == this.closePanelKeyCode)
this.close();
else if ( key == this.openPanelKeyCode)
this.open();
return this.stopPropagation(e);
Spry.Widget.CollapsiblePanel.prototype.stopPropagation = function(e)
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers = function()
var tab = this.getTab();
if (!tab)
return;
var self = this;
Spry.Widget.CollapsiblePanel.addEventListener(tab, "click", function(e) { return self.onTabClick(e); }, false);
Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e); }, false);
Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e); }, 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.CollapsiblePanel.addEventListener(this.focusElement, "focus", function(e) { return self.onFocus(e); }, false);
Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "blur", function(e) { return self.onBlur(e); }, false);
Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "keydown", function(e) { return self.onKeyDown(e); }, false);
Spry.Widget.CollapsiblePanel.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.CollapsiblePanel.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.CollapsiblePanel.prototype.attachBehaviors = function()
var panel = this.element;
var tab = this.getTab();
var content = this.getContent();
if (this.contentIsOpen || this.hasClassName(panel, this.openClass))
this.addClassName(panel, this.openClass);
this.removeClassName(panel, this.closedClass);
this.setDisplay(content, "block");
this.contentIsOpen = true;
else
this.removeClassName(panel, this.openClass);
this.addClassName(panel, this.closedClass);
this.setDisplay(content, "none");
this.contentIsOpen = false;
this.attachPanelHandlers();
Spry.Widget.CollapsiblePanel.prototype.getTab = function()
return this.getElementChildren(this.element)[0];
Spry.Widget.CollapsiblePanel.prototype.getContent = function()
return this.getElementChildren(this.element)[1];
Spry.Widget.CollapsiblePanel.prototype.isOpen = function()
return this.contentIsOpen;
Spry.Widget.CollapsiblePanel.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.CollapsiblePanel.prototype.focus = function()
if (this.focusElement && this.focusElement.focus)
this.focusElement.focus();
Spry.Widget.CollapsiblePanel.PanelAnimator = function(panel, doOpen, opts)
this.timer = null;
this.interval = 0;
this.fps = 60;
this.duration = 500;
this.startTime = 0;
this.transition = Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition;
this.onComplete = null;
this.panel = panel;
this.content = panel.getContent();
this.doOpen = doOpen;
Spry.Widget.CollapsiblePanel.setOptions(this, opts, true);
this.interval = Math.floor(1000 / this.fps);
var c = this.content;
var curHeight = c.offsetHeight ? c.offsetHeight : 0;
this.fromHeight = (doOpen && c.style.display == "none") ? 0 : curHeight;
if (!doOpen)
this.toHeight = 0;
else
if (c.style.display == "none")
// The content area is not displayed so in order to calculate the extent
// of the content inside it, we have to set its display to block.
c.style.visibility = "hidden";
c.style.display = "block";
// Clear the height property so we can calculate
// the full height of the content we are going to show.
c.style.height = "";
this.toHeight = c.offsetHeight;
this.distance = this.toHeight - this.fromHeight;
this.overflow = c.style.overflow;
c.style.height = this.fromHeight + "px";
c.style.visibility = "visible";
c.style.overflow = "hidden";
c.style.display = "block";
Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start = function()
var self = this;
this.startTime = (new Date).getTime();
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop = function()
if (this.timer)
clearTimeout(this.timer);
// If we're killing the timer, restore the overflow property.
this.content.style.overflow = this.overflow;
this.timer = null;
Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation = function()
var curTime = (new Date).getTime();
var elapsedTime = curTime - this.startTime;
if (elapsedTime >= this.duration)
if (!this.doOpen)
this.content.style.display = "none";
this.content.style.overflow = this.overflow;
this.content.style.height = this.toHeight + "px";
if (this.onComplete)
this.onComplete();
return;
var ht = this.transition(elapsedTime, this.fromHeight, this.distance, this.duration);
this.content.style.height = ((ht < 0) ? 0 : ht) + "px";
var self = this;
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
Spry.Widget.CollapsiblePanelGroup = function(element, opts)
this.element = this.getElement(element);
this.opts = opts;
this.attachBehaviors();
Spry.Widget.CollapsiblePanelGroup.prototype.setOptions = Spry.Widget.CollapsiblePanel.prototype.setOptions;
Spry.Widget.CollapsiblePanelGroup.prototype.getElement = Spry.Widget.CollapsiblePanel.prototype.getElement;
Spry.Widget.CollapsiblePanelGroup.prototype.getElementChildren = Spry.Widget.CollapsiblePanel.prototype.getElementChildren;
Spry.Widget.CollapsiblePanelGroup.prototype.setElementWidget = function(element, widget)
if (!element || !widget)
return;
if (!element.spry)
element.spry = new Object;
element.spry.collapsiblePanel = widget;
Spry.Widget.CollapsiblePanelGroup.prototype.getElementWidget = function(element)
return (element && element.spry && element.spry.collapsiblePanel) ? element.spry.collapsiblePanel : null;
Spry.Widget.CollapsiblePanelGroup.prototype.getPanels = function()
if (!this.element)
return [];
return this.getElementChildren(this.element);
Spry.Widget.CollapsiblePanelGroup.prototype.getPanel = function(panelIndex)
return this.getPanels()[panelIndex];
Spry.Widget.CollapsiblePanelGroup.prototype.attachBehaviors = function()
if (!this.element)
return;
var cpanels = this.getPanels();
var numCPanels = cpanels.length;
for (var i = 0; i < numCPanels; i++)
var cpanel = cpanels[i];
this.setElementWidget(cpanel, new Spry.Widget.CollapsiblePanel(cpanel, this.opts));
Spry.Widget.CollapsiblePanelGroup.prototype.openPanel = function(panelIndex)
var w = this.getElementWidget(this.getPanel(panelIndex));
if (w && !w.isOpen())
w.open();
Spry.Widget.CollapsiblePanelGroup.prototype.closePanel = function(panelIndex)
var w = this.getElementWidget(this.getPanel(panelIndex));
if (w && w.isOpen())
w.close();
Spry.Widget.CollapsiblePanelGroup.prototype.openAllPanels = function()
var cpanels = this.getPanels();
var numCPanels = cpanels.length;
for (var i = 0; i < numCPanels; i++)
var w = this.getElementWidget(cpanels[i]);
if (w && !w.isOpen())
w.open();
Spry.Widget.CollapsiblePanelGroup.prototype.closeAllPanels = function()
var cpanels = this.getPanels();
var numCPanels = cpanels.length;
for (var i = 0; i < numCPanels; i++)
var w = this.getElementWidget(cpanels[i]);
if (w && w.isOpen())
w.close();
})(); // EndSpryComponentI have inserted a spry collapsible panel into my website, made ZERO
adjustments to any of the scripting or even css styling
That is good, that means that I have a local copy of the scripting and css files eliminating the need to attach the code to a post.
Is something wrong with the js file? I tried the panel earlier on a
different site on the same computer and it was working fine
The fact that it works on a different site means that something is correct. My assumption is that the scripting and css files are doing their job correctly and to answer your question regarding the js file, no.
Having eliminated the Spry original JavaScript and CSS files as being the culprits, there must be a problem with the rest of the site, incorrect HTML, other interfering JavaScript or CSS.
I can keep guessing, but only those persons that are privy to your code can give you any positive input. Please find a way to upload your files so that we can see the code in context.
To this end, screen captures do not assist in solving the problem, they only add to others' amusement at seeing the problem.
Ben
PS I forgot to say, welcome to our community and yes I am a cynical old codger, sorry. -
How do I add a spry Collapsible Panel Group?
How do you add a spry Collapsible Panel Group? When I go to
the Insert -> Spry there is only a Spry Collapsible Panel
option, not group. Do I have to download an update? Is there
something wrong with my install?
I appreciate any help.Could someone at least tell me if they are able to add a Spry
Collapsible Panel Group from the Insert -> Spry menu? -
Spry Collapsible panel - open and closed default question...
I am using a Spry Collapsible panel in a vertical nav menu (DW CS4) and it's in a template for my site. I want it to be closed as default on the Home page, but when a visitor clicks to open it and selects their option, I would like it to remain open on the selected page - Is there a way to do this?
Thank you all!
AzaCheck out the examples on this page: http://www.spry-it.com/examples/spry-widget-cookie-history/#collapsiblepanel
-
Spry collapsible panel - repeating region
Hi,
I'm trying to make a repeating region that contains a spry
collapsable panel.
The problem is that i need to develop a way to automatically
increase the ID of the spry panel.
The problem I am encountering is that only the first
Collapsible Panel works properly. The remainder are displaying the
data, but will not open and close when their tabs are clicked. It
appears that all are being repeated as
id="CollapsiblePanel1".
Does anyone have a way to increment the Tab & Content
ID's?
On another forum, somebody has suggested using the following
PHP - although having never used PHP before, I am uncertain as to
where I insert this into my code:bump
-
Spry Collapsible Panel at bottom of page - how to make the browser scrolldown automatically
The question is -
i have a collapsible panel at the bottom of my page that I'm using as a footer menu.
It is 200px tall. The visitor clicks on "FIND OUT MORE", then the panel opens 200px tall.
I want the viewing area of browser to focus on the content of this panel, and automatically scroll down 200px to accomodate the new real estate at the bottom of the page.
Now they click on it, but then have to manually scroll down.
How can I do this? What do I add to the Spry Collapsible Panel js scripts?
I tried using a tag at the bottom of the 200px but can't get it to work correctly.
Dreamweaver CS5.
thanksI have been closing IE and reopening it for 7 months now. I don't of any other way to reload an applet.
Jason -
Spry Collapsible Panel Rotation
I have been looking through many tools that have came with Dream Weaver and the spry collapsible panel would look great in my site but im having trouble putting it in the way I would like it to look. Im trying to insert the spry so that the tabs are read verticaly and open horizantaly with all of its contents being able to be read normaly instead of verticaly. What would I have to edit to to do this?
To convert the Spry Collapsible Panel would require a lot of changes in the JS. It is therefore better to find a ready-made solution such as here http://www.portalzine.de/Horizontal_Accordion_Plugin_2/index.html
Gramps -
Spry collapsible panel - panel (link) border issue
Hi folks. I'm new to spry and I'm inserting a spry collapsible panel into a web page in Dreamweaver CS4. It all works fine but i have this very ugly border around the panel tab (the link that you click to open the panel). In frefox its a dotted line and in safari its a blue border. I havent had change to check this in other browsers/platforms. (I'm using a mac) I've read that its an accessabilty thing? which can be overcome in a different way. I have to get rid of this border as it completely spoils the design of the site..
Anyone know how to remove this?
Thanks in advance :-)Hi, I asked that same question a minute ago, then I saw your solution you wrote to someone else previously.
Works for me too!
Thanks for solving it!
Here is another question if you can help...
I currently have ">>read more" at the end of the text in my top content tab panel, so the user knows to click and read more in a lower panel.
I want that ">>read more" text to disappear when it is clicked and lower content section is open.
And then a "read less" to appear so user knows to click the top tab content to close the bottom panel.
Can this be done using this Spry Collapsible technique?
Thanks! -
Spry Collapsible Panel animation not working
I've inserted a spry collapsible panel into a web page and it works fine when I preview it. But when I upload it to the server the animation does not work in both Safari and Firefox (haven't tried any other browsers). The panel is just static, showing the tab and the panel is open showing the content. It is supposed to be closed by default.
I've added CSS styles but I've also tried it with the default CSS and it didn't work then either.
Both the .css and .js files that were saved in the SpryAssets folder have been uploaded to the server in the same location as the webpage.
I'm working on a Mac and CS4.
URL is www.alpinism.com/New/about.htmlThanks. That didn't resolve my issues unfortunately and the corrections it was suggesting started interfering with other functions on the page so I've gone back to square one, deleted the Spry collapsible panel and inserted javascript from http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm that does the same thing and seems to work in Safari and Firefox. Just need to check in IE but I expect this is going to be the best solution for me.
-
Question about Spry Collapsible Panel
Hey guys my question is that I have a PSD sliced and imported into Dreamweaver and I was wondering if it was possible to have a Spry Collapsible Panel drop down from a button I designed in Photoshop and brought into dreamweaver? Basically I want a content area to drop down when that button is clicked and I figured a Spry Collapsible Panel might be able to accomplish that. I hope I'm explaining this clearly enough, I'm not very experienced with Dreamweaver. Thanks!
Definitely possible.
You should first import the image into DW.
Insert > Spry > Spry Collapsible Panel
It'll insert a demo panel.
You'll then have to move your image <img src..> into the default first div under spry collapsible as follows:
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0"><img src="location-to-your-image.jpg" width="100" height="50" /></div>
<div class="CollapsiblePanelContent">Content</div>
</div>
You'll basically be removing 'TAB' from here to replace it with your img src tag.
Your HTML should look like this:
<!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>Collapsible Test</title>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0"><img src="location-to-your-image.jpg" width="100" height="50" /></div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
//-->
</script>
</body>
</html>
Do note that you'll have to copy the supporting spry files to your server for this to work. By default, DW will place them into your project folder once you insert the spry collapsible panel. -
Spry collapsible panel open by default
Hi there,
I've done a couple of sites where the left nav bar is a
series of
collapsible panels, each one housing links to products within
a specific
line. Would it be possible to insert code somewhere to get
one of the panels
open by default when you open a certain page, ie if you open
the 'suncare'
page the 'suncare' panel is open on load. I read something
about this on the
Adobe documentation but when I tried it it did't work.
It needs to be code somewhere on the page that interacts with
the spry
panel, I can't put it on the panel itself as I'm using a SSI
to insert the
nav bar into dozens of pages.
Many thanks...Check out the examples on this page: http://www.spry-it.com/examples/spry-widget-cookie-history/#collapsiblepanel
-
DW crashes when attempting to insert another collapsible panel
Hello all, please be patient with me as it is my first post...i am trying to insert another collapsible panel into my content div and my Dreamweaver CS5 has crashes multiple times...here are my codes:
forgive me if i am adding too much, the address is: http://www.crestars.com/accordion.html
i have a lightbox inserted into my first panel...i'm just trying to add another panel for a different set of pictures.
<!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>Martine & Dewaine's pictures</title>
<link href="css/chinesecrestedatcrestars.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<!--[if IE]><script type="text/javascript" src="dmx/lib/excanvas-compressed.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="dmx/widgets/Lightbox/styles/default/style.css" />
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="dmx/dmx.core.js"></script>
<script type="text/javascript" src="dmx/widgets/Lightbox/dmx.lightbox.js"></script>
</head>
<body>
<div id="wrapper"> <!-- #BeginLibraryItem "/Library/crestars_navigation_menu.lbi" --><img src="pictures/banner/banner.png" width="1000" height="200" alt="Chinese Cresteds at Crestars" /><!-- #BeginLibraryItem "/Library/chinese_crested_navbar.lbi" -->
<div id="SofteryMenu" style="position:relative; top:0; visibility: visible; z-index: 100;">
<object id="sf_menu" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100%" height="25">
<param name="movie" value="SofteryMenus/sf6menu119.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="FlashVars" value="flashlet={_bgPicture:'NA',_googleDomain:'http://www.google.com',_googleSearch:false,_mainButtonHeight:25,_mainButtonTextColor:#E7E9 EC,_mainFont:'Tahoma',_mainFontSize:12,_mainHighlightColor:#999999,_mainTextHighlightColor :#13133C,_menuAlign:'center',_menuColor:#737373,_menuLeftMargin:90,_menuMinimalWidth:493,_ menuRightMargin:100,_menuTopMargin:0,_searchFieldColor:#ffffff,_searchFieldWidth:70,_searc hInputTextColor:#666666,_searchVariable:'searchText',_subButtonHeight:20,_subButtonTextCol or:#E7E9EC,_subFont:'Tahoma',_subFontSize:12,_subHighlightColor:#999999,_subMenuColor:#737 373,_subShowSpeed:20,_subTextHighlightColor:#13133C,_yourDomain:'NA',autosize:true,needSea rch:false,navigationTree:['Mainbut1:Home;http://www.crestars.com;_top','Mainbut2:About Crestars *amp* Us;;','_subbuton1:Crestars Belief;chinese_crested_about_crestars.html;_parent','_subbuton2:Martine *amp* Dewaine;about_dewaine_and_martine.html;_parent','_subbuton3:Contact;mailto:[email protected]?subject=I visited your website and;_top','Mainbut3:General Information;;_parent','_subbuton1:FAQ\'s;chinese_crested_faq.html;_parent','_subbuton2:Ge neral Overview;chinese_crested_info.html;_parent','_subbuton3:Common Health Issues;chinese_crested_common_health_issues.html;_parent','_subbuton4:Exercise;chinese_cr ested_exercising.html;_parent','_subbuton5:Other Links;other_links.html;_parent','Mainbut4:Grooming;;_parent','_subbuton1:Read First;chinese_crested_grooming.html;_parent','_subbuton2:A Hairy Hairless;chinese_crested_grooming_hairy_hairless.html;_parent','_subbuton3:A Medium Hairy Hairless;chinese_crested_grooming_medium_hairy.html;_parent','_subbuton4:A True Hairless;chinese_crested_grooming_true_hairless.html;_parent','_subbuton5:A Powderpuff;chinese_crested_grooming_powderpuff.html;_parent','_subbuton6:Taping Puppy Ears;chinese_crested_ear_taping.html;','_subbuton7:Grooming Supplies;chinese_crested_grooming_supplies.html;','Mainbut5:Our Males;;_parent','_subbuton1:Bootz;chinese_crested_bootz.html;_parent','_subbuton2:Bugzy;c hinese_crested_bugzy.html;_parent','_subbuton3:Oreo;chinese_crested_oreo.html;_parent','Ma inbut6:Our Females;;_parent','_subbuton1:Candy;chinese_crested_candy.html;','_subbuton2:Didi;chinese _crested_didi.html;','_subbuton3:Goldie;chinese_crested_goldie.html;','_subbuton4:Hottie;c hinese_crested_hottie.html;','_subbuton5:Izzee;chinese_crested_izzee.html;_parent','_subbu ton6:Vickie;chinese_crested_vicki.html;','_subbuton7:Zeekitah;chinese_crested_zeekitah.htm l;','Mainbut7:New Generation;;','_subbuton1:Puppies;chinese_crested_puppies.html;','_subbuton2:Show Hopefuls;chinese_crested_hopefuls.html;','_subbuton3:Available;chinese_crested_available. html;','Mainbut8:What\'s New...;crestars_latest_news.html;','Mainbut9:New owners...;chinese_crested_new_owners.html;','Mainbut10:Rainbow Bridge;chinese_crested_rainbow_bridge.html;_parent']}" />
<embed id="sf_menu2" src="SofteryMenus/sf6menu119.swf" wmode="transparent" quality="high" flashvars="flashlet={_bgPicture:'NA',_googleDomain:'http://www.google.com',_googleSearch:false,_mainButtonHeight:25,_mainButtonTextColor:#E7E9 EC,_mainFont:'Tahoma',_mainFontSize:12,_mainHighlightColor:#999999,_mainTextHighlightColor :#13133C,_menuAlign:'center',_menuColor:#737373,_menuLeftMargin:90,_menuMinimalWidth:493,_ menuRightMargin:100,_menuTopMargin:0,_searchFieldColor:#ffffff,_searchFieldWidth:70,_searc hInputTextColor:#666666,_searchVariable:'searchText',_subButtonHeight:20,_subButtonTextCol or:#E7E9EC,_subFont:'Tahoma',_subFontSize:12,_subHighlightColor:#999999,_subMenuColor:#737 373,_subShowSpeed:20,_subTextHighlightColor:#13133C,_yourDomain:'NA',autosize:true,needSea rch:false,navigationTree:['Mainbut1:Home;http://www.crestars.com;_top','Mainbut2:About Crestars *amp* Us;;','_subbuton1:Crestars Belief;chinese_crested_about_crestars.html;_parent','_subbuton2:Martine *amp* Dewaine;about_dewaine_and_martine.html;_parent','_subbuton3:Contact;mailto:[email protected]?subject=I visited your website and;_top','Mainbut3:General Information;;_parent','_subbuton1:FAQ\'s;chinese_crested_faq.html;_parent','_subbuton2:Ge neral Overview;chinese_crested_info.html;_parent','_subbuton3:Common Health Issues;chinese_crested_common_health_issues.html;_parent','_subbuton4:Exercise;chinese_cr ested_exercising.html;_parent','_subbuton5:Other Links;other_links.html;_parent','Mainbut4:Grooming;;_parent','_subbuton1:Read First;chinese_crested_grooming.html;_parent','_subbuton2:A Hairy Hairless;chinese_crested_grooming_hairy_hairless.html;_parent','_subbuton3:A Medium Hairy Hairless;chinese_crested_grooming_medium_hairy.html;_parent','_subbuton4:A True Hairless;chinese_crested_grooming_true_hairless.html;_parent','_subbuton5:A Powderpuff;chinese_crested_grooming_powderpuff.html;_parent','_subbuton6:Taping Puppy Ears;chinese_crested_ear_taping.html;','_subbuton7:Grooming Supplies;chinese_crested_grooming_supplies.html;','Mainbut5:Our Males;;_parent','_subbuton1:Bootz;chinese_crested_bootz.html;_parent','_subbuton2:Bugzy;c hinese_crested_bugzy.html;_parent','_subbuton3:Oreo;chinese_crested_oreo.html;_parent','Ma inbut6:Our Females;;_parent','_subbuton1:Candy;chinese_crested_candy.html;','_subbuton2:Didi;chinese _crested_didi.html;','_subbuton3:Goldie;chinese_crested_goldie.html;','_subbuton4:Hottie;c hinese_crested_hottie.html;','_subbuton5:Izzee;chinese_crested_izzee.html;_parent','_subbu ton6:Vickie;chinese_crested_vicki.html;','_subbuton7:Zeekitah;chinese_crested_zeekitah.htm l;','Mainbut7:New Generation;;','_subbuton1:Puppies;chinese_crested_puppies.html;','_subbuton2:Show Hopefuls;chinese_crested_hopefuls.html;','_subbuton3:Available;chinese_crested_available. html;','Mainbut8:What\'s New...;crestars_latest_news.html;','Mainbut9:New owners...;chinese_crested_new_owners.html;','Mainbut10:Rainbow Bridge;chinese_crested_rainbow_bridge.html;_parent']}" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100%" height="25"> </embed>
</object>
</div>
<!-- #EndLibraryItem --><!-- #EndLibraryItem -->
<div id="content">
<div id="housesurroundings" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0"> Check out our house surroundings </div>
<div class="CollapsiblePanelContent"><a href="pictures/flower1.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/flower1.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/dahlia1.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/dahlia1.jpg" width="66" height="100" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/flower2.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/flower2.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/flower3.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/flower3.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/flower4.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/flower4.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard1.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard1.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard2.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard2.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard3.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard3.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard4.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard4.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard5.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard5.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard6.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard6.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard7.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard7.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard8.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard8.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard9.jpg" title="My pet rock all the way from Quebec!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard9.jpg" width="100" height="66" alt="My pet rock all the way from Quebec!" border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard10.jpg" title="Garden Flowers " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard10.jpg" width="100" height="66" alt="Garden Flowers " border="0" /></a> <a href="pictures/aboutus/around_the_house/frontyard11.jpg" title="Cute little birdhouse that nobody wants to use..." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/frontyard11.jpg" width="66" height="100" alt="Cute little birdhouse that nobody wants to use..." border="0" /></a> <a href="pictures/aboutus/around_the_house/lightning.jpg" title="Lightning show from our back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lightning.jpg" width="100" height="66" alt="Lightning show from our back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/lightning1.jpg" title="Lightning show from our back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lightning1.jpg" width="100" height="66" alt="Lightning show from our back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/lightning2.jpg" title="Lightning show from our back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lightning2.jpg" width="100" height="66" alt="Lightning show from our back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/lilly2.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lilly2.jpg" width="100" height="66" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/lilly3.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lilly3.jpg" width="100" height="66" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/lilly4.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/lilly4.jpg" width="100" height="66" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/rose1.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/rose1.jpg" width="100" height="69" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/rose2.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/rose2.jpg" width="100" height="66" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/rose3.jpg" title="Garden Flowers" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/rose3.jpg" width="100" height="70" alt="Garden Flowers" border="0" /></a> <a href="pictures/aboutus/around_the_house/firepit1.jpg" title="Enjoying a nice fire by the fire pitt with family" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/firepit1.jpg" width="100" height="75" alt="Enjoying a nice fire by the fire pitt with family" border="0" /></a> <a href="pictures/aboutus/around_the_house/dewaine_enjoying_the_sun_on_front_deck.jpg" title="Nothing beats relaxing on the front deck..." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/dewaine_enjoying_the_sun_on_front_deck.jpg" width="100" height="66" alt="Nothing beats relaxing on the front deck..." border="0" /></a> <a href="pictures/aboutus/around_the_house/dewaine_oreo_bugzy_hammack.jpg" title="Dewaine enjoying himself in the hammeck with a couple of dogs" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/dewaine_oreo_bugzy_hammack.jpg" width="100" height="66" alt="Dewaine enjoying himself in the hammeck with a couple of dogs" border="0" /></a> <a href="pictures/aboutus/around_the_house/dewaine_oreo_front_deck1.jpg" title="Someone needs to patrol what's going on...Dewaine and Oreo take their job seriously " rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/dewaine_oreo_front_deck1.jpg" width="100" height="68" alt="Someone needs to patrol what's going on...Dewaine and Oreo take their job seriously " border="0" /></a> <a href="pictures/aboutus/around_the_house/firepit2.jpg" title="Let the fire rise!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/firepit2.jpg" width="66" height="100" alt="Let the fire rise!" border="0" /></a> <a href="pictures/aboutus/around_the_house/fire1.jpg" title="Fire pitt" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/fire1.jpg" width="100" height="66" alt="Fire pitt" border="0" /></a> <a href="pictures/aboutus/around_the_house/seeds_on_table2.jpg" title="Seeds from our back yard Manitoba Maple on a piece of bark" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/seeds_on_table2.jpg" width="100" height="66" alt="Seeds from our back yard Manitoba Maple on a piece of bark" border="0" /></a> <a href="pictures/aboutus/around_the_house/backyard_figurines1.jpg" title="Cute little figurines in the back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/backyard_figurines1.jpg" width="100" height="65" alt="Cute little figurines in the back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/backyard_figurines2.jpg" title="Cute little figurines in the back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/backyard_figurines2.jpg" width="100" height="66" alt="Cute little figurines in the back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/backyard_figurines3.jpg" title="Cute little figurines in the back yard" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/backyard_figurines3.jpg" width="100" height="66" alt="Cute little figurines in the back yard" border="0" /></a> <a href="pictures/aboutus/around_the_house/seeds_falling_off_tree.jpg" title="Seeds falling off the Manitoba Maple Tree" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/seeds_falling_off_tree.jpg" width="100" height="66" alt="Seeds falling off the Manitoba Maple Tree" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow1.jpg" title="Ok nobody is going to BBQ today..." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow1.jpg" width="100" height="66" alt="Ok nobody is going to BBQ today..." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow2.jpg" title="Snow pilling up on front deck" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow2.jpg" width="100" height="66" alt="Snow pilling up on front deck" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow3.jpg" title="Snow fall" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow3.jpg" width="100" height="66" alt="Snow fall" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow4.jpg" title="Yuck who wants this much snow!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow4.jpg" width="100" height="66" alt="Yuck who wants this much snow!" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow5.jpg" title="Yuck who wants this much snow!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow5.jpg" width="100" height="66" alt="Yuck who wants this much snow!" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow7.jpg" title="Yuck who wants this much snow!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow7.jpg" width="100" height="66" alt="Yuck who wants this much snow!" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow8.jpg" title="Looks fun?...just for 2 minutes!" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow8.jpg" width="100" height="66" alt="Looks fun?...just for 2 minutes!" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow9.jpg" title="Making a snow angel" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow9.jpg" width="100" height="65" alt="Making a snow angel" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow10.jpg" title="Snow angle snow print" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow10.jpg" width="100" height="66" alt="Snow angle snow print" border="0" /></a> <a href="pictures/aboutus/around_the_house/snow11.jpg" title="BRRRR..." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow11.jpg" width="67" height="100" alt="BRRRR..." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow12.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow12.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow13.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow13.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow14.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow14.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow15.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow15.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow16.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow16.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow17.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow17.jpg" width="75" height="100" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow18.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow18.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow19.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow19.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow20.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow20.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow21.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow21.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snow22.jpg" title="Pretty yes...but...." rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snow22.jpg" width="100" height="75" alt="Pretty yes...but...." border="0" /></a> <a href="pictures/aboutus/around_the_house/snowgarlandfence.jpg" title="Cool looking garland" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/snowgarlandfence.jpg" width="100" height="66" alt="Cool looking garland" border="0" /></a> <a href="pictures/aboutus/around_the_house/sunset_in_backyard_tree1.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/sunset_in_backyard_tree1.jpg" width="100" height="66" alt="Fall funky colors from the sunset" border="0" /></a> <a href="pictures/aboutus/around_the_house/sunset_in_backyard_tree2.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/sunset_in_backyard_tree2.jpg" width="100" height="66" alt="Fall funky colors from the sunset" border="0" /></a> <a href="pictures/aboutus/around_the_house/sunset_in_backyard_tree3.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/sunset_in_backyard_tree3.jpg" width="66" height="100" alt="Fall funky colors from the sunset" border="0" /></a> <a href="pictures/aboutus/around_the_house/tree_seeds_on_table2.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/tree_seeds_on_table2.jpg" width="100" height="66" alt="Fall funky colors from the sunset" border="0" /></a> <a href="pictures/aboutus/around_the_house/tree_seeds_on_table.jpg" title="Seeds from our Manitoba Maple tree" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/tree_seeds_on_table.jpg" width="100" height="66" alt="Seeds from our Manitoba Maple tree" border="0" /></a> <a href="pictures/aboutus/around_the_house/woodsplitter1.jpg" title="Preparing for the winter" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/woodsplitter1.jpg" width="100" height="66" alt="Preparing for the winter" border="0" /></a> <a href="pictures/aboutus/around_the_house/woodsplitter2.jpg" title="Fall funky colors from the sunset" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/woodsplitter2.jpg" width="100" height="66" alt="Fall funky colors from the sunset" border="0" /></a><a href="pictures/aboutus/around_the_house/cloud_shadow_1.jpg" title="Weird forming clouds...the shadow was behind" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/cloud_shadow_1.jpg" width="100" height="56" alt="Weird forming clouds...the shadow was behind" border="0" /></a><a href="pictures/aboutus/around_the_house/cloud_shadow_2.jpg" title="Weird cloud" rel="dmxLightbox" rev="{group:'AroundOurHouseGarden', preset:'thin'}"><img src="pictures/thumbs/cloud_shadow_2.jpg" alt="Weird cloud" width="100" height="56" border="0" /></a><a href="pictures/thumbs/thumbs/laughing_cloud.jpg" title="" rel="dmxLightbox" rev="{group: 'AroundOurHouseGarden', preset: 'thin'}"><img src="pictures/thumbs/thumbs/thumbs/laughing_cloud.jpg" width="100" height="66" alt="" border="0" /></a></div>
</div>
<p> </p>
</div>
<!-- #BeginLibraryItem "/Library/chinesecrestedfooter.lbi" -->
<style type="text/css">
<!--
.smallercentered {
text-align: center;
font-size: 12px;
-->
</style>
<span class="smallercentered">The entire Site is Copyrighted©, 2010. Designed by owner, <a href="mailto:[email protected]?subject=I visited your website and..." target="_blank">Martine Couture</a></span><!-- #EndLibraryItem --> </div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("housesurroundings", {contentIsOpen:false});
</script>
</body>
</html>Depending on the development environment, I can imagine that DW has a problem.
My systems is Windows7, i7 processor, 8GB ram and it does take a while for DW to add an extra collapsible panel.
Possible solutions
use accordion panels
hand code the second collapsible panel
use a Collapsible Panel Group
To hand code all you have to do is add the following to your document, in the appropriate places amking sure that the ID corresponds.
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
and
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
For more info on a Collapsible Panel Group see here http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
Gramps
Maybe you are looking for
-
Safari hangs and times out on pages with CGI scripts
I don't know if this is a Safari problem or a system wide problem. I running OS 10.4.9 with Safari 2.0.4. When I try to load a page that begins with "http://cgi." it begins to load but hangs and eventually times out. Has anyone else run into this pro
-
Delivery line item dose not exists
Dear All, User have created a outbound delivery and perform Post good issue.No billing document has been created yet. Somehow lineitem does not exists in the delivery document however Material Document for Good issue exists with reference to Delivery
-
Regarding ACH payment !!!!!!!!!!
One of our user created an ACH file and sent it to the bank for payment.He created this ACH file in one bank but by mistake sent it to other bank for payment.The payment has been cleared . Because of this my bank balances have changed. Could anyone h
-
Sorry if this has been posted elsewhere.... Does anyone know if there is a way of setting up iphoto 09 for a macbook pro with mac os x 10.6.3 so that it can point to all the photos and folders stored in the mac hd/user/pictures folder. I am strugglin
-
Key swap problem using Microsoft keyboard with my Mac
The keyboard used with my TiBook is an old (circa 1997) ergonomic "Natural Keyboard" made by Microsoft. I'd like to fix the problem of having the "Command" key function swapped with the "Alt" key. Downloading and installing the latest Microsoft keybo