Tabbed panel with adjustable/variable height based on content

Is there anyway that you can create a tabbed panel with adjustable/variable height based on content in each tab?

Abhishek,
Thanks for your reply, however, it is not working with Muse. I added the Javascript to the head section and adjusted iframe and it displays as a small square in the upper left hand corner, unable to view the whole page.
Inserted into head section --
<script type="text/javascript">
function resizeIframe(obj)
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
</script>
inserted as an html object --
<iframe name="MycoSmooth" src="http://www.mycosmooth.com" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
Below is the result:
The purpose is to have an independent website run the blogging capabilities, since muse doesn't directly support blogging as of yet.
Since the site is on a different domain, I am running into cross domain issues and it won't get the height of the page. The methods that apparently work use php and I am unsure how that would work in muse, if at all.

Similar Messages

Using Srpy tabbed panels with slidding panels

I am very new to spry and so I am still just figuring it all
out. How I found it was I wanted a tabbed panel like the one on the
IBM website. Anyway, I am trying to
use the tabbed panels with the sliding panels and it just does not
seem to be working. I found
this
tutorial and followed the codes but it still only works as just the
tabbed panels - nothing has changed at all. Can someone tell me
what I might be doing wrong? I am attaching both my html and css
code for you to inspect.
HTML Code
<!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>
<script
src="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<link
href="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"><a
href=”#Tab1″>Tab 1</a></li>
<li class="TabbedPanelsTab" tabindex="0"><a
href=”#Tab1″>Tab 2</a></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
css code to follow in post below - too many characters.

