[Suggestion] Coders- Team up with me: Design loading screen for mobile devices

First topic message reminder :

Here is a suggestion, to which a few coders can work with me on, if you like...

For FAE, of course, I like the way mobile devices look especially with the FAE theme. Why not have a loading screen, as other mobile websites have? It loads for 2-3 seconds at most, and shows the front page afterward. However, what I'm thinking, is that it does not have to be anything more than just general JS/CSS.

Now, I don't code JS, but I do CSS. Now, for the loading screen, here is the development map... real simple seriously:

-Impose loading page only for mobile devices - so recognize user agent immediately and show loading screen (@media tags, and so forth)
-Loading page will show forum logo.
-Once index/portal page loaded, immediately turn off loading screen for the user to view and use immediately. (A loading GIF is fine)

So... What do you think? Worth a try? In my head, I can perfectly see how the JS will be organized, because I've studied theory on it, but I would like some experiments.

Hey,

that's nice, thank you!

I like the fadeOut! Anyway, it seems this is a default fadeOut setting? Because I don't see any value for the fadeOut.

Yes it's the default fade out value. You can set a custom value by change this :

Code:

$(...).fadeOut(function() {
  ...
});

to this :

Code:

$(...).fadeOut(300, function() {
  ...
});

Where 300 = 300ms


See this topic for more information.

If you read the linked topic above

Code: $(selector).fadeOut(speed, easing, callback)

you see the three parameters ; speed, easing, callback. speed and easing are optional, so you can always leave one or both out, even the callback is optional which is a function to execute after the animation is done. So you can run fade out without parameters like this :

Code:

$(...).fadeOut();

or with all parameters :

Code:

$(...).fadeOut(300, 'linear', function() {
  ...
});

Oh, interesting. I will definitively experiment with that.

---

After some clicking I have noticed that the scrollbar is appearing after the fadeOut of the loading screen.
That means that the content of the page moves a bit to the left when the page is visible again. For me, this is a bit annoying because you click a lot of times on links I guess, and if elements are always moving to the left, it's not cool.

If you want to test it, you can refer to some pages on this forum:
http://kingsroadforum.forumieren.com/

I wonder if you have any solution/any idea?

Remove :

Code:

document.body.style.overflow = 'hidden';

and also remove :

Code:

document.body.style.overflow = '';

It was to hide the scroll bar so the loading screen took up the whole screen. It showed the scroll bar after fadeOut completed.

Good one!
And now the scrollbar has to be under the loading screen so it's not visible while the loading screen is there.

So the result should be like:
Clicking on a link > loading screen appearing (no scrollbar visible because the loading screen lies above the scrollbar) > content ready > loading screen disappears > you see the whole site even with the scrollbar

So how do we get the scrollbar under the loading screen but it's still doing it's things in the "background".
Thats possible?

The zIndex is already very high and if I set it up higher, there won't be the loading screen above the scrollbar.

The only way to hide scroll bars is with overflow:hidden; on an element, such as the body. Hmm.. maybe I was wrong to remove both, try replacing the code with this :

Code:

<script type="text/javascript">//<![CDATA[
(function() {
 
 
  var logo = '{LOGO}',
      load_text = 'Now loading...';
 
  document.body.appendChild(
    $('<div/>')
 
    .html('<h2><div align="center"><span style="font-size: 10px;"><em class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></em></span><br /><br />Lädt ... Bitte warten.</div></h2>')
 
    .attr({
      id : 'fa_loader_modal',
      class : 'color-primary'
    })
 
    .css({
      position : 'fixed',
      top : 0,
      left : 0,
      right : 0,
      bottom : 0,
      zIndex : 99999,
      textAlign : 'center',
      paddingTop : '20%'
    })[0]
  );
 
  document.body.style.overflow = 'hidden';
 
 
  $(window).load(function() {
    var loader = document.getElementById('fa_loader_modal');
 
    document.body.style.overflow = '';
    $(loader).fadeOut(function() {
      document.body.removeChild(loader);
    });
  });
}());
//]]></script>

It should show the scroll bar AS the screen is fading. I think that'll work

Ange Tuteur wrote:It should show the scroll bar AS the screen is fading. I think that'll work

Yes, the scrollbar now appears when the fading begins.
Unfortunalety now the spinning font awesome icon and the loading text moves to the left when fading out.

I'm not sure if this can be fixed, I mean the scrollbar has to appear, no? And when should the scrollbar appear so that NO elements move to the left.
When we say that the scrollbar appears after everything is loaded, then the content of the forum will move again.

So I guess the only possibility is too reduce the fadeOut so you can't see that icon and text moving to the left?

That would be one possibility. Sadly when modifying the scroll bar visibility content will always be shifted since it's making the window slightly smaller, there's really no way to stop that from happening, to my knowledge anyway.

Yes, no problem.
Thank you very much for this awesome loading screen.