Help - Search - Members - Calendar
Full Version: Preloader Interfering With Navigation
HTMLHelp Forums > Programming > Client-side Scripting
DavidLeon
My Webpage

The template I'm using has a preloader which I think may be interfering with navigation. I have .pls files streaming music in the Menu under Radio. When I click on them to listen it loads them fine but the page goes to the preloader (which I would just as well get rid of anyway) and I have to reload the page for it to come back. I've tried to just get rid of the preloader and it's like some alien entity that can't be killed. I tried removing it from javascripts and css as well as the page itself. Then my links don't work at all. I can't navigate anywhere on my page or listen to the .pls files.

Isn't that the oddest thing? I've never run into this before.

Thanks for any help you can give me and for your attention.
Christian J
The page seems to be made up almost entirely of javascript, so I move the thread to the javascript forum.
CharlesEF
I would try validating the CSS first, there are a few dropped rules due to bad selectors. Validate the CSS here.

It's also a good idea to validate the HTML also. You can do that here.
DavidLeon
QUOTE(CharlesEF @ Jul 19 2020, 02:46 PM) *

I would try validating the CSS first, there are a few dropped rules due to bad selectors. Validate the CSS here.

It's also a good idea to validate the HTML also. You can do that here.


Okay. I validated the CSS and it validates, except they recommend I not close the image tag for the logo which I fixed and it validates. Supposed to be css, though, I don't understand why it would comment on the html page.

I tried to validate the HTML and it suggested I change the <html> tag with language, which I did and then they have a list of errors evolving the head tag which they seem to be indicating doesn't exist. It does.

CharlesEF
Your HTML is invalid. The basic structure of an HTML document is:

<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
</body>
</html>

In the head section is where you should place all meta, title, link and script tags. Your current code doesn't follow this.
You also seem to have an out of place </td>, which is after a closing </tr>. That is wrong, the table cell should be closed first.
And I see you are using the <center> tag but that was removed in HTML 5.

Your CSS still has errors, according to Firefox. Example: Unrecognized at-rule or error parsing at-rule ‘@-ms-viewport’, Unknown pseudo-class or pseudo-element ‘-ms-expand’. Ruleset ignored due to bad selector, there are more like this. All the errors are from core.css

Your browser should have some kind of 'Web Developer' option where you can look at the console and see these errors.
DavidLeon
QUOTE(CharlesEF @ Jul 19 2020, 04:30 PM) *

Your HTML is invalid. The basic structure of an HTML document is:

<!DOCTYPE HTML>
<html lang="en">
<head>
</head>
<body>
</body>
</html>

In the head section is where you should place all meta, title, link and script tags. Your current code doesn't follow this.
You also seem to have an out of place </td>, which is after a closing </tr>. That is wrong, the table cell should be closed first.
And I see you are using the <center> tag but that was removed in HTML 5.

Your CSS still has errors, according to Firefox. Example: Unrecognized at-rule or error parsing at-rule ‘@-ms-viewport’, Unknown pseudo-class or pseudo-element ‘-ms-expand’. Ruleset ignored due to bad selector, there are more like this. All the errors are from core.css

Your browser should have some kind of 'Web Developer' option where you can look at the console and see these errors.


I don't understand. First of all the structure of my HTML is exactly as you say it should be. I hadn't heard of the language thing in an html tag. That must be new, but I added it. All meta tags, title and link and script tags are where they should be. True I do use the archaic center tag and the table tags I've changed. Of course, that didn't fix anything. It has nothing to do with it. The validator didn't mention the table tags as being even just a warning.

I did have the charset outside the head but I thought that was the way it's supposed to be. It's hard to keep up with the rules.

As for the CSS, it's validated by the source I was given to validate it and yet you say there are errors in the core? How is that possible?

ETA: Maybe I should rephrase my question. How does one remove a preloader without effecting the functionality of a website?
CharlesEF
I will admit that fixing these errors might not solve your problem. I believe the foundation should be solid before you try fixing other things.

I took your 'core.css' and ran it thru the CSS validator and I get errors and warnings reported. There are 30 rules that generate a parse error, 1651 warnings. You should look into the errors, at least.

