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.
Related
I have added a HTMLDelegate to a QTreeView instance I'm tinkering with (see How to make item view render rich (html) text in Qt), so I can present its contents with rather simple rich text (HTML). The hits are presented as
<headerstyle>result type</headerstyle><br>
%d results of this type
where "headerstyle" is either a single tag (say ) or a combination of such tags.
That I'd like is to add underlining to the 1st line that spans the entire width of the QTreeView. Checking existing suggestions on here make it seem doubtful that this will be possible, but maybe I'm overlooking something?
I tried adding <span style="border-bottom: 1px solid"> but no borders are ever drawn. That may be a limitation in the HTMLDelegate, but it probably wouldn't work anyway. does work but only applies to the actual text, not the entire first line. I guess what I'd need is a right-aligning tab character...?
Current actual code: https://github.com/RJVB/audacious-plugins/blob/RJVB-MP-Qt/src/search-tool-qt/search-tool-qt.cc#L166
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.
I have a .html file containing text content like:
<div> The study concludes that 1+1 = 2. (Author in Journal..., Page ...) Another study finds...</div>
Now when viewing this in Firefox, I want to be able to conveniently copy the text in the () brackets. But 2 left mouseclicks only mark one word like "Journal", and 3 clicks mark the content of the whole div.
So my idea was to put the brackets in another div like:
<div> The study concludes that 1+1 = 2. <div>(Author in Journal..., Page ...)</div> Another study finds...</div>
But this leads to the () text being pushed into a new line, but the text flow shouldn't be altered at all, I just want to achieve the copy+paste behavior. Is there a way to achieve this? I thought about applying a div class to the () and canceling the attributes in the .css file, but somehow it did not work.
Essentially a triple click will mark a paragraph. So even if you were able to make your inner div inline (which is very simple, you can use style="display:inline"), the browsers text analyzing engine would still read it as one paragraph (or one block) and use the standard behaviour: mark the paragraph.
So basically: no, not if you use only CSS. You have to use JavaScript to identify a triple click on the element and mark it.
Here's the case: I have a series of thumbnails in a page, and I would like to display several keywords over each image when the user hovers with the cursor. Each of those keywords are anchor tags that point to a search query. And each thumbnail (the image) should also be clickable (through the empty spaces that the keywords leave) and point to a specific page.
I have everything already coded, I'm just missing a way to display the keyword anchors over the image anchors. I already tried with an onclick="window.location.href=..." but when the user clicks the keyword, the onclick is also triggered (for instance: if I ctrl+click on a keyword, i get the keyword search on a different window, but the main window content changes as well).
Any help will be much appreciated. Thanks!
This is quite common and can definitely be done with plain HTML and CSS. You can also do it with JavaScript, but I prefer to avoid doing so if possible.
This example is perfectly valid HTML/CSS and should have no weird browser rendering issues (even as far back as IE 6).
http://jsfiddle.net/2JD76/1/
Basically you have a containing element, in this case a div, which has your linked thumbnail and linked keywords. They're hidden by default and only shown when the containing div is hovered.
The linked thumbnail is absolutely positioned so that it's taken out of the page flow which then allows the linked keywords to appear on top. I then use z-indexes to make sure that the keywords are always on a layer that is higher than that of the linked thumbnail.
You can not. It is illegal html.
Attach a click handler that changes the current location instead of the "greater ".
I was going to answer with a long reply but, well check out my Jsfiddle here. I was trying to solve something before and well...check it out.
http://jsfiddle.net/somdow/KSt6a/
If you look at the code, its doing exactly what you are describing.
On my Jsfiddle, theres a div box with space for an image(this is wher YOUR image would go), The image is on the code but not on the jsfiddle so youll see the alt tag....Anyways so, on mouse-over, it brings up another div with text dynamically created inside of it.
All you have to do is replace the image content with your own image, then Insert the links/keywords links you want into this line
.prepend('<div class="portSecRollOver"><div class="portSecInner"></div></div>');
and stick your words in between the <div class="portSecInner"> **YOUR WORDS HERE** </div> line
And change the CSS to fit your needs.
oh AND ps, DELETE this line (below) which is the one that dynamically appends text inside of "portSecInner", since your going to insert your own words, then you dont need this line.
$(this).find('.portSecInner').html("<h3 class='h34roll'>" + $(this).find('img').attr("alt") + "</h3>");
I want a UI that is basically a document having souped-up paragraphs that are (a) editable and (b) each have a column of meta-data/widgets on their left. That is, I want a tree layout that looks like an HTML document, except:
to the left of each paragraph is a column of controls like buttons, state indicators, very short textbox fields (3 chars), and
if you click on a paragraph (or hit an edit button on the left) it morphs into a textarea you can edit; when you are done, you hit a done button on the left (probably the edit button morphed into a done button) and the textarea goes back to being a paragraph.
When you hit edit, some labels in the meta-data on the left should also morph into text areas, etc. and back again when you hit done. Also, I want to be able to hit a button and show only part of the paragraph (imagine a paragraph having a title and a body).
I'm sure I can cobble something together that does this if I hit it over the head with enough HTML tables and GWT Panels, but I'm trying to do this in as lightweight manner as possible, given that such documents of these things may be large, I want it to resize naturally in the browser, and since browsers already naturally lay out things that look like documents I should be able to use very vanilla HTML for most of it.
I've spent several days being frustrated with GWT Panels of various kinds. Ideas?
You should just be able to hide a Label and show a TextArea, and then switch back when you're done editing. Set whatever styles you need to on them - I think a Label comes out as a <div> and a TextArea comes out as a <textarea>. No panels required... just a <div> container to put these two widgets in.