why is with Dreamweaver CS6 not possible to code nicely like Komodo Edit 7?
With DREAMWEAVER CS6 my code looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Test DW</title>
</head>
<body>
<h1>Main Heading</h1>
<p>Some body content.</p>
</body>
</html>
With KOMODO EDIT 7 it looks this:
<!DOCTYPE html>
<html>
<head>
<title>Test Komod Edit</title>
</head>
<body>
<div class="wrapper">
<h1>Main Heading</h1>
<p>Some body content.</p>
</div>
</body>
</html>
How can I achieve the same effect with Dreamweaver?
Go to Commands and select "Apply Source Formatting", this will apply indented formatting to all your code. If you only want to format a selection of code then use the "Apply Source Formatting to Selection" option below.
Dreamweaver Preferences (Ctrl or Cmd + U) > Code Format. There is also the Advanced Formatting menu which allows specific formatting for different languages (e.g. css vs javascript). If that's still not to your liking you tab while typing . . .
Related
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 would like to have a text box at the top of my website on every page that has the same text, but I don't want to edit the code individually for every webpage. How would I sync the text to all the webpages?
Include Common files using jQuery...
<html>
<head>
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div id="header"></div>
<div id="content">
Main Content
</div>
<script>
jQuery(document).ready(function(){
jQuery("#header").load("header.html");
});
</script>
</body>
</html>
I've created the following snippet on sublime text:
<snippet>
<content><!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Document</title>
</head>
<body>
</body>
</html></content>
<tabTrigger>!</tabTrigger>
</snippet>
But when attempting to save it, I get the following error:
"error parsing snippet xml: unexpected end of data in file"
Why is this?
Yours sincerely and thank you for all your help.
You may have accidentally removed the <![CDATA[ and ]] portions of the sample snippet XML; as a result sublime can't figure out where the content of the snippet ends.
You want something more like this:
<snippet>
<content><![CDATA[
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title>Document</title>
</head>
<body>
$0
</body>
</html>]]></content>
<tabTrigger>!</tabTrigger>
</snippet>
Note that I've added a $0 into the snippet inside the body tags; that tells Sublime where to drop the cursor after it has expanded the snippet, so that you're ready to continue editing the HTML document; you may or may not want to have that depending on what you're trying to do.
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>
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());