Collapsible panels to show/hide tr .. /tr ?
Is it possible to have 2 table rows per data record where one
cell in the first tr is the tab and the 2nd tr is the content?
like this
+-----+-------+-------+-----+
| tab | xxxx | yyyy | zzz |
+-----+-------+-------+-----+
|lorem ipsum ceterum |
|censeo Carthaginem |
+------------------------------+
| ...next data record ... |
This structrure is used for each dataset row. I want the
first cell ("tab") to be the clickable tab and the colspanning data
to be the content to hide/show.
Opera 9.5 and FF3 show very strange screen actions ....
Doesn't need to be a table, but <divs> seem to be too
complicated ...
Thanks in advance.
Martin
Thanks for your help, nearly worked but only returned results where the if statement was met ie where locked =0, so I used an additional statement to display something else when when locked=1
<?php
if($row_spec_rx['locked'] == 1) {
echo "button html goes here";
?>
<?php
if($row_spec_rx['locked'] == 0) {
echo "something else";
?>
I am sure there must be a more elegant way of doing this!
Similar Messages
-
Can`t hide link in Collapsible Panel
Hi all.
Have one problem. Сan`t realize in Collapsible Panel show/hide function with Close & Hide links.
http://help.adobe.com/en_US/Dreamweaver/10.0_Using/WS6A1887F2-D97C-48a9-A26C-C311CE4B1F83. html
Get sample from here-> http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. html (Open Panel with Link)
Sorry for english - hope all write !
1) Try with Layers - but this layers don`t clinging to necessary place =(
2) Through <div> tags (apDiv1 - without parametrs (only id))
a) Out of Collapsible Panel. Сan`t expose in row AP Elements - hidden for "apDiv1". By default this tag is visible & not exposed to hidden-in this panel nothing to change.
<p><div id="apDiv1"><a href="#" onclick="CollapsiblePanel1.open();MM_showHideLayers('apDiv1','','hide','apDiv2','','show')">Open Panel</a></div>
-------<div id="apDiv2"><a href="#" onclick="CollapsiblePanel1.close();MM_showHideLayers('apDiv1','','show','apDiv2','','hide')">Close Panel</a></div>
</p>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab"><a href="#">Open Panel with Link </a></div>
<div class="CollapsiblePanelContent">
<p>This Collapsible Panel is opened and closed with a link. </p>
</div>
</div>
(And this variant does not make)
b) Inwardly "CollapsiblePanelTab".But making apDiv1 or apDiv2 hidden - CollapsiblePanelTab is disappears.
<div id="CollapsiblePanel2" class="CollapsiblePanel">
<div class="CollapsiblePanelTab"><div id="apDiv1"><a href="#" onclick="CollapsiblePanel2.open();">Open Panel</a></div> | <div id="apDiv2"><a href="#" onclick="CollapsiblePanel2.close();">Close Panel</a></div></div>
<div class="CollapsiblePanelContent">
<p>text2</p>
</div>
</div>
3)Show hide links?
<a href="#" onclick="return toggleMiniToc('minitoc-links', this);" class="hideLink">Hide</a>
But I d`t understand how to do what!
What wrong way?Hi,
It is ok to not working the link because like this was
designed. When you click o a collapsible panel tab, you want to
open the new tab, not to follow the link if this exist.
So this behavior was added on purpose. If you want to disable
this behavior, you should go on th SpryCollapsiblePanel.js file and
remove the stopPropagation function.
Diana -
Iframe doesnt show up in collapsible panel
I have put a google calendar on a iframe I want to present on
a collapsible panel. The Iframe doesent show up on firefox when the
default state of the panel is closed. it works in Safari. Both on
OS X. There is an errormessage from Fireworks pasted below.
Is there a way to get the panel to work proper with this
Iframecontent?
This works:
http://www.nuna.no/fabrikken/colpanel_spry_open.html
This doesent:
http://www.nuna.no/fabrikken/colpanel_spry_closed.html
quote:
uncaught exception: [Exception... "Component returned failure
code: 0x80004005 (NS_ERROR_FAILURE)
[nsIDOMNSDocument.getBoxObjectFor]" nsresult: "0x80004005
(NS_ERROR_FAILURE)" location: "JS frame ::
http://www.google.com/calendar/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled__no.js
:: anonymous :: line 134" data: no]
[Break on this error] undefined
[Exception... "Component returned failure code: 0x80004005
(NS_ERROR_FAILURE) [nsIDOMNSDocument.getBoxObjectFor]" nsresult:
"0x80004005 (NS_ERROR_FAILURE)" location: "JS frame ::
http://www.google.com/calendar/d003e2eff7c42eebf779ecbd527f1fe0embedcompiled__no.js
:: anonymous :: line 134" data: no]Yes I meant to writethat the errormessages was from Firefox,
not Fireworks.
The iframe with the googlekalendar works with both tabbed
panel and accordion. i dont have Blinds in the de insert menu, but
I will try later. Anyway, its the collapsible panel I need to use
because its saves place. ..But so does tha tabbs. I will experiment
som more with this exiting Sprys. Thnks V1 Fusion :) -
Show/hide panels on button click
Hello,
I have to show/hides several panels on same palette on some button actions. I am trying to check whether it is possible to add each child panel in different .fr files.
Just to brief, On panel I have different icon buttons and on each button I have to show different view in the main panel thus I cannot use tabular dialog. Please help me to find a way to achieve this?
I tried following code
I have Created two primary resource panel in TestSample1.fr,TestSample2.fr files respctively.
My main panel (Palette panel) have two buttons (TestSample1Button,TestSample2Button).
I want to show/hide these panels on button click in main panel.
InterfacePtr<IPanelControlData> parentPanelCtrlData(Utils<IPalettePanelUtils>()->QueryPanelByWidgetID(kMainPanelWidgetID) ); // main panel
if(parentPanelCtrlData)
InterfacePtr<IControlView> testSample1PanelPanelView((IControlView*)::CreateObject(::GetDataBase(this),kTestSample1P anelWidgetBoss,IID_ICONTROLVIEW));
if(testSample1PanelPanelView)
parentPanelCtrlData->AddWidget(testSample1PanelPanelView);
I have added above code on TestSample1Button observer.But it is not working.
is It possible? can anybody help me?Yes it is possible.
I am not sure but following line of code also needed after adding widget .
testSample1PanelPanelView->ForceRedraw(testSample1PanelPanelView->GetDrawRegion(), kTrue); -
Spry collapsible panel with spry data
I have created a spry collapsible panel and wanted to put
srpy data in it, to dynamically load.
i also want to hide the entire panel if no data is available.
It will show the data, but the click to open/close does not
work.
here is the code.I have made some progress, thanks, however im still getting
some odd formatting issues, for example, the 1st panel shows with
different design to the rest of the panels.
this is my code;
<div id="region" spry:region="ds1">
<div id="repeat" spry:repeat="ds1">
<div id="CollapsiblePanel{ds_RowID}"
class="CollapsiblePanel">
<div class="CollapsiblePanelTab"
tabindex="{ds1::ds_RowID}"> <h1>{title} - last amended
{amended}</h1></div>
<div
class="CollapsiblePanelContent"><strong>{message}</strong>
Added by <strong>{owner}</strong> on
<strong>{added} </strong>(REF:
<strong>{id}</strong>) <a href="/service/index.asp"
target="_self">View full details</a></div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel{ds_RowID} = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel{ds_RowID}");
//-->
</script>
As you can see, I am inserting {ds_RowID} in the variable
name, in order for the panels to operate independantly, however
have I coded it correctly? -
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 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 -
How do I place external content in a Collapsible Panel
I figured out how to add a tooltip to a collapsible panel
today, but I am having trouble getting content to load in the
content portion of the panel from another HTML file.
I have created a loader.gif animation that I would also like
to appear in the content panel while the content is loading.
This, like the tooltips, is way above my skill level and any
help would be appreciated. I am starting from using Spry 1.6's
built in features in Dreamweaver CS3 and trying to expand on them
with help using the other spry js found here in the Labs.
Link to
collapsible panel page I am working on
Currently I have all the content panel text in panels. I
would like to copy the content to another file so it can load only
when the panel tab is opened.Check out this example.
http://labs.adobe.com/technologies/spry/samples/utils/update_content.html
its about updateContent which allows u to place content in
your div.
U could create a little function for it to load content in
your divs.
Example of load indicator + function setup:
the indicator div
<div id="indicatorMessageBoxId"><img
scr="imagehere.gif" /> Please wait loading content </div>
The function (place in <script> tags and place it in
header (dont forget to include SpryData.js)
function updateContent(ele,url){
//U call this by using the command:
updateContent('ID_toLoad_contentIn',url_of_new_content');
document.getElementById('indicatorMessageBoxId').style.display =
""; //this will show the indicator loadimage box
Spry.Utils.updateContent(ele, url, function() {
document.getElementById('indicatorMessageBoxId').style.display =
"none"; }); //this will hide the box when loading file is done
u can attach this function on your collapspannel by adding a
onclick="updateContent('myId','data/page.html');" to the
element.
Hope this helps :) -
Expand or collapse all collapsible panels at once.
Hi,
I have a page with a number of collapsible panels on it generated from SpryData.
I know the collapsible panel names because their IDs are generated from the Spry data with
<div class="CollapsiblePanel" id="cp{ds_RowNumber}" spry:repeat="Events">
I have a couple of links on the page that I want our members to be able to click to be be able to collapse or expand all collapsible panels at once. How can I return a reference to the collapsible panel objects so I can close / open them using the open / close functions of the widget etc?
See http://www.thehmc.co.uk/Events4.html and the links with the text (Show or hide all event details)
i.e. I have a function and I know Spry.$$ is not what I want , but what do I need to return the object reference?
function dhide()
var panelCount = Events.getRowCount();
for (var p = 0;p < panelCount;p++)
panelID = '#cp' + p;
var mypanel = Spry.$$(panelID);
var a = panelID.close();
Thanks
PhiolHi,
Yes I found CollapsiblePanelGroup in the Spry 1.6.1 samples and am now using the OpenAllPanels function.
Finding the collapsible panel group API in the documentation isn't the most intuitive and you may wish to review.
Regards
Phil -
Jqzoom widget inside spry collapsible panel
I am attempting to place the jqzoom widget inside a spry collapsible panel. The wodget works fine in the html page created for it but will not work in the collapsible oanel page. I believe all documents are in the appropriate folder.
Here is the code for the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="twoColFixLtHdr.css" rel="stylesheet" type="text/css" />
<LINK rel=stylesheet type=text/css href="css/jquery.jqzoom.css">
<style type="text/css">
#leftbox {
float: left;
width: 70%;
margin-left: 5px;
#rightbox {
float: right;
width: 25%;
</style>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="js/jquery-1.3.2.js" type="text/javascript"></script>
<script src="js/jquery.jqzoom1.0.1.js" type="text/javascript"></script>
<style type="text/css">
a:hover {
color: #C36;
a:active {
color: #999;
#wrapper #outsideedgewrapper #outsidebox .container .content #CollapsiblePanel1 .CollapsiblePanelTab strong {
text-align: left;
#wrapper #outsideedgewrapper #outsidebox .container .content p strong {
color: #333;
#wrapper #outsideedgewrapper #outsidebox .container .content p {
color: #000;
#topofpage {
width: 100px;
font-size: small;
float: right;
</style>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
</script>
<style type="text/css">
a:visited {
color: #333;
a:hover {
color: #C36;
a:active {
color: #999;
.outsidebox {
width: 1120px;
margin-right: auto;
margin-left: auto;
background-repeat: no-repeat;
background-position: left 90px;
</style>
<script src="javascript/jquery-1.4.3.min.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<style type="text/css">
</style>
<link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
<style type="text/css">
h2 {
font-size: x-large;
#wrapper #outsideedgewrapper #outsidebox .container .footer h5 a {
text-align: center;
#wrapper #outsideedgewrapper #outsidebox .container .footer h5 a {
</style>
<link href="2LinkColor.css" rel="stylesheet" type="text/css" />
<link href="css/jqzoom.css" rel="stylesheet" type="text/css" />
<script type="text/xml">
<!--
<oa:widgets>
<oa:widget wid="2148522" binding="#iridology2" />
</oa:widgets>
-->
</script>
</head>
<body>
<div id="wrapper">
<div id="outsideedgewrapper">
<div class="outsidebox" id="outsidebox">
<div class="container">
<div class="header"><!-- end .header -->
<p><em><a name="topofpage" id="topofpage"></a></em></p>
<p> </p>
<p> </p>
<p> </p>
<p><br />
<br />
</p>
</div>
<div class="sidebar1">
<p> </p>
<ul class="nav">
<li><a href="index.html"><strong>Home</strong></a></li>
<li><a href="PDf/GAIL SMOLINSKIS EDUCATION - 2010.pdf" target="_new"><strong>Dr. Gail's Education & 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>
<!-- end .sidebar1 --></p>
<div class="content">
<div>
<h2>An Ounce of Prevention Natural Health Center</h2>
</div>
<div id="rightbox"><img src="images/gaigrey3.jpg" width="186" height="295" align="top" id="Image2" /></div>
<p><em>"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 />
<!-- end .content --> </h5>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false, enableAnimation:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3", {contentIsOpen:false});
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4", {contentIsOpen:false});
var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5", {contentIsOpen:false});
var CollapsiblePanel6 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel6", {contentIsOpen:false, enableAnimation:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false, enableAnimation:false});
var CollapsiblePanel7 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel7", {contentIsOpen:false});
</script>
<div class="footer">
<h5 class="footer">Web Design by<a href="http://www.pixelsandpaper.com"> Pixels & Paper Web Design </a><br />
Copyright © 2011 An Ounce of Prevention Natural Health Center - All rights reserved <!-- end #footer -->
</h5>
<!-- end .footer --></div>
<!-- end .container --></div>
</div>
</div>
</div>
<div class="tooltipContent" id="sprytooltip1">Meet Dr. Gail for a mini Iridology Session at the Grain Miller's Harvest Showdown in Yorkton, SK - Gallagher Centre- Flexihall - Nov. 2 (4pm to 7:30 pm), Nov. 3,4,5 (1pm to 7:30 pm) </div>
<script type="text/javascript">
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
</script>
</body>
</html>With the exeption of images, to add external content to a document you will need to make use of either serverside or clientside code.
Have a look at the SpryHTMLPanel here http://labs.adobe.com/technologies/spry/samples/htmlpanel/html_panel_sample.html
Otherwise, please supply a link to your site so that we can come up with alternatives.
Gramps -
Collapsible Panels - Links to open one, and close others
Hi,
I am new to Dreamweaver and have been creating my site by
learning as I go along. I have already read through all the other
related topics associated with Collapsible Panels on this blog and
have still not found an answer. I have been able to open and close
Collapsible Panels by using links - but unfortunately, I need more
than just opening and closing.
On my site i have approximately 5 pages, all with the same
header and Menu bar. The Information (that i have presented in
numerous Collapsible Panels) does however vary from page to page.
What I need to try and figure out is:
How can I open one collapsible panel and close all others? I
have seen the one example which leads to my next question:
How can I group Panels? Some examples of how to open one and
close all others use this grouping. Is there any other way of
opening one and closing all others without grouping?
Lastly, is it possible to set up a link that can be viewed on
one page which when clicked opens the relevant page and collapsible
panel? i.e. on my About Us page there is a link (using the Menu
bar) for one of my several services on the services drop down menu
(but services is on a different page with the same setup). When a
viewer clicks on the specific service, is it possible to get the
site to open the services page, and open the relevant collapsible
panel (with all other Panels closed)?
Any assistance would be greatly appreciated - I have been
searching for days now and cannot seem to find any
answers/directions in laymans terms.
Kind regards,
Johnwlsjoh013 wrote:
> Hi,
>
> I am new to Dreamweaver and have been creating my site
by learning as I go
> along. I have already read through all the other related
topics associated
> with Collapsible Panels on this blog and have still not
found an answer. I
> have been able to open and close Collapsible Panels by
using links - but
> unfortunately, I need more than just opening and
closing.
>
> On my site i have approximately 5 pages, all with the
same header and Menu
> bar. The Information (that i have presented in numerous
Collapsible Panels)
> does however vary from page to page. What I need to try
and figure out is:
>
> How can I open one collapsible panel and close all
others? I have seen the one
> example which leads to my next question:
This page has an example that has a link that can open and
close a panel:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
One way to do this would be to have a single link that would
open one of your panels using the code, but then add to it code
that closes each of the other panels, for example:
<a href="#"
onclick="CollapsiblePanel4.open();CollapsiblePanel5.close();CollapsiblePanel6.close();">O pen
4, close 5 and 6</a>
To make this work, you'll need to look that the panel
constructors at the bottom of your page and make sure to match up
the panel variable names i.e. "var CollapsiblePanel1 =...." the
variable is CollapsiblePanel1.
You could also write a function that gathers together the
various panels you have on the page and then pass to it only the
panel that you want kept open. For now, though, it might be best to
use the above method, given your expertise. And taking that even
further, you could apply the function call unobtrusively. Both the
function call and the unobtrusive part you can work on later to get
this working for now.
> How can I group Panels? Some examples of how to open one
and close all others
> use this grouping. Is there any other way of opening one
and closing all
> others without grouping?
This is a little confusing, on one hand you ask about how to
group, but then ask how not to group. There is a concept of a
collapsible panel group:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
But there is another type of group, that may be more what
you're looking for, and that's an Accordion panel, which is similar
to the collapsible panel group, with the exception that it can only
have one panel open at a time.
> Lastly, is it possible to set up a link that can be
viewed on one page which
> when clicked opens the relevant page and collapsible
panel? i.e. on my About Us
> page there is a link (using the Menu bar) for one of my
several services on the
> services drop down menu (but services is on a different
page with the same
> setup). When a viewer clicks on the specific service, is
it possible to get
> the site to open the services page, and open the
relevant collapsible panel
> (with all other Panels closed)?
Probably the easiest way to do this particular one would be
to make sure that you have all of the panels set to be closed when
the page loads, and then take a look at the code for the last
example on this page:
http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
That example uses a tabbed panel, but the concept is the
same, use a URL parameter to determine what to show. You'll need to
link in the SpryURLUtils file in the Spry download package (look in
the includes folder):
http://labs.adobe.com/technologies/spry/home.html
Essentially, your link will look similar to:
sample.html?panel=1
Then your code could look something like:
var params = Spry.Utils.getLocationParamsAsObject();
var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel1",
{contentIsOpen:(params.panel==1 )} );
var CollapsiblePanel2 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel2",
{contentIsOpen:(params.panel==2 )} );
Basically what this is doing is creating an object from the
URL parameters. Then for each of the panels the constructor has
code that determines whether or not to expand the panel when the
page loads. So it checks the value of params.panel to see if it
matches 1 (for the first one), if it does, then that means that
contentIsOpen is set to true, if it is some other number or is not
present at all, then that means that the panel is closed. This
would then be repeated down the line for how ever many panels you
want to operate like that.
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert -
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,
SimonSure 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 -
Why is my Spry Collapsible Panel not working in IE
I have created a very very simple website, in dutch (i'm dutch). http://www.dgvastgoed.nl
And on the 'projecten' (dutch word for projects) page i've made some collapsible panels.
The picture is only showing when you click on the text once, when you click again the picture disappears, that's what i want.
But in Internet Explorer it always shows, and that's not what i want.
How do I get this right in Internet explorer?
(if it's possible a second question: How do i get on the 'werkzaamheden' page the 3 links in the top left corner on the position like they are in safari and firefox.)It lookslike you fixed it, it works fine in IE7 and 8
-
Spry Collapsible Panel Problem in Safari
When check my site in Firefox, there are no problems, but
when I open it in Safari, none of the CSS settings are applied to
the Collapsible Panel widget. Some settings I have make the widget
200 px width and make it have a black background, but Safari
doesn't show these. HERE IS THE CODE OF MY HOMEPAGE:
<!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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
<style type="text/css">
body {
background: url(Victorias%20Secret%20models.jpg) fixed
no-repeat center bottom;
</style>
<script src="SpryAssets/SpryCollapsiblePanel.js"
type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab"
tabindex="0"></div>
<div class="CollapsiblePanelContent">
<p>BLOG</p>
<p>LISTEN</p>
<p>WATCH</p>
<p>ABOUT</p>
</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel1",
{contentIsOpen:false});
</script>
</body>
</html>
AND HERE IS THE CODE OF MY CSS
@charset "UTF-8";
.CollapsiblePanel {
margin: 0px;
padding: 0px;
width: 200px;
color: #FFFFFF;
background-color: #000000;
.CollapsiblePanelTab {
background-color: #000000;
margin: 0px;
padding: 0px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
font-family: sans-serif;
font-size: 0.7em;
font-weight: bold;
color: #FFFFFF;
height: 40px;
.CollapsiblePanelContent {
margin: 0px;
padding: 0px;
background-color: #000;
.CollapsiblePanelTab a {
color: black;
text-decoration: none;
background-color: #000;
height: 40px;
.CollapsiblePanelOpen .CollapsiblePanelTab {
background-color: #000;
color: #FFFFFF;
.CollapsiblePanelTabHover, .CollapsiblePanelOpen
.CollapsiblePanelTabHover {
background-color: #000;
.CollapsiblePanelFocused .CollapsiblePanelTab {
background-color: #000;
THANKS FOR YOUR HELPCan't tell by that code, can you post a URL to the page?
Ken Ford
Adobe Community Expert - Dreamweaver/ColdFusion
Fordwebs, LLC
http://www.fordwebs.com
"kkaiser1" <[email protected]> wrote in
message news:[email protected]...
> When check my site in Firefox, there are no problems,
but when I open it in
> Safari, none of the CSS settings are applied to the
Collapsible Panel widget.
> Some settings I have make the widget 200 px width and
make it have a black
> background, but Safari doesn't show these. HERE IS THE
CODE OF MY HOMEPAGE:
> <!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>
>
> <title>Untitled Document</title>
>
> <meta http-equiv="Content-Type" content="text/html;
charset=UTF-8" />
> <style type="text/css">
>
> body {
> background: url(Victorias%20Secret%20models.jpg) fixed
no-repeat center
> bottom;
> }
>
> </style>
> <script src="SpryAssets/SpryCollapsiblePanel.js"
> type="text/javascript"></script>
> <link href="SpryAssets/SpryCollapsiblePanel.css"
rel="stylesheet"
> type="text/css" />
> </head>
> <body>
> <div id="CollapsiblePanel1"
class="CollapsiblePanel">
> <div class="CollapsiblePanelTab"
tabindex="0"></div>
> <div class="CollapsiblePanelContent">
> <p>BLOG</p>
> <p>LISTEN</p>
> <p>WATCH</p>
> <p>ABOUT</p>
> </div>
> </div>
> <script type="text/javascript">
>
> var CollapsiblePanel1 = new
Spry.Widget.CollapsiblePanel("CollapsiblePanel1",
> {contentIsOpen:false});
>
> </script>
> </body>
> </html>
>
>
> AND HERE IS THE CODE OF MY CSS
>
> @charset "UTF-8";
>
> .CollapsiblePanel {
> margin: 0px;
> padding: 0px;
> width: 200px;
> color: #FFFFFF;
> background-color: #000000;
> }
>
> .CollapsiblePanelTab {
> background-color: #000000;
> margin: 0px;
> padding: 0px;
> cursor: pointer;
> -moz-user-select: none;
> -khtml-user-select: none;
> font-family: sans-serif;
> font-size: 0.7em;
> font-weight: bold;
> color: #FFFFFF;
> height: 40px;
> }
>
> .CollapsiblePanelContent {
> margin: 0px;
> padding: 0px;
> background-color: #000;
> }
>
> .CollapsiblePanelTab a {
> color: black;
> text-decoration: none;
> background-color: #000;
> height: 40px;
> }
>
> .CollapsiblePanelOpen .CollapsiblePanelTab {
> background-color: #000;
> color: #FFFFFF;
> }
>
> .CollapsiblePanelTabHover, .CollapsiblePanelOpen
.CollapsiblePanelTabHover {
> background-color: #000;
> }
>
> .CollapsiblePanelFocused .CollapsiblePanelTab {
> background-color: #000;
> }
>
>
> THANKS FOR YOUR HELP
> -
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">
<!--
#apDiv1 {
position:absolute;
width:808px;
height:502px;
z-index:1;
left: 0px;
top: 111px;
#apDiv2 {
position:absolute;
width:2;
height:747px;
z-index:2;
top: 109px;
left: 34px;
filter: alpha(opacity=75);
#apDiv3 {
position:absolute;
width:128px;
height:344px;
z-index:3;
left: 57px;
top: 126px;
filter: alpha(opacity=75);
-->
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">
<!--
#apDiv4 {
position:absolute;
left:403px;
top:115px;
width:164px;
height:312px;
z-index:4;
#apDiv3 #CollapsiblePanel2 .CollapsiblePanelContent font {
color: #000000;
#apDiv5 {
position:absolute;
left:57px;
top:22px;
width:722px;
height:78px;
z-index:4;
#apDiv6 {
position:absolute;
left:551px;
top:22px;
width:397px;
height:39px;
z-index:5;
#apDiv7 {
position:absolute;
left:285px;
top:123px;
width:478px;
height:398px;
z-index:5;
#apDiv8 {
position:absolute;
left:325px;
top:174px;
width:276px;
height:153px;
z-index:6;
-->
</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">
<!--DWLayoutTable-->
<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">
<!--
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});
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
//-->
</script>I am sorry, I tried in FF, IE7/8 and Chrome and they all look the same.
Maybe you are looking for
-
Clearing some payments: messages
Gurus i am struggling to clear some payments. "type" ZP when i run FBl1n with special GL, i am getting 2 entries with status in red. we dont want it in the display, hence i try to clear them. since its done loong back, the user doesnt remember whethe
-
Validation returns : no data found + unhandled user-defined exception
Hi, I'm working with Application Express 4.1.1.00.23. I have an application for timesheet management. On one page, I've got a report (not interactive) in which you can enter the hours you've worked. First you add a free line, choose the task and then
-
Add emailadress to PO in ABAP.
Hi, If I update vendor address through PO (ME22N), it will update table ADR6 (and all the other ADR* talbes) and add a new address number to the data in EKKO. so the connection changes from EKKO-LiFNR --> LFA1-LIFNR/ADRNR --> ADR6-ADRESSNUMBER to EK
-
Release strategy should trigger in different systems EHP7 and ECC6
Hi All, At our client side some are using ECC 6 and few are on EHP7.We need to define the release strategy in a such a way that both the user can approve the PR in cross system.For example- user A is using ECC6 and he created PR ,now he need to tak
-
Hey so i am trying to make a picture game where you have to click the mouse picture to do well, and the taz picture you mess up. I will add my code here, here are the images that are needed: http://www.geocities.com/CollegePark/Lounge/6707/taz.jpg ht