I have a paragraph in my html and an-id-with-dashes. If I doubleclick it only the word is selected. If I triple click the entire paragraph is selected. How do I have triple click (or double click) select only the span? I tried using a div with inline-block but it failed to work unless it was display:block. I also noticed '.' tends to be highlighted. If there's a period after the span (or div) I'd like that to not be selected
Related
In Chrome, I can't select the contenteditable text context by using the keyboard in Chrome when the text contains a long string that wraps to the next line.
This repro's in Chrome (latest; Chrome 47 at the time of my writing this).
Repro steps
Click to place the cursor at the end of the contentedtable div (in the snippet below).
Hold shift and hit the up arrow a bunch of times.
Expected: All text becomes selected.
Observed: The text before the space ("foo") is never selected.
Here's the code. NOTE the character after "foo" is a space, not a newline!
<div contenteditable="true" style="background: #ddd; width: 200px; height: 100px;">foo asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;asdfjkl;</div>
Actually, that's the correct behavior of textboxes in general.
In this case, you see the two words in different lines because the second one is wider than the container, so you see a line break and you try to use the up arrow to select "foo".
But, as you say in the question, after "foo" there is a space character, so you must use the left arrow to select it.
Just imagine the same case but with a full width textbox, you would only try to use the left arrow. Only the style changes here, not the behavior for that specific content.
I have minimal experience with HTML script so this may all go horribly wrong here.
Alright so I have a very simple yet very time consuming task of taking complete papers and converting them into HTML script. I'm using Sublime Text 3 with Emmet plugin.
Basically,
This is the first header
This is the first paragraph that needs to be tagged
This is the second header
This is the second paragraph that needs to be tagged
So super simple I need to put header tags on the headers and paragraph tags on the paragraphs.
What I have been doing is holding Ctrl and manually highlighting the desired text as it is all rather random. Problem is that takes forever to manually highlight the text like that.
I am aware of other ways to highlight such as Ctrl + L for the line. Problem is my close tags end up under the highlighted line.
Example:
<h2>This is the first header
</h2><p>This is the first paragraph that needs to be tagged
</p>
It's not a big deal but it makes the code harder to go through later and really chaotic.
The same problem persists if I click the corresponding number of the line.
Seeing as I have hundreds of pages to enter and even more headers, paragraphs, and pictures to properly tag; I'm looking for a solution to the tag dropping below the line or a faster method to entering text.
So, is there a fast method for entering text from a word document to Sublime text and quickly get the corresponding tags? e.g. <h2>,<h3>,<p>,<ul>,<li> and so on.
Any help will save my sanity, thanks.
When you select a line with CtrlL, it automatically selects the entire line, and moves the cursor down to the first position on the following line. There are two ways around this. The first is to place the cursor in the first position on the line you want to select, then just hit ShiftEnd and the line will be selected, with the cursor now sitting in the last position on that same line. Alternatively, use CtrlL, then hit Shiftâ (left arrow) to move the cursor from the first position on the next line to the last position on the selected line. Either way, you can now hit the key combo in Emmet for inserting a tag pair, and you're all set.
Is there a way to expand all elements in the elements view of the Chrome WebKit inspector?
If you hold ctrl + alt for windows (just opt on a mac) while clicking on the arrow of the element you want to expand, it will expand and all of its children will expand. So, if you ctrl + alt click on the <html> tag, that should expand the entire page.
This Link lists the keyboard shortcuts for chrome dev tools, including that one.
CTRL + SHIFT + ALT + LEFTCLICK
Here's how i've decided to do it:
Highlight the element tag I wish to inspect, if it's the whole (expand all) the requirement, then highlight <body> tag, click F2.
Note: F2 is actually the shortcut for 'Toggle edit as HTML'. You can directly make any change in this mode, changes are reflected on web page. You may right-click within this new code view-window and enable/disable wordwrap.
On Chrome while clicking the arrow in the source-code, will expand all children elements.
ALT + Click the Drop Arrow = Unwrap One level by one
ALT + CTRL + Click the Drop Arrow = Unwrap "All" Level at once
Click on the element:
Alt + Right Arrow (Expand)
Alt + Left Arrow (Collapse)
You can move around with the Arrow keys and using Tab.
I found just right clicking on the tag and selecting "Expand Recursively" worked for me. I'm using Chrome Version 66.
You can also right click and "Collapse Children" to collapse it all again.
these approaches seem convoluted, all you have to do to make all the arrow symbols change from pointing towards the right to pointing down is click the html tag and in the dropdown box click "expand recursively"
I have a select list in IE 8 it works ok.
On Firefox 3 and 4: I cannot click on the select box, unless I move the mouse 0.5cm below the actual select box.
On Webkit the same as firefox, plus by default it looks blank with no options in it until clicked?
The page is http://gocruising.com.au/Cruises/Search the select list is on the right "sort results by"
I know there must be some invalid HTML somewhere but I cannot see it.
Your <div class="icons">...</div> is hanging down, meaning the click events on the control are really click the the div.
You may need to make that div smaller, reposition it, or lift the select above using z-index.
I have a div element containing some text. When the user clicks a word inside that div I'd like to highlight just that word.
In order to do this I need to know what character position in the text the click occurred at, so I can then locate nearby whitespace and insert some formatting around the word.
Finding out where the click occurred within the text is the trick here. Is that kind of thing possible?
If your page is auto-generated, you might consider pre-processing the page by putting a <span class = 'word'> around every word in every selectable div. You might be able to this with javascript after the fact, and I think that would be your solution regardless, but pre-processing would make it easier.
The problem with relying on the absolute position of the word is that users can scale their fonts, which makes this task especially hard. By wrapping a span around every individual word, you can easily select which word was clicked by applying the click event to the span elements.