Spry TabbedPanels - panel shifts left in IE when hovering on tabs (only)

I've added tabbed panels to a fairly tight vertical space on a page. It pretty much works, except:
1) When the page loads in IE. After the page loads I can do anything on the page except hover over (or try to use) the tabs. The moment the cursor goes over the tab space, the entire panel shifts left 20 or 30 pixels. I have added "overflow:hidden" to the Spry CSS where I can, but the tab issue remains. When I check the code in Dreamweaver, it does NOT identify any related browser compatibility issues.
2) When the page loads in Safari, the entire page content shifts down 10-20 pixels (but functions normally).
URL is http://www.inkwellxwords.com/iwxsamples.html
Thanks in advance for any advice,
B

Had to replace the code on the site since it was live.
Here's the core code from the one that's still goofy in Dreamweaver design mode, and on the live site, but not in Dreamweaver preview (goes with inkwell.css on www.inkwellxwords.com)
<body>
<div id="wrapper"> 

<div id="sidebar"><img src="images/men_home.jpg" alt="samples, subscribe, syndicate, onion av club, books, about, news" usemap="#Map" /></div>

<div id="header"><img src="images/slideboxtem2.jpg" alt="Ink Well Xwords" /></div>

<div id="pagemain">
    <p>Hi, there! Welcome to the electronic home of <strong>Ink Well </strong>xwords, a puzzle empire conquered in 2004 by <strong>Ben Tausig</strong>, and presently administered by his fifteen cruel and ungrateful sons. </p>
    <p>Ink Well appears each Wednesday in alternative weeklies throughout North America, and is also available by email (sign up through the "subscribe" tab on the right) as well as supposedly on devices like the iPhone if you know how to work those.</p>
    <p>Closely associated with Ink Well is the <a href="http://www.avclub.com/" target="_blank">Onion AV Club</a> crossword, also edited by Tausig on a weekly basis, and written by some extremely spoiled puzzle celebrities. Basically what happens is someone brings a new puzzle to Tausig in his soot tub and he screams because they're letting in light and then the puzzle just ends up running as is. You also get this AV Club xword as a COOL SPECIAL gift if you "subscribe."</p>
    <p>But hey, don't take my word for it: look around the site yourself - there's a lot of fun to be had here! You can subscribe, as I already said; you can find out how to run Ink Well in your paper or on your website (guaranteed to triple revenue and promote synergy by 90); you can see some samples; and you can buy books and merchandise. I also do wedding, bar mitzvah, and break-up puzzles!</p>
    <p>See ya soon! Oh, yeah, and <a href="mailto:[email protected]">drop me a note</a><a href="benmenu.html"></a> anytime! </p>
    <p>- Ben Tausig (via Power of Attorney)</p>
</div>
<div class="clearfloat"></div>

<div id="footer">
<table width="820" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td width="72"> </td>
    <td width="748" bgcolor="#CC3300"> </td>
</tr>
</table>
</div>
</div>

Similar Messages

Tooltip when hovering over tabs

I find that the tooltip which appears when hovering over a tab gets in the way of my workflow sometimes. For example, I'm unable to quickly access options on the Application or Options bars when it's present. This generally seems to be the case when I've got the tabs snapped to the Application Frame. Is it possible to turn the tooltips for the tabs off?

Thanks, I do see the "Show Tool Tips" option but I was hoping there might be some way to avoid turning off all the tool tips (I rely on them every now and then when I need a reminder of what an option or tool is for). I can probably just deal with it since it's a small nuisance. It's mostly an issue with moving the cursor horizontally out of the tooltip and that tooltip not disappearing immediately.
Vid of tooltip behavior
http://s87.photobucket.com/albums/k156/darthsauce/mac/?action=view&current=tooltip.flv
Please note: I'm purposely stopping on the tab in the video to force it to show. Most of the time I've just inadvertently paused on the tab while on my way to access an option on one of the bars.

Embedded iFrame in Tabbed Panel loses ability to scroll when clicking between tabs.

I've created an iFrame within a Tabbed Panel to display content that scrolls independently. This works properly when the page is first loaded but if I switch between tabs and return to the original tab, the content is fixed within the frame. Zooming the browser window or reloading the page restores the scrolling ability. Example is below.
http://cmtesting.businesscatalyst.com

Update. This seems to be an issue with Safari. I tested it on a Windows 7 box with Chrome and it works perfectly.

