Question

I am using this script: http://wpaoli.building58.com/2009/09/jquery-tab-slide-out-plugin/

It works well but my problem is that the div show up in the middle of the screen when the page is loading … and then Slides into position after the page loads.

It just doesn’t look good to see a big div just appearing on the screen.

Is there a way to stop this happening?

This is the code:

<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<script type="text/javascript">
    $(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',                     //class of the element that will become your tab
            pathToTabImage: 'image_button.gif', //path to the image for the tab //Optionally can be set using css
            imageHeight: '122px',                     //height of tab image           //Optionally can be set using css
            imageWidth: '37px',                       //width of tab image            //Optionally can be set using css
            tabLocation: 'left',                      //side of screen where tab lives, top, right, bottom, or left
            speed: 300,                               //speed of animation
            action: 'click',                          //options: 'click' or 'hover', action to trigger animation
            topPos: '79px',                          //position from the top/ use if tabLocation is left or right
            leftPos: '20px',                          //position from left/ use if tabLocation is bottom or top
            fixedPosition: false                      //options: true makes it stick(fixed position) on scroll
        });

    });

    </script>
    <style type="text/css">

      .slide-out-div {
          padding: 20px;
          width: 700px;
          background: #ffffff;
          border: 1px solid #ffffff;
          position:relative;
         z-index:999;
      }      
      </style>

....

<div class="slide-out-div">
   <a class="handle" href="#">Content</a>
   <h3>Title Here</h3>
   <p>Text here</p>
</div>

Answer 1

Use the CSS to hide the div from start:

.slide-out-div {
    padding: 20px;
    width: 700px;
    background: #ffffff;
    border: 1px solid #ffffff;
    position:relative;
    z-index:999;
    display: none;
}

Then show the div when the page has loaded:

$('.slide-out-div').show().tabSlideOut({
  ...