1 Reply Latest reply: Jun 29, 2012 5:07 PM by Zabeth69 RSS

    Spry tabbed panles default hide

    spry tabbed panels Community Member

      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

        • 1. Re: Spry tabbed panles default hide
          Zabeth69 Community Member

          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