1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

Problem with Pre-Loaders

Discussion in 'Web Design & Development' started by YYashwanth, Mar 28, 2015.

Thread Status:
Not open for further replies.
Advertisement
  1. YYashwanth

    YYashwanth Thread Starter

    Joined:
    Mar 28, 2015
    Messages:
    20
    Hello All,

    I designed a website and added a preloader to it. But the preloader is appearing on the top left corner instead of center of the page. The page has to be invisible while the preloader is going on but the site is completely visible. As soon as the site loads completely, the preloader vanishes perfectly.

    Have a look at the site : www.techkrafters.com

    I want the preloader to appear in the center of the screen and the site to be invisible while the preloader function is being executed.

    Thanks in advance for your help,

    Cheers,
    Yashwanth.
     
  2. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,388
    First Name:
    Jim
    Hi YYashwanth and welcome to TSG:)
    You could try replacing your inline css ...
    Code:
    .loaderClass
    
    {
    
    position: absolute;
    
    top: 0px;
    
    left: 0px;
    
    z-index: 999999;
    
    text-align: center;
    
    width: 100%;
    
    height: 200px
    
    }
    
    
    with this ...
    Code:
    #loading_div
    
    {
    
    position: fixed;
    
    left: 0px;
    
    top: 0px;
    
    width: 100%;
    
    height: 100%;
    
    z-index: 10;
    
    background: url('Preloader/loader.gif') 50% 50% no-repeat;
    
    background-image: url('img/overlay.png');
    
    }
    
    
    ... and put a suitable overlay.png (128px x 128px) into your img folder.
    You could then change your html code from this ...
    Code:
          <div id="loading_div">
             <img src="Preloader/loader.gif"  height="66" width="66"><br>
         </div>
    
    ... to this ...
    Code:
          <div id="loading_div"></div>
    
    The styling which centres your loader image is the '50% 50% no-repeat;' and of course in order to temporarily hide your page rendering we include the overlay png ;)

    The 'loaderClass' has been dropped because you never used it.

    This code has not been tested ('twas off the top of my head), and may require some tuning, but it should work;)
     
  3. YYashwanth

    YYashwanth Thread Starter

    Joined:
    Mar 28, 2015
    Messages:
    20
    Hello JiminSA, I tried which you suggested but there was no change. The overlay.png was visible and it covered the website. But the preloader was not visible :( . I tried every possible combination but still there was no change so I had to undo the changes because , the structure of the site got changed for some reason which I could not understand.

    Could you please help me out with this ? :(
     
  4. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,388
    First Name:
    Jim
    N.B. Changed from original post
    OK let's try drop the z-index and use backgound stacking, (described here), as follows
    FROM
    Code:
    z-index: 10;
    
    background: url('Preloader/loader.gif') 50% 50% no-repeat;
    
    background-image: url('img/overlay.png');
    
    TO
    Code:
    background: url('Preloader/loader.gif') 50% 50% no-repeat,
                url('img/overlay.png');
    
    
    and see what happens ...
     
  5. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,388
    First Name:
    Jim
    Hi again YYashwanth - do you still want to resolve this issue?
     
  6. YYashwanth

    YYashwanth Thread Starter

    Joined:
    Mar 28, 2015
    Messages:
    20
    Hello JiminSA. I did the changes as said and it worked perfectly for the preloader to be at the center. But the website is still visible. If i scroll down, the preloader still turns and the site overlaps the preloader.

    Please let me know how to get this sorted.

    Thanks a lot for your help.
     
  7. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,388
    First Name:
    Jim
    Could you please re-instate the code so that I may observe what's happening?
     
  8. YYashwanth

    YYashwanth Thread Starter

    Joined:
    Mar 28, 2015
    Messages:
    20
    Hello, I restored the site to its original. :)
     
  9. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,388
    First Name:
    Jim
    Which shows me nothing of what the code I suggested is doing ... if you could reinstate that code, please, I'd be grateful. It appears that your animated cube may be dominating the pre-load ...
     
  10. YYashwanth

    YYashwanth Thread Starter

    Joined:
    Mar 28, 2015
    Messages:
    20
    Oops .. Sorry . I restored the preloader code and I have a doubt, when a site is opened, the preloader should appear first right ? but nothing happens for the first few seconds and the preloader appears with the rest of the site. :( . What could be the error ?
     
  11. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,388
    First Name:
    Jim
    Yes, thank you. have you left out the javascript to fade out the loading div??
     
  12. YYashwanth

    YYashwanth Thread Starter

    Joined:
    Mar 28, 2015
    Messages:
    20
    Yes, as soon as the page loads, the pre loader dissappears.
     
  13. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,388
    First Name:
    Jim
    I don't see the javascript function in your html source code? Is it tucked away in one of your javascript files somewhere?
    Because when I link to your site, the loading div remains after body load completes!
     
  14. YYashwanth

    YYashwanth Thread Starter

    Joined:
    Mar 28, 2015
    Messages:
    20
    It is right before the </head> tag. That's the one right ?
     
  15. JiminSA

    JiminSA

    Joined:
    Dec 15, 2011
    Messages:
    3,388
    First Name:
    Jim
    Sorry I got side tracked - Yes I didn't see it initially! The page now renders OK, but the cube is indeed dominant over the pre-load display - which I presume is the small revolving cube on a white background?
    I shall investigate why the main cube is dominant during load and report back ...
     
  16. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/1145595

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice