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.
Related
A colleague of mine developped an html/javascript/css reporting module, independant from current application, that we would like to be part of the aplication.
To keep track of modules evolutions, we cloned his git repository into application's views folder, and declared a route to reach the page. This looks good, but the page does not fully work: the javascript console raises several http 404 - not found errors. The page does not find css and js resources, which are declared in the page:
v4_test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Reporting tool SIS - Test</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/dc.css">
<link rel="stylesheet" type="text/css" href="css/leaflet.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/downloadFile.js"></script>
</head>
<body>
---
</body>
</html>
Rails searches these elements from the root of the site instead of relatively to the current page. I tried to express the path as href="./css/dc.css" but this changes nothing.
Folder organisation:
views
|_governance
|_monitoring_pages
|_css
|_data
|_js
v4_test.html
route.rb
get 'test', to: "/governance/monitoring_pages#v4_test"
How can I update this page header section so that it finds relative resources?
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? :)
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>
Server side includes don't work here since it's not traditionally "served".
I'm trying to import the head content from a shared file to reduce shared code (I'm doing this with other shared elements across all pages just fine), but because it includes the styles, it's causing a flicker in the form of unstyled elements.
I'm using jQuery at present to load the content asynchronously (which isn't optimal, but I haven't found a synchronous solution that actually works), but I'm more than open to a vanilla JS solution so there's not the overhead of having to load jQuery first (to reduce the delay despite it being locally hosted).
Here is the existing code:
plan.html:
<head>
<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script>$(function(){ $("head").load("head.html") }); </script>
</head>
head.html:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--Styles/Fonts-->
<link href='//fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
<link href="styles/marketing-plan-normalize.css" rel="stylesheet" type="text/css">
<link href="styles/marketing-plan-styles.css" rel="stylesheet" type="text/css">
<!--IE Compatibility - Modernizr-->
<script type="text/javascript" src="scripts/modernizr.js"></script>
<!-- Adding the favicon -->
<link rel="shortcut icon" type="image/png" href="images/js-logo-small.png"/>
<title>Sales and Marketing Planner</title>
Use document.write()
<head>
<script type="text/javascript">
document.write('<link href="/use/abs/path/here/styles/marketing-plan-normalize.css" rel="stylesheet" type="text/css">');
</script>
</head>
It fails to work with <base> element in some browsers, so better use absolute urls.
In Chrome it triggers a console warning referring to https://developers.google.com/web/updates/2016/08/removing-document-write even if there's no script insertion. This situation may change in the future.
EDIT: Oops, I haven't paid enough attention to your case. I'm afraid it's not possible without combining document.write and sync AJAX. Please don't do that.
I'm trying out vuejs by following along with the laracasts series of webcasts on this. I'm using netbeans 8.1 as my editor and you can see my file structure above. In https://laracasts.com/series/learning-vuejs/episodes/5 Jeffery Way shows the following code which I have adapted:
<head>
<title>Tasks</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>
<script type="text/javascript" src="Sources/app.js"></script>
</head>
In the console I see:
GET http://localhost:8383/vue1/Sources/app.js net::ERR_EMPTY_RESPONSE
I suspect I have the file path wrong. I've been reading http://www.jibbering.com/faq/faq_notes/script_tags.html but have not not come up with an answer. What am I doing wrong?
Is "Site Root" a subfolder on the same folder as "Sources"?
If yes, try it out:
<script type="text/javascript" src="../Sources/app.js"></script>
Or move Sources dir to inside Site Root.