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
Related
So in html i specify a path to an image (for example:
<img src="img_galaxy.jpg">
Unlike chrome, when i inspect element i this don't see this image nor other resource displayed in network monitor section.
i have a small gif to demonstrate about what i mean. Sorry for loss of quality, i had to optimize.
[Left: Firefox | Right:Chromium]
Sample code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
</head>
<body>
<img
sizes="(max-width: 1400px) 100vw, 1400px"
srcset="
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_320.jpg 320w,
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_914.jpg 914w,
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_1321.jpg 1321w,
img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_1400.jpg 1400w"
src="img/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk/jeremy-thomas-E0AHdsENmDg-unsplash_bbrljk_c_scale,w_1400.jpg"
alt="">
</body>
</html>
I followed a tutorial to set up what I need for a MEAN stack app and its went well so far but now I've tried testing some of the bootstrap components from there site after installing Bootstrap in the index.html file for Angular, Bootstrap is being loaded as the font of the text that the app first loads is different and the drop down button appears after adding it but the problem is when I try click the drop down button nothing happens, besides that components like a jumbotron load as usual and look how you would expect in Bootstrap so I dont think its the link in index or bower.
Heres the index.html file:
<html>
<head>
<title>MyTaskList</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Heres the html it loads in with the bootstrap applied:
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</body>
</html>
You have just added Bootstrap css in the html.So only css changes will reflect.To get full functionality of Bootstrap you need to add Bootstrap.js and JQuery. Without them bootstrap is incomplete.
I'm developing my first SharePoint hosted add-in with Kendo UI and getting the following exception when I run it:
o._detachObservableParents is not a function
I've tried instantiating the object with as little configuration as possible to make sure it's not one of the settings that I'm messing up but I keep getting the same error.
Searching online has produced no clues at all.
Technical Details
Kendo UI v2016.2.714
SharePoint Online (I believe it's 2013)
The following code shows how I've added the resources to the Add-in page:
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
<link rel="stylesheet" href="../Content/Fabric/4.0.0/fabric.min.css" rel="stylesheet" />
<link rel="stylesheet" href="../Content/kendo/2016.2.714/kendo.common-office365.min.css" />
<link rel="stylesheet" href="../Content/kendo/2016.2.714/kendo.office365.min.css" />
<link rel="stylesheet" href="../Content/kendo/2016.2.714/kendo.dataviz.min.css" />
<link rel="stylesheet" href="../Content/kendo/2016.2.714/kendo.dataviz.office365.min.css" />
<script type="text/javascript" src="../Scripts/jquery-1.10.2.min.js"></script>
<SharePoint:ScriptLink Name="sp.js" runat="server" OnDemand="true" LoadAfterUI="true" Localizable="false" />
<script type="text/javascript" src="../Scripts/kendo/2016.2.714/kendo.all.min.js"></script>
<script type="text/javascript" src="../Scripts/repositories.js"></script>
<meta name="WebPartPageExpansion" content="full" />
<!-- Add your CSS styles to the following file -->
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<!-- Add your JavaScript to the following file -->
<script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>
Edits
Edit 1 - Note: I can instantiate simple components like buttons and calendars without any issues.
I would like to use triangle icons from Microsoft
fabric.min.css and
fabric.components.min.css.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
</head>
<body class="ms-font-m">
<div class="padding">
<span class="ms-Icon--triangleRight"></span>
</div>
</body>
</html>
However, the above code (JSBin) shows this:
Does anyone know how to show Microsoft's icons correctly?
You need to include the ms-Icon class in order to use any of the specific icons. Here's the fixed line:
<span class="ms-Icon ms-Icon--triangleRight"></span>
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>