Making tab panel content auto resize
I'm using a SlidingTabPanel which has dynamic content. How can I get the panels to dynamically resize according to the amount of content in each panel?
No,
This is one the limitations of the sliding panels, it needs a wrapper div, with a minimum height in order to make the divs inside the wrapper slide. If you want such functionality on your site, you might want to create a custom effect for that using the SpryEffects library.
http://labs.adobe.com/technologies/spry/articles/effects_coding/index.html
Similar Messages
-
Anchor tag inside Spry Tabbed Panel Content
I have successful been able to use code I found listed on
here to open a specific tab in a Spry Tabbed Panel form a link. Now
I am wondering if anyone has found out how to add an anchor tag
code this so that is goes to a specific location inside that Tabbed
Panel Content?I was looking for an answer on how to open a tab from another tab and found it!
In return I'll give you a hint on how to open a tab from another tab using an anchor
for example,
if you were working on a file named "projects.php"
create an anchor in tab 2
<a name="anchor1" id="anchor1"></a>come next to me
in tab 1 create the link to the anchor in tab 2
<a href="projects.php#anchor1" onclick="TabbedPanels1.showPanel(1); return false;">open tab 2 and go to its anchor 1</a>
In your case you are overlooking the file name and jumping directly to the anchor name.....am I right??
cheers from Lima, Perú -
Dividing Spry Tabbed Panels content area into columns?
Hi there.
I am building a website and I want to divide the content area of a Spry Tabbed Panel into 3 columns for text.
How can I do this?
I thought about making divs inside the Panel but it would be too messy.
Please let me know if there is a simple way to do this.
Thanks in advance.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
<style>
* {box-sizing: border-box;}
body {width: 960px; margin: auto;}
.TabbedPanelsContentVisible {overflow: auto;}
.col33 {width: 33.3333%; float: left; padding: 15px;}
</style>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
<li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<div class="col33">
<h3>Column 1</h3>
<p>Content 1</p>
<p>Dicta sunt explicabo. Nisi ut aliquid ex ea commodi consequatur? Neque porro quisquam est, aut odit aut fugit, ut aut reiciendis voluptatibus maiores alias. Iste natus error sit voluptatem dicta sunt explicabo. Sed quia consequuntur magni dolores eos itaque earum rerum hic tenetur a sapiente delectus, cum soluta nobis est eligendi optio. Omnis voluptas assumenda est, nemo enim ipsam voluptatem neque porro quisquam est.</p>
<p>Eaque ipsa quae ab illo inventore veritatis totam rem aperiam, qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, aut odit aut fugit, ut enim ad minima veniam. Id est laborum et dolorum fuga. Atque corrupti quos dolores et quas molestias qui ratione voluptatem sequi nesciunt. Temporibus autem quibusdam saepe eveniet ut et voluptates repudiandae sint sed quia non numquam eius modi.</p>
</div>
<div class="col33">
<h3>Column 2</h3>
<p>Content 1</p>
<p>It is the star to every wand'ring bark, which alters when it alteration finds, love alters not with his brief hours and weeks. Or bends with the remover to remove. That looks on tempests and is never shaken; admit impediments; love is not love let me not to the marriage of true minds.</p>
</div>
<div class="col33">
<h3>Column 3</h3>
<p>Content 1</p>
<p>The three cs - customers, competition and change - have created a new world for business while those at the coal face don't have sufficient view of the overall goals. In order to build a shared view of what can be improved, building a dynamic relationship between the main players. Highly motivated participants contributing to a valued-added outcome.</p>
<p>Whether the organization's core competences are fully in line, given market realities the components and priorities for the change program an important ingredient of business process reengineering. Taking full cognizance of organizational learning parameters and principles, organizations capable of double-loop learning, working through a top-down, bottom-up approach. In order to build a shared view of what can be improved, maximization of shareholder wealth through separation of ownership from management measure the process, not the people. Presentation of the process flow should culminate in idea generation, taking full cognizance of organizational learning parameters and principles, the components and priorities for the change program. An investment program where cash flows exactly match shareholders' preferred time patterns of consumption from binary cause and effect to complex patterns, working through a top-down, bottom-up approach.</p>
</div>
</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script>
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html> -
Adding a scroll bar to tabbed panel content?
I have set a specific height to tabbed panels and I don't
want them to expand according to content. Instead I want to add a
scroll bar to the tabbed panels. How can i do this?Sure it's possible.
Edit the TabbedPanelsContent class in the CSS file.
Add a specific height to it and then add an overflow:auto;
rule to it.
.TabbedPanelsContent {
padding: 4px;
overflow: auto;
height: 200px;
When styling Spry Widgets, for the most part, just think of
them as HTML. Add a height and a scrollbar just as you would to any
DIV.
Hope this helps,
Don -
Tabbed Panel content overflow problem
Hi everyone,
I'm a newbie to this, but have successfully used a few Spry
elements and am loving them.
My problem right now is that I'm trying to get a tabbed panel
to work where the panel contents have different amounts of text. It
works great in IE6 and looks fantastic, but in IE7 and Firefox 2
the content is visible although it overflows beneath the styled
content area.
You can see it here:
http://www.pranayogacollege.com/yoga-workshops.php
I imagine it's a simple thing that I've overlooked, but I'd
be very appreciative if someone could point me in the right
direction.
Thanks in advance,
Jade"spiderjade" <[email protected]> wrote in
message
news:eqt5mt$d32$[email protected]..
> You can see it here:
>
http://www.pranayogacollege.com/yoga-workshops.php
>
> I imagine it's a simple thing that I've overlooked, but
I'd be very
> appreciative if someone could point me in the right
direction.
.TabbedPanelsContent {
padding: 4px;
/*ADD NEW*/
height: 276px;
overflow: auto;
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design" -
Placing an image in a tabbed panel content area, it shows up on all three panels
This is crazy. It should be so simple. But sometimes this happens to me. Like today.
I have many pages that use a simple tabbed panel feature with three tabs.
Each content area has a text frame and an image frame.
Sometimes when I try to place an image into the content area of the first tab, the image shows up on all three content areas. I have tried and tried placing the image, making very sure I am in the "content area" on not just on the page. But nevertheless, the image seems to be "stuck" on the page, in front of the accordian feature, and therefore showing on all three tabs.
How am I not targeting the placement of those images correctly? There just aren't that many options for me to screw up, it's a simple tabbed panel, that's all!
Help please.
BarbaraAre you using the latest version of Muse/Air?
The borders of the Content Area of a tab gets highlighted as soon as you drag over an element over it so it is very unlikely that something like this could happen. However, I believe it could be due to messed up Layers configuration as the only way I could reproduce this problem is through moving the image into a layer above a layer that contains the Tabbed panel or in case of just one layer, you might have the image at the very top.
Thanks,
Vinayak -
Make the height of a tabbed panel content container adjust to the individual tab's content.
I am designing a site and on one page I am using two tabs to seperate two different kinds of content. One tab has more content and as such is longer on the page. But I noticed that MUSE uses which ever tab is the longest as the basis for how long the page is. This is fine while on that tab, but on the other tab it makes the page much longer (bunch of dead space) then it needs to be. Is there a way of getting around this or is this a limitation of muse?
Take a look at the page here and you will see what I mean. Click on cuff cases and scroll down and you will see what I mean.
http://pgl0.businesscatalyst.com/accessories---prince-gun-leather.htmlHi Lukewind,
This has come up in the forum archive. There is not currently a way to create a tabbed panel with adjustable/variable height content containers. This is not actually a bug in Muse, but it is a feature request. Please create an Idea topic for this feature in the Ideas for Features in Adobe Muse forum (http://forums.adobe.com/community/muse/ideas).
Here is the content from the archive request:
Have the depth of tabbed panels adjust to the size of the content.
The boxes in tabbed panels should be adjustable to the content rather than have all the tabs open in the same size as the biggest text box. -
Spry Tabbed Panel Content editable region not functioning
I have a web page I created in dreamweaver CS5 with a tabbed panel. When my client opens the page to edit in contibute, the content and tabs do not function properly. Basically, the tabs do not function and the content for all of the tabbed regions is listed down the page on the first tab window. The page works fine when I open in Contibute on my computer, but only if it is through the Contibute Program. If I try to edit through firefox, I get the same issue as my client.
http://menwieldingfire.com.previewdns.com/bbq/bbq-menu.html
also, I get a space between the header image and the horizontal menu that goes white. I end up having to re-upload the page from dreamweaver. Why would the follow code get added to the page when a draft is created in Contribute, when this page is based on a template with editable regions?
< p style="margin-top: 0; margin-bottom: 0;"> </p >
Any ideas?Check http://blogs.adobe.com/contribute/2010/06/paragraph_spacing_options_in_a.html and also http://blogs.adobe.com/contribute/2010/06/spry_widget_rendering.html it should be helpful to resolve the issue.
-
Anchor Tag In Tabbed Panel Content
I used this code to jump to and open the tab. I would like to
add an anchor tag name to it so that it jumps to a specific section
I have named in the content panel.
<a href="#" onclick="TabbedPanels1.showPanel(2); return
false;">
This solution does not work:
<a href="#anchorname" onclick="TabbedPanels1.showPanel(2);
return false;">
Has anyone found a work around for this?This is such a great solution--thanks so much for sharing. I'm having a problem with the name of my collapsible panels (which operate similarly to Tabbed Panels, as far as I understand). Basically I am trying to use anchor tags and my goal is to create a hyperlink on page 1 that points to content within a spry widget on page 2 of my webpage. I obviously want the spry widget on page 2 to open up on click and the user to be taken to where my anchor tag is located. In this thread (http://forums.adobe.com/message/209107#209107), Mr. Celic seems to indicate using something like this:
<a href="#anchorname" onclick="TabbedPanels1.showPanel(2);">
My exact code is like this: <a href="pagetwo.html#myanchortag" onclick="CollapsiblePanel1.open();">content here</a>
The good news is that this works, but my problem is that page 1 of my website also has a CollapsiblePanel1 so when I click on the link above, CollapsiblePanel1 on page 1 opens, not the CollapsiblePanel1 on page 2 of my site. I went into page 2 and clicked on "CollapsiblePanel1" and in the "Properties" panel renamed it to "CollapsiblePanel11" then changed my code to
<a href="pagetwo.html#myanchortag" onclick="CollapsiblePanel11.open();">content here</a>
but that didn't do a thing! I'm super stuck and don't know how else to rename the collapsible panels or how to get it to work.
One thing I can't figure out from the original solution (<a href="#" onclick="TabbedPanels1.showPanel(2);">) is what is "showPanel(2)"? Where did she get this from/where can I find the equivalent for my collapsible panel spry? This could be where I'm going wrong.
Any thoughts would be greatly appreciated.
Thanks so much! Catherine -
Spry Tabbed panels content loading
Hello,
I have created a tabbed interface, it looks good, however the
content in some tabs it is a little heavy on some internet
connections.
Is there a way to load the content of each tab separately?
What i wanted to do is for each tab content to load only if
the user clicks on the tab, this way the start page will load much
faster. With the current settings all the content on all tabs loads
at the same time. Did not find anything on sprytabbedpanels.css
that could do this.
Can anyone help me?
Thanks in advance.
Joao.On Thu, 13 Sep 2007 00:57:12 +0000 (UTC), "manzas"
<[email protected]> wrote:
>Hello,
> I have created a tabbed interface, it looks good,
however the content in some
>tabs it is a little heavy on some internet connections.
> Is there a way to load the content of each tab
separately?
> What i wanted to do is for each tab content to load only
if the user clicks
>on the tab, this way the start page will load much
faster. With the current
>settings all the content on all tabs loads at the same
time. Did not find
>anything on sprytabbedpanels.css that could do this.
> Can anyone help me?
> Thanks in advance.
> Joao.
>
>
May we see it? -
Spry Tabbed Panels content open verticaly on web site opening?
Hello,
As long as the client does'nt authorised javascript my opening web site page does'nt make sense, we see all the content of the tabs openned vertically.
Is there a way to have an acceptable opening page , maybe without the the tabs working for the one who dont accept javascript?
Thank You in advancepicotine7 wrote:
Hi,
Thank's for the hint.
Unfortunatly when I use the noscript tag at the beginning and at he end of my div, I loose my tabs completely.
Yes and so it should when one uses a JS-enabled browser; but if one turns JS off then you will see the tabs.
A bit of imagination is required to juggle between what you want the different browsers to see. Anything within the NOSCRIPT tags will only be seen by non-JS-browsers.
If you want to remove a particular piece of code from JS-enabled-browsers you could use
<div id="dynamiccontent">
<script type="text/javascript">
// If JS is enabled, we want to prevent the table from flashing
// when the page is first loaded.
Spry.$("dynamiccontent").style.display = "none";
</script>
<!-- your markup goes here -->
</div>
I hope this helps.
Ben -
Tabbed Panel table content flowing over and past container content.
How can I "contain" the tabbed panel content, which happens to be a table, inside the main content area and "push" the rest of the container (just the footer) down the web page. It's like the tabbed menu table section "floats" above, over and past the container section which then pushes the footer information over to the side of the container. This is my first time to use the tabbed panel and I thought it was goin to be so easy....obviously I'm doing something wrong. Thanks in advance for your advice!
Normally, tabbed panel content (the panel itself) will expand and contract to accommodate your content. If you have set a fixed height on the panel group, or constrained the height of the panel in any way, it will do as you ask, and not expand or contract any more.
If you want to accommodate contents that are variable in length, remove any height restrictions. If you still need to restrain the height, leave it in and add overflow: auto; to bring up a scroll bar when the content is too long and you don't want to pop out of the box.
If you add the height and the overflow attributes to the .TabbedPanelsContentGroup selector, your tabs will remain stationary and your panel contents will scroll.
Beth -
JTabbedPane, switch of auto resizing of the tab header possible?
Hi,
Is it possible to prevent the tab header from auto resizing?
In this code the tab "Page 1" fills the whole row at start up, but I would like to prevent it from taking more space than needed.
import java.awt.*;
import javax.swing.*;
class TabbedPaneExample
extends JFrame
private JTabbedPane tabbedPane;
private JPanel panel1;
private JPanel panel2;
private JPanel panel3;
public TabbedPaneExample()
// NOTE: to reduce the amount of code in this example, it uses
// panels with a NULL layout. This is NOT suitable for
// production code since it may not display correctly for
// a look-and-feel.
setTitle( "Tabbed Pane Application" );
setSize( 140, 200 );
setBackground( Color.gray );
JPanel topPanel = new JPanel();
topPanel.setLayout( new BorderLayout() );
getContentPane().add( topPanel );
// Create the tab pages
createPage1();
createPage2();
createPage3();
// Create a tabbed pane
tabbedPane = new JTabbedPane();
tabbedPane.addTab( "Page 1", panel1 );
tabbedPane.addTab( "Page 2", panel2 );
tabbedPane.addTab( "Page 3", panel3 );
topPanel.add( tabbedPane, BorderLayout.CENTER );
public void createPage1()
panel1 = new JPanel();
panel1.setLayout( null );
public void createPage2()
panel2 = new JPanel();
panel2.setLayout( new BorderLayout() );
public void createPage3()
panel3 = new JPanel();
panel3.setLayout( new GridLayout( 3, 2 ) );
// Main method to get things started
public static void main( String[] args )
// Create an instance of the test application
TabbedPaneExample mainFrame = new TabbedPaneExample();
mainFrame.setVisible( true );
}Edited by: user6102378 on 2010-okt-07 06:51Unfortunately, the answer seems to be "no" - looks like the exact behaviour is even different across different LAFs. Nothing short of re-writing the layout code in the xxTabbedPaneUI will help.
Just curious: how comes that we have so many tabbedPane related questions recently?
Cheers
Jeanette -
Tabbed Panels: Two content areas?
Hi, I want to set up my Tabbed Panels so that when a certain tab is clicked, the content displayss in one content area/div and an image shows in another content area/div. Is that possible? If it is, will it change the CSS? On most pages, I want to use the same CSS style for tabbed panels, but only one content area.
Thanks very much,
MikeYou could do 2 things.
1) include the "area" inside the tabbed panels content, and use position:absolute; to position it everywhere that you want on your page
2) create onclick function on each tabbedpanel tab that will display the content for you. -
Tabbed panels, Collapsible Panel, and Server Side Include
Hi,
I'm having a problem with the way a Server Side Include inside a Collapsible Panel displays.
Here is how this particular page is set up.
The page has spry tabbed panels.
>>A panel has one overall Collapsible panel (the main product tab)
>>>>Nested in that Collapsible panel are four other collapsible panels (Overview, Features, Screenshots, What's New).
>>>>>>In each of these four collapsible panels is a server side Include that features that category's content
E verything works fine as far as opening and closing is concerned. However, the problem is with the display. The content panel doesn't resize with the Include content, and therefore, the Include content extends outside the border of the content panel.
I'm thinking this is because it is Include content rather than normal content. Is that right?
Do I fix this by changing the overflow value of one the Tabbed Panel CSS styles? If so, which one should I change, and to what value?
Or if that's not how to fix it, can anyone tell me how?
Thanks a lot,
MikeHi, I'm using the latest version of Spry. I modified some CSS rules of the tabbed panels, but not the javascript file. I didn't do anything to the Collapsible Panel rules.
Since first posting this thread, I changed the overflow of the Tabbed Panels Content Group CSS rule to "scroll". That did produce a scroll, but I'd much rather have the panel expand. So, I changed it back the way it was.
Here's the page I'm working on. Click the Court Solutions tab to get to the problem panel.
http://www.ptssolutions.com/Test/public_safety_products_3.shtml
It has different results in IE and FireFox, but doesn't work correctly in either.
Thanks a lot for all your help,
Mike
Maybe you are looking for
-
Next button in Review Quiz not working in HTML5.
Hey folks, We've created a course in CP7 and when I take the course on a Computer (SWF) everthing works fine, but when I take the course on an iPad (HTML5), and go into the Review Quiz section, the Next button is not working. When I click it you can
-
Error importing a biar file in edge 3.0
I can create the biar file, but when i go to import it i get this error message 'Failed to open the BIAR file. Reason: com.businessobjects.sdk.biar.om.internal.iw.ObjectManagerIWException:Input/Output exception occurred:'Couldn't find entry 'Business
-
Hi, I bought an album and downloaded the files. They're all m4a files that perform on my Mac but when I make a CD, it won't play on my CD-Player. Which format do I need for a CD and how can I convert it?
-
Real time scenarios where Web Dynpro is used
Hi Experts, I am a beginner with Web Dynpro (ABAP ), i have developed a couple of simple web dynpros for practice purpose. I would like to know the below things to get a better idea on the technology 1. Can anyone who have worked on Web Dynpro share
-
Isn't the five computer limit for home sharing restrictive given the many devices one household may have?