IMPORTANT

FM Design is in read-only mode, please click here for more information.

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Apr 2018, 11:43

» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28

» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15

» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11

» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24

» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58

» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50

» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22

» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12

» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10

» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51

» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11

» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19

» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34

» Numbering of messages in the topic
by SLGray Mon 04 Dec 2017, 22:40

Recent Tutorials
Top posting users this month
Who is online?
In total there are 8 users online :: 0 Registered, 0 Hidden and 8 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

Gender : Male
Posts : 156
Points : 764
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
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
Notice: Since FMD is closing, I can help provide support.
See link to my forum on my profile.

avatar
Bigtuber

Gender : Male
Posts : 125
Points : 1016
Reputation : 52
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
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
Gender : Male
Age : 22
Posts : 4726
Points : 9778
Reputation : 2362
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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() {
  ...
});

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Bigtuber

Gender : Male
Posts : 125
Points : 1016
Reputation : 52
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
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
Gender : Male
Age : 22
Posts : 4726
Points : 9778
Reputation : 2362
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Bigtuber

Gender : Male
Posts : 125
Points : 1016
Reputation : 52
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
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
Gender : Male
Age : 22
Posts : 4726
Points : 9778
Reputation : 2362
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Bigtuber

Gender : Male
Posts : 125
Points : 1016
Reputation : 52
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
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
Gender : Male
Age : 22
Posts : 4726
Points : 9778
Reputation : 2362
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
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.

--------

Ange Tuteur
Tips and TricksContact Me

avatar
Bigtuber

Gender : Male
Posts : 125
Points : 1016
Reputation : 52
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
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