and here is the css code
CSS Code
@charset "UTF-8";
/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
/* Horizontal Tabbed Panels
* The default style for a TabbedPanels widget places all tab
buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container.
For our
* default style, this container does not contribute anything
visually,
* but it is floated left to make sure that any floating or
clearing done
* with any of its child elements are contained completely
within the
* TabbedPanels container, to minimize any impact or
undesireable
* interaction with other floated elements on the page that
may be used
* for layout.
* If you want to constrain the width of the TabbedPanels
widget, set a
* width on the TabbedPanels container. By default, the
TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this
selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabbedPanels container.
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
/* This is the selector for the TabGroup. The TabGroup
container houses
* all of the tab buttons for each tabbed panel in the
widget. This container
* does not contribute anything visually to the look of the
widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in
this selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This
container houses
* the title for the panel. This is also the tab "button"
that the user clicks
* on to activate the corresponding content panel so that it
appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1
pixel down from
* where it wold normally render. This allows each tab to
overlap the content
* panel that renders below it. Each tab is rendered with a 1
pixel bottom
* border that has a color that matches the top border of the
current content
* panel. This gives the appearance that the tab is being
drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this
selector is not
* necessary to make the widget function. You can use any
class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
/* This selector is an example of how to change the appearnce
of a tab button
* container as the mouse enters it. The class
"TabbedPanelsTabHover" is
* programatically added and removed from the tab element as
the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #CCC;
/* This selector is an example of how to change the
appearance of a tab button
* container after the user has clicked on it to activate a
content panel.
* The class "TabbedPanelsTabSelected" is programatically
added and removed
* from the tab element as the user clicks on the tab button
containers in
* the widget.
* As mentioned above, for our default style, tab buttons are
positioned
* 1 pixel down from where it would normally render. When the
tab button is
* selected, we change its bottom border to match the
background color of the
* content panel so that it looks like the tab is part of the
content panel.
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
/* This selector is an example of how to make a link inside
of a tab button
* look like normal text. Users may want to use links inside
of a tab button
* so that when it gets focus, the text *inside* the tab
button gets a focus
* ring around it, instead of the focus ring around the
entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The
ContentGroup container houses
* all of the content panels for each tabbed panel in the
widget. For our
* default style, this container provides the background
color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in
this selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #EEE;
/* This is the selector for the Content panel. The Content
panel holds the
* content for a single tabbed panel. For our default style,
this container
* provides some padding, so that the content is not pushed
up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this
selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the Content container.
.TabbedPanelsContent {
padding: 4px;
/* This selector is an example of how to change the appearnce
of the currently
* active container panel. The class
"TabbedPanelsContentVisible" is
* programatically added and removed from the content element
as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels
* The following rules override some of the default rules
above so that the
* TabbedPanels widget renders with its tab buttons along the
left side of
* the currently active content panel.
* With the rules defined below, the only change that will
have to be made
* to switch a horizontal tabbed panels widget to a vertical
tabbed panels
* widget, is to use the "VTabbedPanels" class on the
top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons
it contains
* render to the left of the active content panel. A border
is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so
that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door
and CSS Sprites */
/* Revision by Craig Malcolm Petrou of CPMMUG.com */
.TabbedPanels {
margin: 10px 0 5px 0;
.TabbedPanelsTab {
font-weight: bold;
font-size: 100%;
background-color: #FFF;
border: solid 0 #FFF;
.TabbedPanelsTabHover {
background-color: #FFF;
.TabbedPanelsTabSelected {
background-color: #FFF;
border-bottom: 1px solid #FFF;
position: relative;
.TabbedPanelsContentGroup {
background-color: #FFF;
ul.TabbedPanelsTabGroup a {
display: block;
ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
background: url(/images/brown.png) no-repeat 0 0;
margin: 0 0 0 -1px;
padding: 0 0 0 10px;
ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
background: url(/images/brown.png) no-repeat 100% 0;
padding: 7px 10px 5px 0;
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
background: url(/images/brown.png) no-repeat 0 -41px;
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
background: url(/images/brown.png) no-repeat 100% -41px;
/* END: Spry Horizontal Tabbed Panels meets Sliding Door and
CSS Sprites */
Also - is there a way to get rounded corners on the tabs in
spry? Any good tutorials I can follow about spry - more
specifically about using widgets and effects together.
Thanks so much

Loading Tabbed Panels with the updateContent Util function

Hey,
Just wanted to see if anyone has had any issues while running
ThickBox Javascript and the updateContent function at the same
time.
On my site only 1 or the other will work... very confusing,
as my Javascript skills are minimal. Not sure what the clash is, I
thought it might be conflicting div id actions not being unique
enough, but it wasn't.
Anyone else?

HI Kin,
I appreciate your quick reply. Actually I was using your old
code to rotate my tabbed panels and not the new one you posted. The
new one from your website works well with regular tabbed panels but
when trying it with a Spry data, it still doesn't work, the tabs
doesn't play at all...
I use the spry:repeat, I don't know if that makes a
difference.
http://demiurgical.fluctuation.net/development/test.html
based on the original Tabbed Panels with Spry Data
http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample2.html
I really appreciate your help!
Thanks,
John

Flexible Tabbed Panels with CSS Selector

Just thought I'd share a tip about making Tabbed Panels more
flexible with the CSS Selector.
In working on the
menu
page for
a new
restaurant, I needed Tabbed Panels with the same custom scroll
bar I used on the rest of the site. I'd chosen the
fleXcroll kit because it is so
flexible, unobtrusive, and cross-browser compatible (if poorly
documented). Once you figure out how fleXcroll wants you to give it
the elements of your scroll bar, activating it is as easy as adding
the "fleXcroll" class to the div you want scrolled. This was the
same div which wraps my Tabbed Panels
(div.TabbedPanelsContentGroup).
No problem, I thought, as fleXcroll makes a big deal about
how it "can cope with dynamic updates such as dynamic content
injected via AJAX." The problem, though, is that that Tabbed Panels
can't cope with the wrappers fleXcroll injects inside the panel
container, as Tabbed Panels depends on a clean and fixed hierarchy
to identify panels as direct descendants of that container. Tabbed
Panels thought the fleXcroll wrappers were panels, and things just
didn't work.
Luckily, the CSS Selector provides a much easier method of
finding panels and tabs than traversing a fixed hierarchy. Instead
of identifying tabs as children of .TabbedPanelsTabGroup (which is
identified as the first child of the div you give to Tabbed Panel's
constructor) and panels as children of .TabbedPanelsContentGroup,
you simply identify tabs as Spry.$$(".TabbedPanelsTab") and panels
as Spry.$$(".TabbedPanelsContent")!
In SpryTabbedPanels.js, tabs and panels are collected with
getTabs() and getPanels():
var tabs = this.getTabs();
var panels = this.getContentPanels();
To escape the hierarchical bounds of Tabbed Panels, you just
have to change:
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
to:
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
tabs = Spry.$$(".TabbedPanelsTab"); // or your selector of
choice
return tabs;
and:
Spry.Widget.TabbedPanels.prototype.getContentPanels =
function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
to:
Spry.Widget.TabbedPanels.prototype.getContentPanels =
function()
var panels = [];
panels = Spry.$$(".TabbedPanelsContent"); // or your
selector of choice
return panels;
This still assumes that everything happens within the element
you give to the constructor, but that's okay by me for now.
Hope this helps someone else!

The TabbedPanels code:
<div id="mainmenu" spry:region="menuCom menuCat">
     <div id="TP1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
               <li spry:repeat="menuCat" class="TabbedPanelsTab" tabindex="0">{menuCat::category}</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
               <div spry:repeat="menuCom" spry:test="'{menuCom::category}' == '{menuCat::category}'" class="TabbedPanelsContent">{menuCom::subcategory} - {menuCom::description}</div>
            </div>
            </div>
           </div>
           </div>

Iframe auto height based on content in high trust apps on premise

Hi,
how to adjust the app part height based on the content, in high trust apps.
Thanks
Ram

Hi Ram,
We can use JavaScript to adjust the iframe height, the following code for your reference:
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('idIframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
</script>
More information:
How To Adjust IFrame Height on Its Content
http://www.codeproject.com/Articles/19499/How-To-Adjust-IFrame-Height-on-Its-Content
Best Regards
TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact
[email protected]

Spry Tabbed panels + Progressive Enhancement and Dynamic Loading of Content With Spry

Is there any way to combine tabbed panels together with "Progressive Enhancement and Dynamic Loading of Content With Spry"?
Visit: http://labs.adobe.com/technologies/spry/articles/best_practices/progressive_enhancement.ht ml#updatecontent
And click on the "Using Spry.Utils.updateContent()"
The 3rd example shows how to use a fade transition whenever the content changes.
I already have tabbed panels. My menu contains buttons (on tabs) and my Content div contains the panels.
Tabs code;
<ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab">
               <table class="Button" >
                    <tr>
                    <td style="padding-right:0px" title ="Home">
                    <a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
                    </td>
                    </tr>
               </table>
          </li>
etc
etc
etc
and the panel code:
<div class="TabbedPanelsContent" id="Home">
     CONTENT
</div>
I hoped i can use the example code from the link into my tabbed panels.
I thought this code:
onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;"
could be added to the tab code like this:
<a href="javascript:TabbedPanels1.showPanel(1);" onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
But the content doesnt fade...
I know i need to change the header etc.
The following is from the link:
<!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" xmlns:spry="http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aquo Events</title>
<script src="../../../includes/SpryEffects.js" type="text/javascript"></script>
<script src="../../../includes/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<style type="text/css">
/* IE HACK to prevent bad rendering when fading. */
#event { background-color: white; }
</style>
</head>
So i changed my header etc, put the SpryEffects.js and SpryData.js into position and nothing changed...
Is there a way to keep my tabbed panel (or change as less as possible) and let
A. The fade work
B. The loading work.
The problem now is that it loads all pages instead of only the home. Therefore i wanted this Progressive Enhancement.
And the fading part is just because its nice...

It doesnt show in the post but off course i changed this link;
"data/AquoThonFrag.html"
into;
"javascript:TabbedPanels1.showPanel(1);"
I must say i dont know if this even works...

Tabbed Panel with Fade Effect

Open my site, dg-ad.com, and the tabbed panel drop down menu has the first level visible. Click on a menu item and the second level becomes visible. The second level has a Spry fade effect so it fades into view nicely. The class .TabbedPanelContent sets the visibilty of the second layer hidden, and there is no distracting flicker, good so far.
Besides clicking on menu item I often send clients a link with a string query which lands them on my site with the tabbed panel open to what I want them to see initially., I use a string query in the URL per Dave Powers technique often refered to in this forum titled'Spry: Opening Specific Tabs and Panels from Another Page".
Because the visibility is set to hidden in the CSS the second level of the tabbed panel is still invisible, So I am looking for suggestions that may involve scripting the style or playing with the CSS to overide the CSS and make the second level visible when users arrive via the query string method.
Thanks for taking a look!
Daniel

For Spry 1.0 widgets, each widget had one core file. Each of them had common things like addClassName(), removeClassname(), along with a bunch of basic functionality. So that adds up to a lot of redundant code.
This way, all that common stuff is kept in a single file. That means that each widget base class just has what it needs to glue everything together.
Many widgets are 'panel' based: accordions, tabbed panels, slideshows. So handling those panels is done via the PanelSet and PanelSelector files.
You will find SpryTabbedPanels2.js much smaller than the first version.
By components, for instance: SpryFadingPanels.js is only needed if you want to fade between panels. If you don't want that effect, you don't need to use it. WIth components and plugins, you or anyone else can write a different transition and make that available to all your Spry UI widgets.
I don't like all the includes either but it's the right way to go with what we are doing.
Thanks,
Don

Vertical tabbed panel with background image

Hi all,
I have a working vertical tabbed panel. For the text that's shown, there's a background image assigned to the associated DIV.
However...
The background image that's shown is clipped to the bottom of the text.
In other words, if I have 3 lines of text, the bottom of the background image only goes as far down as the bottom line of text. In order to show the entire image, I have to put in a lot of </ br> tags for "empty" text, not a very good approach.
More of the backgound will show if I increase the text text size via the browser.
To try to describe this more accurately,
Let's say I have a background image that's 600 px in height, but the lines of text only measure to 400px. That means that the bottom 200 px of the image doesn't show, unless I add more lines of text.
Hoping someone has an answer!
Thanks,
Jerry

Gramps,
Again, thanks for your time. While we're now full time commercial photographers (http://www.jerryandlois.com), I was a software engineer for some 20+ years in an earlier life, all on the application side of things. Not really any appreciable time with website stuff.
There are a few more tech/how-to questions I have that are specific to CSS, in terms of polishing up the small site I'm working on. However these are not SPRY related, unless SPRY can solve this for me.
In particular, suppose I have a large block with a background image and a body of text. I want to ensure the text wraps around the image, rather than being a complete overlay where the text can collide with the main body of the photo.
Example:
http://jerryandloisstudios.com/about.html
The issue is that the text is resizable, by design of course. Is there any way to manage these two elements (text and image) so they get along the right way? We want the text to overlay some of the image, but only on the periphery, if that makes sense. So far, the only solution I've seen is to keep the text formatted roughly in a column so that if its size increases all will still be OK. But... artistically that just doesn't look right.
If you're up for it, I'd certainly welcome a private email thread, unless others can also benefit from the rather newbie questions I'm raising: [email protected]
Again, thank you for your help!!!
Jerry

Spry tabbed panels with a Google map?

I am building a website with a CS4 Spry tabbed panel (fixed size). On one of the tabs I have a Google map. All works well except.... When I am on a tab different from the map tab and resize the browser window, when I go to the map tab the map does not display or work correctly. A small amount of the map will display in the upper left of the tab panel.
Any ideas?
Thanks, any help is appreciated.
-David
<div id="mainContent">
<h2 id="pageheader">Garden Tours and Events</h2>
<div>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Map</li>
<li class="TabbedPanelsTab" tabindex="0">Text</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" id="map" style="height: 500px; width: 770px;">
<script type="text/javascript">
</script>
</div>
<div class="TabbedPanelsContent" style="height: 500px;">
<p> </p>
<p> </p>
<table border="0" id="gardenTourData">
<tr>
<th scope="col">Date</th>
<th scope="col">State</th>
<th scope="col">City</th>
<th scope="col">Event Type</th>
<th scope="col">Id</th>
<th scope="col">Coordinates</th>
</tr>
<?php do { ?>
<tr onClick="window.open('http://localhost/details.php?id=<?php echo $row_rsListGardenTours['id'] ?>','detailsWindow','width=656,height=600,scrollbars=yes')" >
<td><?php echo $row_rsListGardenTours['tour_date']; ?></td>
<td><?php echo $row_rsListGardenTours['state']; ?></td>
<td><?php echo $row_rsListGardenTours['town_city']; ?></td>
<td><?php echo $row_rsListGardenTours['event_type']; ?></td>
<td><?php echo $row_rsListGardenTours['id']; ?></td>
<td><?php echo $row_rsListGardenTours['start_location_coordinates']; ?></td>
</tr>
<?php } while ($row_rsListGardenTours = mysql_fetch_assoc($rsListGardenTours)); ?>
</table>
</div>
</div>
</div>
</div>
</div> 

It is best to check the forum first before asking for assistance.
Have a look here http://forums.adobe.com/message/33236#33236
or here http://forums.adobe.com/message/2654715#2654715
I hope this helps.
Ben

How to make Spry Accordion Content Panel with a variable content fit

I have a problem. The content panel has a fixed length so I changed it to auto so I can view all the content of each panel. The problem is that the content panel takes the dimensions of the longest content and applies that to ALL the panels. So as you click from one to the other, some are practically empty with all the space, while others seem full.
The question is, is there a way to vary the size of the content panel so on one that has not a lot of content stays to that size. This is the way I have the CSS for that. How can I achieve the variable heights?
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 5px 4px 6px 15px;
height: auto;
background: url(../images/backgrcolor0033.png);
color: #FFF;
Thank you.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false });</script>
</body>
</html>
Gramps

Problem with Spry Tabbed Panels with Explorer 6

I've used Tabbed panels all over my site, and they seemed to work fine in FireFox, Safari, Explorer 7 and 8, etc. but today i checked out Explorer 6 in BrowserLab, after someone said our site looked weird.
In EX 6 it certainly does: all the tabbed panels are preceded by about a screen's worth of empty space!
I'd appreciate it someone could have a look at this and see if they can tell what's going on:
See this page:
http://www.ragandbone.ca/Pages/willows.html
or almost any ohter page on the site!
I'm very far from experienced in web work, so I might need step by step instructions for any fix suggested.
Thanks in advance
John

Hi, John,
Make the width of the .TabbedPanels narrower. In the course of my experiments, I ended up making it 580px, which works in IE6, according to BrowserLab. You had a simple width overrun; your widths + borders+ paddings + margins (within the content div) added up to more than the width available. You might be able to get away with slightly more width, but test it carefully when you start to add it back in...
This might be an instance of the "doubled margin bug" (see http://www.positioniseverything.net/explorer/doubled-margin.html).
I changed the margin on .TabbedPanels to margin: 0 auto; so that any effective centering that had been done by 'filling' the width previously was now achieved by the margin-right and margin-left set to "auto." (The zero applies to top and bottom margin.)
I deleted the left: -40px; that you had applied to .TabbedPanelsTab and zeroed out the right padding on .content ul, .content ol {
padding: 0 15px 15px 0; that your threeColFixHF_RB.css had applied to all ul in the site. This might or might not actually affect anything if you don't make these same changes, but I had altered them in the course of figuring out what was going on. It's never a good policy, in my opinion, to use negative margin if you can simply correct both elements, as I did. You don't want to be progressively compensating for things you don't need anyway!
Beth

Problem with defaul tabbed panel with page refresh

Hi,
I have a problem with my spry tabbed panels. The default tab
is set to be the 1st tab, when I move to 2nd tab and navigate
through the content, as the page refreshes, and before it is fully
loaded it shows the content of the first tab for about 20 seconds
or so....then the page finally goes to the desired content on the
2nd tab....
How can I make it so this does not happen and it looks like a
smooth transition as I navigate through my pages?
Thanks,
Brandan98

U add extra classNames to the tabs and specify the styles on
the new classes
example:
<div class="TabbedPanels style1_panels" id="tp1">
<ul class="TabbedPanelsTabGroup style1_group">
<li class="TabbedPanelsTab style1_tab"
tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab style1_tab"
tabindex="0">Tab 2</li>
<li class="TabbedPanelsTab style1_tab"
tabindex="0">Tab 3</li>
<li class="TabbedPanelsTab style1_tab"
tabindex="0">Tab 4</li>
</ul>
<div class="TabbedPanelsContentGroup
style1_contentgroup">
<div class="TabbedPanelsContent style1_content">Tab 1
Content</div>
<div class="TabbedPanelsContent style1_content">Tab 2
Content</div>
<div class="TabbedPanelsContent style1_content">Tab 3
Content</div>
<div class="TabbedPanelsContent style1_content">Tab 4
Content</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab: 2
</script>
style1 beein the extra class ;)
U can also.. specify other classnames in the constructor read
more about this here:
http://labs.adobe.com/technologies/spry/articles/data_api/apis/tabbed_panels.html#options

Validation Errors with Spry tabbed panels with doctype XHTML 1.0 Strict

I'm getting errors while using the W3C Validation Service on my Strict XHTML 1.0 pages that use the SPRY Tabbed Panels. I've read a few places that W3C has no plans on 'fixing or relaxing" the restrictions. Is there any type of work around to the Spry Widget Tab panels code ??? All of my other pages validate nicely... hate to go back to Transitional afterconverting all my other code.
The DreamWeaver File validation also gives me errors but I think that is fed from W3C.
Any help would be appreciated. Thanks Pat
Line 31, Column 46: there is no attribute "tabindex"
… <li class="TabbedPanelsTab" tabindex="0">Want a professional looking Logo ?</…

Use Spry 2.0
You can see a live demo of Spry 2.0 widgets below (contains valid markup).
http://alt-web.com/sandbox/Spry-test.html
Unless you're incorporating XML applications into your web site, there is not much reason to use XHTML Strict doc types. That standard was last revised in 2002. It has since been replaced with HTML5.
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/

Integrating Wordpress into Muse need dynamic height based on content with cross domain

Since Muse doesn't currently support Blogs and Wordpress integration I have decided to use an iFrame.
My goal is to have the height of the iframe dynamically change based on the content in my Wordpress blog. I understand this is a common issue with frames that are hosted on different domains.
I am running into having to over compensate with a bunch of deadspace to allow enough room. Alternatively I get the horrible looking scroll bar.
I have tried using cross site scripting, JQuery and postMessage but am having trouble figuring out how to put the proper code into Muse and Wordpress for them to communicate back and forth.
Please, any help on this matter would be greatly appreciated.

Abhishek,
Thanks for your reply, however, it is not working with Muse. I added the Javascript to the head section and adjusted iframe and it displays as a small square in the upper left hand corner, unable to view the whole page.
Inserted into head section --
<script type="text/javascript">
function resizeIframe(obj)
obj.style.height = 0;
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
</script>
inserted as an html object --
<iframe name="MycoSmooth" src="http://www.mycosmooth.com" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' />
Below is the result:
The purpose is to have an independent website run the blogging capabilities, since muse doesn't directly support blogging as of yet.
Since the site is on a different domain, I am running into cross domain issues and it won't get the height of the page. The methods that apparently work use php and I am unsure how that would work in muse, if at all.

Drill down of manual cross tab reports with Multi variable subreports

I tried to make a subreport by setting the hyperlink on the group sum of a manual crosstab (http://www.tek-tips.com/faqs.cfm?fid=1219) by setting Hyperlink to another report object.
The documentation said I should copy and paste the name of the report object in the sub report over into the field in the primary report. As I don' t really know what a report object is this failed. Further I found some code in a sample report to deal with subreports that have multiple parameters. The code was unbelievable; it couldn't be right. So, how do I link my subreports to my reports by passing two parameters to the subreports that represent the row and column label of a given sum.
Further what are the fields in the hyperlink another report object from for:
Select from: //do they want a query here?
Report title: //The don't let you type in this
Object Name: //This seems elective
Data Context:// No clue on this either
Thanks for any help you can provide
p.s. This forum doesn't seem to use traditional bit code

Thanks for the reply. I looked through those samples and other samples. The two cross tab samples I could find were CtossTab and Inventory CrossTab. Neither has a hyperlink to a sub report and I believe those were actual cross tabs, not manual crosstabs. When I scoured the web for an answer, all I could find was what was linked. This is going 20 pages deep on google.
Crystal crosstabs are 98% better than the excel power pivot or pivot table. However, with Excel, you can drill down to the details automatically. With crosstabs you can't. I was hoping to replicate this by making each summary in the manual cross tab a hyperlink to a sub report that filters the details based on the row and column just as excel does. There is no sample for this.
Oh yes, I'm using CR XI

Tabbed panel with adjustable/variable height based on content

Similar Messages

Maybe you are looking for