# Problem with Pre-Loaders



## YYashwanth (Mar 28, 2015)

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.


----------



## JiminSA (Dec 15, 2011)

Hi YYashwanth and welcome to TSG
You could try replacing your inline css ...

```
.loaderClass

{

position: absolute;

top: 0px;

left: 0px;

z-index: 999999;

text-align: center;

width: 100%;

height: 200px

}
```
with this ...

```
#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 ...

```
<div id="loading_div">
         <img src="Preloader/loader.gif"  height="66" width="66"><br>
     </div>
```
... to this ...

```
<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


----------



## YYashwanth (Mar 28, 2015)

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 ?


----------



## JiminSA (Dec 15, 2011)

N.B. Changed from original post
OK let's try drop the z-index and use backgound stacking, (described here), as follows 
FROM

```
z-index: 10;

background: url('Preloader/loader.gif') 50% 50% no-repeat;

background-image: url('img/overlay.png');
```
TO

```
background: url('Preloader/loader.gif') 50% 50% no-repeat,
            url('img/overlay.png');
```
and see what happens ...


----------



## JiminSA (Dec 15, 2011)

Hi again YYashwanth - do you still want to resolve this issue?


----------



## YYashwanth (Mar 28, 2015)

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.


----------



## JiminSA (Dec 15, 2011)

> Please let me know how to get this sorted.


Could you please re-instate the code so that I may observe what's happening?


----------



## YYashwanth (Mar 28, 2015)

Hello, I restored the site to its original.


----------



## JiminSA (Dec 15, 2011)

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


----------



## YYashwanth (Mar 28, 2015)

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 ?


----------



## JiminSA (Dec 15, 2011)

Yes, thank you. have you left out the javascript to fade out the loading div??


----------



## YYashwanth (Mar 28, 2015)

Yes, as soon as the page loads, the pre loader dissappears.


----------



## JiminSA (Dec 15, 2011)

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!


----------



## YYashwanth (Mar 28, 2015)

It is right before the tag. That's the one right ?


----------



## JiminSA (Dec 15, 2011)

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


----------



## JiminSA (Dec 15, 2011)

> But the website is still visible. If i scroll down, the preloader still turns and the site overlaps the preloader.


I think if we reinstate the z-index: 10; into the css for the loading_div (before the image stack) it may stop this happening - but I am sucking my thumb on this one - however give it a try and see what happens, please ...
BTW what are the chances of a visitor scrolling before the site is visible?


----------



## YYashwanth (Mar 28, 2015)

I restored the z index and the problem solved . But there is a small issue. When i open the website, when the first time the preloader appears, the cube appears too in the background and the preloader stops rotating for a moment and then the entire site goes blank and the preloader does it work  and dissapears when the site loads. Could you please help me out with this last problem along with , How can I make the preloader appear when the site is opened instead of waiting for a few seconds before the preloader appear ?


----------



## JiminSA (Dec 15, 2011)

> How can I make the preloader appear when the site is opened instead of waiting for a few seconds before the preloader appear


I am by no means an expert on browser website rendering mechanisms, but deduce that there are things it needs to do before it starts (secure connection, etc.,) which would account for the blank white page just prior to website loading.
As far as getting a flash of the main cube, I think that is due to z-index being sorted after images are picked up but am not too sure - perhaps someone else can comment, please?
You notice that this doesn't occur on a refresh, because the browser has already performed it's momentary checks


----------



## JiminSA (Dec 15, 2011)

Just a suggestion, you may want to make the transition from pre-loader page to landing-page slightly more elegant with a fade out, in which case you could change your current javascript function from:

```
<script type="text/javascript">// <![CDATA[

  //Function to hide the loading div
  function loadingDivHide()
  {
      document.getElementById("loading_div").style.display = "none";
      document.getElementById("content_area_div").style.display = "";
  }

</script>
```
to

```
<script type="text/javascript">// <![CDATA[

  //Function to hide the loading div
  function loadingDivHide()
  {
      $("#loading_div").fadeOut("slow");
  }

</script>
```
Incidentally the second line of the original, dealing with content_area_div, is superfluous, as it does not exist (in your html).


----------



## YYashwanth (Mar 28, 2015)

Yes, I have changed the code and it is really good, but the icons on the website dissapeared. The navigation tooltips, the icons on the website dissappeared and the cube still appears on the background just moments after the site is opened and it dissappears immediately. I am not restoring the site so you can have a look.

I only want the preloader to be displayed without the cube. You have been really helping me out all the while. Thanks Jimin . If you could help me in solving this last problem, I will be really happy.


----------



## JiminSA (Dec 15, 2011)

My sincere apologies, I think if we re-instate the content_area_div line (in short-cut syntax) they will reappear - haha it was not superfluous! ...As regards the mysterious appearance the blue cube momentarily appearing, I shall have to put my thinking cap on an get back a.s.a.p.


----------



## JiminSA (Dec 15, 2011)

> I only want the preloader to be displayed without the cube.


