FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

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

Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49

» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21

» 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

Recent Tutorials
Top posting users this month

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

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

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

Page 1 of 2 1, 2  Next

View previous topic View next topic Go down

Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2920
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay Thu 16 Feb 2017, 19:36

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
Valoish
Valoish
Graphic Designer
Gender : Female
Age : 27
Posts : 3671
Points : 7110
Reputation : 360
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB2
http://www.canvasforums.com https://twitter.com/Valoishx3

PostValoish Thu 16 Feb 2017, 22:21

I personally love the idea of a loader, and I think the old developer/technician we had on Canvas Forums actually had a landing page and loader set up at some point with an HTML page and the portal..
I did some quick googling for a jQuery loader (since I've used the simple jQuery line loader in some of my mini projects before) and this is what came up: https://www.w3schools.com/howto/howto_css_loader.asp
I haven't tested this out on FM Forums but maybe it'll be possible with an HTML page.. Not sure. If I get some free time to look into it, I will c:
SLGray
SLGray
Valued Member
Gender : Male
Age : 51
Posts : 2465
Points : 7097
Reputation : 290
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray Thu 16 Feb 2017, 23:18

If you are not using the forum's header and footer, you will have to have a link to Forumotion. Is this not similar to a loading page for your forum?
Wolfuryo
Wolfuryo

Gender : Male
Posts : 256
Points : 3558
Reputation : 81
Language : Romanian and English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Other

PostWolfuryo Fri 17 Feb 2017, 00:22

SLGray wrote:If you are not using the forum's header and footer, you will have to have a link to Forumotion. Is this not similar to a loading page for your forum?
Not necessarrly. It can be done in the forum's first page. Wink
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2920
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay Fri 17 Feb 2017, 01:21

Lol... This is to be a dynamic cover using JavaScript, which has nothing to do with HTML pages. I do not wish to deal with HTML pages, due to its issue with compatibility on mobile platforms.

Since it works as a dynamic JS, it would not need any links added except for noscript only (or just hide cover due to noscript), because it will countdown before appearing on the page. Average loading time might be 4 seconds... so load index page in 4-5 seconds.

The idea is to place an animation on the index page that works in conjunction with the index page instead of replacing it, avoiding compatibility issues.

(Forumotion terms of service are incomplete - legally and literally)
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 17 Feb 2017, 12:35

Hmm.. interesting idea. Here's a quick mock up :
Code:
$(function() {
  if (!$('#page-footer a[href^="index.forum?mobile"]') || my_getcookie('fa_loader_modal')) return;

  document.body.appendChild(
    $('<div/>')

    .html('<h1>Now loading...</h1>' + document.getElementById('logo').innerHTML)

    .attr({
      id : 'fa_loader_modal',
      class : 'color-primary'
    })

    .css({
      position : 'fixed',
      top : 0,
      left : 0,
      right : 0,
      bottom : 0,
      zIndex : 99999,
      textAlign : 'center',
      paddingTop : '50%'
    })[0]
  );

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

  $(window).load(function() {
    document.body.removeChild(document.getElementById('fa_loader_modal'));
    document.body.style.overflow = '';

    my_setcookie('fa_loader_modal', '1');
  });
});

Install it via JS codes management in all pages and it'll show the loading screen below once per visit. Once the cookie expires or is obliterated, the loading screen will show again. That's what you wanted, right ?
[Suggestion] Coders- Team up with me: Design loading screen for mobile devices Captur10

Background color is determined by selected theme, and the logo is your forum logo of course. You may need to add the CSS below to your stylesheet to keep the logo from overflowing the modal.
Code:
#fa_loader_modal img { max-width:100%; }
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2920
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay Sun 19 Feb 2017, 01:54

Well, after doing a couple of tests... it did work well. However, one question is that would there be a chance to ensure the loading screen appears before the forum shows...

Onload, forum shows for one second, then the loading screen shows for the remainder of page load time, and then it disappears.

If the loading screen is able to have first priority, that would be nice.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Wed 22 Feb 2017, 12:37

Oh yes you're right.. that's the bane of executing when the document is ready. xP

Let's give ol' document.write a try and see how that works. Use the script below instead.
Code:
(function() {
  if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || my_getcookie('fa_loader_modal')) return;

  var logo = 'http://i35.servimg.com/u/f35/18/45/41/65/fmd_lo14.png',
      load_text = 'Now loading...';
 
  document.write(
    '<div id="fa_loader_modal" class="color-primary" style="position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;text-align:center;padding-top:50%;">'+
      '<h1>' + load_text + '</h1>'+
      '<img src="' + logo + '" style="max-width:100%;" />'+
    '</div>'
  );
 
  $(function() {
    $('#fa_loader_modal').fadeOut(function() {
      $(this).remove();
      my_setcookie('fa_loader_modal', '1');
    });
  });
}());

