0 Replies Latest reply on May 24, 2013 5:17 PM by katrina11

    Problem with using CSS3 :Focus transition

    katrina11 Level 1

      Hello,

       

      I am using a CSS3 transition where when a DIV is in focus / clicked, it slides down the page into view (originally set partially off the page with a negative margin). When the user clicks elsewhere (i.e. anywhere outside of the div) it slides back up again. The problem is, there are items within my div, such as links and an input text field with submit button etc, that I'd like to be usable still. However, when teh user clicks them, and they are then in :focus (i'm assuming) the main div slides back up again (obviously too soon than I'd like).

       

      How can i resolve this? Do i need to sue a different type on transition method (i.e. not :focus ) ?

       

      This is my first foray into using CSS transitions, and I'd like to stick with them if possible (i.e. not use javascript).

       

      It's easiest to see in action here, but you have to make the browser width less than 780px so you can see the tab appear towards the top of the screen, where you click 'Contact & Reservations' to see the transition in action:  http://tinyurl.com/CSS3FocusIssue

       

      If you'd rather see the code here, then...

       

      Here is the generated html (sorry it's lengthy... it's originally delivered via SSI)

       

      <div id="Sidebar" tabindex="1">


      <div id="restaurants">


      <h3>OUR STUDIOS</h3>


      <div id="allLocations" class="other">

       
           
      <span class="partner">OUR STUDIOS</span>

            <a href="#" target="_self"><img name="" src="partner.png" alt="" height="120" width="220"></a>

            <a href="#" target="_self"><img name="" src="partner2.png" alt="" height="120" width="220"></a>

            <a href="#" target="_self"><img name="" src="partner.png" alt="" height="120" width="220"></a>

            <a href="#" target="_self"><img name="" src="partner2.png" alt="" height="120" width="220"></a>


      </div><!--close allLocations-->

      <div class="other">

        <span class="partner"><strong>Studio 1</strong><br>

      location</span>

            <a href="#" target="_self"><img name="" src="partner.png" alt="" height="120" width="220"></a>

          </div>


      <div class="other">

        <span class="partner"><strong>Studio 2</strong><br>

      location</span>

            <a href="#" target="_self"><img name="" src="partner2.png" alt="" height="120" width="220"></a>

          </div>


      <div class="other">

        <span class="partner"><strong>Studio 3</strong><br>

      location</span>

            <a href="#" target="_self"><img name="" src="partner.png" alt="" height="120" width="220"></a>

          </div>


      <div class="other">

        <span class="partner"><strong>Studio 4</strong><br>

      location</span>

            <a href="#" target="_self"><img name="" src="partner2.png" alt="" height="120" width="220"></a>

          </div>


      </div><!--close restaurants-->



      <div id="primaryInfo">


      <div id="addressInfo">

        <p><strong>Studio Name</strong><br>

        123 Sesame Street<br>

        Denver<br>

        Colorado<br>

        <a href="#"><strong>Map &amp; Directions</strong></a></p>

      <p><strong>P:</strong> 123.345.6789<br>

        <strong>F:</strong> 513.987.6543<br>

        <strong>E:</strong> <a href="#"><strong>contact us</strong></a></p>

        </div><!--close addressInfo-->

      <p>Facebook | Twitter</p>

      <h3>Opening Hours</h3>

      <p>Wed-Sun, 5:30pm-12pm<br>

        Closed Mon &amp; Tues</p> 

      <div id="reserveTable">

          <span style="vertical-align:middle;"><a href="#"><strong>Book a Studio Session</strong></a></span>

      </div><!--close reserveTable-->



      <h3>Join Our Mailing List</h3>


      <!--MAILCHIMP FORM BEGIN-->

      <div id="mc_embed_signup">

      <form action="#" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate="">

      <table id="signupTable" border="0" cellpadding="0" cellspacing="0">

      <tbody><tr>

          <td align="left" valign="top" width="100"><input value="" name="EMAIL" id="mce-EMAIL" placeholder="email address" equired="" type="email"></td>

          <td align="right" valign="top" width="68"><input src="http://www.aquasandbox.com/studio/submit.png" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" type="image"></td>

        </tr>

      </tbody></table>

      </form>

      </div><!--End mc_embed_signup-->

      <!--END MAILCHIMP FORM-->


      </div><!--close primaryInfo-->


      </div><!--close Sidebar-->

       

       

       

      and here is the css:

       

      #Sidebar  {

          position: absolute;

          left: 50%;

          top:0;

          margin-top:-570px;

          margin-left: -120px;

          height: 610px;

          border-radius: 10px;

          width: 220px;

          box-shadow: 2px 2px 3px #000;

          background-image: url(label.png) , url(leftbg.png);

          background-repeat: no-repeat, repeat;

          background-position: bottom center, center;

          text-align:center;

          transition: margin-top 2s;

           -moz-transition: margin-top 2s; /* Firefox 4 */

           -webkit-transition: margin-top 2s; /* Safari and Chrome */

           -o-transition: margin-top 2s; /* Opera */

      }

       

      #Sidebar:focus {

      margin-top:20px;

      outline:0;

      }

       

      }

       

      Thanks in advace for any tips or advice anyone can offer. I'd be very grateful!

       

      Katrina