Latest topics
» IconSkouliki
by skouliki Sun 17 Sep 2017, 11:05

» Awards
by Mr_Grande Sun 17 Sep 2017, 08:52

» Modify Category Tabs lead to a desired position and auto scroll click
by djblah Fri 15 Sep 2017, 14:56

» Display a preview of the user profile on hover
by Eiki Thu 14 Sep 2017, 02:38

» [GAME] Count to 30 - Ange Edition
by SLGray Mon 11 Sep 2017, 14:23

» Rank CSS
by Mr_Grande Fri 08 Sep 2017, 09:24

» make the topic a color
by Ultimas Wed 06 Sep 2017, 19:44

» Chit Chat Thread
by Valoish Sun 03 Sep 2017, 23:20

» The like/thumbs up or down feature
by Dr.kran Sun 03 Sep 2017, 19:21

» My text boxes are glitched, can you help with this type of problem?
by Wolfuryo Sun 03 Sep 2017, 17:08

» User - Made Creations
by SLGray Sun 03 Sep 2017, 16:25

» FM Themes
by SLGray Sun 03 Sep 2017, 16:24

» i need to add css improvement
by Wolfuryo Sat 02 Sep 2017, 12:12

» How do I add hover examine feature?
by Dr.kran Wed 30 Aug 2017, 16:43

» [GAME] World Snake
by SLGray Wed 30 Aug 2017, 14:46

Recent Tutorials
Top posting users this month
Who is online?
In total there are 7 users online :: 1 Registered, 0 Hidden and 6 Guests

Eslam Love

[ 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 : 544
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 : 123
Points : 786
Reputation : 50
Location : Germany
Language : German, English
Browser : Browser : Google Chrome 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 : 21
Posts : 4684
Points : 9727
Reputation : 2331
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 : 123
Points : 786
Reputation : 50
Location : Germany
Language : German, English
Browser : Browser : Google Chrome 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 : 21
Posts : 4684
Points : 9727
Reputation : 2331
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 : 123
Points : 786
Reputation : 50
Location : Germany
Language : German, English
Browser : Browser : Google Chrome 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 : 21
Posts : 4684
Points : 9727
Reputation : 2331
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 : 123
Points : 786
Reputation : 50
Location : Germany
Language : German, English
Browser : Browser : Google Chrome 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 : 21
Posts : 4684
Points : 9727
Reputation : 2331
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 : 123
Points : 786
Reputation : 50
Location : Germany
Language : German, English
Browser : Browser : Google Chrome 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