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.
Related
I'm trying to disable text ellipsis ('...' at the end of text) / overflow-wrap so as to be able to read the full text of the option element within the select element. At the moment the text is getting cut off even though there's plenty of white space left. The catch is that I have to do this using Greasemonkey (not written any code so far), just editing in browser console till I find the correct css option. Things I've tried so far:
changing an option/select width to "100%".
changing option/select line-height to "normal"
changing option/select padding to "0"
changing option/select font-size to something smaller.
setting option/select text-overflow to "clip"
setting option/select white-space to "normal"
var menu = document.querySelector('select');
var option = document.querySelector('select option[value="neteng-deployment-agg-pod1-dub-primary"]');
I'll also attach an image to help explain what I mean:
I am not sure but looks like IE problem.
First of all check the same page with Firefox and Google Chrome.
My gut feeling that this is quite browser default specific, and that it would require browser-specific css hacks to change this, can you confirm if this is the same behaviour in all browsers on your machine?
edit: with knowledge that is same in all browsers:
there's a good chance replacing the default select element with some fancy jquery versions that replace select elements with mirror versions using normal html markup may solve it
https://sitepoint.com/13-jquery-selectboxdrop-down-plugins
Double space can be achieved using CSS with line-height:2em, which also makes text selection doubles when you drag on it. Is there any way to have text selection not include extra padding that occurs from CSS line-height, just like how it would look like when you drag what I have wrote here?
I have the following options:
Divide paragraph into sentences, each with their own element, and push/pull words when overflow/underflow. (What I have implemented so far)
Make line-height 2em, disable default text selection, and draw text selection box with Javascript. It may still be complicated, but probably not as much as having to push/pull words on every text input.
There is this diabolically simple trick I am not aware of.
There is a simple trick: use Firefox.
Chrome:
Firefox:
I want to make a basic text editor using angularjs (or just pure javascript). The idea is that I will have a div to contain the text, instead of using textarea. I want the user to be able to click anywhere inside the div and have a blinking cursor appear where they click. I really have no idea how to do this. Any suggestions? By the way, I would prefer not to use contentEditable.
Since you prefer not to use contenteditable, Here's a few suggestions you could have a look at to get a blinking cursor, manually:
Overlay the div with a canvas element, get the click's position, and animate a line on the canvas at that position.
Overlay a animated .gif containing the blinking line at the click's position.
Use a animated .gif containing the blinking line as the div's background, and set the background-position, depending on the click's location.
For the above two suggestions, instead of a .gif, you can use a static image, and toggle it.
You'll have to keep in mind that the line will have to snap to the closest character boundary, so you won't have your cursor blinking in the middle of a character. Using a monospaced font would make that a lot easier.
You will still have to write the other features a text field has, though:
Text manipulation.
Selections.
Copy / pasting
You can make the div editable by adding contentEditable="true" attribute to the div element.
<div contentEditable="true"></div>
As you mentioned you wanted to avoid using of contentEditable then you can go for Javascript/Jquery plugin. It will be very easy for you if you use plugin rather developing it on your own. Here is a jquery plugin which can come in handy. http://www.appelsiini.net/projects/jeditable
you could try setting the div to contenteditable
<div contenteditable>
</div>
JSFiddle
Seems you are looking for html5 contenteditable attribute.
http://html5demos.com/contenteditable
I have a set of thumbnails and whenever a user clicks a thumbnail I'd like to show a corresponding descriptive text.
I was planning to do it with one div that its innerhtml will change according to the onclicked thumbnail (with javascript). Will all the descriptive text be invisible to robots (seo-wise)?
Any better idea how to implement it?
For SEO, it is simplest if all text you want the search engine to see is in your actual HTML markup. Rather than change the innerHTML on one div, you might put multiple divs next to each other and just hide/show the right ones. Then all text will be in the markup.
Thumbnail descriptions also belong in the alt attribute on the image and search engines look for them there. I don't know exactly how your app works to know if that's sufficient, but you may at least want to also put the descriptive text there.
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.