How can I make open link in new tab cause tabs to the new tab's left to shift left rather than tabs to the new tabs right to shift right?

When I follow a link in a new tab, the tab opens to the right of the current tab as expected. To make room for the tab on the tab bar, any tabs to the right of the current tab shift right. If there is room for all the tabs on the bar, this behavior is perfect. If however, there isn't sufficient room, some tabs must be hidden to the right or the left of the visible bar. Currently the rightmost visible tab is hidden. This behavior is suboptimal for me because I very often want to switch to tabs on the far right while I very seldom want to switch to tabs on the far left. Is there is a way to cause tabs to the left of the new tab to shift left thereby hiding the leftmost visible tab? Thanks

I'm not aware of a way to make Firefox hide the first tab instead of the last tab; maybe there is an add-on with that feature.
There is a hidden setting to open the new tab at the end of the bar instead of next to the page you're reading. Then, of course, you won't have this problem. Instead, you'll have the problem that it's hard to figure out which tab had that link in it. In case you want to try it out, here's how.
(1) In a new tab, type or paste '''about:config''' in the address bar and press Enter. Click the button promising to be careful.
(2) In the search box above the list, type or paste '''tabs''' and pause while the list is filtered
(3) Double-click the '''browser.tabs.insertRelatedAfterCurrent''' preference to switch it from true to false (it should turn bold)
You're done here. You can keep it open in case you hate the change and watch to switch it right back. In that case, double-click again to switch it back to true.

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.

DW CS6 - Spry collapsible panels - How to have panel close when you click away from it?

I know typically onmouseout is used to close other items, but I could not figure it out with the spry collapsible panel. I have the panel opening onclick and closing onclick, but I would really like for it to close when you click anything else on the page outside of the panel.
Thank you!

Sorry, I did not mean other collapsing panels close when you click away from it. I simply meant in general for the closing after clicking away function, you can use onmouseout. I was working on something with collapsing panels and I wanted it to show the information when you clicked on it, but when you click on another panel, they both remain open. I really want both to close. I believe accordion does this, but not quite what I am looking for either.
Here is a better example of what I would prefer: Houston Public Library
If you visit their page and click "Find it" a box pops down with information and then when you click anywhere else on the screen, it closes that box. When you click "Research," it closes the "Find It" box and opens the "Research" box. There is likely a much better way to do this, but I am pretty new to this.
Any assistance is very much appreciated.
Thank you!

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 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 class="MAINbtn" style="margin-left:400px"><a href="interested.asp">Interested ?</a></li></ul>
and remove the unused CollapsilbePanel1 constructor
<script type="text/javascript">

Gramps

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">

</script>
</head>
<body>
<div id="wrapper">
<div id="outsideedgewrapper">
    <div class="outsidebox" id="outsidebox">
      <div class="container">
        <div class="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 & Credentials(Pdf )</strong></a></li>
<li><a href="philosophyofregeneration.html"><strong>Sunrider Philosophy of Regeneration™</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>
        </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>"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."<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>“An Ounce of Prevention”</em></span> can be found in the <em>“News Review Extra” </em>and the <em>"Northeast Chronicle"</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, "An Ounce of Prevention" 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 />
                  </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 & Paper Web Design </a><br />
Copyright © 2011 An Ounce of Prevention Natural Health Center - All rights reserved 
          </h5>
          </div>
        </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

Google map data not displaying correctly in a spry collapsible panel

I created a spry collapsible panel into which I've put google map data. The map placed in the collapsible panel looks and functions OK but shows my location in the wrong place. I tested it by putting exactly the same google map elsewhere on my page and this time it displays my location correctly. Here is a link to my test page: http://www.cornucopia-design.co.uk/BatimTest/map3test.html . Mouse over the 'view our location' link to see the incorrectly located map. It places my location in the top left corner rather than in the centre. When you click on google's 'view larger map' links, they both then display the location identically. Anyone have any ideas about what's going on here? Is the coding for the collapsible panel doing something to the google code? I'm not a great code expert so any help would be greatly appreciated. Thanks

Hello, thank you for your helpful comments. At least I now won't waste any more time trying to get this to work if it just won't... I'll just have to display the map in another way.
Just a point about your suggestion of offsetting - I had thought of that but if I did that, when someone clicked on the map, they would be taken to the wrong place as, as I said, even though it displays incorrectly in my panel, the data IS correct and therefore correctly linked back to google maps.
Thanks anyway.

