transition between HTML Pages using jQuery?

Question

I am using this code for transition between my HTML pages and it works just fine:

http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/

But there is tiny issue that I cannot resolve and that is the blank white background shown between fade in and fade out transitions.

basically when the page is faded out and the code is trying to the load the next page, there is a slight delay (almost 1 seconds) and in that 1 second gap a blank white screen is shown. I know that I have to use some CSS and i added this to my HTML css code:

html{
    font-size: 100%;
    background-color:#000;

}

but when i do that, a black line is shown on the loaded page for some strange reason!

is there anyway to eliminate the 1 second delay or eliminate the black line on the page as i really don't know what is causing the issue?

Here is my Entire CSS code:

            <style type="text/css" media="screen">
        html{
    font-size: 100%;
    background-color:#000;

}

            #maximage {
/*              position:fixed !important;*/
            }

            #container{
                overflow:hidden;

            }
            #footer{
                color:#FFF;
                text-align:left;
            }

            /*Set my logo in bottom left*/
            #logo {
                top:2%;
                height:auto;
                left:60%;
                position:absolute;
                width:38%;
                z-index:1000;

            }

            #txt1 {
                top:55%;
                height:auto;
                left:5%;
                position:absolute;
                width:55%;
                z-index:1000;
                color:#FFF;
                font-size:100%;
                font-family:Verdana, Geneva, sans-serif;

            }
                #txt2 {
                top:59%;
                height:auto;
                left:5%;
                width:55%;
                z-index:1000;
                color:#cf0226;
                font-size:100%;
                font-family:Verdana, Geneva, sans-serif;
                position:absolute;

            }

            #txt3 {
                top:63%;
                height:auto;
                left:5%;
                width:55%;
                z-index:1000;
                color:#cf0226;
                font-size:100%;
                font-family:Verdana, Geneva, sans-serif;
                position:absolute;

            }

                        #txt4{
                top:22%;
                height:auto;
                left:3%;
                width:55%;
                z-index:1000;
                color:#cf0226;
                font-size:100%;
                font-family:Verdana, Geneva, sans-serif;
                position:absolute;
                margin-top:4%;
                float:left;
            }
                                    #txt5{
                height:auto;
                width:100%;
                z-index:1000;
                color:#fff;
                font-size:4%;
                font-family:Verdana, Geneva, sans-serif;
                position:absolute;
                text-align:center;

            }
            #logo img {
                width:69%;
            }

body {
    background-color:#000;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    font: 16px/1.8 sans-serif;
    font-family:Verdana, Geneva, sans-serif; 
}

#preloader{
   position:absolute;
   top: 45%;
   left: 75%;
   width:278px;
   height: 105px;
   margin-top: -45px;
   margin-left: -210px;
   z-index:1000;
}

#wait{
   position:absolute;
   top: 37%;
   left: 45%;
   width:300px;
   height: 113px;
   margin-top: -45px;
   margin-left: -120px;
   z-index:1000;
}

        h1 {
            text-align: left;
            color:#fff;
            font: 16px/1 "Verdana, Geneva, sans-serif";
            display: inline-block;
            width: 100%;
            font-family:Verdana, Geneva, sans-serif;


        }




#wrap {
position: relative;
width: 39%;
margin: 0 auto;
height:50%;
overflow: hidden;


}

    #navigation{
        margin-left:2%; 
        margin-top:2%;
  }

  #home{
      width:10%; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;

  }

  #products{
     width:10%; 
     margin-bottom:0.5%; 
     text-align:center; 

  }




        a:link { text-decoration:none;}      /* unvisited link */
a:visited { text-decoration:none;}  /* visited link */
a:hover {
text-decoration:none;
}  /* mouse over link */
a:active { text-decoration:none;}  /* selected link */

#div101:hover{
    border:thin;
    border:#FFF;
    background-color:#FFF;
    color:#000;
    background: rgba(FFF, 0, 0, 0.6);
    opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

   padding: 20px;
   border-radius: 15px;
/* HOVER ON */
   -webkit-transition: border-radius 2s;
     transition:all 2s ease-in-out;
  perspective: 800px;

}