You want to fix something by removing the 'preloader'. That may work, I'm not sure because I don't use bootstrap at all. Then again it may not work.

I always like to start with a good foundation before I start trying to fix things. You are free to ignore/take my advise.
DavidLeon
QUOTE(CharlesEF @ Jul 20 2020, 12:56 AM) *

I will admit that fixing these errors might not solve your problem. I believe the foundation should be solid before you try fixing other things.

I took your 'core.css' and ran it thru the CSS validator and I get errors and warnings reported. There are 30 rules that generate a parse error, 1651 warnings. You should look into the errors, at least.

You want to fix something by removing the 'preloader'. That may work, I'm not sure because I don't use bootstrap at all. Then again it may not work.

I always like to start with a good foundation before I start trying to fix things. You are free to ignore/take my advise.


I didn't come here to argue with you I came here for help. I've made the necessary changes the validator suggested in the HTML, then ran it through again and it gives the same errors.

I've ran the core.css through and I get this. http://jigsaw.w3.org/css-validator/validat...ng=&lang=en

Congratulations, no errors!

I can't fix what I can't see and to be honest, if there's 1651 errors I'll go down with the sinking ship. I don't want to take up anyone's time unnecessarily. It just amazes me that I can't simply remove the preloader code. On the HTML page where it appears. A simple line of code. Or at least remove it from the css and java script files.

It just won't go away and no one seems to know why? And I can't help but wonder . . . who makes these website templates? Why are they always so full of errors? And if the errors are so important how is it that the pages work in every browser? Why implement a page of code in css that's going to mess up everything else on a website when a harmless center tag would work better without having to write out all of that code or messing up the entire website? Because some guru somewhere decided the center tag was unfashionable?

I don't get that. I knew you all would insist upon the validation, which is why I used the most stripped down page I had, but I can't fix 1651 errors I can't see or much less understand. I'll just have to live with it. Thanks for your help and sorry to have wasted your time.
pandy
1651 errors? What tool did you use. There are three errors and they are all about required stuff left out.

You need to declare a character encoding, you need a doctype and the page needs TITLE.
https://validator.w3.org/nu/?doc=http%3A%2F...;showsource=yes

I don't know why the w3c validator goes on with the validation without a doctype without telling us what doctype it validates against, but judging from from the warning that the type attribute isn't needed it's HTML 5.

I doubt correcting the errors will fix your problem, but you should do it anyway. The doctype is important because without it browsers run in quirks mode which means they emulate older and more error prone versions of themselves. But what you've got isn't a rendering problem.
CharlesEF
Since I don't do bootstrap I'm out of here. I can only say that the link you posted does show a valid CSS file. However, I find that if I copy the CSS text and paste it in to the CSS validator it reports 32 errors and 1649 warnings. That's 2 more errors and 2 less warnings than the last time I validated the CSS. So, when validating by URI it reports success. But, when validating by direct input it reports errors and warnings. Strange, I don't understand why?

Good luck on your problem.
DavidLeon
QUOTE(CharlesEF @ Jul 20 2020, 03:47 PM) *

Since I don't do bootstrap I'm out of here. I can only say that the link you posted does show a valid CSS file. However, I find that if I copy the CSS text and paste it in to the CSS validator it reports 32 errors and 1649 warnings. That's 2 more errors and 2 less warnings than the last time I validated the CSS. So, when validating by URI it reports success. But, when validating by direct input it reports errors and warnings. Strange, I don't understand why?

Good luck on your problem.


The HTML as well is odd. I fixed all of the errors and warnings that I could see, but they were still registering as errors and warnings that I've fixed. Some of the errors it claimed I had weren't there. I wonder if it has anything to do with my cache. My web host is free and they have a weird (IMO) cache system. So while I'm working on a page I will have to wait 2 days to see the effect. Changed images, for example.

I don't know. I don't really know what I'm doing, I'm just playing around for a hobby. Thanks anyway.
CharlesEF
That's strange indeed. Personally, when people are just learning I try to recommend that they learn the basics. This means no templates, libraries or frameworks.

You might want to look for a bootstrap friendly forum to post your question. I don't think many people here use bootstrap.
pandy
Sorry, I misunderstood. Thought the many errors was with the HTML.

Yes, something is going wrong. For instance you do have a doctype and the validator says you don't. HTML 4.01 at that. Too bad we have a temporary problem with the validator on this site ATM, otherwise we could have used that and maybe found something.

Look at the source the validator prints at the bottom here.
https://validator.w3.org/nu/?doc=http%3A%2F...;showsource=yes

It isn't a letter right. I wondered why Christian said your page was all JS, but this is probably why. He must have validated first off and saw this.

I found one thing (that I don't know what to do with). With JavaScript off I get that never-ending preloader when loading your page, same as we get when clicking one of the links. wacko.gif
pandy
QUOTE(pandy @ Jul 21 2020, 06:10 AM) *

Too bad we have a temporary problem with the validator on this site ATM, otherwise we could have used that and maybe found something.


Stupid me. I have the offline version.

Here, some proper validation.
CODE

Results for C:\Users\user\Desktop\TEST\DavidLeon.html
Level of HTML: HTML 4.01 Strict

Errors
1.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 12, Character 14:
    there is no attribute CHARSET for this element (in this HTML version)

2.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 12, Character 21:
    required attribute CONTENT not specified

3.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 29, Character 11:
    there is no attribute ID for this element (in this HTML version)

4.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 29, Character 19:
    element HEADER not defined in this HTML version

5.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 40, Character 11:
    there is no attribute CLASS for this element (in this HTML version)

6.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 40, Character 23:
    element NAV not defined in this HTML version

7.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 107, Character 67:
    there is no attribute TARGET for this element (in this HTML version)

8.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 120, Character 9:
    there is no attribute ID for this element (in this HTML version)

9.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 120, Character 32:
    there is no attribute DATA-BACKGROUND for this element (in this HTML version)

10.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 120, Character 41:
     element MAIN not defined in this HTML version

11.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 123, Character 15:
     there is no attribute CLASS for this element (in this HTML version)

12.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 123, Character 67:
     there is no attribute DATA-BACKGROUND for this element (in this HTML version)

13.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 123, Character 124:
     there is no attribute DATA-OVERLAY for this element (in this HTML version)

14.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 123, Character 135:
     element SECTION not defined in this HTML version

15.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 137, Character 20:
     there is no attribute DATA-ANIMATION for this element (in this HTML version)

16.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 142, Character 7:
     element CENTER not defined in this HTML version

17.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 144, Character 9:
     there is no attribute ALIGN for this element (in this HTML version)

18.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 145, Character 12:
     end tag for element TR which is not open; try removing the end tag or check for improper nesting of elements

19.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 145, Character 17:
     end tag for element TD which is not open; try removing the end tag or check for improper nesting of elements

21.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 149, Character 5:
     end tag for CENTER omitted; possible causes include a missing end tag, improper nesting of elements, or use of an element where it is not
     allowed

22.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 140, Character 0:
     start tag was here

23.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 159, Character 11:
     there is no attribute ID for this element (in this HTML version)

24.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 159, Character 19:
     element FOOTER not defined in this HTML version

25.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 168, Character 54:
     required attribute TYPE not specified

26.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 169, Character 55:
     required attribute TYPE not specified


Almost all of those errors are because you really write HTML5, but you use a HTML 4.01 doctype. Lots of new stuff in HTML5, that's seen as unknown elements and attributes in HTML 4.01. Alas the WDG validator doesn't do HTML 5, since HTML 5 doesn't have a DTD.

Ignoring all the HTML 5 related errors it boils down to these, the only real errors.

CODE

16.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 142, Character 7:
     element CENTER not defined in this HTML version

17.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 144, Character 9:
     there is no attribute ALIGN for this element (in this HTML version)

18.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 145, Character 12:
     end tag for element TR which is not open; try removing the end tag or check for improper nesting of elements

19.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 145, Character 17:
     end tag for element TD which is not open; try removing the end tag or check for improper nesting of elements

21.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 149, Character 5:
     end tag for CENTER omitted; possible causes include a missing end tag, improper nesting of elements, or use of an element where it is not
     allowed

22.  C:\Users\user\Desktop\TEST\DavidLeon.html, Line 140, Character 0:
     start tag was here



They are caused by this peculiar bit with wrongly nested closing table tags and and CENTER isn't closed at all (and CENTER isn't allowed, neither in HTML5 nor in 4.01 Strict).

