I came across a website that used styling on the caret for an input text field. I've never seen this before but it looks really nice. I've done a ton of research but there doesn't seem to be a lot of information on how to do it. Please see gif below:
How do you change the colour and height of a caret?
For reference the website is betterment.com.
Isn't it the same style as the input itself (color, font-size, etc..) ?
Here it is green.
Related
I've installed Medium Editor on our site, on two different pages. They both work fine, and are initialised with the exact same code, but on one of pages the Bold button/shortcut doesn't work.
The page on which it doesn't work gets a lot more styling (and has a lot more js libraries) compared to the one that does work, and so I'm wondering if something else might be getting in the way.
I can't see any js errors in the console. Has anyone encountered this problem? I saw another forum post saying it was something to do with styling on font-weight, but I can't see how this would actually stop the function working completely: it just seems to be disabled - the "B" button in the Medium Editor's popup menu doesn't change color when you click on it.
If it was a css issue I'd expect the button to change color but the text to not look different, perhaps, but it does just seem like "Bold" is disabled. Also, any tags already in the content's html do display ok.
Has anyone else encountered this, or other functions seemingly not working?
EDIT: I just poked it some more and noticed that if something is bold already, and I highlight it, the B button does look activated, and and I can "unbold" it. However, after unbolding the selected text, I can't "bold" it again.
EDIT2: More poking has revealed that if the highlighted text is set to be a heading, or is italicised, then I can bold and unbold it as intended. So it's really just "normal" text which seems to be "bold-resistant".
I found the answer - the problem page had the text area inside a label tag, and so was picking up the styling for label across the site, which had font-weight: 700. This was preventing Medium Editor from applying the Bold style to it.
I have two simple textareas where in i want to highlight the javascript code being written.
As soon as the user types the function in the text area , the keywords etc have to be displayed in different color or so.
I tried to hack this script . But couldnt get what i wanted.
You could check Ace (demo) and CodeMirror (demo).
I suppose Textarea that can do syntax highlighting on the fly? and Online Code Editor questions will be useful for you as well.
I've always been interested in having textarea elements with added functionalities such as code highlighting, while still remaining as simple editable textareas. I've experimented a little bit here: http://www.dcc.uchile.cl/~jmunoz/
It's far from optimal and quite buggy, but still... It allows text highlighting using arbitrary rules. I used to have a working version which allowed to change the text color (And not just the background), but It had some issues.
Basically what I do is adding a div overlay with exactly the same content and font style as the text area but with transparent fonts. The text inside has span elements wrapping certain words and phrases which may have special backgrounds, borders, etc.
To allow for different font colors, I tried making the textarea text transparent while showing the overlay div text. The main issue there was that the cursor became transparent too.
I would say that using a div with editablecontent seems like a much better option.
I think that you can use a div or section tag with content editable attribute. Inside this div or section you can use an additional markup for higlight functions, vars and etc. But this attribute work only in new browsers that support html5 attribute content editable. Here is a demo
If you need a simple js highligter, may be this one https://github.com/cloudhead/hijs is usefull for your task
Because a text area cannot contain markup, you cant so highlighting per se. The approach I used for an inline spell checker was to overlay divs for words that were spelled incorrectly. This was possible because it was possible to get the x and y location of words inside the text.
However it may be preferable to overlay the textarea with a content editable div which would allow you to wrap content in spans etc and then apply styling.
After a while thinking about this, I think I could use more brain power.
Imagine the following UI (courtesy of StackOverflow):
Note that the red lines are 'guides'. Imagine that they are <div/> boundaries.
What I want is that when a lot of text is added to the input box, enough to overflow, the input box should 'pop out' and overlay/autosize to the left, like the image below:
This is somewhat similar to how Stackoverflow's works, except that it resizes according to content. Also, similarly to stackoverflow, it need to retract when the input box looses focus.
Usually, I'd come to SO prepared with some code, but this time, it's a bit difficult.
What exactly should I use to 'fix' the input box to the right?
How do I find the internal/content width of the input box?
Note that I'm using a monospaced font, so this might be easier...
Well, I've found the answer....or uhm...created the solution.
It can be found here.
In short, it is mainly a lot of events and a 'fake' input box with absolute positioning.
I am trying to implement something like the "Change/Remove Link" in Gmail/Google Docs richtext WYSIWYG edtior, when you type a URL, a div shows underneath it says "Goto Link, Change, Remote"
How could I write something like that using jQuery?
How to get row and column of cursor?
how can I calculate font width and height (especially non-fixed width font with some Bold/Italic style)
How to make sure the DIV appears at the start of a word?
Thank you in advance!
Answer: http://jsfiddle.net/morrison/57BR3/
What it does:
Creates div positioned near hyperlink.
Looks like Google docs box.
Ability to change text and url.
Remove is implemented.
What it does not do:
Work on textarea. Textareas don't support html as they are plain text. This is a complex process to work-around. Find a library, then implement my answer.
Open when your cursor gets moved onto it by arrowkeys. Doesn't work because of above item.
You're suggesting you're building a WYSIWYG editor. Are you sure you want to use a textarea? Textareas don't support HTML. To answer your later comment, the best way to get the (x, y) position of the caret in a text area is to use the textarea-caret-position plugin.
How to determine on which row of textarea is the cursor with javascript?
I think it will involve fiddly calculations with font sizes, padding, borders, margins, and line breaks. I expect it'll be hard to get it right in the general case. You could take a look at the source code of the following, which displays an autocomplete dialog as you type in a textarea. It was posted on Ajaxian recently and does what you need to do: http://media.chikuyonok.ru/content-assist/