I am working on my first website that is on my computer and I am not planning to put it on the internet. However, I want to reuse nav and footer on other pages.
No php.
No frames.
Javascript?
Are there anyways to use HTML?
Modest will do this.
It's especially easy if you're not putting it on the internet, just put jquery and modest-preview.js in the section and you can start using it right away:
main.xhtml
<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="modest-preview.js"></script>
<include>myNav</include>
</head>
<body>
<myNav/>
</body>
</html>
myNav.xml
HTML |
CSS |
JavaScript |
jQuery
I know is a bit old but Ive found a way to achieve this.
You can load a portion of code into yout html by using ajax and leave the rest of your page without changes in order to use the same nav.
Code:
lets say I have this code in this file:
home.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="thirdParty/bootstrap-3.3.6-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header">
<a class="navbar-brand" href="#/">NAVBAR</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class=" active">
Home
</li>
<li>
About
</li>
<li>
Rebout
</li>
</ul>
</div>
</nav>
<main id="main">
</main>
<script src="thirdParty/jquery-1.12.0.min.js"></script>
<script src="thirdParty/jquery.ba-hashchange.min.js"></script>
<script src="js/partialViewLoad.js"></script>
<script src="thirdParty/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
</body>
</html>
I will have two more files that will work as htmls partial views: 'partialViews/main.html' and 'partialViews/about.html'. (put some html into those files)
I use the plugin jquery.ba-hashchange.min for refreshing the html.
And at least I have the script used to load the partial views:
loadPartialView.js
$(function () {
$(window).hashchange(function () {
if (location.hash.indexOf('#/') > -1) {
loadPartial(location.hash.substr(location.hash.lastIndexOf('/') + 1));
}
});
$(window).hashchange();
});
function loadPartial(partialName) {
partialName = partialName || 'main';
$.get('/partialViews/' + partialName + '.html').done(function (html) {
$('#main').html(html);
});
}
$(document).ready(function() { loadPartial(); });
When you click on the links in the ul the hash location will change and this will trigger a jquery callback that we ve created. in that moment we load our partial views.
I recommend you to use a server and a more robust language to accomplish this. But this solution will work, is easy to implement and will work even on a server.
Related
I have the following code:
<head>
<title></title>
<link rel="stylesheet" href="./styles/darkula.css">
<link rel="stylesheet" href="./styles/github.css">
</head>
<body>
<div class="container">
<pre>
<code class="html">
<button class="button is-primary">Primary</button>
</code>
</pre>
<!-- Change theme button -->
<button onclick="changeTheme()">Change theme</button>
</div>
<script src="highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
document.querySelectorAll("code").forEach(function(element) {
element.innerHTML = element.innerHTML.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">").replace(/"/g, """).replace(/'/g, "'");
});
function changeTheme() {
...
}
</script>
</body>
I am loading 2 themes in my file. Because the github theme is being loaded after the darkula theme, it gets applied to all the code elements automatically. This is fine, but I would like to allow users to dynamically change the theme to darkula with the click of the button. I could not find anything in the documentation. How can I do this?
If you are using sass/scss and handle your dependencies with npm, you can do the next thing:
#use "sass:meta";
html[data-theme="light"] {
#include meta.load-css("highlight.js/styles/a11y-light");
}
html[data-theme="dark"] {
#include meta.load-css("highlight.js/styles/a11y-dark");
}
To make it to work, you need to define the data-theme attribute in your html tag.
<html data-theme="light">
<!-- ensure to change it with javascript and define one with default -->
...
</html>
There's a github response to this same question here https://github.com/highlightjs/highlight.js/issues/2115
Basically you include all the themes you want, and then disable all the link tags except for the selected theme.
The highlight.js demo page does this https://highlightjs.org/static/demo/
The GitHub repository is for the code can be found here.
(https://github.com/highlightjs/highlight.js/blob/master/demo/demo.js)
I have a view Email1.cshtml (Build Action=Embedded Resource):
#model Email1Model;
<html>
<head>
</head>
<body>
<h1>Hello, #Model.Name</h1>
</body>
</html>
I render the cshtml view to string using ViewRenderService. The only difference is that I use IRazorViewEngine.GetView() instead of FindView();
However, in the output I some application insights stuff:
<html> <head>
<script type="text/javascript">
var appInsights=window.appInsights||function(config){....);
window.appInsights=appInsights;
appInsights.trackPageView();
</script> </head> <body>
<h1>Hello, Liero</h1> </body> </html>
In the startup.cs:
services.AddApplicationInsightsTelemetry(opt => opt.InstrumentationKey = appInsightsKey);
Question:
How do I turn off the javascript in specific views that I render using ViewRenderService?
If you _layout.cshtml has #Html.Raw(JavaScriptSnippet.FullScript) that will inject application insights javascript into each page, you could try adding a conditional in _layout.cshtml using:
#if (condition true for instrumenting)
{
#Html.Raw(JavaScriptSnippet.FullScript)
}
I have the following code from a html page:
<div class="bd">
<h1><%= user.fullname %></h1>
</div>
What is the <%= %> tag? Is this standard html? I never encountered it before. (user.fullname is a javascript variable)
Here is the full code of the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/styles.css">
<script language="javascript">
// We use this code for handling unexpected errors.
// Using alert, we are sure that the user get notified in a Mobile device.
// We add this code at the begining of the index.html and we use only native javascript functions.
window.onerror = function(msg, url, lineNumber) {
if (typeof(msg) === "string") {
var error = msg + "\n\nFile: " + url + "\nLine: " + lineNumber;
// Ommit cordova and 3rd party libs errors.
if (url.indexOf("cordova.js") == -1 && url.indexOf("externallib") == -1) {
window.alert(error);
}
} else {
var error = msg;
}
// This may help debugging if we use logging apps in iOs or Android.
if(typeof(console) !== "undefined" && typeof(console.log) === "function") {
console.log(error);
}
// Let default error handler run.
return false;
};
</script>
<script src="cordova.js"></script>
<script src="childbrowser.js"></script>
<script src="webintent.js"></script>
<script src="PushNotification.js"></script>
<script src="externallib/jquery.min.js"></script>
<script src="externallib/jquery.touchSwipe.min.js"></script>
<script src="externallib/md5.js"></script>
<script src="externallib/matchMedia.js"></script>
<script src="externallib/matchMedia.addListener.js"></script>
<script src="externallib/underscore.js"></script>
<script src="externallib/backbone.js"></script>
<script src="externallib/backbone-localstorage.js"></script>
<script src="lib/mm.js"></script>
<script src="lib/mm.panels.js"></script>
<script src="lib/mm.util.js"></script>
<script src="lib/mm.lang.js"></script>
<script src="lib/mm.db.js"></script>
<script src="lib/mm.tpl.js"></script>
<script src="lib/mm.cache.js"></script>
<script src="lib/mm.settings.js"></script>
<script src="lib/mm.widgets.js"></script>
<script src="lib/mm.sync.js"></script>
<script src="lib/mm.emulator.js"></script>
<script src="lib/mm.rdebugger.js"></script>
<script src="lib/mm.fs.js"></script>
<script data-main="lib/app.js" src="externallib/require.js"></script>
<script language="javascript">
// We should wait to phonegap, if not, we get errors like:
// http://rickluna.com/wp/2012/04/solving-the-connection-to-the-server-was-unsuccessful-error-in-androidphonegap/
$(document).bind('deviceready', function() {
MM.log('Deviceready fired');
MM.deviceReady = true;
// Store the device locale for further uses.
navigator.globalization.getLocaleName(
function (locale) {
MM.lang.locale = locale.value;
MM.log("Device locale loaded: " + locale.value);
},
function () {}
);
// Disable the back button, exists the app.
document.addEventListener("backbutton", function() {
MM.panels.goBack();
}, false);
// Call deviceIsReady function in plugins.
// Plugins may not be able to listen for the deviceready event because it's possible that it was fire
// when plugins whasn't loaded, we use a timeout of 5 seconds.
setTimeout(function() {
for (var el in MM.plugins) {
var plugin = MM.plugins[el];
if (typeof(plugin.deviceIsReady) == 'function') {
plugin.deviceIsReady();
}
}
}, 5000);
MM.fs.init();
});
// This function is for handling when the app is opened using a custom URL SCHEME.
function handleOpenURL(url) {
MM._appLaunchedByURL(url);
}
</script>
<style id="mobilecssurl"></style>
</head>
<body>
<div id="add-site" style="display: none">
</div>
<div id="manage-accounts" style="display: none">
</div>
<div id="main-wrapper" style="display: none; background-color: white">
<div class="header-wrapper">
<header class="header-main">
<nav class="nav-main">
<ul class="nav">
<li class="nav-item home menu-home">
<a href="#" class="ir" id="mainmenu">
Home
</a>
</li>
</ul>
<span id="page-title"></span>
</nav>
</header>
</div>
<div id="panel-left" class="panel user-menu"></div>
<div id="panel-center" class="panel"></div>
<div id="panel-right" class="panel"></div>
</div>
<div id="app-dialog">
<div>
<div class="modalHeader">
</div>
<div class="modalContent">
</div>
<div class="modalFooter">
</div>
<div class="modalClear"></div>
</div>
</div>
<script type="text/template" id="menu_template">
<header>
<div class="media">
<div class="refresh app-ico">
<a href="#refresh">
<img width="16" height="16" src="img/reload.png" border="0">
</a>
</div>
<div class="img">
<img src="<%= MM.util.getMoodleFilePath(user.profileimageurl) %>" border="0">
</div>
<div class="bd">
<h1><%= user.fullname %></h1>
</div>
</div>
</header>
</body>
</html>
What is the <%= %> tag in html?
There is none. There are several templating engines that use <% and %> to delimit either templates or code blocks, though: Active Server Pages (ASP), JavaServer Pages (JSP), probably others. Those usually do server-side processing and replace the text in the <% ... %> with whatever should go there.
For instance, in your example
<h1><%= user.fullname %></h1>
if the user object's fullname property is "Joe Bloggs" when the resource is requested, the engine will swap that in for that token before sending the text, so what the browser actually sees is
<h1>Joe Bloggs</h1>
In your case, as you point out, the processing is happening client-side. Your <% ... %> tokens are within <script type="text/template">...</script> blocks, so the < isn't at all special. (Before DCoder pointed that out to me, I had a complex explanation here of why it worked...but then, er, DCoder pointed out that they were in script blocks, so...)
DCoder also identified that these are templates being handled by backbone.js, which reuses underscore.js's templates.
What is the <%= %> tag in html?
Like T.J. Crowder said, that is not an HTML tag, it comes from a client-side templating engine that happens to use these expressions to indicate the beginning/end of dynamically interpolated content.
How do I find out what templating engine is used? (it's not ASP or JSP)
Based on the fact that your page loads backbone.js, the template engine is most likely backbone's template engine, which is actually borrowed from underscore.js.
That's either ASP.NET or JavaScript markup that you're seeing.
That's usually a form of server side programming. It could be JSP (in Java), ASP or even PHP (with asp tags enabled). It will replace the contents (at server response time) of the <%= %> with the server side variable's value.
The statement '<%= user.fullname %>' evaluates the property 'user.fullname' and renders it as a string. The 'user' object could exist as a property on the page or could be a static class type.
<!doctype html>
<html lang='en'>
<head>
<meta charset-"UTF-8">
<title>devang</title>
<link rel="stylesheet" href="bootstrap.css">
<script> src="lib/onsen/js/angular/angular.min.js" </script>
<script> src="lib/onsen/js/angular/angular.js" </script>
</head>
<body>
<div class="container" ng-app="App">
<div ng-controller="controller">
<ul>
<li ng-repeat="artist in artists">
{{artist.name}}
</li>
</ul>
</div>
</div>
<script>
angular.module('App',[]).
controller('controller',function($scope,$http){
$http.get('artists.json').success(function(data){
$scope.artists = data;
});
});
</script>
</body>
</html>
when i execute it shows error
angular is not defined
The character encoding of the HTML document was not declared.
The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
need your suggesions
Your script tags are defined incorrectly.
the SRC should be an attribute of the script tag.
<script src="lib/onsen/js/angular/angular.min.js"></script>
<script src="lib/onsen/js/angular/angular.js"></script>
Maybe is a stupid question but I'm really new with Angular and trying to pick up some knowledges. So I have a scope which I get via API ($http) and after conversion is a html markup
<li>some list</li>
and I would like to project this one in DOM, trying
<ul>{{myscopevariable}}</ul>
but I get just the raw text
with php would be like <ul><?= myscopevariable ?></ul>
JS
angular.module("myApp", ["ngSanitize"]).controller("MyCtrl", function($scope){
$scope.someHTML = "<li>just testing</li>";
})
HTML
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular.js"></script>
<script data-require="angular.js#*" data-semver="1.2.14" src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="MyCtrl">
<h1>Hello Plunker!</h1>
<ul ng-bind-html="someHTML">
</ul>
</body>
</html>
http://plnkr.co/edit/e1zoOrEVwqdIDPujMpPC?p=preview
Use the ng-bind-html directive (Documentation here). Prior to 1.2 there also existed ng-bind-html-unsafe.
In your example:
<ul>some list</list>
<li ng-bind-html='myscopevariable'></li>
....
</ul>
You have to include the ngSanitize module to have it work (e.g. <script src="http://code.angularjs.org/1.2.14/angular-sanitize.js"></script> in Header and var app = angular.module('plunker', ['ngSanitize']);)
See this plunker example for some working code.