CSS loading after jQuery

Question

I have checked similar topics but did not find a satisfactory answer. My website is very long in height so it takes long to load. I have a fixed div which should only appear when user scrolls until the buttom. But the hidden div appears when I enter the page, I don't want it to appear in the loading process. Any help appreciated.

.homepage
{
    width: 76px;
    height: 62px;
    position: fixed;
    top: 85%;
    right: 182px;
    background-image: url(anasayfa.png);
    border-radius: 10px;
}

.homepage:hover
{
    top: 85.3%;
}


.scrollup
{
    width: 76px;
    height: 62px;
    background-image: url(yukaricik.png);
    position: fixed;
    top: 85%;
    right: 96px;
    border-radius: 10px;
}

.scrollup:hover
{
    top: 85.3%;
}

.nextpage {
    width: 76px;
    height: 62px;
    position: fixed;
    top: 85%;
    right: 10px;
    background-image: url(sonrakisayfa.png);
    border-radius: 10px;
}

.nextpage:hover
{
    top: 85.3%;
}

<script>

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 13500) {
            $(".homepage").fadeIn();
        } else {
            $(".homepage").fadeOut();
        }
    });
});

$(document).ready(function() {
    $(window).scroll(function(){
        if ($(window).scrollTop() > 13500){
            $(".scrollup").fadeIn();
        } else {
            $(".scrollup").fadeOut();
        }
    });
});

$(document).ready(function(){
  $(".scrollup").click(function(){
    $('html, body').animate({scrollTop: '0px'}, 300);
  });
});

$(document).ready(function () {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 13500) {
            $(".nextpage").fadeIn();
        } else {
            $(".nextpage").fadeOut();
        }
    });
});

</script>

So why don't you just hide it with css, then unhide it in your javascript? — Daedalus
– Daedalus, Commented Aug 15, 2013 at 23:43

TheNish · Accepted Answer · 2013-08-15 23:44:27Z

3

An ugly but effective answer, add inline styling to the element.

<div style="display: none;"></div>

answered Aug 15, 2013 at 23:44

TheNish

3504 silver badges16 bronze badges

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

Comments

Roseann Solano · Accepted Answer · 2013-08-15 23:46:05Z

0

The div to display none then fire fade in effect after the window is loaded

<div id="div" style="display:none;"></div>

$('window').load(function() {
  $('#div').fadeIn();
});

answered Aug 15, 2013 at 23:46

Roseann Solano

7682 gold badges8 silver badges13 bronze badges

Collectives™ on Stack Overflow

CSS loading after jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related