Newbie here, and first time experiencing this issue. My website (www.kandomedia.co.za) works perfectly fine when i was developing it offline on my local machine as per attached image.
Kando Media Website Local Machine
But as soon as i upload it to my hosting account, its stuck on the preloader screen (if you visit www.kandomedia.co.za/new/ you can see this in action)
I have done quite a bit of research on google to try resolve this issue, but still cannot fix it. If i take away the preloader completely, the website is not formatted correctly like it looks on my local machine. It seems the site is not loading the CSS files etc.
I have checked, double checked and triple checked to make sure all the paths are correct, and that everything is where it is supposed to be. But still no luck.
This is the structure in the head tag:
<html lang="en-US" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- ===============================================-->
<!-- Document Title-->
<!-- ===============================================-->
<title>Kando Media (Pty) Ltd :: Website design, graphic design and website hosting services South Africa</title>
<!-- ===============================================-->
<!-- Favicons-->
<!-- ===============================================-->
<link rel="apple-touch-icon" sizes="180x180" href="assets/img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicons/favicon-16x16.png">
<link rel="shortcut icon" type="image/x-icon" href="assets/img/favicons/favicon.ico">
<link rel="manifest" href="assets/img/favicons/manifest.json">
<meta name="msapplication-TileImage" content="assets/img/favicons/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">
<!-- ===============================================-->
<!-- Stylesheets-->
<!-- ===============================================-->
<link href="assets/lib/loaders.css/loaders.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,300,400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
<link href="assets/lib/remodal/remodal.css" rel="stylesheet">
<link href="assets/lib/remodal/remodal-default-theme.css" rel="stylesheet">
<link href="assets/lib/owl.carousel/owl.carousel.css" rel="stylesheet">
<link href="assets/lib/lightbox2/css/lightbox.css" rel="stylesheet">
<link href="assets/lib/semantic-ui-accordion/accordion.min.css" rel="stylesheet">
<link href="assets/lib/semantic-ui-transition/transition.min.css" rel="stylesheet">
<link href="assets/css/theme.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/theme.css" type="text/css">
</head>
Where am i going wrong here? I havent slept a whole day trying to figure this out. Even my friend who is an experienced developer cant figure it out (unless he doesnt want to help me haha)
Please help, id really appreciate it.
it seems to be an error with some data on theme.js
here is what i found on you site with f12 dev tools on crhome:
can you check this out first? :)
Related
Edit: I am using Intellij ultimate.
I attempted to look through similar questions but wasn't able to find an answer to help me.
I've gotten CSS to work with spring boot. However, Js still won't function.
I used this statement to get CSS to work.
application.properties
spring.web.resources.static-locations=classpath:/
and ive added webjar jquery to dependencies
forgive my code its a bit sloppy this is just test file
Html
<head>
<link th:href = "#{../static/css/main.css}" rel="stylesheet">
<script src='/webjars/jquery/3.0.0/jquery.js'></script>
<link type="javascript" href="/static/js/script.js">
<link href="https://vjs.zencdn.net/7.11.4/video-js.css" rel="stylesheet" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Time Of Day</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#500&display=swap" rel="stylesheet">
</head>
I've used both HTML and thyme.
Hello all: I am very new to web developing and I just got my HTML/CSS basic website to show up after getting files uploaded and organized in cPanel. However, when I added my .js file, it looks to me like it is not working. The .js and HTML files are in the same directory and I am linking it with the script tags properly but when I test it (console.log("hello world")), nothing is happening. Can anyone help me out here or point me in a direction to figuring this out?
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Arvo|Barlow+Condensed|Karla|Vollkorn&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/9394b48c69.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="home.css">
<script type ="text/javascript" src="home.js"></script>
<title>Timothy Peng</title>
</head>
I was successful deploying the website (I know because the logo icon shows on the tab and I followed the steps carefully) but the content of my website won't show. It's my firs time doing this and I'm pretty sure it's a small thing but I've been stuck for days. It's probably in my index.html. I'm using angular and firebase. please help!
I've looked at tutorials and of course the firebase documentation. Seems like it's an sdk issue or maybe the script tags at the end of my index.html.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>F2I</title>
<base href="https://[" f2ifrance.firebaseapp.com/"> <meta name="viewport"
content="width=device-width, initial-scale=1">
<!-- <base href="/"> -->
<link rel="stylesheet" href="https://unpkg.com/bs-stepper/dist/css/bs-stepper.min.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<app-root></app-root>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
<!-- firebase hosting SDK -->
<script src="/__/firebase/init.js"></script>
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="/__/firebase/7.0.0/firebase-app.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="/__/firebase/7.0.0/firebase-firestore.js"></script>
<script src="/__/firebase/7.0.0/firebase-storage.js"></script>
</body>
</html>
I'm almost there... I just need to see the content. Here's the error I have on my console and of course I googled it but couldn't find an answer. Thanks a lot to anyone who could help.
Uncaught Error: hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js
The answer is right in the error message: you are including init.js before the Firebase SDK. Try this:
<script src="/__/firebase/7.0.0/firebase-app.js"></script>
<script src="/__/firebase/init.js"></script>
<script src="/__/firebase/7.0.0/firebase-firestore.js"></script>
<script src="/__/firebase/7.0.0/firebase-storage.js"></script>
In the head of my web page html document I have linked CSS and JavaScript files for the functionality and aesthetics of my page. They seemed to work fine, until I updated a JS file and it did not affect my page. Out of frustration, I eventually just added the script to the bottom of the page as part of script tags and forgot about it. However, when I wanted to update some CSS files, the same thing happened.
I am using xampp and Sublime text 3 as text editor. I have triple checked the file locations and directories and they all match up. I cant think of any other issue that could cause this. Does anybody have any ideas? At the bottom I have attached an example of the head tags.
<head>
<meta charset="UTF-8">
<meta http-equiv="refresh" content="30" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../css/page_layout.css">
<link rel="stylesheet" type="text/css" href="../css/top_nav.css">
<link rel="stylesheet" type="text/css" href="../css/buttons.css">
<link rel="stylesheet" type="text/css" href="../css/tables.css">
<link rel="stylesheet" type="text/css" href="../css/side_nav.css">
<link rel="stylesheet" type="text/css" href="../css/modal.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../java_script/top_nav.js"></script>
</head>
There is a bug with Sublime Text 3, not any directory issues. Somehow it does not update and link files as it should. Once I close and reopen ST3, the changes show. I am considering using another text editor if this issue continues.
I was using an older version of less (1.2.1) by accident and when I updated the .js to the most recent version (1.3.3) it seems that Espresso, my html/css editor, now takes 40% cpu and up to 90% when in development/watch mode. I've tried other versions and it seems like it happens with 1.3.1+. I've tried different variations of the watch mode and even disabling it completely and it's still using 40-50% cpu. I basically can't work with it now.
edit: It seems like it's mostly being caused by watch mode, which I highly depend on :(
This is what my site head looks like. Any suggestions would be appreciated as I do not understand js at all.
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Article Sample</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Adding "maximum-scale=1" fixes the Mobile Safari auto-zoom bug: http://filamentgroup.com/examples/iosScaleBug/ -->
<!-- Link directly to LESS stylesheet first -->
<link rel="stylesheet/less" href="style/default.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/tablet.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/mobile.less" type="text/css" media="screen" />
<link rel="stylesheet/less" href="style/wide-mobile.less" type="text/css" media="screen" />
<!-- Then link to LESS, and enable development watch mode -->
<script src="js/less-1.3.3.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
less.env = "development";
less.watch();
</script>
<!-- Voilà! Instant LESS previews in Espresso -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
I think it is better to precompile first and then make the site read the already-compiled .css instead.
You can use Koala app for precompiling the less file or you can use grunt too, and get rid of the less.js.