Make a spry collapsible panel open on hover??

Hi All,
I'm trying to play with the Spry Collapsible Panel and would
like to have it open on hover but not on the on click, I've
attached the standard js code Dreamweaver produces, and would be
very grateful if you could highlight what needs to be
changed,---

http://labs.adobe.com/technologies/spry/articles/tabbed_panel/index.html
See the section titled Open panels programmatically
<li class="TabbedPanelsTab" tabindex="0"
onmouseover="TabbedPanels1.showPanel(0)">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0"
onmouseover="TabbedPanels1.showPanel(1)">Tab 2</li>
Ken Ford
Adobe Community Expert - Dreamweaver
Fordwebs, LLC
http://www.fordwebs.com
"miachu" <[email protected]> wrote in
message news:fvihb0$miq$[email protected]..
> hi there,
>
> did you ever find a solution to this dreamweaver
collapsible panel problem? i
> am having the same problem...i need it to open on hover
instead of click. it
> makes so much more sense for them to have it on
hover/roll over!
>
> help would be much appreciated!
> thanks.
>

Similar Messages

How to make Spry Collapsible Panels open one at a time?

Hello,
I am using CS5 and want to use the spry collapsible panels. What I notice (and I think this wasn't the case in cs3) is that all panels can be open at the same time. I don't want that happen. I only want one panel to be open at a time. If someone clicks on a panel that is closed, I want the current panel to close and the one they clicked on to open. I don't want multiple panels to be opne at once. How can I do this? I am not a web developer by any means, so please be easy on me with code. I think in CS3 it used to work this way. Any help would be appreciated! Thank you in advance!

GRAMPS!! That's it!! It was the accordian panel I had used in the past!!!! Oh, thank you, I was driving myself crazy as to why it wasn't working the way I had remembered!!!!!!!! THANK YOU!!
I was told you would probably help me find the right answer by Hans-g!
Thanks again!

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

Spry collapsible panel open by default

Hi there,
I've done a couple of sites where the left nav bar is a
series of
collapsible panels, each one housing links to products within
a specific
line. Would it be possible to insert code somewhere to get
one of the panels
open by default when you open a certain page, ie if you open
the 'suncare'
page the 'suncare' panel is open on load. I read something
about this on the
Adobe documentation but when I tried it it did't work.
It needs to be code somewhere on the page that interacts with
the spry
panel, I can't put it on the panel itself as I'm using a SSI
to insert the
nav bar into dozens of pages.
Many thanks...

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

How do I make a Spry collapsible panel close by clicking a link in its content?

People don't understand that they have to close a collapsible panel by clicking on the tab. I want to put the word "close" at the end of the content and have the panel slide closed. Example: http://www.canyonranch.com/miamibeach/our_services/

People don't understand that they have to close a collapsible panel by clicking on the tab. I want to put the word "close" at the end of the content and have the panel slide closed. Example: http://www.canyonranch.com/miamibeach/our_services/

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 Panels - Way to set them open only once per visit?

I'm wondering if there is a way to set a Spry Collapsible
Panel to be automatically open on the initial loading of the site,
but as people navigate around the site and back and forth from the
home page, to be able to have it closed on subsequent visits to the
home page.
Right now I have a collapsible panel set to OPEN by default
when someone first hits the home page, but if they navigate around
the site and then click to the home page again, they get the panel
open again. Naturally, that will end up annoying people.
Any suggestions?
Thanks in advance!
Sara

Flash local shared object can help with this. Here is some info:
http://www.bestflashanimationsite.com/tutorials/4/
http://www.permadi.com/tutorial/flashSharedObject/index.html
http://www.kirupa.com/developer/mx/sharedobjects.htm
Best wishes,
Adninjastrator

Spry collapsible panel stays open in Internet Explorer.

I'm trying to use the spry collapsible panel to hide and show inormation, and it will not stay closed. I've used the default closed option in the properties panel, and made sure the eye in design view is closed. Please give some suggestions for correcting this problem.

The out-of-the-box SpryCollapiblePanel works like a charm.
This means that you have altered the HTML, CSS and/or the JS.
Because we are not privy to what you have done, it is not possible to help you find a solution.
I recommend that you upload the site and supply a link to that site.

Spry Collapsible Panel Problem with Safari

Hi my Spry Collapsible Panel looks great in Firefox, Camino, and IE, but the top border, which I am using as a line to divide items in the list, and which I have specified in the CSS page, doesn't show up in Safari and Google Chrome. Just nothing, and everything else works. Any help would be GREATLY appreciated!   My CSS page reads as follows:
.CollapsiblePanel {
    color: #000000;
    border-top-style: solid;
    border-top-width: 0.5px;
    padding-top: 3px;
    padding-right: 0px;
    padding-bottom: 3px;
    padding-left: 0px;
#apDiv3 #CollapsibleLINE {
    border-top-width: 20px;
    border-top-style: solid;
    border-top-color: #330099;
.CollapsiblePanelTab {
    margin: 0px;
    padding: 20px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    font-family: sans-serif;
    font-size: 0.7em;
    font-weight: bold;
    color: #3366FF;
    border-top-width: thick;
    border-right-width: thin;
    border-bottom-width: thin;
    border-left-width: thin;
    border-top-style: solid;
    border-top-color: #FF00CC;
    border-right-color: #000000;
    border-bottom-color: #000000;
    border-left-color: #000000;
/* 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;
.CollapsiblePanelTab a {
    text-decoration: none;
/* 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 {
    color: #666666;
.CollapsiblePanelFocused .CollapsiblePanelTab {
#apDiv1 .overlay {
and my page looks like this:
<link href="untitled.css" rel="stylesheet" type="text/css">
<script src="Scripts/AC_ActiveX.js" type="text/javascript"></script>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<style type="text/css">

div:active, div:focus, div:hover {
    outline-style: none;
    -moz-outline-style:none;
</style>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" >
<style type="text/css">

</style>
<div id="apDiv5"><img src="IMAGES/logo3.jpg" width="843" height="83" /></div>
<div id="frontphoto"></div>
<div id="apDiv1"><img src="IMAGES/Backgound.jpg" alt="back" width="1032" height="516" /></div>
<div id="apDiv2"><img src="IMAGES/overlay.png" alt="Overlay" width="174" height="720" /></div>
<div id="apDiv3">
<div id="CollapsiblePanel2" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">photography</font></div>
    <div class="CollapsiblePanelContent">
      <table width="118" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">portraits</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">events</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">landscapes</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">experiments</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">print</font></div>
    <div class="CollapsiblePanelContent">
      <table width="118" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">posters</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">books & packaging</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">invitations</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel4" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">motion</font></div>
    <div>
      <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td width="114"><em><font size="2" face="Georgia, Times New Roman, Times, serif">websites</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">animations</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel5" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">about</font></div>
    <div>
      <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
        <tr>
          <td width="114"><em><font size="2" face="Georgia, Times New Roman, Times, serif">honors</font></em></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">background</font></em></td>
        </tr>
      </table>
    </div>
</div>
<div id="CollapsiblePanel6" class="CollapsiblePanel">
    <div tabindex="0"><font size="2" face="Georgia, Times New Roman, Times, serif">contact</font></div>
    <div class="CollapsiblePanelContent">
      <table width="120" border="0" align="center" cellpadding="3" cellspacing="0">
        
        <tr>
          <td width="114"><a href="mailto:[email protected]" style="text-decoration:none"><font color="#333333" size="2" face="Georgia, Times New Roman, Times, serif">email</font></a></td>
        </tr>
        <tr>
          <td><em><font size="2" face="Georgia, Times New Roman, Times, serif">202.321.4248</font></em></td>
        </tr>
      </table>
    </div>
</div>
</div>
<script type="text/javascript">

</script>

I am sorry, I tried in FF, IE7/8 and Chrome and they all look the same.

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

Collapsible Panel open on new page

I am using the Spry Collapsible Panel as a sidebar menu. I
would like to be able to click on a menu link, which takes me to a
new page with the relevant panel staying open on that new page. Is
this possible? If so, how do I make it happen? I am not great with
codes and other jargon, so if someone could help me with "exactly"
what I need to do, it would be most appreciated.
Many thanks,
Caryl

First Include SpryDOMUtils.js in your file;
Than add this script in the head of the page, or include it
in a script.
<script language="JavaScript" type="text/javascript">
//please note, that my SpryDOMUtils.js is packed so i have a
the extra onUNLOAD listener in the code below.
// * Declare vars;
var Spry;
if (!Spry.Utils) Spry.Utils = {};
var coll1; //declare vars outside the function so u can use
then tab panel everywhere
// * This is a addition to the SpryDomUtils.js U can include
it under line #262
// Or leave it in a javascript external / internal
// This function will fire anything when u leave the current
page.
Spry.Utils.addUnLoadListener = function(handler)
if (typeof window.addEventListener != 'undefined')
window.addEventListener('unload', handler, false);
else if (typeof document.addEventListener != 'undefined')
document.addEventListener('unload', handler, false);
else if (typeof window.attachEvent != 'undefined')
window.attachEvent('onunload', handler);
//This function will be used by cookie to check if the value
is allready in the cookie, if so it returns it position
Spry.Utils.CheckArray = function(a, s){
for (i=0; i<a.length; i++){if (a
== s)return i;}return null;
* SPRY COOKIE; HOW TO USE;
* constructor:
Spry.Utils.Cookie(type,string,{name:'cookie_name',path:'/',days:'number'};
* TYPE:
* - create : this creates *saves* the cookie
* : Spry.Utils.Cookie('create','string or
array',{name:'Spry_Cookie'});
* - get : this will return the cookie in array format
* : Spry.Utils.Cookie('get','',{name:'Spry_Cookie'});
* - destory: this will destroy the cookie
* : Spry.Utils.Cookie('destroy','',{name:'Spry_Cookie'});
* - add : this allows u to add value to the cookie with out
creating a whole new string
* it will place the add value behind the older cookie
values, it checks if the value is allready in the cookie,
* if it is, it will NOT add it in the cookie.
* STRING:
* This is the data what u want to store in to the cookie, it
can be an Array or a normal string / var
* OPTIONS:
* - name: : this is the name of the cookie so u can identify
it
* - path: : optional path for the cookie;
* - days: : the amount of days for the cookie to be saved.
Spry.Utils.Cookie = function(type,string,options){
if(type == 'create'){
var expires='';
if(options.days != null){
var date = new Date();
var UTCString;
date.setTime(date.getTime()+(days*24*60*60*1000));
expires = "; expires="+date.toUTCString();
var thePath = '; path=/';
if(options.path != null){
thePath = '; path='+options.path;
document.cookie =
options.name+'='+escape(string)+expires+thePath;
}else if(type == 'get'){
var nameEQ = options.name + '=';
var ca = document.cookie.split(';');
for (var i=0; i<ca.length; i++){
var c = ca;
while (c.charAt(0)==' '){
c = c.substring(1,c.length);
}if (c.indexOf(nameEQ)==0) return
unescape(c.substring(nameEQ.length,c.length)).split(",");
}return null;
}else if(type == 'destory'){
Spry.Utils.Cookie('create','',{
name: options.name
}else if(type == 'add'){
var c = Spry.Utils.Cookie('get','',{name:options.name});
if (typeof string == 'object') {
for (i = 0, str; str = string
, i < string.length; i++) {
if (Spry.Utils.CheckArray(c, str) == null)c.push(str);
}else{
if (Spry.Utils.CheckArray(c, string) == null) c.push(string)
Spry.Utils.Cookie('create',c,{name:options.name});
// * check if we have a panel to set from cookie value
// * becouse we are using spry dom we can also include the
tab construction within this function.
Spry.Utils.addLoadListener(function(){
//becouse cookie GET returns a array we have to add a var
before it to store the data
var tab = Spry.Utils.Cookie('get','',{name:'tabs_history'});
coll1 = Spry.Widget.CollapsiblePanel('ID_OF_PANEL');
if(tab == "open")coll1.open();
else coll1.close();
Spry.Utils.addUnLoadListener(function(){
var classnames =
document.getElementById('ID_OF_THE_PANEL').className;
if(classnames.match("CollapsiblePanelOpen"))var tab =
'open';
else var tab = 'closed';
//destroy old cookie (i want a clean cookie)
Spry.Utils.Cookie('destory','',{name:'tabs_history'});
//setting the new cookie value
Spry.Utils.Cookie('create',tab,{name:'tabs_history'});
</script>
The best way to copy the script is to press the | Quote |
button and copy it out of th quote becouse there are some taggs
used by the forum sofware in it.
If u have placed it in your header u need to do few edits.
im using coll1 as collaps variable name (constructor) if u
use a other, change it to yours.
also change coll1 = new
Spry.Widget.CollapsiblePanel("coll1"); to your desired ID
This will solve your problem ;)
To see it in action on tab panels (where i created it for)
http://www.3rd-eden.com/Spry-it.com/examples/restyled_tabs/
This is option 1. If u want 1 panel to be open on your page
if the user want it. If u want to open a random panel on click
function, u can use:
http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
SpryURLUtils.js
This will read param's that u send true a url. and responds
to it. U can see it in action with the tab panels in the example
above.
add this in the header of your page; (also include the
SpryURLutils.js)
<script type="text/javascript">
// Grabs the values of the URL parameters for the current
URL.
var params = Spry.Utils.getLocationParamsAsObject();
</script>
and change your constructor like this
<script type="text/javascript">
//sets default as open.
var ac1 = new
Spry.Widget.CollapsiblePanel("myCollapsiblePanel",{contentIsOpen:(params.ac1open
? params.ac1open : true));
</script>
U can add this behind a url to activate it:
<a href="testpage.html?ac1open=true" > test page ac1
open </a>
true is open, and false is closed. ;)
I hope this helps :D

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

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

Need help with Spry Collapsible panels

I'm fairly inexperienced with Dreamweaver (CS4) and especially new to the Spry feature, so bear with me... I need all the help I can get! I've inserted six Spry collapsible panels to an HTML page and uploaded everything (including SpryCollapsiblePanel.css and SpryCollapsiblePanel.js), but they're automatically displaying as open and I can't click on them or close them. I'd like them to be closed until selected and opened.
What am I doing wrong?
Here's the URL: http://www.nicolegriffith.com/trustm.html
Thank you!

I just looked at your code, and your SpryAssets content is not there. This is the extent of your SpryCollapsablePanel.js
<?xml version="1.0" encoding="iso-8859-1"?>
<!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" xml:lang="en" lang="en">
<head>
<title>404 - Not Found</title>
</head>
<body>
<h1>404 - Not Found</h1>
</body>
</html>
Make sure your spry assests folder is in your root directory and upload the files once you know they are where they should be.
Gary

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

Make a spry collapsible panel open on hover??

Similar Messages

Maybe you are looking for