So every time I use html snippet or boiler plate with <ht + tab or enter
I get this extra opening tag? What gives?
<<!doctype html> <---- whats that additional tag at the beginning?
<html>
......
....
I got emmet installed by the way. Thanks
It's a snippet. You type html (or less), and press tab, it'll inserts all this content:
<!DOCTYPE html>
<html>
<head>
<title>$1</title>
</head>
<body>
$0
</body>
</html>
Note that if you repress tab again, it'll go to $1, and the last one is $0 (by default it's the end of the content).
So, don't type <ht, just ht, tab, and it'll insert everything for you. I really recommend you find yourself a course about Sublime Text, you're going to miss so much otherwise
That is the doctype decleration this is straight out of hte W3School docs:
The declaration must be the very first thing in your HTML
document, before the tag.
The declaration is not an HTML tag; it is an instruction to
the web browser about what version of HTML the page is written in.
In HTML 4.01, the declaration refers to a DTD, because HTML
4.01 was based on SGML. The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
HTML5 is not based on SGML, and therefore does not require a reference
to a DTD.
Tip: Always add the declaration to your HTML documents, so
that the browser knows what type of document to expect.
You can read more about it here: http://www.w3schools.com/tags/tag_doctype.asp
Related
EDIT: You can see the issue here (look in source).
EDIT2: Interesting, it is not an issue in source. Only with the console (Firebug as well).
I have the following markup in a file called test.html:
<!DOCTYPE html>
<html>
<head>
<title>Test Harness</title>
<link href='/css/main.css' rel='stylesheet' type='text/css' />
</head>
<body>
<h3>Test Harness</h3>
</body>
</html>
But in Chrome, I see:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
"
"
<title>Test Harness</title>
<link href='/css/main.css' rel='stylesheet' type='text/css' />
<h3>Test Harness</h3>
</body>
</html>
It looks like ̢ is a zero width space, but what is causing it? I am using Sublime Text 2 with UTF-8 encoding and Google App Engine with Jinja2 (but Jinja is simply loading test.html). Any thoughts?
Thanks in advance.
It is an issue in the source. The live example that you provided starts with the following bytes (i.e., they appear before <!DOCTYPE html>): 0xE2 0x80 0x8B. This can be seen e.g. using Rex Swain’s HTTP Viewer by selecting “Hex” under “Display Format”. Also note that validating the page with the W3C Markup Validator gives information that suggests that there is something very wrong at the start of the document, especially the message “Line 1, Column 1: Non-space characters found without seeing a doctype first.”
What happens in the validator and in the Chrome tools – as well as e.g. in Firebug – is that the bytes 0xE2 0x80 0x8B are taken as character data, which implicitly starts the body element (since character data cannot validly appear in the head element or before it), implying an empty head element before it.
The solution, of course, is to remove those bytes. Browsers usually ignore them, but you should not rely on such error handling, and the bytes prevent useful HTML validation. How you remove them, and how they got there in the first place, depends on your authoring environment.
Since the page is declared (in HTTP headers) as being UTF-8 encoded, those bytes represent the ZERO WIDTH SPACE (U+200B) character. It has no visible glyph and no width, so you won’t notice anything in the visual presentation even though browsers treat it as being data at the start of the body element. The notation is a character reference for it, presumably used by browser tools to indicate the presence of a normally invisible character.
It is possible that the software that produced the HTML document was meant to insert ZERO WIDTH NO-BREAK SPACE (U+FEFF) instead. That would have been valid, since by a special convention, UTF-8 encoded data may start with this character, also known as byte order mark (BOM) when appearing at the start of data. Using U+200B instead of U+FEFF sounds like an error that software is unlikely to make, but human beings may be mistaken that way if they think of the Unicode names of the characters.
I understand that there is a bug in SharePoint 2013 where the HTML editor adds these characters into your content.
I've been dealing with this for a bit and this is the solution I am using which seems to be working. I added this javascript into a file referenced by my masterpage.
var elements = ["h1","h2","h3","h4","p","strong","label","span","a"];
function targetZWS(){
for (var i = 0; i < elements.length; i++) {
jQuery(elements[i]).each(function() {
removeZWS(this);
});
}
}
function removeZWS(target) {
jQuery(target).html(jQuery(target).html().replace(/\u200B/g,''));
}
/*load functions*/
$(document).ready(function() {
_spBodyOnLoadFunctionNames.push("targetZWS");
});
Links I looked into investigating this:
https://social.msdn.microsoft.com/Forums/sharepoint/en-US/23804eed-8f00-4b07-bc63-7662311a35a4/why-does-sharepoint-put-in-character-code-8203-in-a-richtext-field?forum=sharepointdevelopment
https://social.technet.microsoft.com/Forums/office/en-US/e87a82f0-1ab5-4aa7-bb7f-27403a7f46de/finding-8203-unicode-characters-in-my-source-code?forum=sharepointgeneral
http://www.sharepointpals.com/post/Removing-8203-in-RichTextHTML-field-Sharepoint
Try this script. It works for me
$( document ).ready(function() {
var abc = document.body.innerHTML;
var a = String(abc).replace(/\u200B/g,'');
document.body.innerHTML = a;
});
I have experienced this in a major project I was working on.
The trick is to just:
copy the whole code into notepad.
save it as a text file.
close the file. open it again and copy your code back into your IDE
environment.
and its voilà, it's gone.!
I was able to remove these in Sublime by selecting the characters surrounding it and copy/pasting into Find and Replace.
In my case, symbol "" did not appear in the code editor MS Code and was visible only in the tab Elements Chrome. It helped to delete the tag after which this symbol appeared and the reprint of this tag was handwritten again, apparently this symbol clung to the ctrl+c / ctrl+v while transferring the code.
This “8203;” HTML character is a no width break control.
It can easily find in the Google Chrome Browser inspect elements section. And When you try to remove it from your code, most of the Major IDE not showing to me...(Maybe by my preference).
I found the new text editor Brackets download it and open my code in the editor. It shows the character with red dots. Just remove it check everything is working well.
I found this solution from a blog. What is “8203” HTML character? Why is being injected into my HTML?
Thank You for saving me hours.
I cannot find where it's being injected on my page. I'll investigate it more later, but for now, I just threw this in my page so I can keep working.
$(function(){
$('body').contents().eq(0).each(function(){
if(this.nodeName.toString()=='#text' && this.data.trim().charCodeAt(0)==8203){
$(this).remove();
}
});
});
We have code to open dialogs for links on admin pages by calling the javascript function mgnlOpenDialog(), like this,
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
[#assign cms=JspTaglibs["cms-taglib"]]
<html>
<head>
<title>UCP Books</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="${this.request.contextPath}/.resources/admin-css/admin-all.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="${this.request.contextPath}/.magnolia/pages/javascript.js"><!-- --></script>
<script type="text/javascript">
function displayDialog()
{
if ( ! window.focus ) return true;
var path = "${this.path}";
var nodeCollection = null;
var node = "${this.nodeName}";
var paragraph = null;
var repository = "${this.repository}";
var dialogPage = ".magnolia/dialogs/author.html";
mgnlOpenDialog( path, nodeCollection, node, paragraph, repository, dialogPage );
return false;
}
</script>
</head>
<body id="mgnl" class="mgnlBgLight mgnlImportExport">
<h2>
${this.messages.get("module.books.pages.AuthorDetailPage.header")}
<span class="mgnlControlButton" onclick="displayDialog();">
${this.messages.get("module.books.pages.edit")}
</span>
</h2>
<div class="pageFrame">${this.content}</div>
</body>
</html>
Now we are migrating our site from 4.5.12 to 5.3.4, and I noticed that the dialog definitions got updated. Now when I click on the link, there is still the dialog popup, but the popup is blank with the old style "Save" and "Cancel" buttons displaying at the bottom. It seems we need to convert our admin pages to content apps. But to do it that way will require a lot of changes in our code. So I'd like to know if there is an alternative way to replace mgnlOpenDialog() function to invoke the dialogs when I click on the links on the admin pages.
Thanks very much!
Aiping
Yeah this doesn't work any longer. Assuming you needed to open the dialogs explicitly because you had content you were editing in other workspaces then website. Correct?
When migrating custom data to M5, if you had that content in data workspace, you can use migration task to move it from the shared workspace into separate workspace and to also migrate your dialog. Not sure at the moment if it generates also app for you, but if not you can use this script to create one.
Once you have dialog migrated (or created from scratch) and your app created (either via script above or manually) you can just simply open any content in that app for editing and copy url from there. That would be the url you need to call to open dialog for editing from anywhere. It will be something like http://<your host>:<your port>/<contextPath>/.magnolia/admincentral#app:<yourAppName>:detail;/path/to/edited/content:edit
of course, assuming your subapp is called "detail" and your edit action "edit" as suggested in the tutorial or generated by the script.
Good luck,
Jan
Thanks Jan!
This seems a right direction to go by calling the url,
http://<your host>:<your port>/<contextPath>/.magnolia/admincentral#app:<yourAppName>:detail;/path/to/edited/content:edit.
I've configured the detail subapp and added this line to my code,
title
and it works. I'll post more in details later.
Thanks,
Aiping
Jan, I tried your solution as I commented here and it works well, except for one issue. Here I'm pointing to several screenshots to better explain it.
https://plus.google.com/u/0/photos/103180294078685589341/albums/6081701864232931905
On the app_faqSearch_1.png, there is a search form only.
The app_faqSearch_2.png is the page with the search results.
When I click on the "faq0004" link on app_faqSearch_2.png, the app_faqSearch_3.png appears. The code behind the scenes is,
faq0004
The problem is when I close the dialog tab "/FAQ/TOPICS/COMMAS/...", on the app_faqSearch_4.png, the search results are not there anymore since the view got reloaded.
Is there a way to configure to prevent the view from being reloaded if it's already opened, like for this URL in my case, /magnoliaAuthor/.magnolia/admincentral#app:faqSearch:main;
Or is there a way to explicitly open a dialog, instead of an editor, by passing the node path and workspace when click on the link like "faq0004"? Similar way to open the "editMessage" dialog in "contacts" app.
Thanks very much,
Aiping
I am trying to use an "Infinite Ajax Scrolling" Orchard module.
https://gallery.orchardproject.net/List/Modules/Orchard.Module.Orchard.jQuery.Ias
I installed the module through admin interface. I made necessary modifications described on the given link. Also, I had to do an extra modification that is described in the comments.
The infinite scrolling thing is just not functioning. I created about 30 blog posts in order to test it. When I scroll through blog posts through public website, first page og blog posts is loaded and when I scroll to the bottom, nothing happens. Pager is not visible (expected), but no new content is appended to the bottom of the list (not expected).
When I scroll through blog posts using Admin interface and I scroll down sufficiently, Chrome console reports couple of things:
Uncaught Error: Syntax error, unrecognized expression: <!DOCTYPE html>
<html lang="en-US" class="static orchard-blogs">
<head>
<meta charset="utf-8" />
<title>Proba - Manage Infinite Blog</title>
<link href="/OrchardLocal/Modul...<omitted>...l> jquery-1.9.1.js:4421
Sizzle.error jquery-1.9.1.js:4421
tokenize jquery-1.9.1.js:5076
select jquery-1.9.1.js:5460
Sizzle jquery-1.9.1.js:3998
jQuery.fn.extend.find jquery-1.9.1.js:5576
jQuery.fn.jQuery.init jquery-1.9.1.js:196
jQuery jquery-1.9.1.js:62
jQuery.fn.jQuery.init jquery-1.9.1.js:201
jQuery jquery-1.9.1.js:62
(anonymous function) jquery.ias.min.js:210
fire jquery-1.9.1.js:1037
self.fireWith jquery-1.9.1.js:1148
done jquery-1.9.1.js:8074
callback
A moment after:
GET http://localhost:30321/modules/orchard.jquery.ias/styles/images/loader.gif 404 (Not Found) jquery-1.9.1.js:6469
jQuery.extend.buildFragment jquery-1.9.1.js:6469
jQuery.extend.parseHTML jquery-1.9.1.js:531
jQuery.fn.jQuery.init jquery-1.9.1.js:149
jQuery jquery-1.9.1.js:62
get_loader jquery.ias.min.js:266
show_loader jquery.ias.min.js:279
paginate jquery.ias.min.js:167
scroll_handler jquery.ias.min.js:99
jQuery.event.dispatch jquery-1.9.1.js:3074
elemData.handle jquery-1.9.1.js:2750
In the admin interface I checked Blog properties and it seems to be configured fine. All default values are in place for [Container, Item, Pager, NextAnchor], and these values are also present in the html file I'm viewing when reported errors occur.
EDIT (after justrhysism's answer)
After implementing justrhysism's answer, I focused on why infinite scrolling works in the dashboard but not in front-end.
When I opened a list of blog posts in dashboard, I located .pager element.
<ul class="pager">
<li class="first"><span>1</span></li>
<li>2</li>
<li class="last">></li>
</ul>
I opened a list of blogs in front-end, and also located .pager element.
<ul class="pager" shape-id="92" style="display: none;">
<li class="first" shape-id="92"><span shape-id="93">1</span></li>
<li shape-id="92">2</li>
<li shape-id="92">></li>
<li class="last" shape-id="92"></li>
</ul>
Then I inspected javascript in charge for triggering async loading of content.
function paginate(curScrOffset, onCompleteHandler)
{
urlNextPage = $(opts.next).attr("href"); // evaluates to $(".zone-content .pager .last a").attr("href")
...............
}
And found out that the urlNextPage variable always gets set to undefined in front-end view.
Problem
I've come across this before. It's a document parsing error. There is a whitespace character (of some description) at the top of the document which Orchard returns instead of the <! which is expected. Somebody with more knowledge of AJAX and document parsing could better describe this.
Solution
To fix this, find the view Document.cshtml within Orchard's Core (located in src\Orchard.Web\Core\Shapes\Views) and copy it to your Theme's View directory.
In this file, look to Line 10 where <!DOCTYPE html> starts. Above this, remove the line break between the closing brace } and the DOCTYPE declaration.
Before:
}
<!DOCTYPE html>
After:
}<!DOCTYPE html>
This should fix your issue.
The Infinite Ajax Scrolling module for Orchard CMS is on Github
https://github.com/grapto/js.Ias
In response to my last edit where urlNextPage was being set to undefined.
I changed the NextAnchor selector in Blog properties:
From default value of ".zone-content .pager .last a" ----> To ".zone-content .pager a".
Also I went into Orchard.jQuery.Ias module -> Scripts/jquery.ias.min.js
Changed paginate function.
Old:
function paginate(curScrOffset, onCompleteHandler)
{
urlNextPage = $(opts.next).attr("href");
....
New:
function paginate(curScrOffset, onCompleteHandler)
{
if ($(opts.pagination).find(".last span").length)
return; // if span element exists in .last element, that means we are on the last page
urlNextPage = $(opts.next).last().attr("href");
....
It works fine now, both in dashboard and in front-end. This is not a very reliable solution, because I made an assumption that last anchor tag in .pager will always lead to the next page. That assumption is based merely on my observations of module's behavior.
I'm trying to send multiple chunks of data to a client each of which is rendered by Jade templating engine in Express Node.js framework.
I have several views like header, viewA, viewB, viewC, etc.
For every request I need to render the header partial view and send it as a chunk so that the client browser starts rendering it. When the header view is rendered I don't want the <body> tag inside to be closed, because more data is to come which should be inside the <body> tag.
In the meantime, I need to do some computations and after that render another view: either A, B, or C.
Once A, B, or C view is sent, I close the response which means closing the </body></html> tags.
Sounds very simple. But the problem is that Jade closes the <html> and <body> tags when rendering the header view.
I know how to do this manually using native Node.js response object, however, can't figure out how to do this with Jade the right way.
The only solution I currently see is to manually send the header part down to open <body> tag, then render the rest as Jade partials via res.partial().
Any hint is highly appreciated.
You can output any text (including raw html) with !=
!= "<body>"
some
more
tree(attr=1)
Result in this output:
<body>
<some>
<more>
<tree attr="1"></tree>
</more>
</some>
Even though I may accept the above answer which seems to have worked but haven't. Nevertheless, the following code did work.
!!! 5
<html>
head
meta(http-equiv="Content-Type",content="text/html;charset=utf-8")
meta(http-equiv="Cache-Control", content="no-cache")
meta(http-equiv="Expires", content="0")
title= title
link(rel="shortcut icon",href='/img/nelo2_logo.ico')
link(rel='stylesheet',href='/css/bootstrap.css')
link(rel='stylesheet',href='/css/jquery-ui.css')
link(rel='stylesheet',href='/css/chosen.css')
link(rel='stylesheet',href='/css/common.css')
link(rel='stylesheet',href='/css/style.css')
script(src='/js/core/require.js')
<body>
So the solution was not to indent the <html> and <body> tags but have them on the same column. This way Jade doesn't close them.
I recently was browsing a local web design firm's portfolio and found all their sites' code begins as such:
<meta name="keywords" content="a whole bunch of keywords for their site">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
...
I was able to determine that the pages were generated by dreamweaver (at least in part).
Did dreamweaver do this, or did their "developer" just paste the code at the top of the document.
It is my impulse that this is bad practice and it might work incorrectly on some platforms but it got me wondering as to whether or not their may be a reason for this?
That is a terrible practice and invalid HTML. I bet that this would throw IE directly into quirks mode.
But as for your question, either the developer is a script kiddie and shoved the <meta> tag in there with little knowledge of the outcomes, or Dreamweaver did it. I hope it was Dreamweaver...
FYI - just had this issue and Dreamweaver does not put the meta tags in the correct position automatically. Cursor must be placed beforehand into an editable region.