i have a HTML template in which i have used a third party javascript code. this particular code provides an chat option.i have added this script in my header.html so that it gets displayed in all the pages. however i dont want this to display in my login page.i want this to be displayed only after logging in.
How do i hide this from a particular page(here login.html)?
Header.html
<!doctype html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="bower_components/weather-icons/css/weather-icons.min.css">
<link rel="stylesheet" href="styles/main.css">
</head>
<body data-ng-app="app" id="app" class="app" data-custom-page="" data-off-canvas-nav="" data-ng-controller="AppCtrl" data-ng-class=" {'layout-boxed': admin.layout === 'boxed' } ">
<section data-ng-include=" 'views/index.html' " id="header" class="header-container" data-ng-class=" {'header-fixed': admin.fixedHeader} " data-ng-controller="HeaderCtrl" data-ng-intro-options="introOptions" data-ng-intro-method="startIntro" data-ng-intro-autostart="true"></section>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="scripts/vendor.js"></script>
<script src="scripts/jquery.leanModal.min.js"></script>
<script src="scripts/ui.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/product_listing.js"></script>
<script src="scripts/angular-cookies.js"></script>
<script id="SettingsScriptTag">
**Third Party script Goes here**
</script>
</body>
</html>
The above header.html is included in all the other templates. hense the thrid party script runs in login page too. I need to hide this in login page.
If you're using jQuery (which... I think you are...?)
$(function () {
if (window.location.pathname !== '/login.html') {
// Third-party script goes here
}
});
If Using jquery .remove() is used to remove the html elements. So you can write this script on document ready of the login page.
$(document).ready(function(){
$( "#SettingsScriptTag" ).remove();
});
Related
How do you properly link a JavaScript file to a HTML document?
Secondly, how do you use jQuery within a JavaScript file?
First you need to download JQuery library from http://jquery.com/ then
load the jquery library the following way within your html head tags
then you can test whether the jquery is working by coding your jquery code after the jquery loading script
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
$(function(){
alert("My First Jquery Test");
});
</script>
</head>
<body><!-- Your web--></body>
</html>
If you want to use your jquery scripts file seperately you must define the external .js file this way after the jquery library loading.
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>
Test in real time
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
$(function(){
alert("My First Jquery Test");
});
</script>
</head>
<body><!-- Your web--></body>
</html>
This is how you link a JS file in HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script> - tag is used to define a client-side script, such as a JavaScript.
type - specify the type of the script
src - script file name and path
To include an external Javascript file you use the <script> tag. The src attribute points to the location of your Javascript file within your web project.
<script src="some.js" type="text/javascript"></script>
JQuery is simply a Javascript file, so if you download a copy of the file you can include it within your page using a script tag. You can also include Jquery from a content distribution network such as the one hosted by Google.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
You can add script tags in your HTML document, ideally inside the which points to your javascript files. Order of the script tags are important. Load the jQuery before your script files if you want to use jQuery from your script.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="relative/path/to/your/javascript.js"></script>
Then in your javascript file you can refer to jQuery either using $ sign or jQuery.
Example:
jQuery.each(arr, function(i) { console.log(i); });
Below you have some VALID html5 example document. The type attribute in script tag is not mandatory in HTML5.
You use jquery by $ charater. Put libraries (like jquery) in <head> tag - but your script put allways at the bottom of document (<body> tag) - due this you will be sure that all libraries and html document will be loaded when your script execution starts. You can also use src attribute in bottom script tag to include you script file instead of putting direct js code like above.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
<div>Im the content</div>
<script>
alert( $('div').text() ); // show message with div content
</script>
</body>
</html>
this is demo code but it will help
<!DOCTYPE html>
<html>
<head>
<title>APITABLE 3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "https://reqres.in/api/users/",
data: '$format=json',
dataType: 'json',
success: function (data) {
$.each(data.data,function(d,results){
console.log(data);
$("#apiData").append(
"<tr>"
+"<td>"+results.first_name+"</td>"
+"<td>"+results.last_name+"</td>"
+"<td>"+results.id+"</td>"
+"<td>"+results.email+"</td>"
+"<td>"+results.bentrust+"</td>"
+"</tr>" )
})
}
});
});
</script>
</head>
<body>
<table id="apiTable">
<thead>
<tr>
<th>Id</th>
<br>
<th>Email</th>
<br>
<th>Firstname</th>
<br>
<th>Lastname</th>
</tr>
</thead>
<tbody id="apiData"></tbody>
</body>
</html>
For the program I'm writing I have a main navigation page where the user get landed after he / she log into the system.
On this screen I use 2 DIV's one div is for the navigation bar second one is used as an iFrame.
I'm using w3.css library to create the navigation bar but this actually mess up my CSS main CSS file when I load the target file in the second div. But it works fine if I use an iFrame which I really don't like to do.
If I could load my CSS file when the div loads the target link file the problem will be solved.
So my problem is how to load the CSS file in to the div when the external file loads.
This is my HTML:
<html>
<head>
<title>Time Sheet</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Style Sheets -->
<link rel="stylesheet" type="text/css" href="../../CSS/w3.css">
<link rel="stylesheet" type="text/css" href="../../CSS/main.css">
<!-- Java Scripts -->
<script language="JavaScript" type="text/javascript" src="../../jScripts/jquery-3.2.0.min.js"></script>
<script language="javascript" type="text/javascript" src="../../jScripts/navBar.js"></script>
<script language="JavaScript" type="text/javascript" src="../../jScripts/fileLoader.js"></script>
</head>
<body>
<div class="w3-bar w3-light-gray w3-card-4" style="z-index: 991">
Home
Link 1
Link 2
Link 3
</div>
<div id="My-container">
<!-- All pages load here -->
</div>
</body>
</html>
My NavBar JavaScript:
$(document).ready(function(){
$('#main').click(function () {
$('#My-container').load('listUser.php');
})
});
File loader JavaScript:
$(document).ready(function(){
if($("#my-container").size>0){
if (document.createStyleSheet){
document.createStyleSheet('../../CSS/main.css');
}
else {
$("head").append($("<link rel='stylesheet' href='../../CSS/main.css' type='text/css' media='screen' />"));
}
}
});
Above file loader function is not mine I found it on a site and tried to use it but when I do console throws an error saying "Size" is not a function. When I change it to length the error goes away but code doesn't work.
If any one asks why don't you just copy paste the nav bar to all the files my answer is I'm lazy.
Any way please show me the light.
It seems you want to check if that specific dom exist or not. For that you need to use length. Also the dom id seems to be My-container but not my-container.
You can try the following
if($("#My-container").length>0){
// rest of the code
}
I have quite a bunch of script and libraries that I am using in my website, which takes like 5 to 8 seconds to load.
ex.
<script type="text/javascript" src="../lib_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib_components/angular/angular.js"></script>
<script type="text/javascript" src="../lib_components/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-cookies/angular-cookies.min.js"></script>
<script type="text/javascript" src="../lib_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script type="text/javascript" src="../lib_components/lodash/dist/lodash.min.js"></script>
<script type="text/javascript" src="../scripts/js/overdo.js"></script>
I want to show a loading bar till all the scripts have been loaded, can anyone guide me on whats needs to be done for that?
There is very simple approach you can use in case when all the scripts you want to load are loaded synchronously (you don't use modules loader, async attributes, etc) - like in your example.
The trick is add progress indicator script the very first on the page, before all your heavy scripts. It is also make sense to inline this script (because it shouldn't be too big ideally):
<script>
// some progress bar implementation progress.show()
console.log('showing progress, loading bar, etc.');
</script>
<script src="../lib_components/jquery/dist/jquery.min.js"></script>
<script src="../lib_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../lib_components/angular/angular.js"></script>
<script src="../lib_components/angular-resource/angular-resource.min.js"></script>
<script src="../lib_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script src="../lib_components/angular-cookies/angular-cookies.min.js"></script>
<script src="../lib_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="../lib_components/lodash/dist/lodash.min.js"></script>
<script src="../scripts/js/overdo.js"></script>
<script>
// hiding loading bar
console.log('scripts loaded')
</script>
Now, for the implementation of the actual progress bar, it's up to you how and what to render. However, remember that depending on where you put those scripts DOM tree might not be loaded yet (if scripts are in <head>). I would anyway recommend to place scripts before closing </body>. The ideal structure for this approach would be:
<!DOCTYPE html>
<html>
<head>
<!-- some styles, no scripts here -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="assets/styles.css" />
</head>
<body>
<div class="loading" hidden>Loading...</div>
<!-- Some application HTML code -->
<script>
// show/create progress/loading
var loading = document.querySelector('.loading')
loading.hidden = false
</script>
<!-- many script tags ... -->
<!-- ... -->
<script>
// hide/remove progress/loading
loading.parentNode.removeChild(loading)
</script>
</body>
</html>
I'm working on a site that has 20+ pages that get changed every few months. I decided to make a script to load the navbar,nav, and footer as they are on every page.
<!DOCTYPE HTML>
<html lang="en">
<head>
<link href="../css/bootstrap-dropdownhover.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../css/myCss.css">
</head>
<body>
<navbar></navbar>
<div id="nav"></div>
<div class="content"></div>
<footer></footer>
</body>
<script src="../js/loader.js"></script>
<script src="../js/bootstrap-dropdownhover.min.js"></script>
</html>
Im using loader.js to load in the navbar, nav, and footer.
$(document).ready(function() {
$("navbar").load("../pageFramework/navbar.html");
});
$(document).ready(function() {
$("#nav").load("../pageFramework/navpills.html");
});
$(document).ready(function() {
$("footer").load("../pageFramework/footer.html");
});
This loads all pages perfectly, but when I try to hover my nav the dropdownhover.min.js does not work to show my dropdown menus. When I put the navbar html directly on the page and remove loader.js it works perfectly.
Once your header/nav/footer have been loaded you will need to re-initialize bootstrap; see Bootstrap Select - reinitialize on dynamically added element
You need to load bootstrap-dropdownhover.min.js in the callback of load(navbar.html). See: https://api.jquery.com/jquery.getscript/
Description:
I have a main page with header, footer, etc. The content (a div within body) of this page is changing depending on where you click(menu items). The content loaded are different pages within javascript and css files.
Problem: javascript and css files of the pages loaded don't work. I have to include ALL the page in order to make it works.
For example in the next code, javascript included in status.jsp don't work:
$(document).ready(initialize);
function initialize(){
// status.jsp has javascript and css linked
$("#content").load("pages/status.jsp #information");
}
However, this works, but it is not what i want:
$(document).ready(initialize);
function initialize(){
// status.jsp has javascript and css linked
$("#content").load("pages/status.jsp");
}
The result of the last code is a page similar to this:
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<title>MainPage</title>
</head>
<body>
<div id="content>
<meta charset="utf-8">
<link rel="stylesheet" href="styles/styles.css" type="text/css">
<title>Status</title>
<div id=statusBox">
information
</div>
<script type="text/javascript" src="js/status.js"></script>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>