Spry Collapsible Panel question

I have a file online that uses a Spry collapsible panel.  It can be viewed here.  It works beautifully.  For one exception.  The logo is supposed to be up some 10 pixels or so.  The CollapsiblePanelTab is occupying the space.
So I took the CSS for the CollapsiblePanelContent and moved it up 1em <margin-top: -1em;>.  That put my logo where it should be.  Problem is that when I do this the transparent portion of the logo covers most of the "Hide / Show Logo."  It leaves only a sliver of the right of the tab.  This file can be viewed here.
The logo consists of the image and the bar underneath it.  Yes, I could crop the image down to the central part, making it narrower, but I do want the bar which is wider.  And I want the bar to disappear when the Spry is activated so that rules out having it as a separate image..
Even better I would like when the panel is open for the "Hide / Show Logo" to be just above the bar.  I tried that and it threw everything out of kilter.
Any suggestions!  Thank you in advance for any responses.

Beth,
   Thought of it, did it, didn't work.
   If I remove the logo from the HTML of the page and instead place it in the "background-image" of the CollapsiblePanelContent CSS I get disastrous results.  The panel collapses (because there is nothing in the DIV) and the CSS placed background image disappears.  Following this thread of thought I could try a much narrower transparent image with nothing in it, just the transparency, and see how that might work.  This would keep the DIV open to the desired height.  Then I could place the actual, true image in the "background-image" of the DIV CSS.
   For the moment I am going to see if someone perhaps comes up with a solution other than this.  The chief reason is that I would lose my dynamic linking of the PSD to the placed image.  This file will be a template of thousands of pages spanning many years so the logo will change appropriately.
   This method, of using the image in the CSS itself, also causes some alignment problems within the DIV.  My background-image does not center properly.  It does so when placed in the HTML of the document.
   Getting back to the original problem, which seems to be the transparency of the image and its width, I don't see any reason why I could not break my image into two pieces and place each one within the CollapsiblePanelContent.  Each image in their own DIV contained within the panel content.  I could then make the logo part separate from the bar but still have the bar collapse.  The logo portion could then be much narrower.  I think I will try this method and see what transpires.  I could then keep my dynamically linked images.  Theoretically!!!
   Thanks for letting me bounce ideas off a fellow thick skull.  Not seeing the trees for the forest and all that.
Regards,
Wayne

