James here. Quick, and simple question for you guys. I'm working with a tumblr theme which uses a text option, which means the user can type whatever they want, and it'll display on the blog. The text options however do not work with javascript, so I can't use the text option for amount of columns and the text option for spacing between posts in my script that organizes the whole page. I know there is a way, but I don't know how to do this, to just create an invisible div with the boo lean text in it, and then use jQuery to get the text inside the div to use as a variable? I was thinking like .text(); or .html(); but I have no clue. Any codes or help would be greatly appreciated. I'm new at this jquery thing, so it'd mean a lot.
EDIT: If this is confusing for anyone, I basically need to use jQuery to get text inside an invisible element and use that text as a variable.
I'm not sure what you mean by 'boolean' here, but per your edit you want:
$('#id-of-element').text()
if you only want the text in the div or,
$('#id-of-element').html()
if you want the HTML. So if the div contains:
<h1>foo</h1>,
text() will give you "foo", while html() will give you "<h1>foo</h1>".
Related
tag for text area used
<textarea id="tag_text"></textarea>
I am using the following code to store the the content of text area.
var texAreaContent = document.getElementById("tag_text");
Now what code should I use to retrieve the style of every word of the text area content. Please provide the code in JavaScript and please provide a better way if you know because I am at a beginner level
I didn't get what's your problem.
i tried this in my way of understanding of your problem. Check this.
var texAreaContent = document.getElementById("tag_text");
texAreaContent.style.color="blue";
<textarea id="tag_text">Test</textarea>
With jQuery, you can do this like this
$("element").prop('tag_name')
You can change style of an element like this
$("element").css('background', 'lime')
How does one insert, or better, replace the current selection with some content and then select it?
Here's my text: Hello nice world!
As you can see nice is selected by the user. Now he clicks a button and this code is run:
editor.execCommand('mceReplaceContent', 'nasty');
This works just fine, the result is: Hello nasty world, but nothing is selected.
How do I make it automatically select nasty in the result content?
This seems like a very natural thing for one to want to do, but can't seem to find a straight-forward solution. I need this to work in mostly two cases 1) I am wrapping the selected text in a f.e. span element or 2) I am removing the wrapping span element.
I know there are better ways of dealing with nodes, but I'm more concerned about the pure text scenario right now.
Thanks in advance!
P.S. I am using TinyMCE 3 not 4.
I found this in the docs (API 3.x)
// Sets some contents to the current selection in the editor
tinyMCE.activeEditor.selection.setContent('Some contents');
// Selects the first paragraph found
tinyMCE.activeEditor.selection.select(tinyMCE.activeEditor.dom.select('p')[0]);
The setContent function does practically the same as execCommand('mceReplaceContent'). I did not found something like the easy DOM properties selectionStart & selectionEnd.
Well, I would like to hightlight part of the text in a textarea tag, like facebook does it when you are linking someone in your status update. how do I do that?
Thanks in advance.
What facebook do is they have a div sitting under the textarea which updates on keyup on from the textarea, which can obviously use tags and css to change how the text looks, they wrap the highlighted words in b tags which have background: lightbluecolor; font-weight:normal
So your markup would look something like this
<div class="highlight">
hi <b>Dave<b> how are you?
</div>
<textarea></textarea>
.hightlight { position:absolute }
.hightlight b { font-weight:normal; background:#FEFAE2 }
$('textarea').keyup(function(){
// do stuff with detecting the mentions but essentially:
$('.highlight').html($(this).val());
})
You're going to need the help of Javascript to do this. Because the solution is, I believe, a bit too complex for this Q&A site, I would suggest Googling tutorials, for example: http://www.developphp.com/view.php?tid=1192. There are also some great examples for you to examine: http://www.webdesignerdepot.com/2008/12/20-excellent-free-rich-text-editors/
Use this jquery plugin http://plugins.jquery.com/project/htmlArea
from the website
With this very basic plug-in, you can allow any HTML inside a textarea
- with full jQuery UI Theme support.
It's as simple as $("TEXTAREA").htmlArea();
There are many options you can set, the colour of the text, position,
show formatting options etc. etc.
$("TEXTAREA").htmlArea({color:'#FF00FF',align:'right'});
If jQuery is in your stack, this plugin should do the trick for you:
https://github.com/mistic100/jQuery-highlightTextarea
I am looking to create a javascript/jquery function to wrap a piece of highlighted text from a textarea in strong tags - similar to the WYSIWYG editor here.
Is this possible and if so can you point me in the right direction.
EDIT:
OK so here's a hopefully clearer description of what I want...
I have a textbox on my page which I can type in.
I then want to be able to highlight a part of this text and wrap the highlighted part in <strong> tags
So if the text box had the words one two three and I highlighted the word "two", I want to be able to wrap that word in the strong tags - so becoming one <strong>two</strong> three
Hope this is clearer... I know there are plugins out there but I don't need the full WYSIWYG functionality.
My Rangy inputs (terrible name, I know) jQuery plug-in does this.
Example code:
$("#foo").surroundSelectedText("<strong>", "</strong>");
jsFiddle: http://jsfiddle.net/aGJDa/
I love Rangy! Use it often! But I didn't want to include the whole thing just for this little application, so I did it using document.execCommand to wrap the selected text, then used the href (third parameter of the CreateLink execCommand) to find the element, wrap it with what I wanted, and then remove the link:
document.execCommand('CreateLink', false, 'uniqueid');
var sel = $('a[href="uniqueid"]');
sel.wrap('<strong />')
sel.contents().unwrap();
document.execCommand is supported by all major browsers so you should be safe hacking it this way. In the browsers I've tested, the browser itself will close and open tags for you, so if you're selecting from the middle of one html tag to the middle of another, it should nest the tags correctly.
Does anyone know how to create a tumblr like field as they have on
http://www.tumblr.com/
It's the URL field where some faded text is there then when you click on it, and type, it appends some text ... .tumblr.com that you cannot erase or highlight or whatever. The javascript is obfuscated so I really have no clues on how it was accomplished
I'd prefer jquery but really as long as it works...
Much regards
Edit: I just looked at it again. It takes the input as you type it and adds it into the ghostwriter span that lays above the input field. Pretty simple, really. The ".tumblr.com" text is just in the span itself. Something to the effect of: <span id="ghostwriter"><span id="ghostwriter-copy">Your Input</span>.tumblr.com</span>
There is a jQuery Plugin for that!
https://github.com/michelgotta/jquery-ghostinput-plugin
Demo:
http://michelgotta.de/ghost-input-demo/