#div102:hover{
    border:thin;
    border:#FFF;
    background-color:#FFF;
    color:#000;
    background: rgba(FFF, 0, 0, 0.6);
        opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

}


/* Landscape */
@media screen and (orientation:landscape) {
            #logo{
                top:2%;
                height:auto;
                left:60%;
                position:absolute;
                width:38%;
                z-index:1000;

        }

        #preloader{
   position:absolute;
   top: 45%;
   left: 55%;
   width:278px;
   height: 105px;
   margin-top: -45px;
   margin-left: -210px;
   z-index:1000;
}


}

@media screen and (max-width: 600px) , screen and (max-height: 700px) {
  #logo {
                top:2%;
                height:auto;
                left:60%;
                position:absolute;
                width:38%;
                z-index:1000;
  }
}
@media screen and (max-width: 4000px) , screen and (max-height: 2000px) {


  #logo {
                top:2%;
                height:auto;
                left:60%;
                position:absolute;
                width:38%;
                z-index:1000;
  }
}

@media only screen and (min-width : 321px) {


  #logo {
                top:2%;
                height:auto;
                left:60%;
                position:absolute;
                width:38%;
                z-index:1000;
  }

}

@media only screen and (max-width : 321px) {

      #footer {
      font-size:10px;
        text-align: left; 
        margin-left:10%; 
        margin-bottom:5%; 
        font-family:Verdana, Geneva, sans-serif; 
        width:42%;
  }

    #home{  

      width:35%; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      color:#fff;
      border:#666;
      border:2px solid;
}

    #products{  
      width:35%; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      font-weight:bold;
      color:#fff;
      border:#666;
      border:2px solid;
}

    #vodka{ 
background-color:#C0C0C0;
      width:35%; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      color:#fff;
      border:#666;
      border:2px solid;
}

    #contact{   

      width:35%; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      color:#fff;
      border:#666;
      border:2px solid;
}



  #div101:hover{
    border:thin;
    border:#FFF;
    background-color:#FFF;
    color:#000;
    background: rgba(FFF, 0, 0, 0.6);
    opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */

   padding: 5px;
   border-radius: 5px;
/* HOVER ON */
   -webkit-transition: border-radius 1s;
     transition:all 1s ease-in-out;
  perspective: 800px;

}
}

@media only screen and (min-width : 321px) {

  #footer {
      font-size:13px;
        text-align:left; 
        margin-left:5%; 
        margin-bottom:10%;  
        font-family:Verdana, Geneva, sans-serif; 
        width:30%;
  }
    #home{

      width:145px; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      color:#fff;
      border:#666;
      border:2px solid;

  }

      #products{

      width:145px;
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      color:#fff;
      border:#666;
      border:2px solid;

  }

        #vodka{
background-color:#C0C0C0;
      width:145px; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      color:#fff;
      border:#666;
      border:2px solid;

  }

        #contact{

      width:145px; 
      margin-bottom:0.5%; 
      text-align:center; 
      font-size:12px;
      border-radius:2px;
      color:#fff;
      border:#666;
      border:2px solid;

  }

  .rotate{
      cursor:pointer;

    }  

.rotate:hover  
{
    background-color:#da2128;
} 



}

@keyframes filleffect
{
from {width:0;}
to {width: 400px;}
}

@-webkit-keyframes filleffect /* Safari and Chrome */
{
from {width:0;}
to {width: 400px;}
}



        </style>

Elise · Accepted Answer · 2013-07-28 17:23:13Z

1

I suspect the reason you are getting a black line is because your html tag contains no content in between page transitions, so what you are seeing is in fact the dark background of a very narrow page. Try adding height: 100%; min-height: 100% to your html tag to force the page to be full height.

answered Jul 28, 2013 at 17:23

Elise

5,1544 gold badges39 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jessy Jordan Over a year ago

I did follow your suggestion and added height: 100%; min-height: 100%; to the html tags and still the black line appears!

Elise Over a year ago

How about adding the same to your body element as well?

Collectives™ on Stack Overflow

transition between HTML Pages using jQuery?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related