I have Sublime Text 2. When I begin typing <d a dropdown suggests autocomplete for . Hitting enter will complete the tag and even add the ending tag </div> and place the cursor between the tags. Perfect. If I hit enter again twice, I get this setup:
<div>
|</div>
But now when I go up one row to the blank row in between and hit tab, instead of indenting on the line between the tags, the cursor jumps to the end of </div>.
What I can do is hit enter once when I have <div>|</div> and then hit left to return to the end of <div>and enter again to go to a new auto-indented line.
How do I get this auto-indentation behavior to work when hitting enter in the <div>|</div> situation?
The problem you are having is that when pressing tab your are moving to the next tab stop in the snippet. That is the expected behaviour.
Snippets are tools for helping you write code faster. Those snippets can have multiple cursor positions called tab stops. You move between those positions by hitting tab. So when you hit enter to create those lines, and then tab, you are moving the the next tab stop in that particular snippet.
Sublime Text allows for deep customisation. You could change your auto indent settings, or create your own snippet.
This snippet should do what you are after. Save this as div.sublime-snippet into your User folder (in the packages folder accessed from Preference > Browse Packages) .
<snippet>
<content><![CDATA[
<div>
$1
</div>$0
]]></content>
<tabTrigger>div</tabTrigger>
<scope>source.html</scope>
<description>My own div snippet</description>
</snippet>
After doing this, you will have a new option in that dropdown auto complete menu. Usually you will only have to write div then press tab and voila.
Related
I've got an asp.net webforms project with a Site.Master page that's ref'd by my content pages.
The header is:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="JT1.SiteMaster" %>
....
it includes a navbar with a few buttons and a label on the right like so:
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
<li><a runat="server" href="~/Login">Log In | Sign Up</a></li>
<li><p runat="server" class="navbar-text navbar-right">
<label runat="server" id="LoggedInUserID" >Logged Off</label>
</p></li>
All of the buttons show up and work properly, and the text "Logged Off" appears by default on all
pages that use the master.
From the Login.aspx.cs, I want to change the text of the "LoggedInUserID" label to something
appropriate, like "Welcome, Jim". This code is the best I've been able to come up with:
HtmlControl ctl = Master.FindControl("LoggedInUserID") as HtmlControl;
if (ctl != null) ctl.Attributes["InnerText"] = "Welcome " + firstname;
This actually finds the proper control, and I can see in the debugger that its InnerText is, in fact, "Logged Off". But my assignment to it does NOT work. No exception, no error, nothing.
I've perused lots of other similar questions and don't see anything I've not tried. Anyone have any ideas?
Well, the child page loads first, AND THEN the parent (master) page loads.
So, your code (if on a child page) would run, but THEN the master page loads, and your setting is lost.
However, lets assume we moved the code (and even a test button) to the master page.
When you click on that button, child page load, master page load, your button code runs, label gets set.
But, what happens now if you click on another menu bar item?
Turns out that AGAIN the master page loads. you can think of this as if you navigated to one page, and then navigated back to that page.
As a result, EVEN if you place a button + code in master page to "change" the Label? Well that will at least work + show the change, since master runs AFTER the child page.
However, that control ONLY going to persist now as long as you "stay" on that one master + child page.
This would be no different then if you had a button on the page. Setting label or text box. Such a page can survive post-backs no problem.
(controls have automatic viewstate with runat=server)
However, if we navigate to a new page, and then navigate back (not using back button), then that label setting will be lost (and this is how you have to consider the master page).
So, now that we "fixed" the above setting?
Well, we now have to consider if a new menu bar option is hit and now we navigate to a whole new master/child page.
In this navigation, the master page is re-loaded from start. So, once again, you would have to re-run that code.
Long story short?
You need to move that code into the page-load event of the master page.
I mean, a really "neat-o" kluge when you want to modify/change/update/show/see the main menu bar change?
You can execute (in child page that changed the menu "settings" - note I stated menu settings, since we STILL in theory have to change the mnu bar in master page. So, in this context, we might have changed some setting - but it would have to be session type of deal). Now, how to "see" this updated status/change in the nav bar?
You can do this:
response.Redirect("name of current page we on.aspx")
That will of course "force" a menu bar refresh. (kind of like hitting a different menu bar option, and then hitting the one we were on).
But, as noted, it only going to see such forced changes if the master page load event "changes" what it was doing in the first place.
(since with runat=server, you get viewstate for that control).
However, the instant you click on another menu item, you have to "consider" this a whole new brand new navigation to that page anyway.
this is live template code :
<nav class="$END$"></nav>
when i type nav and hit tab above code happen and cursor is between class double quotes because i need to type class name first (its working up that level), then when i press tab key, the cursor has to come between the tags.
but anyway this doesnot work as it is. cursor come to END variable point . thats fine. but when i press tab key, indent happen within class. cursor is not coming between nav tags
never mind. i found a fix. at the beginning i was following the wrong way. below code works for me with tab key.
<nav class="$VAR1$">$END$</nav>
i've got a site with a lot of phone models, but the code is originally from another part of the site, where the mobiles are only shown when you click on the box, but for this part of the site, I want the mobiles to be shown at anytime, so how do i make this div
<div class="submit_filter ans_div" style="display: table;"></div>'
into something that just shows without a click?
The site url are www.findaphone.dk/mobiler
And as you see, right now there is a big box at the top of the site you have to click on.
Thanks in advance!!
The JavaScript for this click event is at line 620 of your source code. CTRL+F to find it, it looks like this:
$(document).on('click','.submit_filter',function () {
Right now, the line is waiting for a click event on that large button (.submit_filter) before executing the code. Replace the line above with this, and the code in that function will trigger on document ready (when the page loads):
$(document).ready(function () {
I have a very long and very nested HTML document, where I need to quickly find the closing tag. How can I do this?
Try Emmet plug-in command Go To Matching Pair:
http://docs.emmet.io/actions/go-to-pair/
Shortcut (Mac): Shift + Control + T
Shortcut (PC): Control + Alt + J
https://github.com/sergeche/emmet-sublime#available-actions
There is a shortcut (Ctrl+Shift+A for Windows and Linux users, Command+Shift+A for Mac users) to select the whole block within the currently selected tag.
For example, if you pressed this while your text cursor was within the outer div tag in the code below, all the divs with class selected would be selected.
<div class='current_tag_block'>
<div class='selected'></div>
<div class='selected'></div>
<div class='selected'></div>
<div class='selected'></div>
</div>
As #frazer-kirkman mentioned in a comments you can also move your cursor to the start or to the end of the selected block by pressing either Left or Right button on a keyboard depending on your cursor's position
It's built in from Sublime Editor 2 at least. Just press the following and it balances the HTML-tag
Shortcut (Mac): Shift + Command + A
Shortcut (Windows): Control + Alt + A
None of the above worked on Sublime Text 3 on Windows 10,
Ctrl + Shift + ' with the Emmet Sublime Text 3 plugin works great and was the only working solution for me.
Ctrl + Shift + T re-opens the last closed item and to my knowledge of Sublime, has done so since early builds of ST3 or late builds of ST2.
Under the "Goto" menu, Control + M is Jump to Matching Bracket. Works for parentheses as well.
As said before, Control/Command + Shift + A gives you basic support for tag matching. Press it again to extend the match to the parent element. Press arrow left/right to jump to the start/end tag.
Anyway, there is no built-in highlighting of matching tags. Emmet is a popular plugin but it's overkill for this purpose and can get in the way if you don't want Emmet-like editing. Bracket Highlighter seems to be a better choice for this use case.
I think, you may want to try another approach with folding enabled.
In both ST2 and ST3, if you enable folding in User settings:
{
...(previous item)
"fold_buttons": true,
...(next item, thus the comma)
}
You can see the triangle folding button at the left side of the line where the start tag is. Click it to expand/fold. If you want to copy, fold and copy, you get all block.
I'd like to create a link that when it is clicked it will open up a some sort of dialog with some text a user can copy.
I was going to use jquery ui dialog for this but I'm wondering if there is something else I should consider?
Ideally I'd like to have that text highlighted so it is ready to copy. Don't think I can do this with jquery dialog?
Any guidance would be appreciated.
Try this :
HTML :
<div id="dialog">
<textarea id="textbox">some text to copy and paste</textarea>
</div>
JavaScript:
$('#dialog').dialog();
$('#textbox').focus().select();
This opens a dialog and then selects all of the text within the textarea. Because the focus function is used you can Ctrl+C straight off as the text is already in focus and selected.
Working demo : http://jsfiddle.net/eZbXD/
Instead of opening a dialog, you can show a textbox in which the link is selected and ready to copy. I have done something like that before. Look at this fiddle. You can remove unnecessary codes and give some style according to your need.