Recent Tutorials
Who is online?
In total there are 10 users online :: 0 Registered, 0 Hidden and 10 Guests :: 2 Bots

None

[ View the whole list ]


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

[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

avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 486
Reputation : 33
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

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
Valoish
Graphic Designer
Title :
Gender : Female
Age : 20
Posts : 3618
Points : 4616
Reputation : 348
Location : NYC
Language : English, Russian, Hebrew
Browser : Browser : Opera Forum Version : Forum Version : phpBB2
Awards :
View all awards
View user profile http://www.canvasforums.com https://twitter.com/https://twitter.com/Valoishx3

PostValoish on 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:

--------

"I was afraid. And my own insecurity crushed him." - Youku x Boku SS
avatar
SLGray
Valued Member
Title :
Owner of 2 Forums
Gender : Male
Age : 44
Posts : 2364
Points : 4549
Reputation : 280
Location : United States
Language : English
Browser : Browser : Mozilla Firefox Forum Version : Forum Version : ModernBB
Awards :
View all awards
View user profile http://www.fmthemes.forumotion.com https://www.facebook.com/FM-Themes-655055824604957 https://twitter.com/FMThemes https://pinterest.com/FMThemes

PostSLGray on 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?
avatar
Wolfuryo

Gender : Male
Posts : 203
Points : 1054
Reputation : 69
Language : Romanian and English
Browser : Browser : Google Chrome Forum Version : Forum Version : punBB
Awards :
View all awards
View user profile

PostWolfuryo on 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
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 486
Reputation : 33
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 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)

--------

~Dr Jay
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
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 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 ?


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%; }
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 486
Reputation : 33
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 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.

--------

~Dr Jay
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
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 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
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 486
Reputation : 33
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 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.

--------

~Dr Jay
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
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 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.
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 486
Reputation : 33
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 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.

--------

~Dr Jay
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
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 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.
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 486
Reputation : 33
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 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?

--------

~Dr Jay
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
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 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.
avatar
Dr Jay

Title :
Power of Youth!
Gender : Male
Posts : 153
Points : 486
Reputation : 33
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 Fri 24 Feb 2017, 13:47

Excellent! Well, I think we have conjured something that works, especially being careful for noscript. Wink

--------

~Dr Jay
avatar
Bigtuber

Title :
Gender : Male
Posts : 122
Points : 727
Reputation : 49
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostBigtuber on 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

--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
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 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.
avatar
Bigtuber

Title :
Gender : Male
Posts : 122
Points : 727
Reputation : 49
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostBigtuber on 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:


Any idea? Help me !
Thanks in advance Rose

--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
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 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;
avatar
Bigtuber

Title :
Gender : Male
Posts : 122
Points : 727
Reputation : 49
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostBigtuber on 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


--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
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 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 ?
avatar
Bigtuber

Title :
Gender : Male
Posts : 122
Points : 727
Reputation : 49
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostBigtuber on 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:
http://i35.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.


How to implement this into the loading screen? Smile





--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
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 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>')
avatar
Bigtuber

Title :
Gender : Male
Posts : 122
Points : 727
Reputation : 49
Location : Germany
Language : German, English
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile

PostBigtuber on 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.

--------

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4652
Points : 9634
Reputation : 2327
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: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.

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