Show a particualr div after the entire page is displayed on the client machine.

[chauhanheena]

Hi,

The link in concern is amijangla.com

What i wish to do:

show the home page completly and after a few seconds reduce the opacity of the logo and make visible the box div(which contains some text content).

the 2 different codes i tried are

$(document).ready(function(){
    $(".box").delay(9000).fadeIn(3000);
    $(".home_logo").animate({opacity: '0.15'}, 14000);
});


$('#instafeed').ready(function() {
  setTimeout(function() {
    $('.box').fadeIn(3000).css("display", "block"); }, 9000);
    $(".home_logo").animate({opacity: '0.1'}, 15000);
})

#instafeed being the last element loaded in the page (I hope I’m right here)

What happens:

The first time i load the website, it takes load and display the homepage, and hence i miss watching the logo transition to text.
The second time i load, it works perfectly.

I want to see the logo transition to text even on the first time I load the website.

Where am i going wrong.

Thanks

[Shikkediel]

I’d just use this instead :

$(window).on('load', function () {

This isn’t valid, .ready always applies to document even if another element is specified :

$('#instafeed').ready(function() {

[chauhanheena]

hi @Shikkediel

i used

        <script type="text/javascript">          
            function changeSomething(){
                $(".box").delay(9000).fadeIn(3000);
                $(".home_logo").animate({opacity: '0.15'}, 14000);
            }
            window.onload=changeSomething; 
         </script>

Its the same as what you said.

Now i face another problem.
When i click on either of the four links on the page. I want to refer to the .box class and .homelogo class, change teh homo_logo opacity back to 1 and display:none to the box class. I added a javascript to the click events. but dint work?

[Shikkediel]

Maybe you could post the script you added, I’m not seeing it on the page anywhere.

[Author]

Posts