PDA

View Full Version : Preloader (CSS Spinner) and SSI script II



wol4
09-03-2016, 06:03 PM
It takes a time, when I load a shop into an iFrame.
I found some sweet CSS - spinners (on cssload.net) and I'm pondering how to display them.
(Already spent 2 days with it :-))

Options are:
1. integrate CSS and Javascript into the mother page.
2. into the loading page.

In my case the mother page is quite fast loading. The shop: slower (2secs).
It makes no sense to integrate the pre-loader spinner into the loading site, I tried that.
So, in the article loading my iframe (http://lazaris.greenmarine.systems/index.php/resources/introductory-titles), we are.


My problem:
the spinner must stop spinning once the site has loaded and somehow he just don't get it, no matter what I try!
Is it due to the SSI script code in the head?

My code to stop the spinner spinning after the completed page load is:


var pre-loader=document.getElementById(“pre-loader”);
window.addEventListener('load', function()
{pre-loader.style.display = 'none';})

or (tried both, makes no difference):


var overlay=document.getElementById(“pre-loader”);
window.addEventListener('load', function()
{pre-loader.style.display = 'none';})

Why is it giving me the finger?

Beverleyh
09-03-2016, 11:33 PM
I can't test anything from mobile but try without the dash in the variable name (you can't have dashes in JavaScript variables because it gets mistaken for a minus);
var preLoader=document.getElementById(“pre-loader”);
window.addEventListener('load', function()
{preLoader.style.display = 'none';})
Or the correct variable name;
var overlay=document.getElementById(“pre-loader”);
window.addEventListener('load', function()
{overlay.style.display = 'none';})

wol4
09-04-2016, 01:18 PM
Doesn't work either, but thank you.
I still need something to switch the spinner of once the shop has loaded into my iframe.

I also tried:

$('#preloader').show();
before and after

$('#preloader').hide();
the content.

Maybe I'm addressing the wrong page? The spinners markup sits before the iframe of course.
I also tried to write it inside the SSI II script itself, but it stopped functioning after that :-)

jscheuer1
09-04-2016, 02:11 PM
OK, I was just looking at your page, and there is no pre-loader and no preloader element. Not on the top page, nor on the first page one can load into the iframe.

wol4
09-04-2016, 03:47 PM
I had a lil bug in my HTML in the article, just before the iframe. Sorry.
I switched it on again. Normally the style is set to display: none;
Ah, yes, pls click on "introductory titles" on the first menu button: this will load the iframe page.

jscheuer1
09-04-2016, 04:46 PM
OK, here's the problem - still no element with the id of preloader. There is however this (look very carefully at the quote marks):


<div id=“preloader” style="opacity: 0.7">


Those are stylized leaning left and leaning right opening and closing double quotes, not the standard vertical double quotes, so the id is actually:

“preloader”

not:

preloader

Things will get much simpler if you correct the HTML markup to:


<div id="preloader" style="opacity: 0.7">


Then, this should work:


var overlay=document.getElementById('preloader');
window.addEventListener('load', function()
{overlay.style.display = 'none';})

Never use the left and right leaning single or double quotes in either HTML or javascript code unless you mean them as string literals.

NOTEs: I see that you also made the same error in your javascript code:


var pre-loader=document.getElementById(“pre-loader”);
window.addEventListener('load', function()
{pre-loader.style.display = 'none';})

So be sure to be careful there as well when fixing this.

Also this (once fixed) will make the preloader disappear on load of the top page. After that, if you plan on bringing it back for the loading of each subsequent sub-page into the iframe, you will have to key off of the load event of the iframe or of its document for making it disappear again. But, since I have no firm indication you're even contemplating doing that yet. I'll leave the details of that till later, if needed.

wol4
09-04-2016, 05:34 PM
Thanks for the try, John :-)

1. The thing in my HTML markup was the bug I had. I don't understand why you still saw it, but I have a long list of what I don't understand everyday, so ..
2. I put the javascript (of your repaired version, only with "preloader" instead of pre-loader, because I've changed it's ID too) just before the SSI script in my theme.php (I tried also adding it in the body -- the same.)
3. In my HTML markup, I set the style to: display: none; that's the idea.

Preloader does not show.

jscheuer1
09-04-2016, 05:42 PM
So all fixed?

