So I have a landing page up at http://mytestosteronekit.com. Im using Leadpages to create the page. I have an index.html file that pulls in the leadpage with script in the head. I am also including bootstrap CSS, a custom stylesheet for style overrides, bootstrap JS, and a custom JS file. The css links are loading just fine and work on the page. Mainly have this for the navbar. But the js files are not firing and I can't figure out why.
I have them included right before the closing body tag. They show while inspecting, but they don't load in the sources. I was using relative url paths originally but switched to an absolute path just for security. Still no go.
I need this navbar to be working on mobile, please help me!
Bootstrap requires jQuery to be loaded before firing. All I needed to do to fix this problem was call to jQuery before calling the other scripts. Problem solved. No interference with Leadpages scripts.
Try put <script> tags lines before the closing tag </body>. I did it for you below:
<html>
<head>
<meta charset="UTF-8">
<!-- Bootstrap -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" type="text/css" href="css/style.css">
<meta name="leadpages-meta-id" content="144ccecf3f72a2:1696aa1f6b46dc" /><meta name="leadpages-serving-domain" content="https://crawfordobrien.leadpages.co" /><meta name="leadpages-served-by" content="html" />
</head>
<body>
<script src="http://mytestosteronekit.com/js/bootstrap.min.js" type="text/javascript"></script>
<script src="http://mytestosteronekit.com/js/custom.js" type="text/javascript"></script>
<!-- Leadpage -->
<script type="text/javascript" src="https://my.leadpages.net/template/load-144cc5ec6639c5-1696a36f6639c5-dnoeNG8gtnHtHMXGoqpWmbNBhgtazHED.js"></script>
</body>
</html>
Related
I have built a static website which i am currently hosting
I have given my current order of linking css , JavaScript and all other files in the html code below
I would appreciate a lot if someone can confirm if i am placing them all at the most ideal place . Consider the best loading speed and possible override. Not just regarding placement , any recommendations to improve overall performance is also welcome
As you can see there are total 9 linkings happening in my html , lemme give short summary of them
Head -
1) Google Font
2) My Main CSS File
3) Font awesome Css file
4) Jquery Library
5) JS file for modal windows
6) JS file for navigation bar
Body -
Those 3 you see at bottom are related to the navigation bar as well
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Website Name</title>
<link href="https://fonts.googleapis.com/css?family=Lato|Raleway&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/modal.js"></script>
<script src="js/responsive-nav.js"></script>
</head>
<body>
< -- Content -->
<script src="js/fastclick.js"></script>
<script src="js/scroll.js"></script>
<script src="js/fixed-responsive-nav.js"></script>
</body>
</html>
CSS and JavaScript files operate completely independently from one another; loading a CSS file or a JavaScript file first makes absolutely no difference whatsoever in terms of performance.
Still, there are a few points worth noting:
External CSS files like Google's Fonts and Font Awesome should be loaded before your own CSS file(s), as the order in which you load CSS files affects their specificity. You're going to want to override the framework fonts with your own CSS - not the other way around.
JavaScript files that depend on other files must be loaded after their dependencies. I assume that several of your plugins depend on jQuery, so you'll want to load jQuery before those plugins.
Placing <script> tags at the bottom of the <body> element improves the display speed (as opposed to referencing them in <head>), because script interpretation slows down the display.
So, in short, I would recommend the following:
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato|Raleway&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/styles.css" />
</head>
<body>
<!-- Content -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="js/modal.js"></script>
<script src="js/responsive-nav.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/scroll.js"></script>
<script src="js/fixed-responsive-nav.js"></script>
</body>
Here is a few points:
<head> is loaded before <body> because of the placement
*.js is loaded synchronously and sequentially
*.css is loaded asynchronously
It is not enough to maintain optimal loading speed by order of placement
To sum up:
*.css should be in <head>
Larger *.js should be at the bottom of <body>
Small *.js should be in <head>
As long as it doesn't affect the order in which some variables are defined
Have a look on this site: https://bm-translations.de/impressum-agb-datenschutz.php
I am loading external scripts and sheets. Everything is working except the globaljs.js file. I cannot see errors. Its in the same directory as the site.
I uploaded it as text as well, so you can have a look on it:
https://bm-translations.de/globaljs.txt
What am I doing wrong? I tried to implement the script in the head, as you can see, as well as at the end of the body. The JS works perfectly within the page, but as soon as I try to outsource it as external script, its not working anymore.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="globalcss.css">
<meta charset="UTF-8">
<link rel="shortcut icon" href="./bilder/favicon.ico"/>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<!--jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"></script>
<script src="globaljs.js"></script>
Be sure your JavaScript file is in the same directory as the .html or .php file that is calling for the script.
For instance, if your directories look like this:
pages
..index.php
scripts
..globaljs.js
Your HTML would need to reflect the directory structure like
<script type="text/javascript" src="../scripts/globaljs.js"></script>
Without knowing your directory structure it is difficult to say.
I'm building a basic front-end website in HTML and CSS. It consists of multiple web pages, each sharing the same JS and CSS files. My <head> tag therefore contains about 45 lines of code. I'm just wondering if this is "best practice?" Is there a way to have one file with all the shared links to various stylesheets and scripts so that I can reduce the 45 lined header tags in all of my pages to maybe just 3 or 4.
Also, if I have to change my custom CSS location or add a new custom JS file, then that means adding to each of my webpages. This becomes cumbersome and I'd just like to know if there's anything that can be done about it. I might end up with a dozen or so pages when I'm done so that sounds like a lot of unnecessary code.
Thanks!
EDIT:
My code:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicons generated using realfavicongenerator.net -->
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/favicons/favicon-16x16.png">
<link rel="manifest" href="img/favicons/manifest.json">
<link rel="mask-icon" href="img/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<!-- Bootstrap Core CSS -->
<link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Catamaran:100,200,300,400,500,600,700,800,900" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<!-- Plugin CSS -->
<link rel="stylesheet" href="lib/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="lib/simple-line-icons/css/simple-line-icons.css">
<link rel="stylesheet" href="lib/device-mockups/device-mockups.min.css">
<!-- Theme CSS -->
<link href="css/new-age.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery -->
<script src="lib/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="bower_components/riot/riot.js"></script>
<script src="bower_components/riot-route/dist/route+tag.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Theme JavaScript -->
<script src="js/new-age.min.js"></script>
That is a lot of code to have in each of my dozen or so web pages. Is there a way to avoid this?
For example if your file name is index.html rename it to index.php and then cut your head section and create a new file named head.php and do like for footer also.for the new pages you create just include these references like below
<!DOCTYPE hml>
<html>
<?php include 'head.php' ?>
<body>
<?php include 'footer.php' ?>
</body>
</html>
The short answer is that every page that you send to the browser must contain the full <head> and so you must include it.
The longer answer is that there are several ways to avoid having to copy paste all the content every time. For instance, if you have a php server you could have a separate head.html file that contains your head and you would include in every page like this:
<?php include('head.html'); ?>
Or, if you're using a web framework like express.js, Flask or Symfony (just to name a few, there are many more) you would have templates where you can extend one base. You would define one base template and all other templates are based off that template, allowing you to avoid duplicate code.
If you're not using a webserver at all, you could introduce a build pipeline like Gulp for instance. Gulp can take all your html files and optimise / manipulate them before you deploy them. You could inject all the head contents using a plugin gulp-inject-html for example.
Hope this provides you with plenty of options to decide how you'd like to proceed :)
You can create a new file and past all the head codes in it. Save as either .php or .html. e.g saved in filePath/headings.html;
inside the main page which must be a php file, do this:
<?php include('filePath/headings.html');?>
OR USE
<?php require_once('filePath/headings.html')?>
include is built in function allows you add a file to the page, and if the file is not found it will show some warnings and continue is execution WHILE require or require_once will throw an error and halt code execution if the file is not found.
You can also use
<?php require('filePath/headings.html')?>
You can have this in any part of your code, e.g sidebar, header, navigation, etc.
Please don't save your include or require file name as header.php, instead use heading.php or head.php
I hope this help
Since your using a lot of external libraries for your page adding another one will not hurt. This is straight from W3school, here
header.html (Content)
<html>
<head>
<title>test</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-bootstrap/0.5pre/assets/css/bootstrap.min.css">
</head>
<body>
Content.html (Content)
<h1>Header1</h1>
footer.html (Content)
</body>
</html>
Then on index.html (content)
<script src="https://www.w3schools.com/lib/w3.js"></script>
<div w3-include-html="header.html"></div>
<div w3-include-html="content.html"></div>
<div w3-include-html="footer.html"></div>
<script>
w3.includeHTML();
</script>
This is just only using HTML and JavaScript the most effective way is using a server side language like PHP.
I see you are using jQuery:
So this would help you:
$(document).ready(function() {
$('head').load('pathToCommonCode/head.html');
});
place all your redundant code in head.html and provide the path to it.
For example head.html would contain the following:
<!-- jQuery -->
<script src="lib/jquery/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="bower_components/riot/riot.js"></script>
<script src="bower_components/riot-route/dist/route+tag.js"></script>
<!-- Plugin JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<!-- Theme JavaScript -->
Note: This method will work with files in the same domain.
As mentioned in comments:
From documentation:
Due to browser security restrictions, most "Ajax" requests are
subject to the same origin policy; the request can not successfully
retrieve data from a different domain, subdomain, port, or protocol.
I just wrote a simple signup page, and validated it with pure javascript and jquery. I also used font-awesome icons to show status of the input value. It worked fine with all the user agents(I tested it with a chrome extension). but after putting the files to a server it is not working with any of the user agents.
issues :
Some user agents not showing font awesome icons, but the scripts are working.
In some user agents the icons as well as the scripts both are not working.
I don't no where the issue is.
<head>
<title>TicketIsle Login</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript" src="js/get_post.js"></script>
</head>
the above is how I put the scripts and style files.
if your page is in secure (https) some browsers dont allow you explicitly to download scripts or styles from non-secure (http) pages.
This syntax should be used to avoid this protocol issue:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
This is protocol agnostic i.e. it will work with both http and https.
I will suggest you to us downloaded file rather using CDN.
You should put all the script tag bottom of your page and put all CSS file on top of page in head tag.
<!DOCTYPE html>
<html>
<head>
<!-- Font Awesome CSS -->
<link href="fonts/font-awesome.css" rel="stylesheet">
</head>
<main>
<body>
</body>
</main>
<!-- ------------------------------------- -->
<!-- Javascript Includes -->
<!-- ----------------------`enter code here`--------------- -->
<script type="text/javascript" src="jquery.js"></script>
</html>
I am new to HTML and programming and hope someone can help me with this.
I have written the code for the first pages of my website and am now about to upload these to the server for a test.
Therefore I would like to know if the basic structure of my documents is correct and would like to get some comments on the following:
Should I add or change anything regarding my document's head ?
Do I include the external style sheets the right way and at the
right position + is it correct to start the href with "/" here ?
(I read CSS should be included before JS for
better performance.)
Do I include the external JS and jQuery references the right way and
at the right position ?
(I read JS should be included at the end of the body for better performance.)
Notes:
All PHP / HTML pages of my website are saved as separate files in the same folder.
This folder also contains a sub folder "includes" where my stylesheet and functions file are saved.
My HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="John Doe" />
<meta name="description" content="Created: 2015-06" />
<base href="http://www.myURL.com/" target="_self" />
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="includes/styles.css" />
<!-- CSS - Font Awesome -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<title>My Page</title>
</head>
<body>
<!-- ... -->
<footer class="footer">
<!-- ... -->
</footer>
<!-- JavaScript -->
<script src="includes/functions.js" type="text/javascript"></script>
</body>
</html>
Many thanks in advance,
Mike
Looks good. Just a couple of minor things:
You should add <meta http-equiv="X-UA-Compatible" content="IE=edge"> to ensure you don't get any MSIE compatibility mode issues.
You may add favicon definitions in the head.
Yes, stylesheets belong in the head. The href depends on where you are storing the css files.
If you want to include a stylesheet in the same folder as your HTML file, use href="styles.css"
If you want to include a stylesheet in another folder, e.g. [css] folder, use href="css/styles.css"
If you have HTML files in various folders and you don't want to rewrite your hrefs all the time for each HTML file, you can start the href with a slash to indicate search should start from the "root" of the server, e.g. href="/css/styles.css"
Move ALL your JS (including jQuery) to the bottom of the page, just before the closing body tag. Unless there's a very strong reason why you need JS to run before the page starts displaying, you should not have JS in the head.
There are a lot of things to learn, but it can be very fun and rewarding. Hope you have an enjoyable programming experience ahead. :)