Using Iron Router and layouts, how can more lines be added to <head>? For example, adding the following code to <head>...
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="assets/img/favicon.png">
<title>My Title</title>
<!-- Fonts from Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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.3.0/respond.min.js"></script>
<![endif]-->
Just wrap that html code into <head> as you normally would. Do not put that into any template.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="assets/img/favicon.png">
<title>My Title</title>
<!-- Fonts from Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300,700' rel='stylesheet' type='text/css'>
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[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.3.0/respond.min.js"></script>
<![endif]-->
</head>
Iron router does not interfere with this.
Related
<head>
<script type="text/javascript" src="customScript.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="docs/assets/js/vendor/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="img/facebookicn.png">
<title>Facbook</title>
<link href="dist/css/jumbotron.css" rel="stylesheet">
<link href="dist/css/custom.css" rel="stylesheet">
</head>
//this is in coustom.js file
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
//this is in html
<div class="col-md-6 txtfeild ">
<input id="firstName" class="form-control" placeholder="First Name" type="text" onblur="validateName()" >
</div>
i am getting error like this
customScript.js:1 Uncaught ReferenceError: $ is not defined
at customScript.js:1 tried many methods but cannot resolve this error
Your customScript fires before you are importing the jQuery script. Move the import line above the customScript import.
<script src="docs/assets/js/vendor/jquery.min.js"></script>
<script type="text/javascript" src="customScript.js"></script>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
jQuery is loaded after you load customScript.js so the variable $ is undefined.
You have to insert the script after you load jQuery.
<head>
<link href="dist/css/bootstrap.min.css" rel="stylesheet">
<script src="docs/assets/js/vendor/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="customScript.js"></script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="img/facebookicn.png">
<title>Facbook</title>
<link href="dist/css/jumbotron.css" rel="stylesheet">
<link href="dist/css/custom.css" rel="stylesheet">
</head>
in order to use Jquery in your script you first need to load it
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
add this line before your customeScript to add jquery through cdn or set the path to the jquery files if you have downloaded it
I'm trying to scrape a website using node.js and the request module. So far, I've been able to connect to the target site and generate the page's HTML using a query string from the site, but I am now realizing that the site renders the data using a script on their site.
Here is the HTML that I'm getting back.
C:\Users\ZHarriott>node test
error: null
statusCode: 200
body: <!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="canonical" href="https://bethesda.net">
<title>Bethesda.net</title>
<meta name="description" content="The official site for Bethesda, publisher of Fallout, DOOM, Dishonored, Skyrim, Wolfenstein, The Elder Scrolls, more. Your source for news, features & community.">
<meta name="keywords" content="Fallout,Fallout 4,Fallout 3,Fallout New Vegas,DOOM,Dishonored,Dishonored 2,The Elder Scrolls,The Elder Scrolls Online,The Elder Scrolls Online Tamriel Unlimited,Wolfenstein,Wolfenstein The Old Blood,Wolfenstein The New Order,The Evil Within,The Elder Scrolls V Skyrim,Skyrim,Rage,Brink,Wet,The Elder Scrolls IV Oblivion,Oblivion,Bethesda Game Studios,ZeniMax Online Studios,id Software,Arkane Studios,MachineGames,Machine Games,Tango Gameworks,Bethesda Softworks,Todd Howard">
<meta name="author" content="">
<meta property="og:site_name" content="Bethesda.net">
<meta property="twitter:site" content="#bethesda">
<meta property="twitter:title" content="Bethesda.net">
<link href="https://bethesda.net" hreflang="x-default" rel="alternate">
<link href="https://bethesda.net/en/dashboard" hreflang="en" rel="alternate">
<link href="https://bethesda.net/de/dashboard" hreflang="de" rel="alternate">
<link href="https://bethesda.net/es/dashboard" hreflang="es" rel="alternate">
<link href="https://bethesda.net/fr/dashboard" hreflang="fr" rel="alternate">
<link href="https://bethesda.net/it/dashboard" hreflang="it" rel="alternate">
<link href="https://bethesda.net/pl/dashboard" hreflang="pl" rel="alternate">
<meta name="referrer" content="origin">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="/main.css">
<script src="https://cdn02.bethesda.net/contentful#3.8.1/browser-dist/contentful.min.js"></script>
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade"><h3>You are using an <strong>outdated</strong> browser.</h3></p>
<p class="browserupgrade">Many things may be non-functional if you continue, please upgrade your browser to improve your experience.</p>
<![endif]-->
<noscript>
<p class="browserupgrade">Please enable javascript to use this site.</p>
<META HTTP-EQUIV="Refresh" CONTENT="0;URL=nojs.html">
</noscript>
<app></app>
<section id="_bnContent"></section>
<globalfooter></globalfooter>
<script>
// Please do not use www
if (window.location.hostname === 'www.bethesda.net') {
window.location.replace('https://bethesda.net/' + window.location.hash)
}
try {
// This ensures the user is using javascript, this is required for bethesda.net
document.getElementsByTagName('html')[0].classList.remove('no-js')
} catch (e) {
console.log(e)
}
</script>
<script src="/sites/main.js"></script>
</body>
</html>
C:\Users\ZHarriott>
It looks like because I'm not actually using a web browser that the site is having trouble knowing how to handle this request. Any thoughts on this?
I have a MEAN js 3.2 application which I need to deploy along with JAX RS.
I have index.server.view.html, layout.server.view.html files in /app/views directory.
I'm not able to understand which will be my index.html file?
Can someone tell me what changes I need to make? Do I just paste the contents of public folder from MEAN to the webapp of JAX-RS?
All the angular part in MEANJS is in the folder public/.
You only have to create and serve an index.html file.
This file looks like this :
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>{{title}}</title>
<!-- General META -->
<meta charset="utf-8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- Semantic META -->
<meta name="keywords" content="{{keywords}}">
<meta name="description" content="{{description}}">
<!-- Facebook META -->
<meta property="fb:app_id" content="{{facebookAppId}}">
<meta property="og:site_name" content="{{title}}">
<meta property="og:title" content="{{title}}">
<meta property="og:description" content="{{description}}">
<meta property="og:url" content="{{url}}">
<meta property="og:image" content="/img/brand/logo.png">
<meta property="og:type" content="website">
<!-- Twitter META -->
<meta name="twitter:title" content="{{title}}">
<meta name="twitter:description" content="{{description}}">
<meta name="twitter:url" content="{{url}}">
<meta name="twitter:image" content="/img/brand/logo.png">
<!-- Fav Icon -->
<link href="/modules/core/img/brand/favicon.ico" rel="shortcut icon" type="image/x-icon">
<!--Application CSS Files-->
<!-- HTML5 Shim -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body class="ng-cloak">
<header data-ng-include="'/modules/core/views/header.client.view.html'" class="navbar navbar-fixed-top navbar-inverse"></header>
<section class="content">
<section class="container">
<section data-ui-view></section>
</section>
</section>
<!--Embedding The User Object-->
<script type="text/javascript">
var user = {{ user | json | safe }};
</script>
<!--Application JavaScript Files-->
<!--[if lt IE 9]>
<section class="browsehappy jumbotron hide">
<h1>Hello there!</h1>
<p>You are using an old browser which we unfortunately do not support.</p>
<p>Please click here to update your browser before using the website.</p>
<p>Yes, upgrade my browser!</p>
</section>
<![endif]-->
</body>
</html>
Your real problem is that MEANJS handle all dependency with nodejs, and you have to handle this too with JAX-RS or with webpack etc ... as you prefer.
PS : don't forget to replace {{value}} by what you need ;)
I'm using angular and angular-route. The index.html looks like this:
<!DOCTYPE html>
<html lang="en" ng-app="Showcase">
<head>
<meta charset="UTF-8">
<title>UCSD Showcase</title>
<base href="/showcase/">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="routes.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="js/initGlobalHelpers.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="#########################################">
<meta name="keywords" content="###############################################">
<meta property="og:url" content="#">
<meta property="og:site_name" content="CSES OSS">
<meta property="og:image" content="############################################################################################">
<meta property="og:description" content="#">
<meta property="og:type" content="website">
<meta name="twitter:site_name" content="CSS OSS">
<meta name="twitter:site" content="################">
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="#">
<meta name="twitter:image" content="#">
<meta name="image" content="#">
<link rel="stylesheet" media="all" href="./styles/style.css">
</head>
<body>
<ng-view></ng-view>
</body>
</html>
And then for my home page when I'm using
<h1>This is the home page</h1>
<script src="home.html"></script>
I get the a warning
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/. jquery.min.js:4
and an error
SyntaxError: Unexpected token < angular.js:13550
However when I replace that script that by the content of the script which basically ends up looking like:
<h1>This is the home page</h1>
<script>
console.log('Hi!');
</script>
Then it works.
Why is this happening and how can I fix it?
Use ngInclude instead of html script tag
<div ng-include="'home.html'"></div>
See ngInclude docs here
I've been searching in google how to include any html file inside my <head> in another html page, but all I got was with PHP and I don't want to use PHP, I'd like to use HTML and the last case a JavaScript code.
My page.html:
<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" xmlns="http://www.w3.org/1999/xhtml" > <!--<![endif]-->
<head>
</head>
</html>
My header.html:
<!DOCTYPE html>
<!--[if (gte IE 9)|!(IE)]><!-->
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"> <!--<![endif]-->
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8" />
<title>Lucas - Web Developer</title>
<meta name="description" content="" />
<meta name="author" content="" />
<!-- CSS
================================================== -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<link href="http://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700|Roboto+Slab:300,400" rel="stylesheet" type="text/css" />
<!-- JS
================================================== -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!--[if lt IE 9]>
<script src="js/modernizr.custom.11889.js" type="text/javascript"></script>
<![endif]-->
<!-- HTML5 Shiv events (end)-->
<script src="js/mgmenu_plugins.js"></script>
<script src="js/mgmenu.min.js"></script>
<!-- Favicons
================================================== -->
<link rel="shortcut icon" href="images/favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</html>
The question is: how do I include header.html inside the <head> of page.html? I've tried the ui:include/ui:insert but didn't work well (maybe it's me that is using wrong)
Thank you! :)