CODEWITHSUNDEEP
javascriptjqueryjquery-plugins
Satch3000
Satch3000

Reputation: 49384

JQuery Stop Div showing on screen when page is loading

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>

Upvotes: 0

Views: 1455

Answers (3)

MunsterMan
MunsterMan

Reputation: 305

I used Guffa's solution, but had to change one part. Instead of editing his answer, I've fixed it below:

Use the CSS to hide the slider from start:

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

Then place the new SHOW code after the initial tabslideout declaration:

$(function(){
        $('.slide-out-div').tabSlideOut({
            tabHandle: '.handle',              
            pathToTabImage: 'image_button.gif',
            imageHeight: '122px',                    
            imageWidth: '37px',                      
            tabLocation: 'left',                     
            speed: 300,                              
            topPos: '79px',                          
            leftPos: '20px',                          
            fixedPosition: false                      
        });
    $('.slide-out-div').show()
    });

Upvotes: 0

Guffa
Guffa

Reputation: 700372

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({
  ...

Upvotes: 1

RSG
RSG

Reputation: 7123

Simply add display:none to the class definition:

<style type="text/css">

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

Upvotes: 1

Related Questions