Interface blinking problem

Hi Everyone,

I am using Wordpress (version 3.8) and am running my app on my local PC (with xampp) in the Chrome browser. I have customized my app with a javascript font-resizer that appears in the interface and allows the user to change the font-size. The javascript is working fine. It is persistent and holds nicely the font-size value in a cookie for setting the font-size in the interface when a user revisits the site.

However I have a small problem which is a little irritating and am wondering if one of you might point me in the right direction to resolve this problem.

The problem: Whenever I refresh my window or change pages the interface first displays the font-size in the size stored in the css modules and then my font-size script runs and the desired font-size is displayed from the value stored in the cookie. This causes a blinking in the interface - first showing the font-size from css and then the font-size in the cookie.

I’m using <body onload=“font-sizer();”> where the function font-sizer() changes the font-size in the interface to the user’s desired font-size in the cookie. However, this function is running one step too late, i.e. right after the css font-size is displayed in the interface.

Would it be possible to inhibit the 1st display (css version) and display only the font-sizer() version? This would eliminate the blinking.

If this could be done in either javascript or jquery I would be interested in any information you might offer in order to fix this blinking problem.

Thank you in advance for your help.
George

I think that as long as the function doesn’t reference or alter the DOM and only the CSS you could call it in the <head>.

The trade off would be a slower initial page load.

Thanks for taking interest in my question Mittineague . Could you please tell me what you meant when you said, “you could call it in the <head>”. Call what?

Thanks again.

To me it’s a better way than using inline (in the tag) javascript anyway, but something like

.....
<script type="text/javascript">
font-sizer();
</script>
</head>
<body>
.....

Independent of the type of font-resizer script (looping through the DOM or just catching the css) I think this can work:

In the beginning of the <body>:

<body onload="font-sizer()">
    <script type="text/javascript">
        document.body.style.visibility="hidden";
    </script>
    ... (rest of the body elements)
</body>
</html>

Now before anything of the content can be rendered, the content is made invisible (but the rendering in the background is going on, with the css font-sizes).

After the browser has rendered the content completely (page is still white, or only a background-color or background-image), the onload-function will be executed.
So you can add in the end of the font-sizer() function, when the resizing is ready:

...
    document.body.style.visibility="visible";

Then everything is present: with the font-size from the cookie (if any, and otherwise the default font-size).

In this way the content is accessible if javascript is disabled (and available for search engines).
The font-sizer script itself hasn’t to be in the <head>:
[U]Put scripts at the bottom[/U]! :slight_smile:

I ran into a similar problem some time ago when using @font-face.
Firefox would render the text in the normal font, then there would be an annoying flash whilst it jumped to the custom font.
You can read more here: http://www.paulirish.com/2009/fighting-the-font-face-fout/

Anyway, to get around this you could use a small library which I believe employs the same solution as Francky has just outlined.

Francky, thanks for your feedback. I tried what you suggested but the blinking problem persists. Although I don’t know very much about these things I have a feeling that when the <boby tag is hit the document renders and then the command document.body.style.visibility=“hidden”; kicks in - too late. I’ve tried the command also in the <head> section but without anything new.

I also move the call to font-sizer() to the bottom - just before </boby>.

I imagine jquery could probably resolve the problem but I don’t know anything about jquery. Thanks just the same for your feedback.

Best wishes.
George

Hey George,

Could you share a link to your site so that we can see this problem for ourselves?
Failing that, could you post enough code to reproduce this problem locally.

Hi George,

Yes, I’m curious too! *)
I made a testpage with my code from above: working as expected (also at a refresh or reload of the page). :slight_smile:

Note: I saw you used font-sizer() to call the function, but that is not legal in javascript. A function or element name in javascript can’t begin with a digit or contain a hyphen (the hyphen is reserved for a minus sign).
So I replaced it by an underscore, which is allowed: font_sizer().
It wasn’t that?


*) Could be “everything”: a missing file making a delay, lots of custom fonts, a html-, css- or javascript-error, conflicting scripts (or conflicting onloads), the way the fontsizer script is set up, the way WordPress is organizing the php-files, maybe the running on your local PC with xampp is different from the real online performance, etc. etc.

Hi Pullo, thank you for your most gracious offer.

I am using this little project on my localhost with xampp. So now I will try to set you up with what is necessary to run the app and look into the script.

However, first off, if you like you can look immediately at the app online at: http://gleonardonline.com/wordpress and see the blinking. The interface blinks whenever you change pages or refresh the interface.

There are two files you’ll need for setting up the app on a localhost (a PC):

1.) wordpress.zip
This contains the entire wordpress app configured for localhost. Critical are the parameters located in wp-config.php for making the MySQL connection.
2.) wordpress.sql
This is the database. Create database ‘wordpress’ and paste all of this text data into it.

Download these two files at:
1.) http://gleonardonline.com/wordpress.zip
2.) http://gleonardonline.com/wordpress.sql

The Wordpress app administrator login is:
<snip/>

What I have done to customize the wordpress script in order to do the font resizing stuff from the interface is found in module:

/localhost/wordpress/wp-content/themes/blincker/header.php

If you have any questions don’t hesitate to ask.

Thanks again and good luck.
George

Hi Francky,

Sorry I posted the function name ‘font-sizer()’ since it is not the real name of the function. The real name is 'reSize()’ .

I am now going to post a reply to the most gracious offer of Pullo to take a look at the code.

Incidentally I have put the Wordpress app with the blinking up on the Internet. You can see it at http://gleonardonline.com/wordpress .

Thanks again for looking into this stuff for me. I appreciate it.

George

Hi George,

It’s better not to post login details in threads.
I’ve removed them for now, but Francky will have received them if he is subscribed to the thread via email (if not Francky, just ask).

