I have a little website where I would like to obfuscate some text to protected spoiling of users that accidentally read it untimely.
Much like the keywords on imdb were, where you have to rollover to reveal them.
I thought it would be a nice and interactive way to reveal the text if its marked.
Example:
How does a programmer express
h(is)|(er) love? Zl srryvatf sbe lbh
ner uneqpbqrq.
Now you would drag mark the obfuscated text much like you would get ready to copy it to your clipboard, and it should reveal.
Is there a way to do this? My current problem is a way to determine the current selection in javascript.
There is one tricky way I can think of with only CSS:
Use the same color text as the background color! Then when users highlight, the text is revealed. You would need to outline or draw attention to the part that they need to highlight to make it obvious.
Another way:
Stuff the rot13 into a readonly text input, and attach a select event with an AJAX call that decodes it. Will only work for smaller bits of spoiler text that fit in the input. You could try this with a textarea but it doesn't accept the readonly attribute (maybe doesn't matter).
There are many many other ways to do this (hide/show divs for example), but these are the closest/simplest ways I could think that match your requirement of selecting text to trigger the spoiler.
EDIT: With the background color solution, you would not want to encode the text, just make it "invisible" until it's highlighted. It's actually a pretty cheesy solution, and there are many others that are better, but the good part is that it is css only. Honestly I think forcing a complete highlight will be a pain for your users, just store the rot13 value in one place, the real value in another (hidden span maybe), and use js to swap them out on click or something. No need to actually process the decoding separately. You could probably do this with CSS alone and some smart :hover or :focus selectors.
EDIT2: For some reason it didn't occur to me that you can do rot13 decoding with javascript alone, I'm coming from the php world so now I feel pretty foolish. Sorry I didn't answer your question better, but hopefully some of this is useful. GL!
jCarat (jQuery Caret Plugin) should cover your needs.
Related
I am using Jquery, php and html5. Either an input field or a textarea is used and for both i always run into the same problem: inserting emoticons / smileys: they won't. They only seem to want to add straight up text, nothing else.
I've googled and googled even tried to code something which adds the value of the key pressed to a div (and therefor have the potential to not insert :-) but insert a smiley instead), but that doesn't seem to be ideal.
Do any of you know how to do this properly and would like to show me how?
Really at a loss here....I would be very grateful for any help.
First of all - font letter is graphic object and smile picture is graphic object ))
Most simple way - just using font with smiles instead of regular font.
Take a look for http://www.fontspace.com/category/emotions, for example.
Using Javascript, I need to allow a user to double click a word on a page and retrieve the sentence that it appears in. Not just any sentence, but that specific one. I've toyed with retrieving all sentences that that word appears in and somehow choosing the correct sentence, so maybe that's an option.
I've scoured the web looking for this beast, and I've thought a lot about it. Some have recommended using Rangy but I haven't been able to find the functionality I'm looking for, or even functionality that would help me get where I need to be.
Any ideas?
You could turn your page into one or multiple read-only textareas, use clever CSS styling to mask it, then use the onselect event as described here: Detect selected text in a text area with javascript
Depends of course, how your page looks like and where it's used.
I want to know how to make a text area in a browser into a programmers text editor.
For anyone that uses textmate -- I basically want it web-based.
for anyone that uses notepad++ -- same idea as above.
I know how to make a text area
using html.
what I dont know is how to tag the text areas.
for instance. in notepad++ and textmade, I can insert the <> tags and it will highlight the text blue.
How can I achieve this, live, in a browser.
I already know how to parse it after the text has been posted.
I want it to be parsed while the user is typing it.
EditArea is pretty good.
In addition to EditArea there's CodeMirror and Mozilla's Bespin
EDIT: I misunderstood the question a little. Jump to ORIGINAL ANSWER if you are curious.
EDIT2: My answer is how to provide SYNTAX HIGHLIGHTING (what is specified in the question itself). Highlighting individual characters unrelated to the syntax requires trivial javascript. This is also distinct from 'auto format' which is commonly interpreted to mean 'adjust my indent levels so it all looks good'.
This is a difficult task, but not as impossible as it seems. Once again, TextMate comes to our rescue but in a different fashion.
In TextMate, open the bundle editor and look at the language definition for HTML. Those are regexes that process the document and assign a 'scope' to each piece.
'Simply' parse that language definition format into the various components, and then use the regexes themselves like TextMate does to assign a scope/color. Piece of cake, right? :)
I would personally start with the most lightweight open source rich text editor you can find, then hack it into that. Or ya know, whatever floats your boat.
I hope that gave you some good ideas.
ORIGINAL ANSWER:
For Firefox, you can install the plugin 'It's All Text' from here:
https://addons.mozilla.org/en-US/firefox/addon/4125/
It works for me with 3.6.12. Set the path in preferences to TextMate (or whatever), and optionally set a hotkey or adjust the other settings to your liking. Be default, when your cursor is over a Textarea, a small button saying "Edit" will appear and open the contents of the Textarea in your editor. Saving will put the data back into the Textarea.
I hope this helps.
JSMinNpp plugin just for javascript auto-formatting
http://sourceforge.net/projects/jsminnpp/
I want to implement a special highlighting to by buttons. The one, I found on the iBooks app for iPhone/iPad suites my needs. I think it is very complex due to the fact that all the strokes are looking different. I could use some CSS-Sprites-Voodoo but I don’t think I will be able to assign these styles so easily. Has anyone done something similar? I would be happy to hear some ideas.
Thanks, Floyd
http://i.stack.imgur.com/SlfHx.png
I tried this out: http://jsfiddle.net/brianflanagan/XUpFc/ Basically, the gist is to grab any selected text and wrap it in a span to give it a class with a background image. Not sure how useful this is, but it might get you started...
Is there any way to make textarea display lines in colors? What I am trying to achieve is every second line colored, i.e. white,grey,white,grey,white,grey... for better readability. Users are supposed to write in lots of stuff, as in "enter names, each one from new line".
I do use jQuery anyway so if they made some simpler solution for this it would be perfect.
What you are looking for is called Zebra striping, maybe that will help with some google searching. However, I don't think there is a way to currently do this to text within a textarea (besides using the background image hack).
CSS3 has a lot of powerful features such as the nth-child psuedo class. There might be a way to do it using that, but again, it probably has no way to do that within a text area.
Perhaps another solution would be to do something like SO does -- where you enter text into a textarea and then next to it or below it it shows a nicely formatted version. You would use jquery to parse the text in real time and display it zebra striped.
Edit: I had another idea that might work, but would take some experimenting. There is probably a way using jquery to get the absolute position of each line of text in the text area. I would think you could at least get the absolute position of the top left of the textarea, get the line height of the text, multiply by the number of rows down (number of linebreaks in the text), test and tweak a little, and you should be able to get the position of each line in the text area. Then, use jquery to draw a colored div behind the text area for each line of text that is as wide as the textarea and as tall as the line of text. The textarea should be transparent as well.
With a little more work, you can probably even have the zebra striping logic be smart enough to detect if the line of text has wrapped, so that zebra stripe can be 2 or more lines tall.
Might work. Good luck!
One way to accomplish this would be to just use a background in the textarea.
<style type="text/css">
textarea { background-image: url(bg.png); }
</style>
That being said, you'd have to have to play around with the tiling and the line-height to get it just right, but it should be able to accomplish what you're looking for without the use of scripting.
If you wanted to make the actual text different colors, there's no way to do this using a pure <textarea>. You could use a rich text editor such as TinyMCE, but that would be way too overkill in my opinion.