Spry Sliding Panel bugs with Flash SWF, iFrames, CSS background images

Greetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
Chris

Greetings,
I'm working on a site right now that is build with Spry 1.6
Sliding Panels. On the home panel I have integrated a looping SWF,
and scrolling iFrames on the Overview panel. After extensive
research on these forums, I'm still scratching my head at a few
bugs listed below:
• Firefox (MAC v2.0.0.14)
- The SWF on the home panel doesn't hide properly when
sliding to a different panel. I have set 'wmode opaque' parameters
to the flash file, but this seems to have not resolved the issue.
- Additionally, I've noticed that sometimes the SWF will not
finish sliding into the correct position when clicking to the home
panel (the SWF will stop sliding several pixels left of the
original positioning).
- The SWF (which happens to be a loop animation) resets every
time the home panel is visited. In my testing, this does not happen
in any other browser.
- On the Overview panel, scrolling iFrames are used on the
"Staff Profiles". These iFrames don't hide properly when clicking
through other panels, as the scroll bars are still viewable.
- Overall, the sliding animation is a bit choppy compared to
all other browsers. I can live with this, but I wonder if I have
improper code somewhere?
• Opera (MAC v9.27)
- Same issue as above concerning the fact that the SWF
appears outside of the sliding panel view port.
• IE 6
- CSS background images flash during the sliding panel
animation.
* Site page links *
Main URL
Home
Page iFrame
Overview
Page iFrame
* CSS *
Main
site-wide CSS
Sliding
Panels CSS
* Scripts *
Sliding
Panels Sript
Any suggestions, pointers would be much appreciated!
Cheers,
Chris

Spry collabsible panel add button or text link to get panel to close

I have a spry collapsible panel here www.AmericanContractorsExchange.com. I am using the col-panel to hide what wil become the login area. I would like to add both "text" and buttons to various parts of the page to open or close the panel.
Example one. When user clicks on the " Log in or Register" text "top" the panel opens.
There option is to login
Register
or click to close panel... button.
( I wish to know how to program the buttion function to close the panel please)
Example 2: Within the other spry widiget on the page, the spry tabbed panels, is the "content". I would like to have "text" or a "button" that a user could click to have the
"spry collapsible" panel drop down / open so they can login or register.
Thanks Gramps...what is the address will send box of cigars!
S Valencia

Try the following
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<div>
<p><a href="#" onclick="CollapsiblePanel1.open();">REGISTER</a></p>
<input name="myButton" type="button" value="Close Panel" onclick="CollapsiblePanel1.close(); return false;">
</div>
<div id="TabbedPanels1" class="TabbedPanels" style="margin-top: 20px;">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent"><p><a href="#" onclick="CollapsiblePanel1.open();">REGISTER</a></p></div>
    <div class="TabbedPanelsContent"><input name="myButton" type="button" value="Close Panel" onclick="CollapsiblePanel1.close(); return false;"></div>
</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Please wait with the shipment, I am currently living at a transitory address; my impending address will be c/o Heaven
Gramps

Spry horizontal panels

hi there - i am using a spry horizontal panel that is showing
below the div it is contained in. the page is:
page in
question the widget is supposed to be inside of the rounded
green rectangle but is appearing below it. any ideas??? also, is
there a way to make the widget not "jump" in height as the content
is loaded from one tab to the next? or is this not possible using
ems? thanks for any help!
-lisa

