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! :)
Related
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 ;)
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.
Im a bit of noob when it comes to coding. still learning as i go
Im trying to add this Javascript library to my website
http://buzz.jaysalvat.com
In their documents it say to add some code to specify the mp3 file
Here is my head Tag
<html>
<head>
<title>Through The Glass Eye</title>
<meta name="viewport" content="width=1120,user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.poptrox-2.1.js"></script>
<script src="js/config.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/buzz.js"></script>
<script>
var mySound = new buzz.sound("/Audio/rdn071.mp3");
</script>
<noscript>
<link rel="stylesheet" href="css/skel-noscript.css" />
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/style-desktop.css" />
<link rel="stylesheet" href="css/style-noscript.css" />
</noscript>
<!--[if lte IE 8]><script src="js/html5shiv.js"></script><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
</head>
The site is loading and i checked with firebug the Jscript is loading...
Am i doing this correctly???? Thanks a lot in advance
in case you want to make it play right after the page is loaded, use the ready event, your code could be as in this example:
<head>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/buzz.js"></script>
<script>
var mySound = new buzz.sound("/Audio/rdn071.mp3");
$(document).ready(function(){
mySound.play();
});
</script>
</head>
tested in jquery 1.10.2
My project is using a combination of Bootstrap and Codeigniter. I cannot access functions within external javascript files. Using firebug in Firefox I can see that these external scripts get loaded. External css files work fine. Please note that jquery works but I suspect that it is because of the jquery.js file that is included in the Bootstrap/Codeigniter framework in directory assets/js/jquery.js
Here is my header code within every Codeigniter View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/img/icons/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/img/icons/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/img/icons/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="/img/icons/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="/img/icons/favicon.png">
<title>Sample Website</title>
<!-- Bootstrap core CSS -->
<link href="/dist/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="../../assets/js/html5shiv.js"></script>
<script src="../../assets/js/respond.min.js"></script>
<![endif]-->
<!-- Custom styles for this template -->
<link href="/css/theme.css" rel="stylesheet">
<link href="/css/carousel.css" rel="stylesheet">
<!-- styles custom to our site -->
<link href="/css/style.css" rel="stylesheet">
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script>
</head>
Try to add base_url before url:
<script type="text/javascript" src="<?= base_url();?>js/jquery.cookie.js"></script>
I'm stuck here for 2 days now, and I really hope you can help me.
I'm trying to use this theme I bougth on wrapbootstrap ( https://wrapbootstrap.com/theme/ace-responsive-admin-template-WB0B30DGR ) with backboneJS and requireJS
So, basically, I have this file structure for the exemple :
index.html
app/
|___ js/
|____ main.js
assets/
|___ js
|___ ace.min.js
|___ ace-extra.min.js
|___ ace-elements.min.js
|___ bootstrap.min.js
|___ jquery.min.js
libs
|___ require
|___ require.js
So, when I use this basic template :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blank Page - Ace Admin</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--basic styles-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<!--page specific plugin styles-->
<!--fonts-->
<link rel="stylesheet" href="assets/css/ace-fonts.css" />
<!--ace styles-->
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!--inline styles related to this page-->
<!--ace settings handler-->
<script src="assets/js/ace-extra.min.js"></script>
</head>
<body>
<!--basic scripts-->
<script src='assets/js/jquery-2.0.3.min.js'></script>
<script src="assets/js/bootstrap.min.js"></script>
<!--page specific plugin scripts-->
<!--ace scripts-->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
</body>
</html>
No errors, all work perfectly. Then, I want, to load all the script
ace-extra.min.js
jquery.min.js
bootstrap.min.js
ace-elements.min.js
ace.min.js
In this order, juste like the template.
So, I add this line in the head
<script async data-main="app/main" src="libs/require/require.js"></script>
and created the main.js like this :
require.config({
// The shim config allows us to configure dependencies for
// scripts that do not call define() to register a module
shim: {
bootstrap: {
deps: ['jquery']
},
ace: {
deps: ['aceElement']
},
aceElement: {
deps: ['aceExtra', 'bootstrap', 'jquery']
}
},
paths: {
jquery: '../assets/js/uncompressed/jquery-2.0.3',
bootstrap: '../assets/js/uncompressed/bootstrap',
ace: '../assets/js/uncompressed/ace',
aceExtra: '../assets/js/uncompressed/ace-extra',
aceElement: '../assets/js/uncompressed/ace-elements'
}
});
require([
'jquery',
'bootstrap',
'ace'
], function() {
});
and I remove all the scripts, so I have this :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Blank Page - Ace Admin</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--basic styles-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet" />
<link rel="stylesheet" href="assets/css/font-awesome.min.css" />
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<!--page specific plugin styles-->
<!--fonts-->
<link rel="stylesheet" href="assets/css/ace-fonts.css" />
<!--ace styles-->
<link rel="stylesheet" href="assets/css/ace.min.css" />
<link rel="stylesheet" href="assets/css/ace-responsive.min.css" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!--inline styles related to this page-->
<!--ace settings handler-->
<script async data-main="app/main" src="libs/require/require.js"></script>
</head>
<body>
...
</body>
</html>
but here, I have an error
Uncaught TypeError: Object #<Object> has no method 'handle_side_menu'
comes from here :
jQuery(function($) {
//ace.click_event defined in ace-elements.js
ace.handle_side_menu(jQuery);
ace.enable_search_ahead(jQuery);
ace.general_things(jQuery);//and settings
ace.widget_boxes(jQuery);
/**
//make sidebar scrollbar when it is fixed and some parts of it is out of view
//>> you should include jquery-ui and slimscroll javascript files in your file
//>> you can call this function when sidebar is clicked to be fixed
$('.nav-list').slimScroll({
height: '400px',
distance:0,
size : '6px'
});
*/
});
despite of this generated code, (Chrome dev tool) :
<html lang="en"><head>
<meta charset="utf-8">
<title>Blank Page - Ace Admin</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--basic styles-->
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/bootstrap-responsive.min.css" rel="stylesheet">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
<![endif]-->
<!--page specific plugin styles-->
<!--fonts-->
<link rel="stylesheet" href="assets/css/ace-fonts.css">
<!--ace styles-->
<link rel="stylesheet" href="assets/css/ace.min.css">
<link rel="stylesheet" href="assets/css/ace-responsive.min.css">
<link rel="stylesheet" href="assets/css/ace-skins.min.css">
<!--[if lte IE 8]>
<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
<![endif]-->
<!--inline styles related to this page-->
<!--ace settings handler-->
<script async="" data-main="app/main" src="libs/require/require.js"></script>
<script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="main" src="app/main.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="jquery" src="app/../assets/js/uncompressed/jquery-2.0.3.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="bootstrap" src="app/../assets/js/uncompressed/bootstrap.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="aceExtra" src="app/../assets/js/uncompressed/ace-extra.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="aceElement" src="app/../assets/js/uncompressed/ace-elements.js">
</script><script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="ace" src="app/../assets/js/uncompressed/ace.js">
</script></head>
<body style=""></body></html>
So, I really don't understand, I would be really happy if anyone have an answer.
Thansk !
Kai23
So, it turns out it's the order in which you are doing things in the ace.min.js file. To fix it, just move your second jQuery function which contains the ace.handle_side_menu to the bottom of your ace.min.js file. It is a bit of a coincidence, but here's why.
When require loads your main.js file, it starts asynchronously loading your js files. This gives the rest of the page and DOM a chance to load (which is precisely why we like require.js). By the time your ace.min.js file gets loaded, the window has already signalled the onReady event. So, in your ace file where you have
jQuery(function($) {
ace.handle_side_menu(jQuery);
jQuery immediately realizes the DOM is ready and immediately calls the function you're passing in (the function($) part). This function then starts to run before handle_side_menu gets attached to the ace object. If you use the Chrome debugger tools and place breakpoints on both places where you have handle_side_menu, you'll see that the one inside the jQuery callback gets hit first.
dude, it's a coincidence.
I used the same theme for my project, you can look into my html template:
https://github.com/pjyong/chenxi/blob/master/src/ChenXi/MainBundle/Resources/views/Default/index.html.twig
and my main JS file:
https://github.com/pjyong/chenxi/blob/master/web/app/js/main.js
If you have more questions, I will answer them.