Skip navigation
spry tabbed panels
Currently Being Moderated

Spry tabbed panles default hide

Apr 24, 2012 8:56 AM

Tags: #tabbed_panels

Hello,

 

Im with some problems with the spry content tab. What I need is to:

 

 

as default hide the content of the spry tabbed panels and also hide on mouse out

 

 

please advise if you needto check my codes and site

 

thanks

 
Replies
  • Currently Being Moderated
    Jun 29, 2012 5:07 PM   in reply to spry tabbed panels

    I see that time has passed and you have not gotten a response to your question.

     

    What exactly is to be hidden when the mouse is not hovering; what is to be showing when the mouse IS hovering?

     

    It is possible that the solution will not be to use Spry Tabbed Panels, which would require a lot of adapting.

     

    For a simple solution, if you don't mind the "contents" to be lined up next to each other, float divs next to each other. Set a height that encompasses your title but make the overflow: hidden. Add a css style that makes overflow: visible;

     

    Here is some simple code for that:

     

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

    <style type="text/css">

    .change {

              float: left;

              height: 2.5em;

              width: 100px;

              overflow: hidden;

    }

    .change:hover {

              overflow: visible;

    }

    </style>

    </head>

     

     

    <body><div class="change"><h3>Title</h3>

    <p>Here is a basic element</p></div>

    <div class="change"><h3>Title</h3>

    <p>Here is a basic element</p></div>

    <div class="change"><h3>Title</h3>

    <p>Here is a basic element</p></div>

    <div class="change"><h3>Title</h3>

    <p>Here is a basic element</p></div></body>

    </html>

     

    I fiddled around a bit with the tabbed panels, but couldn't find an easy way to make them appear and disappear on hover.

     

    Your other possibility is to do disjoint rollovers using the Show-Hide behavior, but it seems difficult to have the "content" start out invisible.

     

    I hope you have solved the problem by now, or that these suggestions give you some ideas.

     

    Beth

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points