quote:
Originally posted by:
gemelli2
BTW - the containing div's css is : #main_info_donations {
border: 2px solid #94CA41; margin: 6px 20px 0px 180px; padding: 2px
0px 2px 20px; width: 75%; height: auto; visibility: visible; }
and the widgets container is: .TabbedPanels { margin: 4px
auto auto; padding: 0px; float: left; clear: none; width: 95%;
overflow: visible; visibility: visible; height: 100%;
thanks for any help!
-lisa

Spry Collapsable Panel Question

I just started using Spry and was wondering if there is an
way to have a plus sign display next the the title when the panel
is contracted but then when somebody clicks to open the content
area it would change to a minus symbol?
Thanks for your help in this matter.

Thanks... This mostly worked. The problem is that those
panel's which are preset to be open show the plus sign when the
should show the minus. As you can see here
http://www.ourbombers.com.
The minus only shows when you actually click to open a panel.
here is my css code.
.CollapsiblePanel {
margin-bottom: 2px;
padding: 0px;
border-left: solid 1px #CCC;
border-right: solid 1px #999;
border-top: solid 1px #999;
border-bottom: solid 1px #CCC;
/* This is the selector for the CollapsiblePanelTab. This
container houses
* the title for the panel. This is also the container that
the user clicks
* on to open or close the panel.
* The name of the class ("CollapsiblePanelTab") used in this
selector is not necessary
* to make the widget function. You can use any class name
you want to style an
* CollapsiblePanel panel tab container.
.CollapsiblePanelTab {
font: bold 0.7em sans-serif;
background-color: #DDD;
border-bottom: solid 1px #CCC;
margin: 0px;
padding: 2px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
background-image: url(images/plus.gif);
background-position: right;
background-repeat: no-repeat;
/* This is the selector for a CollapsiblePanel's Content
area. It's important to note that
* you should never put any padding on the content area
element if you plan to
* use the CollapsiblePanel's open/close animations. Placing
a non-zero padding on the content
* element can cause the CollapsiblePanel to abruptly grow in
height while the panels animate.
* The name of the class ("CollapsiblePanelContent") used in
this selector is not necessary
* to make the widget function. You can use any class name
you want to style a
* CollapsiblePanel content container.
.CollapsiblePanelContent {
margin: 0px;
padding: 0px;
font-size: 12px;
/* An anchor tag can be used inside of a CollapsiblePanelTab
so that the
* keyboard focus ring appears *inside* the tab instead of
around the tab.
* This is an example of how to make the text within the
anchor tag look
* like non-anchor (normal) text.
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
/* This is an example of how to change the appearance of the
panel tab that is
* currently open. The class "CollapsiblePanelOpen" is
programatically added and removed
* from panels as the user clicks on the tabs within the
CollapsiblePanel.
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #EEE;
background-image: url(images/minus.gif);
background-position: right;
background-repeat: no-repeat;
/* This is an example of how to change the appearance of the
panel tab as the
* mouse hovers over it. The class "CollapsiblePanelTabHover"
is programatically added
* and removed from panel tab containers as the mouse enters
and exits the tab container.
.CollapsiblePanelTabHover, .CollapsiblePanelOpen
.CollapsiblePanelTabHover {
background-color: #CCC;
/* This is an example of how to change the appearance of all
the panel tabs when the
* CollapsiblePanel has focus. The "CollapsiblePanelFocused"
class is programatically added and removed
* whenever the CollapsiblePanel gains or loses keyboard
focus.
.CollapsiblePanelFocused .CollapsiblePanelTab {
background-color: #3399FF;

Spry accordion panel not lining up with top of viewport in FF3.5

I have created a new web page using spry accordion for the first time on my site. In IE8 all works perfectly - opening and closing and moving between tabs is smoothly done. My first tab opens a very long panel (way over the web browser's height), and scrolling down through the text brings us to the second tab. I disabled fixed panel heights - these expand fully when the relevent header is clicked. Clicking the second tab in IE8 closes the first panel smoothly, opens the second panel smoothly and leaves the browser sitting so the 2nd tab is in line with the top of the browser window. Perfect!
In FF3.5, following the same routine, with the first panel open, and scrolling down to the 2nd tab - click this and it closes/opens the panels, but is very jerky doing this and you are left with the browser window looking at the very bottom of the web page, instead of at the top of the panel.
I'd appreciate any advice on this before I give up and move to JQuery. Is this a bug?
**UPDATE** I tried Jquery and the results are worse! It doesnt even line up in IE8.
Please feel free to check out the code here:
http://www.pjamedia.com/?page=modeladvice
Any help would be very much appreciated.
Thanks, Paul A

so take an anchor at the begining of the Accordian panle, link the <a> tag to the anchor point.
<script type="text/javascript">
function goToAnchor() {
location.href = "#unilist";
</script>
paste this script in <head> tag.
<a name="unilist" id="unilist"></a> // add an anchor tag before the accordion panel.
                  <div id="Accordion1" class="Accordion">
                    <div class="AccordionPanel">
                      <div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, Ohio*</a></div>
                      <div class="AccordionPanelContent">content</div></div>
<div class="AccordionPanel">
                      <div class="AccordionPanelTab" ><a onclick="goToAnchor();"> University, oiowa*</a></div>
                      <div class="AccordionPanelContent">content</div></div>
</div>

Spry TabbedPanels - panel shifts left in IE when hovering on tabs (only)

Similar Messages

Maybe you are looking for