NOTE : Since this is executing before the document is ready, we're not able to collect certain resources, like the forum banner, so you need to insert that manually. I've added two variables to make editing easier :

logo : Place your logo URL in this variable.
load_text : Allows you to change the loading text. ( e.g. Now loading... ) You can use HTML here.

This script is different from the last, it'll fade out the load screen when the document is ready. ( i.e. images may still be loading ) If you want to remove the loading screen when the document is completely loaded, replace
Code:
$(function() {
with
Code:
$(window).load(function() {
. Doing so will extend the loading screen duration.

Let me know how that works for you. Wink
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2920
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay Thu 23 Feb 2017, 01:08

Well, thanks for looking into this.

Unfortunately, method 2 failed, as it caused the mobile site to hang up. It worked great on the test forum I have FAE on; however, GeekPolice site is the one where the hangup is.

For method 1, it does not seem to show the forum first anymore; therefore, I would say that method 1 "works for me" - if you know what I mean. Wink

Method 1 does look more professional on-screen, even if it is simplistic.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Thu 23 Feb 2017, 10:29

Ah I see, I suppose there's an issue with document.write on mobile. Think I think the best solution would probably be to poll for the body tag, that way we can insert the loading screen as soon as it's ready. Here's a modification of the first script to include this improvement.
Code:
(function() {
  if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || my_getcookie('fa_loader_modal')) return;

  var logo = 'http://i35.servimg.com/u/f35/18/45/41/65/fmd_lo14.png',
      load_text = 'Now loading...';

  window.bodyPoll = window.setInterval(function() {

    if (document.body) {
      window.clearInterval(bodyPoll);
     
      document.body.appendChild(
        $('<div/>')

        .html(
          '<h1>' + load_text + '</h1>'+
          '<img src="' + logo + '" style="max-width:100%;"/>'
        )

        .attr({
          id : 'fa_loader_modal',
          class : 'color-primary'
        })

        .css({
          position : 'fixed',
          top : 0,
          left : 0,
          right : 0,
          bottom : 0,
          zIndex : 99999,
          textAlign : 'center',
          paddingTop : '50%'
        })[0]
      );

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

  }, 1);

 
  $(window).load(function() {
    document.body.removeChild(document.getElementById('fa_loader_modal'));
    document.body.style.overflow = '';
 
    my_setcookie('fa_loader_modal', '1');
  });
}());
I included the variables from the second script, since we're executing before the document is ready. Let me know how this one works for you when you get the chance. Salute

P.S.
Thanks for taking the time to test these. I don't have a mobile device to test on, so I can't really test these first hand, other than emulation via PC lol.
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2920
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay Fri 24 Feb 2017, 09:38

*Cool* - So it worked at least 1s quicker... I am glad to test whenever possible. Now... what's *cool* about it, is that once it launches on the Chrome browser on Android mobile, it immediately recognizes the theme color in the META tag (remember that?), and immediately shows the loading screen. So, we have a successful loading screen.

Third one works best and appears most optimized, even if it only improves it by 1s to avoid showing the forum first. I noticed so many websites JUST RECENTLY started doing the loading screen method, so we're attaching onto a trend immediately.

The other META tag theme color was going on for a few months now; however, I've only seen this loading screen start appearing on many mobile websites (you see my actual job involves looking at loads of websites and taking notes).

I do hope others recognize the loading screen method. The most valuable thing about it, is that if your theme color ("color-primary") is set on the forum itself, the loading screen will show up as the theme color, so it is also personalized, which is something that other companies cannot do, because they don't have their sites skinning colors as FAE sites do.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 24 Feb 2017, 12:11

Ah that is a small improvement then. Overall, I think the best possible solution would be to place the script directly into the template, at the beginning of the
Code:
<body>
tag. Doing so will allow you to instantly modify the body without having to wait for it to be ready. This *should* show the loading screen instantaneously without showing the forum.

If you'd like to try this method, delete the script in JS codes management, then proceed to the template.
Display > Templates > General > overall_header

Find :
Code:
<body id="fa_edge" class="color-tertiary">

and place this script directly after it :
Code:
<script type="text/javascript">//<![CDATA[
(function() {
  if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || my_getcookie('fa_loader_modal')) return;
 
  var logo = '{LOGO}',
      load_text = 'Now loading...';
 
  document.body.appendChild(
    $('<div/>')

    .html(
      '<h1>' + load_text + '</h1>'+
      '<img src="' + logo + '" style="max-width:100%;"/>'
    )

    .attr({
      id : 'fa_loader_modal',
      class : 'color-primary'
    })

    .css({
      position : 'fixed',
      top : 0,
      left : 0,
      right : 0,
      bottom : 0,
      zIndex : 99999,
      textAlign : 'center',
      paddingTop : '50%'
    })[0]
  );

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

 
  $(window).load(function() {
    document.body.removeChild(document.getElementById('fa_loader_modal'));
    document.body.style.overflow = '';
 
    my_setcookie('fa_loader_modal', '1');
  });
}());
//]]></script>
Save and publish the template once this has been done.

Note : You wont need to edit the logo URL, since we can use the {LOGO} variable in this template. Let me know how this method works for you. Wink

The ability to change the forum theme is my favorite feature about FAE. Adding the class "color-primary" or "color-secondary" to any element, will allow you to show that element in one of the colors of the theme which is a nice touch.
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2920
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay Fri 24 Feb 2017, 13:25

Okay, upon editing the template, it appears to be improved/optimized by 0.5s more; therefore, that's 1.5s improvement since trial 1.

Overall load time from start to finish is logged:

-wait 1s server response
-show loading screen
-wait 4s server response for page load
-show forum completely loaded

Total time: 5s

Earlier calls for trial 1 was 7s, trial 2 was 6s on test forum (very little extra JS) and hung on my main forum, and trial 3 was 6s.

Trial 4 is the better in overall improvement from 4.5-5s.

Of course, if I offloaded many resources on a CDN, I could optimize it by another 2s probably, but I'm trying to avoid compatibility issues. Does JSDelivr net a good response, or does it stay about the same?
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 24 Feb 2017, 13:39

That's probably gonna be the best improvement we can make to the loading screen. We *could* make it better by writing the loading screen directly into the HTML rather than appending with JavaScript, and then remove the loading screen with JS. However, that can pose a problem for noscript, so it's probably not the best idea.

Anyway, I'm not sure about JSDelivr since I've never used it for hosting any resources. Though it couldn't hurt to give it a try.
Dr Jay
Dr Jay

Gender : Male
Posts : 156
Points : 2920
Reputation : 35
Location : USA
Language : English (Native)
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : Forumactif Edge
http://www.geekpolice.net

PostDr Jay Fri 24 Feb 2017, 13:47

Excellent! Well, I think we have conjured something that works, especially being careful for noscript. Wink
Bigtuber
Bigtuber

Gender : Male
Posts : 125
Points : 3172
Reputation : 52
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge

PostBigtuber Fri 24 Feb 2017, 13:55

Hey together,

I tested this last method on Samsung Galaxy S4 Mini but there is no loading screen - maybe the code does not support the S4? I wanted to let you know.

Also, can we do a loading screen for the classic version too? Very Happy

Regards
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 24 Feb 2017, 14:00

Dr Jay wrote:Excellent! Well, I think we have conjured something that works, especially being careful for noscript. Wink
It is indeed a beautiful sight. loove

Bigtuber wrote:Hey together,

I tested this last method on Samsung Galaxy S4 Mini but there is no loading screen - maybe the code does not support the S4? I wanted to let you know.

Also, can we do a loading screen for the classic version too? Very Happy

Regards
Hmm.. maybe it has to do with the regular expression that detects your useragent. Think However, if you want this for the classic version as well, find this line of code in the "if" statement and remove it :
Code:
!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||

I'm not sure, but you *may* need to alter the paddingTop a bit for the classic view.
Bigtuber
Bigtuber

Gender : Male
Posts : 125
Points : 3172
Reputation : 52
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge

PostBigtuber Fri 24 Feb 2017, 14:16

Ange Tuteur wrote:However, if you want this for the classic version as well, find this line of code in the "if" statement and remove it :
Code:
!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||

I'm not sure, but you *may* need to alter the paddingTop a bit for the classic view.

Hmm... thanks for the tip but there is still nothing to see - I guess I'm doing something wrong. Think
So I pasted the code right after
Code:
<body id="fa_edge" class="color-tertiary">
(see screenshot) and the template is published as well:
[Suggestion] Coders- Team up with me: Design loading screen for mobile devices Loadin10

Any idea? Help me !
Thanks in advance Rose
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Mon 27 Feb 2017, 12:11

@Bigtuber this :
Code:
if (!/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) || my_getcookie('fa_loader_modal')) return;

Should be this :
Code:
if (my_getcookie('fa_loader_modal')) return;
Bigtuber
Bigtuber

Gender : Male
Posts : 125
Points : 3172
Reputation : 52
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge

PostBigtuber Mon 27 Feb 2017, 13:54

Ok, I changed it.
But this is weird now.

When I cleared my cache and clicked on a link, I got a loading screen (but without logo). The bigger issue is that there is no loading screen after clicking a link for the first time (after deleting the forum's cache).

I tried it now multiple times.
Clear cache: You get a loading screen for the first time clicking on a link. If you click again, there is nothing.

Hmm... Think

Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Fri 03 Mar 2017, 12:36

If you want the loading screen to be persistent, completely remove this if statement :
Code:
if (my_getcookie('fa_loader_modal')) return;

and this line of code too, since it'll be of little use after removing the statement above :
Code:
my_setcookie('fa_loader_modal', '1');

The logo is dependent on the logo in pics management. You have one set there, correct ?
Bigtuber
Bigtuber

Gender : Male
Posts : 125
Points : 3172
Reputation : 52
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge

PostBigtuber Fri 10 Mar 2017, 11:06

Hey,

sorry for the late reply. Had to explore Hyrule. Confused

Thanks, it works now. Smile
But the Logo and the loading text are still not there, and yes, I use this logo:
https://i.servimg.com/u/f35/18/21/41/30/fa_edg15.png (default logo of FAE)

There is just the danube blue as loading screen.
In fact, I would just like to use this one here:
Code:
<h2 class="post-content">
                                                  
   <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>

A spinning circle-o-notch from Font Awesome and a text under the icon.
[Suggestion] Coders- Team up with me: Design loading screen for mobile devices Loadin11

How to implement this into the loading screen? Smile




Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Mon 13 Mar 2017, 14:50

It's no problem. Wink

Find this :
Code:
    .html(
      '<h1>' + load_text + '</h1>'+
      '<img src="' + logo + '" style="max-width:100%;"/>'
    )

and replace it with this :
Code:
    .html('<h2 class="post-content"><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>')
Bigtuber
Bigtuber

Gender : Male
Posts : 125
Points : 3172
Reputation : 52
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge

PostBigtuber Mon 13 Mar 2017, 16:18

Hm.. still nothing else than my color-primary. Think
There has to be something wrong, before I changed the html there weren't the logo and text too.

I will give you my current code in the overall header after
Code:
<body id="fa_edge" class="color-tertiary">
:
Code:
<script type="text/javascript">//<![CDATA[
(function() {
 
 
  var logo = '{LOGO}',
      load_text = 'Now loading...';
 
  document.body.appendChild(
    $('<div/>')
 
        .html('<h2 class="post-content"><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 : '50%'
    })[0]
  );
 
  document.body.style.overflow = 'hidden';
 
 
  $(window).load(function() {
    document.body.removeChild(document.getElementById('fa_loader_modal'));
    document.body.style.overflow = '';
 
 
  });
}());
//]]></script>

Can you please test this to see if it works on ur side?
So I made some modifications on the forum where I want to get a loading screen but I have also tested this now on a fully reinstalled FAE forum. scratch

Sorry Ange, I'm not that fit in JS. But I know that even a little mistake can break everything, so a master has to look it up. Mr. Green


Oh, and I wanted to fade the loading screen out. Can we also do a little transition here? I mean maybe a 100-300ms transition that the loading screen is not being disabled so "hard" and quickly.
Ange Tuteur
Ange Tuteur
Administrator
Gender : Male
Posts : 4741
Points : 12004
Reputation : 2375
Location : Pennsylvania
Language : EN, JA, FR
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
https://sethclydesdale.github.io/ https://twitter.com/sethc1995

PostAnge Tuteur Thu 16 Mar 2017, 11:20

@Bigtuber give this a try :
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');

    $(loader).fadeOut(function() {
      document.body.removeChild(loader);
      document.body.style.overflow = '';
    });
  });
}());
//]]></script>
I removed the class ".post-content" from the header, because it was coloring the text the same color as the background. I also reduced the top padding and added a fadeOut.
Sponsored content

PostSponsored content

Page 1 of 2 1, 2  Next

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