When using HTML5, do you have to have a main element when creating a web page and if so, what is the maximum amount you can use?
The correct answer is the 'C'
look at:
http://www.w3schools.com/tags/tag_main.asp
I believe it is expected that the main element serve as diversionary element, like the header, nav, and footer. So I think it should really only be used once per page. Using markup similar to this.
<html>
<head>
</head>
<body>
<header>
<!-- Page Title -->
</header>
<nav>
<!-- Primary Menu -->
</nav>
<main>
<!-- Primary Content -->
</main>
<footer>
<!-- Stuff at the Bottom -->
</footer>
</body>
</html>
Related
In ASP.NET Core 6, does #RenderSection always work on the name that you give to your section? Could it be like this:
<html>
<body>
#RenderBody()
</body>
<script type="text/javascript" src="~/lib/layout.js"></script>
#RenderSection("scriptsNav_menu", required: false)
</html>
#section ScriptsNav_menu {
<script type="text/javascript" src="~/lib/contacts.js"></script>
}
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h2> Contacts</h2>
</div>
</div>
I didn't try it myself, to be honest
Here's the official document about the RenderSection
In layout pages, renders the content of the section named name.
required indicates if this section must be rendered.
So when your view <h2>Contacts</h2> containing #section ScriptsNav_menu is loaded, you will see <script type="text/javascript" src="~/lib/layout.js"></script> like screenshot below.
But when you visit another view which doesn't contain #section ScriptsNav_menu, the ~/lib/layout.js won't load.
While set required to true, and visit Privacy page again I get error below which means the script will always be loaded.
I would just love to try creating an AMP HTML website. However, what I cannot miss is our search function.
From what I understand so far, a search (input field, JavaScript handler) would not be possible with AMP HTML.
Is there any way to provide a neat search functionality within AMP HTML? Maybe using the amp-list component?
Forms are supported in AMP via the amp-form component. Using amp-form, you can embed a search form into your AMPs and render the search results into a new AMP on your server.
This is a search form in AMP:
<html>
<head>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<!-- ... AMP boilerplate ... -->
</head>
<body>
<form method="get" action="https://example.com/search" target="_top">
<input name="search" type="search">
<input type="submit" value="">
</form>
</body>
</html>
https://example.com/search can then render to an AMP page showing the search results:
<html>
<head>
<!-- ... AMP boilerplate ... -->
</head>
<body>
<h1>Results</h1>
<ul>
<li>Result 1</li>
<li>Result 2</li>
</ul>
</body>
</html>
You can find a working sample for a search implemented with AMP here.
Form support will come eventually. Please file a on Github with your use case: https://github.com/ampproject/amphtml/issues/new
There is a placeholder issue on Github to capture intent and use cases for Forms, see: https://github.com/ampproject/amphtml/issues/1286
I'm writing a basic Node app and simply want to render the index page with Jade, and then let Angular do the rest on the front-end.
This is the Jade (slightly shortened to illustrate the problem):
doctype html
html
include ../includes/head
body(ng-app="TestApp" ng-controller="TestAppController")
div(ng-view)
include ../includes/foot
Which compiles to the following HTML:
<html>
<head>
<meta charset="utf-8">
<title>Example App</title>
<link rel="stylesheet" href="/dist/css/app.css">
</head>
<body ng-app="ExampleApp" ng-controller="ExampleAppController" class="ng-scope">
<!-- ngView: -->
<footer class="page-footer">
<ul class="page-footer-links">
<li>Some Twitter User</li>
</ul>
</footer>
<script src="/dist/js/app.min.js"></script>
</body>
</html>
Notice how div(ng-view) is now an HTML comment within the rendered HTML, rather than a DIV with the directive:
<!-- ngView: -->
Changing div(ng-view) within the Jade to any of the following produced the same result for me:
ng-view
<div ng-view></div>
| <div ng-view></div>
Any ideas as to why this is happening?
This was actually nothing to do with Jade. As stated in a comment by #NikosParaskevopoulos, the <!-- ngView: --> HTML comment is a placeholder created by Angular upon seeing a <div ng-view> and having no route to display in it.
Redefining my Angular routes solved the problem.
I am trying to make an editable box (kind of a richTextBox) using html5 (contenteditable="true") and jquery. I need to find out position of each element inside the editable div so that I can insert a page break like microsoft word does.
Here is the page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Context Menu Plugin Demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$("#divEdit").keyup(function(){
$.each($("#divEdit").find("*"), function(i,item){
alert(item.position());
});
});
});
</script>
</head>
<body>
<h1>jQuery Context Menu Plugin and KendoUI Demo</h1>
<div style="width:740px;height:440px" contenteditable="true" id = "divEdit">
<p>
<img src="http://www.kendoui.com/Image/kendo-logo.png" alt="Editor for ASP.NET MVC logo" style="display:block;margin-left:auto;margin-right:auto;" />
</p>
<p>
Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
accessibility standards and provides API for content manipulation.
</p>
<p id="para">Features include:</p>
<ul>
<li>Text formatting & alignment</li>
<li>Bulleted and numbered lists</li>
<li>Hyperlink and image dialogs</li>
<li>Cross-browser support</li>
<li>Identical HTML output across browsers</li>
<li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
</ul>
<p>
Read more details or send us your
feedback!
</p>
</div>
</body>
The problem is that alert(item.position()) is not fetching anything. The error that comes in firefox developer toolbar is 'item.position is not a function'.
My guess is that it has to do something with the type of each element in $("#divEdit").find("*") as all the elements are different.
Any help would be appreciated.
Thanks
You need to get the jQuery object out of item, as position() is a jQuery method, hence the complain about position() is not a function
$(item).position() // instead of item.position()
Or even more concise:
$.each($("#divEdit").find("*"), function(i,item){
alert(item.position());
}
change to
$('#divEdit').find('*').each(function() {
alert($(this).position());
})
Change this line
alert(item.position());
to
alert($(item).position());
I want the 2 columns to touch ie. remove the margins, how can I do this?
My code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>testing</TITLE>
<!-- css -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset-fonts-grids/reset-fonts-grids.css">
<!-- js -->
<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.5.2/build/utilities/utilities.js"></script>
<style>
.yui-b {
background-color: #eeeeee;
}
</style>
</HEAD>
<BODY>
<div id="doc3" class="yui-t1"> <!-- change class to change preset -->
<div id="hd">header</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
bd.main
</div>
</div>
<div class="yui-b">bd.other</div>
</div>
<div id="ft">footer</div>
</div>
</BODY>
</HTML>
Add a class to the right column and set margin-left to 0.
If that doesn't work you might have to increase the width by 1 or 2%. You can use firebug to check the applied styles and change them on the fly.
Notice that you're using YUI (Yahoo UI).
Look for the YUI reset.css. Every browser has potentially different margin, padding, font-size defaults. You should really start every web app with a reset.css file like that to bring everything to a common denominator. Otherwise you might find you "fix" the issue, only for it to appear again when viewed from another machine / platform.
Should hopefully start you off with all block elements having no margins or padding and then you can rather add margins and padding back in where you need it.
Notice that you're using YUI (Yahoo UI).