Anyway, the blinking page is all I need to reproduce it.
I’ll have a look at it in the course of tomorrow if no one else beats me to it.

BTW, it’s Pullo (not Pollo, which is a chicken) :slight_smile:

No, didn’t receive them: post #10 and #11 were short after each other, and I only got a mail message with the text of the last one. :slight_smile:

Ah, I see.
In the resizing script there are 2 places where the visibility=“visible” has to be set:

  • once in the end of the function ts( trgt,inc ),
  • once in the end of the function reSize(size).
function ts( trgt,inc ) {
    ...
    ...
    //alert ("aaa:"+startSz);
    document.body.style.visibility="visible";
}
function reSize(size) {
   // alert(size);
    setCookie("fontSizerCookie", size, 7);
    startSz = getCookie("fontSizerCookie");
    if (startSz == 2) {
    	document.body.style.visibility="visible";
    	return;
    }
    ts( 'body',startSz );
}

Then it will work with the onload and setting of the visibility=“hidden” just after the <body> tag:

<body onLoad="reSize(startSz);" class="single single-post postid-1 single-format-standard">
    <script type="text/javascript">
        document.body.style.visibility="hidden";
    </script>
    ... rest of the page

Now you see a white background during the waiting time, and then a rather flashing page content.

=======
Beautifying!

  • First you can give the html the background-color of the page instead of white.

That can be done in the small style block in the head (or in the custom stylesheet):

html { background: #84828C; }
  • Then there can be made a soft transition when the page is ready with the hidden rendering in the background.

That can be done by adding in the script (in both places): first a display=“none” to hide the content in an other way, and then a jQuery-function which is giving the content more and more opacity:

function ts( trgt,inc ) {
    ...
    ...
    //alert ("aaa:"+startSz);
    document.body.style.visibility="visible";
    document.body.style.display="none";
    $( ".single" ).fadeIn(2000);
}
function reSize(size) {
   // alert(size);
    setCookie("fontSizerCookie", size, 7);
    startSz = getCookie("fontSizerCookie");
    if (startSz == 2) {
    	document.body.style.visibility="visible";
        document.body.style.display="none";
        $( ".single" ).fadeIn(2000);
    	return;
    }
    ts( 'body',startSz );
}

The class=“single” is one of the classes of the <body>, so everything in the body will appear simultaneously. :slight_smile:

  • Another thing to beautify is the hash-tag # appearing in the URL in the browser bar after a font-size change.

This can be done by adding return false (= don’t go to the href=“#”) in the script-call of the 5 font-changing links:

<a href="#" id="A0" onClick="javascript:reSize(0);return false" ><img ... etc. /></a>
<a href="#"  id="A1" onClick="javascript:ts('body',1);return false" title="caratteri piccoli"><img ... etc. /></a>
<a href="#"  id="A2" onClick="javascript:ts('body',2);return false"  title="caratteri normali"><img ... etc. /></a>
<a href="#"  id="A3" onClick="javascript:ts('body',3);return false" title="grandi caratteri "><img ... etc. /></a>
<a href="#"  id="A4"onClick="javascript:ts('body',4);return false" title="i più grandi caratteri "><img ... etc. /></a>
  • The Chrome Developer Tool is alerting about a “404 - file not found”. :rolleyes:

That is the file: [U]http://gleonardonline.com/wordpress/wp-content/themes/blinker/jquery.min.map[/U].
This file is not directly called in the html, but is called by another javascript file: [U]http://gleonardonline.com/wordpress/wp-content/themes/blinker/jquery.js?ver=3.8[/U]
Every not found file can cause a delay in the page load!
Now I’ve read on [U]http://stackoverflow.com/questions/18487596/error-jquery-2-0-2-min-map-not-found[/U] (in post #25):

[INDENT]“The map file is not required for users to run jQuery, it just improves the developer’s debugger experience.”[/INDENT]

Aha! :slight_smile:

  • So I downloaded your jquery.js file.
  • I deleted line 2 with the reference to the not existing jquery.min.map
  • Uploaded it to my server.
  • And changed the path to jquery.js?ver=3.8 in the html towards the uploaded file on my server.

You can download this one [U]scripts/blinker-jquery.js?ver=3.8[/U], rename it and upload it to your server, replacing the old one.

=======
The result
After this, we have got:

  • Test: [U]blinker-nw-2.htm[/U]
    The page is calmly fading in from the background.
    Choosing a new font-size gives the same fade-in.
    And possible to go the another page (1 made 1, link in the testpage), so you can switch and see the cookie is working.

Blinking is over! :slight_smile:


BTW: I think your server is pretty slow, the 18 http-requests and a total page weight of 206.9K is not very much. Or is Wordpress doing things behind the scenes with the javascripts?

Hi Francky,

I sent you a PM with the login details, but judging by the above post (which I hadn’t seen when I sent the PM), it wasn’t necessary :slight_smile:

Hi Francky ,

I woke up this morning to your response with the answer to my blinker problem. Great stuff !! Thank you sooooooooooooooo much !!! I implemented it right away and it is now working 100% to my satisfaction.

As to the server being pretty slow? The only thing I have any information about is that I have heard that I should go slow with the plugins I add the the Wordpress app - and I have quite a few added to this app. But just the same I think the response time is OK. Maybe sometime at a latter date I will look into it.

Thanks again to you Francky for your help - and to everyone else who contributed to this thread.

Best wihes.
George :slight_smile:

Regarding the slow server, you are running PHP 5.x, aren’t you?
Also, I could recommend a plugin such as W3 Total Cache.

Sorry Pullo. I forgot to answer your question. Yes, I use PHP 5.x . I also took a quick look at “W3 Total Cache”. If I get around to figuring out a little more about it I might use it.

Thank you for all your help and advice.
George :slight_smile: