Member Avatar for <M/>

I seem to not be able to identify why the styling does not appear at all on my page... Did i reference something incorrectly? It all appears right to me... syntax, quotes, tags all look right. Does anyone have an idea what may be happening? Sorry if my question is unclear, I am frustrated with this website :)

        <!DOCTYPE html>

        <html>

            <head>

<title>ProjectX</title>
<meta name="keywords" content="" />
<meta name="description" content="" />       

<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>

<link rel="stylesheet" type="text/css" href=""/>
<link rel="stylesheet" type="text/css" href="http://mywebsite.com/projectx/node/node/style/jquery.qtip.css"/>
<link rel="stylesheet" type="text/css" href="http://mywebsite.com/projectx/node/node/style/colpick.css"/>
<link rel="stylesheet" type="text/css" href=""/>
<link rel="stylesheet" type="text/css" href="http://mywebsite.com/projectx/node/node/style/jquery.nivo.slider.css"/>
<link rel="stylesheet" type="text/css" href="http://mywebsite.com/projectx/node/node/style/mediaelementplayer.min.css"/>
<link rel="stylesheet" type="text/css" href="http://mywebsite.com/projectx/node/node/style/supersized/supersized.css"/>
<link rel="stylesheet" type="text/css" href="http://mywebsite.com/projectx/node/node/style/fancybox/jquery.fancybox.css"/> 
<link rel="stylesheet" type="text/css" href="http://mywebsite.com/projectx/node/node/style/fancybox/helpers/jquery.fancybox-buttons.css"/>
<link rel="stylesheet" type="text/css" href="http://mywebsite.com/projectx/node/node/style/widget.css"/> 
<link rel="stylesheet" type="text/css" href="http://mywebsite.com/projectx/node/node/style/base.css"/> 

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Inconsolata" />
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700,800" />

<link rel="stylesheet" type="text/css" media="screen and (max-height:500px)" href=""/>

<link rel="stylesheet" type="text/css" media="screen and (max-width:1179px)" href="http://mywebsite.com/projectx/node/node/style/responsive/width-0000-1179.css"/>   
<link rel="stylesheet" type="text/css" media="screen and (max-width:959px)" href="http://mywebsite.com/projectx/node/node/style/responsive/width-0000-0959.css"/>    
<link rel="stylesheet" type="text/css" media="screen and (max-width:767px)" href="http://mywebsite.com/projectx/node/node/style/responsive/width-0000-0767.css"/>    

<link rel="stylesheet" type="text/css" media="screen and (min-width:1440px) and (max-width:1679px)" href="http://mywebsite.com/projectx/node/node/style/responsive/width-1440-1679.css"/>
<link rel="stylesheet" type="text/css" media="screen and (min-width:1180px) and (max-width:1439px)" href="http://mywebsite.com/projectx/node/node/style/responsive/width-1180-1439.css"/>    
<link rel="stylesheet" type="text/css" media="screen and (min-width:960px) and (max-width:1179px)" href=""/>
<link rel="stylesheet" type="text/css" media="screen and (min-width:768px) and (max-width:959px)" href=""/>  
<link rel="stylesheet" type="text/css" media="screen and (min-width:480px) and (max-width:767px)" href="http://mywebsite.com/projectx/node/node/style/responsive/width-0480-0767.css"/>  
<link rel="stylesheet" type="text/css" media="screen and (max-width:479px)" href="http://mywebsite.com/projectx/node/node/style/responsive/width-0000-0479.css"/>    

                <link rel="stylesheet" type="text/css" href="http://mywebsite.com/projectx/node/node/style/jquery.colorSwitcher.css"/> 

                <link rel="stylesheet" type="text/css" id="cs-color-file" href="http://mywebsite.com/projectx/node/node/style/color.css.php"/> 

                <script type="text/javascript" src="http://mywebsite.com/projectx/node/node/script/jquery.min.js"></script>
                <script type="text/javascript" src="http://mywebsite.com/projectx/node/node/script/jquery-migrate.min.js"></script>

            </head>

I will send you guys the links for my site if needed (only through PM)...I want to keep the site as private as possible.

  • 7 Contributors
  • 32 Replies
  • 731 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by shashikumar s g

Dani AI

Generated

Quick, practical summary and focused fixes based on the thread: the problem space here is threefold — broken/mismatched resource paths, script-order / duplicate-library issues, and a JavaScript error blocking runtime. already spotted many 404s, called out ordering, and pointed to using DevTools; the checklist below applies those observations and fills the gaps for isolating a stubborn “intro” that never finishes.

  • Verify every resource returns 200 and the correct MIME (Network tab): CSS must be served as text/css, JS as application/javascript. Case-sensitive filenames and an extra folder in the path will cause 404s even when markup looks correct.
  • Eliminate duplicate jQuery files and load the core library before any plugins. Mixing versions or loading a plugin before jQuery frequently stops initialization.
  • The missing *.map file reported in the console is a source-map warning for debugging; it does not break jQuery. Either upload the .map or remove the sourceMappingURL comment if the map is not needed.
  • Move nonessential scripts to the end of the body to avoid blocking rendering; keep critical CSS in the head. Modern HTML5 does not require type attributes on link/script tags (as noted).
  • Confirm file encoding is UTF-8 without BOM (advice echoed by ) so stray bytes do not corrupt CSS/JS.

To find the script causing the freeze: enable “Pause on exceptions” in DevTools, then disable the intro/init script and reload. Reintroduce scripts with a binary (half-split) approach until the failure reappears — this narrows the culprit quickly. Also check for uncaught exceptions in the console and add short console.log statements at the start of each init file to trace execution order.

Recommended minimal structure (order matters):

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="/css/base.css">
</head>
<body>
  ...
  <script src="/js/jquery.min.js"></script>    <!-- core first -->
  <script src="/js/jquery-ui.min.js"></script> <!-- plugins next -->
  <script src="/js/plugins.js"></script>       <!-- plugin bundle -->
  <script src="/js/init.js"></script>          <!-- app init last -->
</body>

Also check server logs and file permissions, clear caches, and test a minimal reproducible page locally to confirm whether the issue is environmental or code-related.

Recommended Answers

All 32 Replies

Member Avatar for pritaeas

Is there a specific reason you are using full URLs?

commented: not really +10
Member Avatar for <M/>

not really. i just saved them to my site using filezilla. i personally find it easier to edit them from any computer this way.

Edited by <M/>
Member Avatar for jstfsklh211

are those pages being loaded properly by the site

check firebug/other tool to make sure your urls are correct

may seem basic but...

commented: i see +10
Member Avatar for <M/>

Okay... this may sound stupid but I just discovered the problem was that my brother played a prank on me by adding an extra folder in the directory (which i didn't notice until i realized that he threw everything in a folder called Nothing_Suspicious).

So, now all the elements should be showing on the page... which means it leads me to my next question. Why is it that my site gets stuck at the introduction i set up? I sent you both the link to the site to help me identify where the problem is. I gave you guys rep points for the previous contribution.

Member Avatar for pritaeas

Opera shows:

Request URL:
Request Method:GET
Status Code:404 Not Found

But jquery 1.11 is also loaded from google.

And a lot more 404 on images.

There's a lot on that page, you should start over, and add everything one by one.

Edited by pritaeas
commented: i don't get those errors? +0
Member Avatar for <M/>

Do you have any recommendations to avoid the 404s? I personally am lost at this point because I now feel like ALL my js files got messed up in their own way.

Also, when i search for the example you gave on a browser, i just see the js code for it (i put in the actual site name in it instead:D) (i am using chrome).

Member Avatar for pritaeas

Perhaps an IP block, or folder protection. I can't open the map.

commented: hmmm... possibly a WP issue +0
Member Avatar for <M/>

If you use chrome, you are able to see the js files i am using if you simply go and inspect an element>resources>frames>scripts

Maybe that will help you a bit more to help me when it comes to seeing my js files? Also, there really isn't anything special on the domain itself... would it be because I still have WP installed on it which maybe is causing the issue (it crashed, which is why the main page is all white)?

Member Avatar for pritaeas

Perhaps some htaccess redirects that are causing you issues?

commented: possible... it could be possible +0
Member Avatar for <M/>

Hmm, i don't think it is any htaccess. I haven't had any issues with the past but i do assume the issue is caused by either: a) my sloppy coding b) Wordpress's crash on the domain

Member Avatar for <M/>

I removed the one that had a warning on it (according to chrome) and the page still appears the same. Did i remove the right one?

Edited by <M/>
Member Avatar for pritaeas

Shouldn't matter, just the fact that two might be in each others way.

Still, I think stripping is the only way to go, considering I never used WP am not sure how that would work in your case.

commented: maybe a removal of wp may work +0
Member Avatar for <M/>

Should i remove it and see what happens?

Member Avatar for pritaeas

I would, but am not sure that it's feasible in your case.

commented: Eh, i was gonna remove it at some point +0
Member Avatar for <M/>

Eh... it doesn't matter, as long as I learn something new and make my projects works, i am all for it.

Okay, Wordpress has been removed.

Member Avatar for pritaeas

Btw. Upvoting with rep has no effect within a certain timeframe. I appreciate the gesture, but is has no effect other than a regular upvote.

commented: I know +0
Member Avatar for <M/>

Btw. Upvoting with rep has no effect within a certain timeframe. I appreciate the gesture, but is has no effect other than a regular upvote.

I am aware... i just do it so that it gets everyone to participate and share their ideas :) (good idea, don't you say?)

Member Avatar for <M/>

Okay.... i removed wordpress but the page still looks the same :(

Any other ideas that i should try?

Edited by <M/>
Member Avatar for JorgeM

if i can add an additional comment, back to using full URLs in your HTML markup.. the real reason why this is a bad idea, at least in my opinion is that it generates a problem say for example, if you were to change the domain name.

This may not be your case, but something to consider if you develop web apps for customers. Say you have a generic web app that serves some business purpose, and you sell it to a variety of customers... you can see in that scenrio, using fully qualified host names would pose a problem when reusing your code.

sorry, just wanted to throw that in there..

commented: That was definitely worth knowing +10
Member Avatar for <M/>

This may not be your case, but something to consider if you develop web apps for customers. Say you have a generic web app that serves some business purpose, and you sell it to a variety of customers... you can see in that scenrio, using fully qualified host names would pose a problem when reusing your code.

That was definitly worth knowing. I will definitly consider it for future projects, espicially professional works. I am not sure if you are interested but are you able to assist with this current situation involving a glitch in my code causing the intro to never load on the page?

Also, i am sending you a link to the page so you can see it for yourself :)

Edited by <M/>
Member Avatar for JorgeM

Ok, a quick look and i think the reason why you dont see anything happening on your page is because you have one or more problems related to loading your scripts even though you dont see any errros in the console.

For example... one thing that i see that needs to be fixed is the order that you are loading your scripts. I noticed that you are loading jQueryUI before jQuery itself. Certain scripts are going to depend on other javascript already being loaded before it can do what its supposed to do.

I always recommend that you load the jQuery library first. Then you can figure out the correct order after that.

Other than that, nothing else really stands out..but you do have a boat load of external resources loading.

commented: Oooooh, gotcha +0
Member Avatar for <M/>

I always recommend that you load the jQuery library first. Then you can figure out the correct order after that.

Okay, let me do that. Also, where do you recommend i place the js/jquery libraries within the document? Do you prefer the header or body? Or do the rest not really matter (other than the jquery library itself)?

Other than that, nothing else really stands out..but you do have a boat load of external resources loading.

:)

Member Avatar for JorgeM

I generally add the common "core" libraries in the head section of my document. For the most part, they are so common, you dont have to worry about peformance issues because browsers will have them cached.

Then all other libraries (custom and stuff you find online) could be placed right before the body closing tab. This is a generalization, of course.

commented: got it! +0
Member Avatar for <M/>

Okay, i will definitely take that into consideration! In the mean time, i am going to make those changes.

Edited by <M/>
Member Avatar for <M/>

Hey, do you think it would be best to load the jquery UI right after jquery itself in the header? Also, in regards to my code, don't I already have the jquery file before the jquery ui (i hope i didn't misinterpret my own code)?

Edited by <M/>
Member Avatar for BMXDad

Try removing the "http" on your links.

I.E. href="\somewebsite.com\css\site.css"

This is a hack that works if one of the sites is using https or http.

commented: Hmmm, never thought of that... +10
Member Avatar for <M/>

@ggamble, hmmmm, i never thought of that... i will give that a go.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.