I think I have discovered why it appears...
Take a look at this link you'll see the blurb about the floating layer. It has a z-index of 999 (hidden deep in your css somewhere), so if we change the z-index for our #loading_div to read z-index: 1000; we should clear the problem


----------



## YYashwanth (Mar 28, 2015)

I did the changes and the problem is still there :'( . The cube is still appearing first and the preloader appears after the cube appears. and the icons in the page are still invisbile. please have a look at the site now  .


----------



## JiminSA (Dec 15, 2011)

Problem 1) The Blue cube ...
... in line 70 of animate css you will see this visibility: visible ; - take it out


> Just like it sounds, visible makes things visible. Nothing is hidden by default, so this value does nothing unless you have set hidden on this or a parent of this element.


Problem 2) Your side-nav icons - maybe we should re-instate the longhand version of that javascript line, viz: document.getElementById("content_area_div").style.display = "";

Frankly, it does not seem remotely connected to the side-nav elements, but it is the only other amendment we made before the problem cropped up ...


----------



## YYashwanth (Mar 28, 2015)

Hello Jimin, I tried every possible combination and could not find a solution. As soon as I use the CSS and JS , the icons dissappear and when I remove the JS and CSS for the preloader, the icons on the page appear. I don't know what exactly is the link between them. I have kept the same code so you can have a look.


----------



## JiminSA (Dec 15, 2011)

The side-nav icons (white circles) are now showing ok, which is cool. But you haven't taken out the visibility: visible ; line 70 from animation.css.
Do that and let's see the result ...


----------



## YYashwanth (Mar 28, 2015)

I kept the visibility hidden but then the entire cube is invisible. I want the floating cube on the landing page. Isn't it possible to just make the floating cube dissapear when the preloader is working ? And btw, when i change the visibility to hidden, It is working perfectly as wanted  .


----------



## JiminSA (Dec 15, 2011)

What we need to do is leave the visibility: hidden line in and add some javascript to make it visible on completion of pre-load.
So please add this line to the javascript which hides the loading_div

```
$(".floating").visible();
```
Hopefully that should sort it


----------



## YYashwanth (Mar 28, 2015)

Hey  ! I've added that code to the JS and it still didn't solve the problem  . I even tried adding visibility to the animate.css code and including hidden() in the JS and that didnt work out. So i re-instated the code as you suggested.


----------



## JiminSA (Dec 15, 2011)

I think I see the problem - can you change that line to read

```
$(".floating").style.visibility = "visible";
```
I am sorry about this ...
The function should now look like this ...

```
<script type="text/javascript">// <![CDATA[

//Function to hide the loading div
function loadingDivHide()
{
$("#loading_div").fadeOut("slow");
$("#content_area_div").style.display = "";
$(".floating").style.visibility = "visible";
}

</script>
```


----------



## YYashwanth (Mar 28, 2015)

I've tried that too. It still is the same. I kept the code as it is so you can have a look at it. Everything apart from this is solved. Thanks a lot Jim.


----------



## JiminSA (Dec 15, 2011)

I see the line $(".floating").visible(); has not been changed to $(".floating").style.visibility = "visible";
Please change it slightly to $(".floating").style.visibility = "visible" !important;
Could you do so and leave for me to see, please?


----------



## JiminSA (Dec 15, 2011)

You seem to have left your site without the bouncing box. Probably because of my seeming inability to solve your problem. Can I say, without offending you, that as a website designer, I find it aesthetically more attractive without it ...


----------



## YYashwanth (Mar 28, 2015)

Hello Jim, I am extremely sorry for not replying. I have my CCNP certification exam coming up next week. So i kept all my other works aside and am preparing for the exam. You have helped me a lot from the starting and I am thankful for it. I know that along with your help, I can solve this soon.  .


----------



## JiminSA (Dec 15, 2011)

Cool and good luck with your exams ...


----------



## YYashwanth (Mar 28, 2015)

Hey Jimin ! I did the changes which you asked me to. Please have a look now


----------



## JiminSA (Dec 15, 2011)

Hi again after a delay ...
Can you replace

```
<script type="text/javascript">// <![CDATA[

//Function to hide the loading div
function loadingDivHide()
{
$("#loading_div").fadeOut("slow");
$("#content_area_div").style.display = "";
$(".floating").style.visibility = "visible";
}

</script>
```
with

```
<script type="text/javascript">// <![CDATA[

//Function to hide the loading div
function loadingDivHide()
{
$("#loading_div").fadeOut("slow");
$("#content_area_div").style.display = "";
$(".floating").style.visibility = "visible";
}
[COLOR="red"]//]]> // Close off CDATA[/COLOR]
</script>
```
Notice the code in red - we omitted to close off the CDATA section which *may* adversely affect the result


----------



## YYashwanth (Mar 28, 2015)

Ive done that and all the icons have dissappeard  . The icons in the site just went under the cloak. I have no idea what is the relation between these two.


----------



## JiminSA (Dec 15, 2011)

Unusual!! Best revert!


----------

