it work perfect when the css and javascript write in the HTML file, but it is not working after extracting the javascript code to a separate file. have some way to fix it? Thanks in advance!
Get it, We do not need to add the detail path to load the js/css file. No matter which folder u put your css/js file, just do like this:
<link rel="stylesheet" type="text/css" href="your.css">
<script src="your.js"></script>
don't do this:
<link rel="stylesheet" type="text/css" href="css/your.css">
<script src="js/your.js"></script>
If www has sub-folders, when drag it into Xcode, make sure select Create folder references for any added folders. This option will keep www structure. js/css files will loaded successfully.
Related
https://github.com/MadhavaY/RandomQuotesGenerator here is the link to the repository. HTML is loading but css and js are not. Link to the website https://madhavay.github.io/RandomQuotesGenerator/. I saw other answers too but i could not get where am i going wrong.
Hello madhava I reviewed your project and found out that you are still using your local paths to link your css and javascript
<link rel='stylesheet' type='css' media='screen' href='/All Projects/randomqotesproject/randomquotes.css'>
just change /All Projects/randomqotesproject/randomquotes.css to
./randomquotes.css
You need to change the path of both files.
As is:
<script src="/All Projects/randomqotesproject/randomquotes.js"></script>
<link rel='stylesheet' type='css' media='screen' href='/All Projects/randomqotesproject/randomquotes.css'>
If you remove the path, e.g:
/All Projects/randomqotesproject/
It should work.
If changing the path doesn't work for you, you can easily add a URL to the CSS and JS instead.
EX: https://madhavay.github.io/RandomQuotesGenerator/randomquotes.css
I created a Leaflet Map, and uploaded the html and js file on Github. However, the map part is not showing up. Would appreciate any help on it. Here is the link below:
https://william-wang93.github.io/html/MedievalEngland/LeafletHeat.html
These are the 2 links in your LeafletHeat.html file, if you try to open these link in the browser these require certificate thus browser is failing to fetch these files.
<link rel="stylesheet" href="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
Try replacing it with
<link rel="stylesheet" href="https://unpkg.com/leaflet#1.4.0/dist/leaflet.css"
integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
crossorigin="">
<script src="https://unpkg.com/leaflet#1.4.0/dist/leaflet.js"
integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
crossorigin=""></script>
You can refer the source for more information - https://openstreetmap.be/en/projects/howto/leaflet.html
I was having the same trouble like this but I was solved this by doing this:
Add close tag to script tag
Wrong path of javascript file
Try to change javascript name file to main.js.
i am trying to reduce my webpage load time . When i am searching i come to this point preload css and javascript .
So i am trying to implement this in my html page please see my html code before and after implementation
before
<html>
<head>
<link href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" rel="stylesheet" type="text/css"> ...........
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js" type="text/javascript"></script>
</body>
</html>
After implementation i change like this
<html>
<head>
<link rel="preload" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" as="style">
<link rel="preload" href="assets/js/jquery-1.12.4.min.js" as="script">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700">
</head>
<body>
html contents
<script src="assets/js/jquery-1.12.4.min.js"></script>
</body>
</html>
But i can't notice any increase in speed . So please help to make this in correct way
i read the following article
https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content .
But i can't figure out . Please help .
Or is there is any better method for page speed ?
Why this doesn't work
Preloading resources that are loaded directly in the HTML is useless. This is because the browser reads the preload at the same time as the actual resource reference.
Preloading is useful to reduce the length of your request waterfall.
Imagine the following situation:
style.css
body {
background-image: url(myimage.png);
}
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
</body>
</html>
The process of loading the above page consists (roughly) of the following steps:
Download index.html
Parse the HTML file
Because of the link tag, download style.css
Parse the CSS file
Because of the background-image, download myimage.png
Parse the image and display it on the screen
This means your request waterfall is index.html -> style.css -> myimage.png.
By adding a preload for myimage.png the browser can download the image earlier, so your request waterfall becomes:
index.html +-> style.css
+-> myimage.png
Instead of 3, it is now only 2 requests long, which means faster load times.
What else can you do to improve (perceived) page load times?
Some common ways are:
Minify your assets (JavaScript, stylesheets)
Ensure your server has compression enabled for static assets
Only load resources actually required on page load first, then load other scripts later (like those for user interactions).
But to get a better overall view of the things you can improve you can use the Chrome Audit system (Lighthouse).
https://developers.google.com/web/updates/2016/03/link-rel-preload
See the above article link. I saw the link shared above. Preload never makes the page load the page fast. It only gives the priority to the files which is declared rel="preload" to load very early as the page loads up. You can read the article again Also the article shared by me. It will say the same.
You will need other methods to load the page fast. This method will not be helpful. There are few methods listed below you can use to make page load faster.
You can minify css and js files which will load very very fast than normal file.
You can minify script and css files from (https://www.minifier.org/) here.
Avoid external links of css and js files
Avoid spaces and Newlines in code.
Use compressed images which will also load faster.
Enable Caching.
I am trying to make a small app in angular and am trying to include the Bootstrap CDN into the head section. My current head section looks like this:
<head>
<script src="http://code.angularjs.org/angular-1.0.0rc3.min.js"></script>
<script src="todo.js"></script>
<link rel="stylesheet" href="todo.css">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css" rel="stylesheet" media="screen">
</head>
When I go to refresh the page none of the bootstrap changed have been made. Is this something going on with Angular or am I just making a dumb mistake?
You have the wrong URL. You can plug it into your browser to see where it takes you.
yours:
http://netdna.bootstrapcdn.com/twitter-bootstrap/3.0.3/css/bootstrap-combined.min.css
correct one:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css
To make sure you have the correct one, always get it from here: http://getbootstrap.com/getting-started/
For me, Instead of using CDN, Adding and referencing the bootstrap css file locally in dist folder(or whatever folder you have generated via Angular fixed the issue.
I'm relatively new to Rails and Javascript and JQuery are completey foreign to me. I need a little help getting started with JQuery and FullCalendar.
I'm reading this:
http://arshaw.com/fullcalendar/docs/usage/
But I don't know where to actually put any of the stuff mentioned.
I tried sticking it in the view for my Calendar - but that doesn't do anything and just prints out the contents of my JQuery code.
I'm guessing i'm supposed to put this stuff into a *.js file and reference it in my view. But I'd appreciate some guidance.
Yes, You will want to place the Javascript and Jquery code in your assets/javascript folder in either the application.js, or the .js file that matches your controller/model schema. Then in your application layout file, place the
<link rel='stylesheet' type='text/css' href='fullcalendar.css' />
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript' src='fullcalendar.js'></script>
lines in the .