CODE
<div data-animation="fade-in-bottom 1.2s .4s">
<center><table width="60%"><tr><td>

<h3 class="text-light">400 Bad Request</h3>

<p align="justify" class="medium serif my-2 text-light">The 400 Bad Request error indicates that the server cannot or will not process the request due to something that is perceived to be a client error such as a malformed request syntax, invalid request message framing, or deceptive request routing.</p>
</table></tr></td>
</div>



This doesn't solve your problem either, but at least it shows there's basically nothing wrong with your HTML. Apart from the above bit and that you use the wrong doctype.
pandy
The validator hates you. It does the same thing with your whole site. Look for example at the source it uses here.
https://validator.w3.org/nu/?doc=http%3A%2F...;showsource=yes
Again, that's not what's in the real source at all.

I don't understand what's going on. I validated several pages that I know don't have errors and the validator handled them correctly. So I think the problem is with your site, but I can't figure out what it is. But maybe THAT is related to the original problem?
pandy
It isn't only the validator. Other tools get the same crap source, so somehow that's what's sent from your server.

http://www.rexswain.com/httpview.html

Alas that tool doesn't support GET anymore, so can't link directly to the result. And it uses a pesky image CAPTCHA...

Here's one that doesn't require CAPTCHA.
https://www.autark.se/user_agent_simulator.html
Was cool once, but haven't been updated. I set the UA to the newest version of FF it provides, which is old. And look what it gets...
https://www.autark.se/uas.html?url=http%3A%...line-numbers=on

So why do our browsers show a normal HTML source? wacko.gif
pandy
I think we'd better leave this to Darin. laugh.gif
Christian J
QUOTE(pandy @ Jul 21 2020, 06:10 AM) *

Look at the source the validator prints at the bottom here.
https://validator.w3.org/nu/?doc=http%3A%2F...;showsource=yes

It isn't a letter right. I wondered why Christian said your page was all JS, but this is probably why. He must have validated first off and saw this.

I actually viewed it with javascript disabled, but yes that's what I got. It appears the HTML is encrypted by http://daystarbible.epizy.com/aes.js (probably a waste of time, since you can always get the result in your browser's inspector tools, but I didn't bother).
pandy
QUOTE(Christian J @ Jul 21 2020, 01:11 PM) *

QUOTE(pandy @ Jul 21 2020, 06:10 AM) *

Look at the source the validator prints at the bottom here.
https://validator.w3.org/nu/?doc=http%3A%2F...;showsource=yes

It isn't a letter right. I wondered why Christian said your page was all JS, but this is probably why. He must have validated first off and saw this.

I actually viewed it with javascript disabled, but yes that's what I got. It appears the HTML is encrypted by http://daystarbible.epizy.com/aes.js (probably a waste of time, since you can always get the result in your browser's inspector tools, but I didn't bother).


But when I have JS off I get the loader as I said, but I still see HTML when I view source. Why does this differ?

Even if the whole page is written by JS we all should see JS and not the rendered HTML. How the heck does this work?
Christian J
QUOTE(pandy @ Jul 21 2020, 02:29 PM) *

But when I have JS off I get the loader as I said, but I still see HTML when I view source. Why does this differ?

Not sure what you mean with "loader", but this is what I see:

