After making a new Domino Designer installation (newest version) and a complete fresh ExtensionLibraryOpenNTF-901v00_15 … updateSite installation bootstrap is not rendered in XPage for browser preview.
I can switch to Bootstrap3.2.0 Theme in XPage Properties and I can even see the proper layout in Notes preview - but not in the browser preview. When I view the browser source code I do not see any bootstrap loaded.
What do I miss ?
browser head source code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<script type="text/javascript">if(!navigator.cookieEnabled)window.location.href="http://localhost:8080/TC_Antrag.nsf/xpLogin.xsp?SessionID=794A663A0EF7B90C0BCED10E0EE4C3691ACFABE0";</script>
<title>CERES TC Portal</title>
<link rel="SHORTCUT ICON" href="/TC_Antrag.nsf/favicon.ico">
<script type="text/javascript">var dojoConfig = {locale: 'en-gb', parseOnLoad: true};</script>
<script type="text/javascript" src="/xsp/.ibmxspres/dojoroot-1.8.3/dojo/dojo.js"></script>
<script type="text/javascript">dojo.registerModulePath("extlib", "/xsp/.ibmxspres/.extlib");</script>
<script type="text/javascript" src="/xsp/.ibmxspres/.mini/dojo/.en-gb/#Fz&#Ec.js"></script>
<script type="text/javascript">dojo.require("ibm.xsp.widget.layout.xspClientDojo")</script>
<script type="text/javascript">dojo.require("dojo.parser")</script>
<script type="text/javascript">dojo.require("dijit.form.ValidationTextBox")</script>
<script type="text/javascript">dojo.require("extlib.dijit.Dialog")</script>
</head>
Related
I am trying to recreate a player that is shown here - https://videojs-http-streaming.netlify.app/
As per the docs, here is my HTML. But quality/resolution control is missing
What needs to be changed in this HTML for that quality/resolution picker to render in the player as shown in the demo page.
<html>
<head>
<link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
</head>
<body>
<video-js id=example-video-hls class="vjs-default-skin" controls>
<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8"
type="application/x-mpegURL">
</video-js>
<script src="https://unpkg.com/video.js/dist/video.js"></script>
<script src="https://unpkg.com/videojs-contrib-quality-levels#2.1.0/dist/videojs-contrib-quality-levels.js"></script>
<script>
var player = videojs('example-video-hls');
player.play();
</script>
</body>
</html>
videojs-contrib-quality-levels adds the quality selector API, but does not include a UI component.
That example is using videojs-http-source-selector for the menu.
I just installed Emmet, and when I type html TAB I only get
<html></html>
Before then, when I did so, Sublimetext would create all the default tags:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Is there a setting or something I can update in Emmet, or Sublime text so that when I have Emmet enabled, I can get the "full" tags?
The file is a .html file, and it's set to HTML in Sublime.
Here's a quick .gif - I start with Emmet diabled:
In Sublime Text 3 it's
html:5 + tab
Returns:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
In Sublime Text 3 you can type <h, and you will get
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Also you should make document type HTML
on mine, html + TAB gives me what you're getting, but if I do html + ENTER, then I get the entire boilerplate.
I have a question about including scripts from blocks
From express-generator,
layout.jade
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
include sidebar
script(src='/javascripts/jquery.js')
block bottomscripts
sidebar.jade
block bottomscripts
script(src='/javascripts/sidebar.js')
output
<html>
<head>
<title>Express</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>Express</h1>
<p>Welcome to Express</p>
<script src="/javascripts/sidebar.js">
</script><script src="/javascripts/jquery.js"></script>
</body>
</html>
how can i move sidebar.js below jquery.js ? i need this done inside sidebar.jade
thank you
Have you tried including jquery.js in your block? Seems like they are both "bottomscripts".
block bottomscripts
script(src='/javascripts/jquery.js')
script(src='/javascripts/sidebar.js')
So can move your include statement and change the indentation of your jquery sctipt statement to
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
script(src='/javascripts/jquery.js')
include sidebar
block bottomscripts
to get
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<script src="/javascripts/jquery.js"></script>
<script src="/javascripts/sidebar.js"></script>
</body>
</html>
I just want to add iframe in default.html but it not working showing white page ...
Here my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FinderToday</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<!-- FinderToday references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<p>Go to page 2</p>
<p>Search the web</p>
<iframe src="http://maps.bing.com" style="width:1366px; height: 768px"></iframe>
</body>
</html>
What version of Windows are you targeting - Windows 8 or Windows 8.1?
If you are targeting Windows 8.1, use the x-ms-webview element rather than iframe.
http://msdnstage.redmond.corp.microsoft.com/en-us/library/windows/apps/dn301831.aspx
http://blogs.windows.com/windows/b/appbuilder/archive/2013/10/01/blending-apps-and-sites-with-the-html-x-ms-webview.aspx
Let me preface with two things. I am currently using grunt for these tasks and I also know about Yeoman which has what I am asking for. I do really like Yeoman however it is just a little too opinionated for this particular project I am working on.
So I have the following HTML file:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<!-- START-CSS-MIN:css/build/min.css -->
<link rel="stylesheet" href="css/bootstrap/bootstrap-2.1.1.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/boilerplate.css">
<!-- END-CSS-MIN -->
<!-- START-JS-MIN:js/build/modernizr.js -->
<script src="js/libraries/modernizr.js"></script>
<!-- END-JS-MIN -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<!-- START-JS-MIN:js/build/libraries.js -->
<script src="js/libraries/underscore.js"></script>
<script src="js/libraries/jquery/jquery.js"></script>
<!-- END-JS-MIN -->
</body>
</html>
Now you can see the CSS-MIN and JS-MIN comments. Right now I already have a custom grunt build task that properly collects all those files in the comments (using htmlparser) and then minifies and concats them as directly based on the comments. The last step in the build process is to create a new version of that HTML file (for production use) that replaces the comments with the new file. For example, the code above would be turned into this:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<script src="js/build/libraries.js"></script>
</body>
</html>
The question I have is how would I be able to do this in NodeJS? The htmlparser NPM module is great for parsing HTML however I now need something where I am modifying the HTML (removing and adding certain elements in specific locations). Is there any good packages/tutorials on how to do this in NodeJS code?
I'm not quite sure if this is helpful for comment lines, but that should be less of an issue to solve than DOM reference.
Consider using: https://github.com/tmpvar/jsdom
There are other options out there as well. (https://github.com/joyent/node/wiki/modules)
You can use cheerio
The following code will produce exactly the output you provided (apart from some minor whitespace differrences)
const $ = require('cheerio').load(inputHtml);
// Returns a filter function that selects the comments with the provided indexes
const commentRemovalFilter = (commentIndexes)=>{
let commentIndex=-1;
return (index, node)=>{
const isComment = node.type === 'comment';
if(isComment)commentIndex++;
return isComment && commentIndexes.includes(commentIndex);
}
}
$('head').contents().filter(commentRemovalFilter([0,1,2,3])).remove();
$('head link').remove();
$('head script').remove();
//Cheerio respects whitespace provided here
$('head').append(`
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
`)
$('body').contents().filter(commentRemovalFilter([1,2])).remove();
$('body script').remove();
$('body').append(` <script src="js/build/libraries.js"></script>
`)
console.log($.html())
output:
<html><head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/build/min.css">
<script src="js/build/modernizr.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. Upgrade your browser today or install Google Chrome Frame to better experience this site.</p>
<![endif]-->
<p>Hello world! This is a basline HTML5 template (based on HTML5 Boilerplate).</p>
<script src="js/build/libraries.js"></script>
</body></html>