Similar Messages

  • 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 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!
    Aza

    Check out the examples on this page: http://www.spry-it.com/examples/spry-widget-cookie-history/#collapsiblepanel

  • Link to tabs in spry collapsible panel work in IE-8; not Firefox or Safari

    I have little experience with Spry. I've asked my question on the user forum in Dreamweaver several times with no response. I am hoping that someone somewhere in the Adobe community can help me resolve this issue.
    I created links from the top of a page to the tabs of a spry collapsible panel underneath.
    In IE-8, on one page, with a small collapsiable panel, clicking the link creates a rollover effect on the appropriate panel. This effect works wonderfully for my purposes.On another page, with a long collapsible panel, clicking the link jumps the user to the panel AND creates a rollover effect. Perfect.
    In Firefox and Safari, clicking the link does nothing. If I right-click the link in Firefox, I create a duplicate of the page.
    I am using Windows XP and Dreamweaver CS4
    http://www.judydiamondstone.net/Writing.html
    click any of the links in the first section of the page
    Thanks.

    Arnout, Thank you so much for the guidance!
    My code now looks like this:
    (Click the first tab
    below to open; click to close.)
    but it still doesn't work
    (I still like the error effect in IE!)
    Do I need to add to the CSS or JS script that comes with the spry widget?
    I am accessing all the tutorials I can find, including a very clear
    explanation of event handlers in a Safari online search but I'm obviously
    missing one or more basic concepts.
    Page with new code on the
    elements:
    http://www.judydiamondstone.net/Writing.html

  • Google map inside the spry collapsible panel

    So this time I've bumped into interesting 'bug'. I've placed the google map inside the spry collapsible panel. Panel is set to the closed mode on load of page. When I open the tab, map appears, but address marker is hidden behind the top left corner. If I place the same map outside the collapsiple panel it renders all well.
    So my  question is whether there is any way around this issue. When I know where the marker is hidden I can simply move the map and see it, but customer who's not aware of the problem will see only blank map with not marked address which is not acceptable.
    cheers,
    Simon

    Sure mate. Here you go:
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
                  <div class="CollapsiblePanelTab" tabindex="0">SHOW MAP</div>
                  <div class="CollapsiblePanelContent">
                  <cfmap  width="242" height="200" zoomlevel="12" name="mainMap" markercolor="333444" showscale="false"
    typecontrol="none"  showcentermarker="true" centeraddress="#get_event.event_address1#, #get_event.event_address2#, #get_event.event_city#,#get_event.event_county#, #get_event.event_postcode#, #get_event.event_country#  "
    ></cfmap>
                  </div>
                </div>
    And this bit goes at the bottom of the code :
    <script type="text/javascript">
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
      </script>
    And that would be the preview that I get once the panel is open:
    And that is the preview of how it should look:
    As you can see the map marker sticks to the top left corner. I was wondering whether there is any way to re-focus it once the panel is open.
    cheers,
    Simon

  • 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.
    thanks

    I 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 - 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 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();
    })(); // EndSpryComponent

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

  • Jqzoom widget inside spry collapsible panel

    I am attempting to place the jqzoom widget inside a spry collapsible panel. The wodget works fine in the html page created for it but will not work in the collapsible oanel page. I believe all documents are in the appropriate folder.
    Here is the code for the page:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <link href="twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
    <LINK rel=stylesheet type=text/css href="css/jquery.jqzoom.css">
    <style type="text/css">
    #leftbox {
    float: left;
    width: 70%;
    margin-left: 5px;
    #rightbox {
    float: right;
    width: 25%;
    </style>
    <script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
    <script src="js/jquery-1.3.2.js" type="text/javascript"></script>
    <script src="js/jquery.jqzoom1.0.1.js" type="text/javascript"></script>
    <style type="text/css">
    a:hover {
    color: #C36;
    a:active {
    color: #999;
    #wrapper #outsideedgewrapper #outsidebox .container .content #CollapsiblePanel1 .CollapsiblePanelTab strong {
    text-align: left;
    #wrapper #outsideedgewrapper #outsidebox .container .content p strong {
    color: #333;
    #wrapper #outsideedgewrapper #outsidebox .container .content p {
    color: #000;
    #topofpage {
    width: 100px;
    font-size: small;
    float: right;
    </style>
    <link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    function MM_goToURL() { //v3.0
      var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
      for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    </script>
    <style type="text/css">
    a:visited {
    color: #333;
    a:hover {
    color: #C36;
    a:active {
    color: #999;
    .outsidebox {
    width: 1120px;
    margin-right: auto;
    margin-left: auto;
    background-repeat: no-repeat;
    background-position: left 90px;
    </style>
    <script src="javascript/jquery-1.4.3.min.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
    <style type="text/css">
    </style>
    <link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    h2 {
    font-size: x-large;
    #wrapper #outsideedgewrapper #outsidebox .container .footer h5 a {
    text-align: center;
    #wrapper #outsideedgewrapper #outsidebox .container .footer h5 a {
    </style>
    <link href="2LinkColor.css" rel="stylesheet" type="text/css" />
    <link href="css/jqzoom.css" rel="stylesheet" type="text/css" />
    <script type="text/xml">
    <!--
    <oa:widgets>
      <oa:widget wid="2148522" binding="#iridology2" />
    </oa:widgets>
    -->
    </script>
    </head>
    <body>
    <div id="wrapper">
      <div id="outsideedgewrapper">
        <div class="outsidebox" id="outsidebox">
          <div class="container">
            <div class="header"><!-- end .header -->
              <p><em><a name="topofpage" id="topofpage"></a></em></p>
    <p> </p>
              <p> </p>
              <p> </p>
              <p><br />
                <br />
              </p>
            </div>
             <div class="sidebar1">
              <p> </p>
              <ul class="nav">
                <li><a href="index.html"><strong>Home</strong></a></li>
                <li><a href="PDf/GAIL SMOLINSKIS EDUCATION - 2010.pdf" target="_new"><strong>Dr. Gail's Education &amp; Credentials(Pdf )</strong></a></li>
    <li><a href="philosophyofregeneration.html"><strong>Sunrider Philosophy of Regeneration&#8482;</strong></a></li>
                <li><a href="Homeopathy.html"><strong>Homeopathy</strong></a></li>
                <li><a href="LowIntensitylasertherapy.html" target="_new"><strong> Low Intensity Laser Therapy</strong></a></li>
              </ul>
    <strong>Dr. Gail Smolinski, DNM®</strong><br />
               Doctorate of Natural Medicine®<br />
               <br />
               Email<br />
               <a href="mailto:[email protected]" class="sidebarlinkcolor">[email protected]</a> <br />
               <br />
               <span class="white"><strong>PH:306-783-1261</strong></span><br />
               Fax:
               306-783-2450<br />
               Box 1625<br />
               Yorkton, SK<br />
               S3N 3L2<br />
      <br />
               <strong>Clinic Hours</strong><br />
               Monday - Friday<br />
               9am - 6pm
               <br />
               <br />
               <span id="sprytrigger1"><strong>Coming Events</strong></span><br/>
              </p>
            </div>
            <!-- end .sidebar1 --></p>
            <div class="content">
              <div>
                <h2>An Ounce of Prevention Natural Health Center</h2>
              </div>
              <div id="rightbox"><img src="images/gaigrey3.jpg" width="186" height="295" align="top" id="Image2" /></div>
              <p><em>&quot;The doctor of the future will give no medicine, but will interest her or his patients in the care of the human frame, in a proper diet, and in the cause and prevention of disease.&quot;<br />
              Thomas A. Edison  (1847 - 1931)</em></p>
              <p>Dr.  Gail Smolinski, a <span class="focusedtext">Doctor of Natural Medicine</span>, has a natural  health clinic at Yorkton, Saskatchewan.       
              </p>
              <p>Dr. Gail  Smolinski is a member in good standing of the <br />
              <span class="focusedtext">Examining Board of Natural Practitioners of Canada</span> (EBNMP) <a href="http://www.ebnmp.com" title="http://www.ebnmp.com/" target="_blank"><strong>www.ebnmp.com</strong></a>,  the <span class="focusedtext">Saskatchewan Association of Doctors  of Natural Medicine (SADNM) </span><a href="http://www.sadnm.com/" title="http://www.sadnm.com/" target="_blank"><strong>www.sadnm.com </strong></a>and the <span class="focusedtext">International Organization of Nutritional  Consultants</span> (IONC) <a href="http://www.ionc.org" title="http://www.ionc.org/" target="_blank"><strong>www.ionc.org</strong></a></p>
              <p>Doctors of  Natural Medicine utilize treatments and lifestyle changes that facilitate the  natural healing process, recognizing the inherent self-healing process in every  person.<em> <a href="http://www.sadnm.com/" target="_new"><strong>More information....</strong></a></em></p>
              <p>In her natural  health clinic, Dr. Gail offers individual health consultations, Low Intensity  Laser Therapy, detoxification foot baths and bio-energetic therapies, as well  as a wide variety of professional health products.</p>
              <p>Dr. Gail has her <span class="focusedtext">Doctor of  Naturopathy</span> degree and is <span class="focusedtext">B</span><strong><span class="focusedtext">oard Certified in both Traditional Naturopathy and  Nutritional Wellness</span>.</strong></p>
              <p>She is a <span class="focusedtext">certified Low  Intensity Laser Therapist</span>, offering patients safe and effective Low  Intensity Laser therapy for soft tissue and sports injuries, wound healing,  dermatological conditions and a variety of musculoskeletal problems. <a href="http://www.bioflexlaser.com/patients/" target="_new"><strong><em>More  information...</em></strong></a></p>
              <p>She is a <span class="focusedtext">Master Herbalist</span>, specializing in Sunrider  Chinese food grade herbs which promote regeneration of the body. Dr. Gail also  utilizes Gemmotherapy and Aromatherapy.       </p>
              <p>Dr. Gail is also a Registered Nutritional Consultant,  a professional <span class="focusedtext">Homeopath</span> and a <span class="focusedtext">Holistic  Iridologist</span>. </p>
              <p>Her bi-weekly column <span class="CollapsiblePanelClosed"><em>&ldquo;An Ounce of Prevention&rdquo;</em></span> can be  found in the <em>&ldquo;News Review Extra&rdquo; </em>and the <em>&quot;Northeast Chronicle&quot;</em>. </p>
              <p>Dr. Gail is also available  for <span class="focusedtext">public  speaking</span> engagements. She has been the keynote speaker for many  groups, specializing  in topics that address <span class="focusedtext">the body</span> (health and nutrition), <span class="focusedtext">the mind</span> (motivational speaking) and <span class="focusedtext">the  spirit</span> (sharing her Bible-based faith). </p>
              <p><strong>CLINIC SERVICES</strong></p>
              <p>Dr. Gail is  available for individual health consultations by appointment. She does  nutritional assessments, as well as iridology and homeopathy. Dr. Gail's professional supplements include herbal and homeopathic formulas, Gemmotherapy remedies and therapeutic grade essential oils. She also offers   detoxification footbaths to reduce the load of toxins in the body.</p>
              <p>Although an  in-clinic visit is the most effective, Dr. Gail can also help people who cannot  travel to see her, due to long distances or poor health. In these cases, she  offers telephone assessments to create an appropriate custom-made individual  health program, which is suited to the patient’s particular needs. The required  health supplements can be mailed or shipped by bus, if necessary. </p>
              <p>Gift Certificates are also available.</p>
              <p><strong>FREQUENTLY ASKED QUESTIONS</strong></p>
              <div id="CollapsiblePanel1" class="CollapsiblePanel">
                <div class="CollapsiblePanelTab" tabindex="0">
                  <p><strong><a name="panel1" id="panel1"></a><img src="images/arrow.gif" width="30" height="23" hspace="8" />Can you explain what Homeopathy is all about?</strong></p>
                </div>
                <div class="CollapsiblePanelContent">
                  <p><br />
                    <br />
                  </p>
                  <p>Homeopathy is a  wonderful system of natural medicine which is safe, non-toxic and effective. It  is so safe that expectant mothers and newborn babies can use it, except for a  few specific remedies. </p>
      <p>A homeopathic  remedy contains a very minutely diluted dose of the original medicinal  ingredient, and that is why it is so safe. The higher potencies of a remedy do  not even have any of the original substance in them, only the memory or energy  from it. The purpose of a homeopathic remedy is to give specific information to  the body. Then, the body can use this information to heal and repair.</p>
                  <p>A homeopathic  remedy can be selected <em>according to the  symptoms</em>. It can also be selected <em>according  to the patient’s constitution</em>, which considers many factors about an  individual. </p>
                  <p>Food preferences,  general features, personality and temperament, such as whether he wants to be  left alone or comforted when he does not feel well, what makes his symptoms  better and what makes them worse, even a person’s fears, are considered,  because they are all part of who that unique individual is. A person’s  constitutional remedy will help him with a lot of different symptoms, because  it was selected especially for him.</p>
                  <p>I would not want to be without homeopathic  remedies. You can take them as required, without  worrying about side effects. They can make your life so much more comfortable.  They can be used to stimulate your immune system, so that, eventually, you do  not require them as often, if at all. For example, during allergy season,  people can get a lot of relief from homeopathic formulas for allergies.<br clear="all" />
                  </p>
                  <p>Homeopathic  medicine can also help with mental and emotional symptoms, not only physical  problems. For example, homeopathic remedies can be helpful for those who are  anxious, depressed or even grieving.    <br />
                  <a href="#panel1" class="closepanelbutton" onclick="CollapsiblePanel1.close();MM_goToURL('parent','#panel1');return document.MM_returnValue">Close Panel</a></p>
                  <p> </p>
                </div> 
              </div>
              <div id="CollapsiblePanel2" class="CollapsiblePanel">
                <div class="CollapsiblePanelTab" tabindex="0">
                  <p><strong><img src="images/arrow.gif" alt="" width="30" height="23" hspace="8" />What is Gemmotherapy?</strong></p>
                </div>
                <div class="CollapsiblePanelContent">
                  <p> </p>
                  <p> </p>
                  <p>Gemmotherapy is a branch of phytotherapy (therapy from   plants) that uses freshly- picked buds and young shoots from organic trees and   shrubs to make natural remedies. They are carefully stabilized at harvest to   ensure that no vitamins, minerals, natural plant hormones or nucleic acids are   lost. These remedies are full of the energy and therapeutic properties of the   buds.  They are meticulously prepared in a solution of water, alcohol and   glycerine to extract all their beneficial attributes. </p>
                  <p><a href="#" class="closepanelbutton" onclick="CollapsiblePanel2.close();MM_goToURL('parent','#panel1');return document.MM_returnValue">Close Panel</a></p>
                </div>
              </div>
              <div id="CollapsiblePanel7" class="CollapsiblePanel">
                <div class="CollapsiblePanelTab" tabindex="0">
                  <p><strong><img src="images/arrow.gif" alt="" width="30" height="23" hspace="8" />Why is Gemmotherapy so effective?</strong></p>
                </div>
                <div class="CollapsiblePanelContent">
                  <p> </p>
                  <p>Gemmotherapy is highly effective because the buds and young   shoots contain all the genetic information of the future plant. Since they are   extracts of developing tissues, gemmotherapy remedies combine the properties of   the whole plant, including the flowers, the leaves, the fruits, the sapwood and   the rootlets. Extensive research and clinical studies have been carried out to   identify the properties of different buds and to determine the conditions for   which each one is best used.</p>
                  <p>This explains the wide range of applications and   effectiveness of Gemmotherapy remedies for all ages.</p>
                  <p><a href="#panel1" class="closepanelbutton" onclick="CollapsiblePanel7.close();MM_goToURL('parent','#panel1');return document.MM_returnValue">Close Panel</a></p>
                </div>
              </div>
      <div id="CollapsiblePanel3" class="CollapsiblePanel">
        <div class="CollapsiblePanelTab" tabindex="0">
          <p><strong><img src="images/arrow.gif" alt="" width="30" height="23" hspace="8" id="Image1" />What is Iridology and how does it work?</strong></p>
          </div>
        <div class="CollapsiblePanelContent">
          <p><br />
            <br />
            Iridology is a  fascinating natural tool of health assessment. The more I do iridology, the  more accurate I see that it is!</p>
          <p>Iridology involves  looking into a person’s eyes with a light and magnifying lens. I can do a  health assessment by looking into the colored part of the eyes, which is called  the iris. </p>
          <p>In iridology,  there is a map of the iris, which corresponds to the different organs and      </p>
          <p>structures of the body. Iridology Chart <span class="jqZoomWindow"><a href="jquery-ui-1.7.2/images/BIG_IMAGE.jpg"  title="Iridology" class="iridology2">
            <script type="text/javascript">
    // BeginOAWidget_Instance_2148522: #iridology2
    $(document).ready(function(){
          var options ={
          zoomType: 'standard',
          zoomWidth: 200, 
          zoomHeight: 200,
          xOffset: 10,
          yOffset: 0,
          position: "left" ,
          lens:true,
          lensReset : false,
          imageOpacity: 0.2,
          title : false,
          alwaysOn: false,
          showEffect: 'show',
          hideEffect: 'hide',
          fadeinSpeed: 'medium',
          fadeoutSpeed: 'medium',
          preloadImages :true,
          showPreload: true,
          preloadText : 'Loading zoom',
          preloadPosition : 'center'
          $(".iridology2").jqzoom(options);
    // EndOAWidget_Instance_2148522
            </script>
            <img src="jquery-ui-1.7.2/images/SMALL_IMAGE.jpg" align="left" title="Iridology" /> </a></span>
            <script type="text/javascript">
    // BeginOAWidget_Instance_2148522: #iridology2
    $(document).ready(function(){
          var options ={
          zoomType: 'standard',
          zoomWidth: 200, 
          zoomHeight: 200,
          xOffset: 10,
          yOffset: 0,
          position: "left" ,
          lens:true,
          lensReset : false,
          imageOpacity: 0.2,
          title : true,
          alwaysOn: false,
          showEffect: 'show',
          hideEffect: 'hide',
          fadeinSpeed: 'medium',
          fadeoutSpeed: 'medium',
          preloadImages :true,
          showPreload: true,
          preloadText : 'Loading zoom',
          preloadPosition : 'center'
          $(".iridology2").jqzoom(options);    
    // EndOAWidget_Instance_2148522
            </script>
            </a></p>
    <p><br />
      <br />
      </p>
    <p> </p>
    <p> </p>
    <p> </p>
    <p><br />
      <br />
      <br />
      It can be used to  help determine problem areas in the body, which may have been acquired  genetically. It can also be used to identify areas of congestion and  environmental toxins that have accumulated in the body since birth, such as  liver or kidney toxins. </p>
          <p>For instance, one  of my clients was having continual problems with a sluggish bowel, which was  not improving in spite of my health recommendations for her colon. When I did  an iridology assessment for her, though, I discovered that the problem was  originating in the small intestine. I adjusted her health program accordingly,  and she did much better after that!<br />
            <br />
            <a href="#panel1" class="closepanelbutton" onclick="CollapsiblePanel3.close();MM_goToURL('parent','#panel1');return document.MM_returnValue">Close Panel</a></p>
          </p>
          </div>
      </div>
              <div id="CollapsiblePanel4" class="CollapsiblePanel">
                <div class="CollapsiblePanelTab" tabindex="0">
                  <p><strong><img src="images/arrow.gif" alt="" width="30" height="23" hspace="8" />Can Iridology be used preventatively?</strong></p>
                </div>
                <div class="CollapsiblePanelContent">
                  <p><br />
                    <br />
                  Absolutely! It can  be very valuable for prevention! Let’s say that you are in a canoe, enjoying a  relaxing, peaceful ride down a calm, scenic river on a beautiful summer day.  Meanwhile, I am riding in an airplane, just above the same river, and I can  spot you in your canoe. </p>
                  <p>However, I can  also see that, around the next bend, there is a set of swirling rapids and a  very steep, dangerous waterfall. </p>
                  <p>You have no idea of what you are headed for, but  I can warn you. Fortunately, since we both have cell phones, I can call you  immediately, to warn you of the imminent danger.  You can decide then to pull onto the shore, and check out the rapids before  deciding whether or not to proceed. Or you can decide to turn the canoe around,  and head back the other way. You can also choose to ignore me, of course, but,  no matter what you choose, you will have been warned!</p>
      <p>In Iridology, for  instance, if I see that a person has a congested or toxic bowel, I can advise  him to do a colon cleanse. <a href="PDf/EYE SPY.pdf" target="_new">More information</a><br />
        <a href="#panel1" class="closepanelbutton" onclick="CollapsiblePanel4.close();MM_goToURL('parent','#panel1');return document.MM_returnValue">Close Panel</a></p>
      <p> </p>
                </div>
              </div>
              <div id="CollapsiblePanel5" class="CollapsiblePanel">
                <div class="CollapsiblePanelTab" tabindex="0">
                  <p><strong><img src="images/arrow.gif" alt="" width="30" height="23" hspace="8" />How do you combine the different therapies to help patients?</strong></p>
                </div>
                <div class="CollapsiblePanelContent">
                  <p><br />
                    <br />
                    <br />
                  That’s certainly part  of what makes my approach so effective! I can use Iridology to help pinpoint  the specific problems. Homeopathy and nutrition can be used as assessment tools  as well. It’s like having more than one tool in your tool kit. The more  professional tools one has, the better. </p>
                  <p>This allows me to  create an individualized health plan that incorporates different resources,  including nutritional supplements, essential oils, gemmotherapy formulas and homeopathic  remedies, as required. It is ideal to support the body on 3 different levels -  at the nutritional level, at the cellular level, and at the energetic level.</p>
                  <blockquote>
                    <p><a href="#panel1" class="closepanelbutton" onclick="CollapsiblePanel5.close();MM_goToURL('parent','#panel1');return document.MM_returnValue">Close Panel</a></p>
                    <p> </p>
                  </blockquote>
                </div>
              </div>
              <div id="CollapsiblePanel6" class="CollapsiblePanel">
                <div class="CollapsiblePanelTab" tabindex="0">
                  <p><strong><img src="images/arrow.gif" alt="" width="30" height="23" hspace="8" />Can you give me an analogy to compare our health to?</strong></p>
                </div>
                <div class="CollapsiblePanelContent">
                  <p><br />
                    <br />
                  Sure! Think of  your car. It won’t get you to your destination if you don’t have enough fuel to  get there. And it can’t be polluted fuel or watered down fuel, because that’s  just asking for trouble. Your fuel has to have the right octane rating. </p>
                  <p>Your body is like  a car; it’s your go-mobile! If you don’t supply it with the right fuel  (nutrition),you will lose your  get-up-and-go! When you nourish your body properly, you will naturally tend to  have more energy.  </p>
      <p>Even so, you can  fuel up your car with good quality fuel, but if the fuel pump needs repair,  then it’s still not going to work properly for you. If you have a body part  that needs repair, homeopathy can help. </p>
                  <p>We also give our  cars an oil change on a regular basis. Similarly, we can cleanse, regularly, to  clear out our organs, such as the liver, the kidneys, the skin and the  intestines, of toxins that accumulate over time.</p>
                  <p>We can also use  homeopathic formulas to clean out the receptors of the cells in our bodies,  which is where toxic residues can accumulate. Then, our go-mobiles can run more  efficiently! </p>
                  <p>There is one difference, though. We can trade in  our car, when it gets old and worn out. But, we cannot trade in our bodies! We  get one only, and it needs to last us a lifetime! So we  need to take care of it the best we can! <br />
                    <br />
                  <a href="#panel1" class="closepanelbutton" onclick="CollapsiblePanel6.close();MM_goToURL('parent','#panel1');return document.MM_returnValue">Close Panel</a></p>
                  <p> </p>
                </div>
                <strong><br />
              </strong></div>
      <p><strong>    PATIENT TESTIMONIALS</strong></p>
              <table width="90%" border="0" align="center" cellpadding="10">
                <tr>
                  <td><h5><em>...My acquaintance with Dr. Gail Smolinski happened in two ways. First, through her bi-weekly news column, &quot;An Ounce of Prevention&quot; in the News Review Extra: giving information on healthful living and explaining how our amazing bodies work. Dr. Gail's smiling photo also introduced her to me.
                    My by-mail purchase of a flu kit from Dr. Gail protected me from contracting any of the flu bugs making the rounds this winter. Thanks, Dr. Gail! <br />
                    My second acquaintance with Dr. Gail was a visit to her natural health clinic for treatments. Her smile is sunny and real! She introduced me to homeopathic remedies and the impressive Quantum Biofeedback machine. Dr. Gail is a very encouraging caregiver. I am very pleased to have much-improved  Health and I've also gained a new friend! </em></h5>
                    <h5><em>Sincerely, Shirley L. </em>              _______________________________________________________________</h5>
      <h5><em>...Hi! My name  is Carol. I have IBS (Irritable Bowel Syndrome). IBS controlled my life.</em></h5>
                    <h5><em>Before I  went to Dr. Gail Smolinski, I could not work, go shopping or do things with my  family. But I got mad and took control of the IBS!</em></h5>
                    <h5><em>I called Dr.  Gail Smolinski, DNM. We sat down and we talked about how I felt. She gave me  some natural medicine. I have been on this for about 5 months.</em></h5>
                    <h5><em>I feel so  good about the things I got. The natural medicine has helped me out a lot. I  can go to work without looking for the bathrooms. I can do the things I was  afraid to do! I feel like I’m alive!</em></h5>
                  <h5><em>I went to my  doctor, and it seems they couldn’t help. But Dr. Gail Smolinski helped me.  Thank you, Dr. Gail!  </em></h5></td>
                </tr>
              </table>
              <p> </p>
              <h5 class="fltrt"><a href="#topofpage">Top of Page</a><br />
              <!-- end .content -->        </h5>
            </div>
            <script type="text/javascript">
    var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false, enableAnimation:false});
    var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
    var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen:false});
    var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", {contentIsOpen:false});
    var CollapsiblePanel6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel6", {contentIsOpen:false, enableAnimation:false});
    var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false, enableAnimation:false});
    var CollapsiblePanel7 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel7", {contentIsOpen:false});
            </script>
            <div class="footer">
              <h5 class="footer">Web Design by<a href="http://www.pixelsandpaper.com"> Pixels &amp; Paper Web Design </a><br />
    Copyright © 2011 An Ounce of Prevention Natural Health Center - All rights reserved <!-- end #footer -->
              </h5>
              <!-- end .footer --></div>
            <!-- end .container --></div>
        </div>
      </div>
    </div>
    <div class="tooltipContent" id="sprytooltip1">Meet Dr. Gail for a mini Iridology Session at the Grain Miller's Harvest Showdown in Yorkton, SK - Gallagher Centre- Flexihall - Nov. 2 (4pm to 7:30 pm), Nov. 3,4,5 (1pm to 7:30 pm) </div>
    <script type="text/javascript">
    var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
    </script>
    </body>
    </html>

    With the exeption of images, to add external content to a document you will need to make use of either serverside or clientside code.
    Have a look at the SpryHTMLPanel here http://labs.adobe.com/technologies/spry/samples/htmlpanel/html_panel_sample.html
    Otherwise, please supply a link to your site so that we can come up with alternatives.
    Gramps

  • 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 you

    Have a look at the last example http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
    Gramps

  • Dynamic data in Spry Collapsible Panel

    Hi guys,
    Am trying to get data from a Data Set into the Spry
    Collapsible Panel, with little luck. Have tried the following and
    was wondering if i am doing something wrong?
    <div spry:region="dsProduct">
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
    <div class="CollapsiblePanelTab"
    tabindex="0">{product_name}</div>
    <div
    class="CollapsiblePanelContent">">{product_details}</div>
    </div>
    </div>
    This example displays the field i want from the data set
    {product_name}, but will not collapse open the panel containing
    {product_details}.
    Any suggestions?

    hi Jay,
    will this help you?
    Forum
    thread

  • Help with spry collapsible panel

    I have several spry collapsible panels that I am using for
    navigation and want an open panel to close automatically when a new
    one is opened. Can this be done? I checked the "customuze this
    widget" in the property inspector but does not give any info on the
    behavior of them. I am sure it is in the java code but I am not a
    Java expert by any means.

    Have a look at the last example http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
    Gramps

  • Spry collapsible panel fix for IE

    hey
    anyone out there knows how to fix the spry collapsible panels to work properly on IE ?
    Firefox is perfect  but  they appear and stay open even when clicked
    how could i make them appear closed and open only if clicked, close again when clicked to close? just like firefox
    ( http://www.pupr.edu/template )

    Remove the empty element
    <ul id="MenuBar1" class="MenuBarHorizontal">
      <li class="MAINbtn"><a href="index.asp">Deanship</a></li>
      <li class="MAINbtn"><a href="research.asp">Research</a></li>
      <li class="MAINbtn"><a href="faculty.asp">Faculty</a></li>
      <li class="MAINbtn"><a href="labs.asp">Labs</a></li>
      <li class="MAINbtn"><a href="events.asp">Events</a></li>
      <li class="MAINbtn"><a href="students.asp">Students</a></li>
      <li class="MAINbtn"><a href="Programs2.asp">Programs</a>    </li>
      <!-- <li>
      </li> -->
    <li class="MAINbtn" style="margin-left:400px"><a href="interested.asp">Interested ?</a></li></ul>
    and remove the unused CollapsilbePanel1 constructor
    <script type="text/javascript">
    <!--
    // var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
    var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
    var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
    var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen:false});
    var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", {contentIsOpen:false});
    //-->
    Gramps

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

Maybe you are looking for

  • SSO to external website from portal

    We want to do a single sign on to an external website (non-sap). I know for SAP we can do a logontickets. But for non-sap external websites are there ways to do a SSO? Please help.

  • Warped Text in PS CS6

    I need help in typing text along a curved path in PS CS6.   I have watched and read several on-line tutorials and they all seem to say about the same thing and seem pretty simple.   I create a path using the pen tool.  Next I select the Type tool.  I

  • The same InfoSource in multiple SAP systems?

    Hello, In my BW system I have got a mySAP CRM and a mySAP ERP source system delivering data. But both systems provide the same DataSources. The mySAP CRM system provides sales data and the mySAP ERP system as well. If I put in RSA1 -> Source systems

  • HT201250 time machine halts after 28.7 MB

    time machine is connected to external hard drive. back up starts but after 28.7 MB seems to go dead. nothing happens no more.

  • Using volume control to work with MuVo MP3 Slim

    I have a Audigy 2 ZS board with Creative T7700 speakers which work quite well. I also have a MuVo Slim MP3 player. The question is on the side of the volume control there looks to be a similar insert to a USB port. My instructions say I can use it wi