CODE
<html><body><script type="text/javascript" src="/aes.js" ></script><script>function toNumbers(d){var e=[];d.replace(/(..)/g,function(d){e.push(parseInt(d,16))});return e}function toHex(){for(var d=[],d=1==arguments.length&&arguments[0].constructor==Array?arguments[0]:arguments,e="",f=0;f<d.length;f++)e+=(16>d[f]?"0":"")+d[f].toString(16);return e.toLowerCase()}var a=toNumbers("f655ba9d09a112d4968c63579db590b4"),b=toNumbers("98344c2eee86c3994890592585b49f80"),c=toNumbers("c3faaf2198683e7f89b06388650e9cf3");document.cookie="__test="+toHex(slowAES.decrypt(c,2,a,b))+"; expires=Thu, 31-Dec-37 23:55:55 GMT; path=/"; location.href="http://daystarbible.epizy.com/400b.php?i=1";</script><noscript>This site requires Javascript to work, please enable Javascript in your browser or use a browser with Javascript support</noscript></body></html>


If you get something else (with JS disabled) maybe there's some server-side browser detection going on as well. unsure.gif
pandy
QUOTE(Christian J @ Jul 21 2020, 03:31 PM) *

Not sure what you mean with "loader", but this is what I see:

The one the OP's original question is about. What you get when one of those audio links are clicked. Some kind of animation supposed to denote that something is loading.

QUOTE
but this is what I see:


I've understood that. But I get normal HTML.

QUOTE
If you get something else (with JS disabled) maybe there's some server-side browser detection going on as well. unsure.gif


So what browser do you use? Opera? I get HTML both in K-Mel goanna and FF. Haven't bothered to figure out how to disable JS in Chrome/Iron.

Maybe it's time we ask the OP what he actually is serving. unsure.gif
pandy
Now odd things are happening here to. I answered you, Christian, but my answer disappeared. But I do see it below when I type a new anwer now. So sorry if this is a duplicate.
QUOTE


Not sure what you mean with "loader", but this is what I see:


The one the OP's original question is about. What you get when one of those audio links are clicked. Some kind of animation supposed to denote that something is loading.


QUOTE
but this is what I see:



I've understood that. But I get normal HTML.


QUOTE
If you get something else (with JS disabled) maybe there's some server-side browser detection going on as well. unsure.gif


So what browser do you use? Opera? I get HTML both in K-Mel goanna and FF. Haven't bothered to figure out how to disable JS in Chrome/Iron.


Maybe it's time we ask the OP what he actually is serving. unsure.gif
pandy
Now I see two copies of my answer here below the text area I type in, but only one when I view the thread normally. tongue.gif

Anyway, DavidLeon. Take a look at this rule here...

CODE
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
    z-index: 999999;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
}


I think that if you remove that rule (play it safe and comment it out) your problem loader will be gone. It's just positioned on top of everything else. There must be more too it, but I can't find the rest. But as said, I think removing this will be enough. Try that and we'll see.
Christian J
QUOTE(pandy @ Jul 21 2020, 03:59 PM) *

So what browser do you use? Opera? I get HTML both in K-Mel goanna and FF. Haven't bothered to figure out how to disable JS in Chrome/Iron.

Firefox with the Noscript extension set to block most things. Are you sure disabled JS in Firefox and K-Mel?

Oh, http://www.rexswain.com/httpview.html is back! It was disabled a while ago due to abuse.





pandy
QUOTE(Christian J @ Jul 21 2020, 06:34 PM) *

Firefox with the Noscript extension set to block most things. Are you sure disabled JS in Firefox and K-Mel?


Yes, of course. But I do it from about:config in FF and K-Mel has it right on the toolbar, so no extensions.
QUOTE

Oh, http://www.rexswain.com/httpview.html is back! It was disabled a while ago due to abuse.


Yes, I was surprised too. Thought it was gone for good.
pandy
QUOTE(pandy @ Jul 21 2020, 04:03 PM) *

Anyway, DavidLeon. Take a look at this rule here...

CODE
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f8f9fa;
    z-index: 999999;
    -webkit-transition: opacity .5s ease;
    transition: opacity .5s ease;
}


I think that if you remove that rule (play it safe and comment it out) your problem loader will be gone. It's just positioned on top of everything else. There must be more too it, but I can't find the rest. But as said, I think removing this will be enough. Try that and we'll see.


Have you had time to try? I'm curious if this is enough IRL.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2021 Invision Power Services, Inc.