wol4
09-04-2016, 05:54 PM
No, the preloader does not show before the page loading.
Quick-check yourself (http://lazaris.greenmarine.systems/index.php/resources/introductory-titles).

jscheuer1
09-04-2016, 06:34 PM
You still have the same problem, and a new one. Here's the markup:


<div id=“preloader” style="display: none; opacity: 0.7;">


New problem - With it's display set to none right in the tag, it will never show unless you do something in javascript or overriding style to change that.

Old problem - it's id still isn't preloader, you still have those messed up word processing quotes around it instead of valid HTML quotes delimiting the id.

It should be:


<div id="preloader" style="opacity: 0.7;">


See the difference?

On the plus side, your javascript:


var overlay=document.getElementById('preloader');
window.addEventListener('load', function()
{overlay.style.display = 'none';})

No longer has that problem, however, I see an omission I missed before - the addEventListener function expects a third parameter (true or false):


var overlay=document.getElementById('preloader');
window.addEventListener('load', function()
{overlay.style.display = 'none';}, false);

I'm not certain if that matters, but I've never seen it without that. Using false is usually fine and what is most customary. I believe it governs whether or not the event can 'bubble' (or in modern parlance 'propagate'), counterintuitively false means it can, which is normal and preferable as it allows other events of the same type on the same object/element to also fire.

Further, even if everything else was right, you cannot set the variable overlay at that point because the element, even with the correct id hasn't been parsed yet. So do it like so:


window.addEventListener('load', function(){
var overlay = document.getElementById('preloader');
overlay.style.display = 'none';
}, false);

I'd just go direct at that point though:


window.addEventListener('load', function(){
document.getElementById('preloader').style.display = 'none';
}, false);

Either way, once the window loads the element will have been parsed, so everything should then be fine (assuming I understand what you're trying to do*).

Good luck!


*You do want it to show initially and then disappear when the page loads - right?

wol4
09-04-2016, 07:26 PM
*You do want it to show initially and then disappear when the page loads - right?

No, it should always be hidden, like a cosmic joke :-)

I repaired the bug in my markup immediately when you told me about it -- some hours ago!
I don't know, why you still see it. Pls clear the browsers cache, and again: I'm sorry.

It's (for some time): <div id="preloader" style="display: none; opacity: 0.7;">
...
</div>

If I erase style="display: none", the CSS animation shows, and the idea of this little script
(got it from a tutorial of an Indian developer that I found in YouTube) is to control the hide/show of the id "preloader" with Javascript.

I use this (your) code (at the moment, in the head, before the SSI-script):

window.addEventListener('load', function(){
var overlay = document.getElementById('preloader');
overlay.style.display = 'none';
}, false);

Nothing happens, and I believe I have been careful.

Maybe it's because of the SSI-II-script.
Maybe this page get's loaded superfast anyway, and we don't know anything here about the shop-CMS that's loading boringly slow.
Maybe it's in vain.
Maybe it would only work if it would be included in the SSI-II script.

jscheuer1
09-04-2016, 08:32 PM
OK all fixed that I can see now except:


<div id="preloader" style="display: none; opacity: 0.7;">


Gotta get rid of that (highlighted), or we will never see it.

wol4
09-05-2016, 06:28 AM
I've done that, but now we always see it :-)

The idea of that code is to switch it on and off at pageload. It doesn't.
Maybe it has to be inside of the SSI II - script?

wol4
09-05-2016, 03:21 PM
I understand. Thank you, John, for having a close look at this!
Maybe I'll have to talk to the YooThemes ...

jscheuer1
09-05-2016, 03:23 PM
OK, I've got it. The onload is firing. The script tag is invalid:


<script type="javascript">
window.addEventListener('load', function(){
document.getElementById('preloader').style.display = 'none';
}, false);
</script>

Should be:


<script>
window.addEventListener('load', function(){
document.getElementById('preloader').style.display = 'none';
}, false);
</script>

The page does have other invalid code though, illegal nesting should probably be fixed, the outdated attributes on the iframe are probably harmless, and might actually be good for some browsers. Missing alt attributes on images are also optional fixes, as an empty alt attribute is valid. Those are mostly for people with screen readers (blind). So it's nice to have them. And they can be useful if an image fails to load.

wol4
09-05-2016, 03:55 PM
Yeah!

jscheuer1
09-05-2016, 04:50 PM
OK, now what would be nice would be to have it reappear when a link is clicked that loads new content into the iframe and then have it disappear again once that content is loaded. Compared to what we've just been through, this should be relatively easy. Are you game?

wol4
09-05-2016, 05:05 PM
Playful you :-)
It's cool for now, and I will focus on technical issues now.

But it's so important to have a little fun while working on the heavvy stuff, right?
Thank you, I'll be back!

And this is a very honorable address ... :-)