Latest topics
» [HELP] About Profile Cover Code
by MaHwOs Yesterday at 18:54

» bloquer un membre
by berlingo Fri 17 Nov 2017, 18:19

» IconSkouliki Graphics
by skouliki Fri 17 Nov 2017, 03:54

» [IN PROGRESS] Can this code work on pun version
by skouliki Thu 16 Nov 2017, 03:50

» Auto-suggest @mentions as You Type
by skouliki Wed 15 Nov 2017, 14:56

» [TUTORIAL] [ALL VERSIONS] Warning before posting
by demon99 Wed 15 Nov 2017, 08:12

» About Add Reply & New Topic button (popup form)
by omarpop23 Mon 13 Nov 2017, 20:31

» Hello everyone this is Adam from France
by Adam Mon 13 Nov 2017, 13:32

» Add a login popup for the toolbar
by Ape Sun 12 Nov 2017, 18:41

» Post a message automatically when locking a topic
by ThunderTB Sun 12 Nov 2017, 13:51

» Control pannel issue
by Ange Tuteur Sun 12 Nov 2017, 09:49

» BUG... forum members birthday's
by Ape Sat 11 Nov 2017, 11:44

» Display a Preview of Groups on Hover
by ThunderTB Fri 10 Nov 2017, 21:56

» Search box only visible on hover
by Ange Tuteur Mon 06 Nov 2017, 09:57

» [GAME] Animal Game
by SLGray Sun 05 Nov 2017, 15:04

Recent Tutorials
Who is online?
In total there are 9 users online :: 0 Registered, 0 Hidden and 9 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

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

Page 2 of 2 Previous  1, 2

View previous topic View next topic Go down

avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 605
Reputation : 34
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.geekpolice.net

PostDr Jay on Thu 16 Feb 2017, 19:36

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

--------

~Dr Jay

avatar
Bigtuber

Title :
Gender : Male
Posts : 124
Points : 858
Reputation : 50
Location : Germany
Language : German, English
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostBigtuber on Thu 16 Mar 2017, 11:33

Hey,

that's nice, thank you! Rose

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

--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9586
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 16 Mar 2017, 11:50

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

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() {
  ...
});
avatar
Bigtuber

Title :
Gender : Male
Posts : 124
Points : 858
Reputation : 50
Location : Germany
Language : German, English
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostBigtuber on Thu 16 Mar 2017, 12:00

Oh, interesting. I will definitively experiment with that. Smile


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? reflect

--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9586
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 16 Mar 2017, 12:03

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.
avatar
Bigtuber

Title :
Gender : Male
Posts : 124
Points : 858
Reputation : 50
Location : Germany
Language : German, English
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostBigtuber on Thu 16 Mar 2017, 12:14

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.

--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9586
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 16 Mar 2017, 13:38

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 Think
avatar
Bigtuber

Title :
Gender : Male
Posts : 124
Points : 858
Reputation : 50
Location : Germany
Language : German, English
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostBigtuber on Thu 16 Mar 2017, 14:11

@Ange Tuteur wrote:It should show the scroll bar AS the screen is fading. I think that'll work Think
Yes, the scrollbar now appears when the fading begins. Smile
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?

--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 22
Posts : 4712
Points : 9586
Reputation : 2341
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Thu 16 Mar 2017, 14:15

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.
avatar
Bigtuber

Title :
Gender : Male
Posts : 124
Points : 858
Reputation : 50
Location : Germany
Language : German, English
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostBigtuber on Thu 16 Mar 2017, 14:16

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

--------

Page 2 of 2 Previous  1, 2

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum