I have a JSF page where I'm trying to tie the text in specific paragraphs to the contents of a set of textareas.
Getting the content to change when a textarea changes is dirt simple using onchange and onkeyup events:
onchange="$('dynamicParagraphId').text($(this).val());"
Unfortunately, I'm having some trouble initializing the paragraphs so that their text matches the textareas when the page is initially loaded.
Because of how the page is implemented, editing the underlying HTML is bloody difficult; I'm not sure how to implement an obvious solution like a script that triggers when the page loads, because it's going to take some real work for me to get a hold of the textareas' IDs. Is there some way to insert Javascript/jQuery code into the textarea definition that will trigger when the page loads so that I can make use of the this object and not have to figure out the textarea ID? Is there some feature of jQuery I can leverage that spares me needing to know the IDs?
Trigger the keyup event for all textareas, but you can probably come up with a more specific selector:
$(document).ready(function(){
$("textarea").keyup();
});
Or if you can only attach functions through inline markup for some reason you can add it to the <body>:
<body onload='$("textarea").keyup()'>
If you know how many textareas there are and which you want (i.e. the 5th on the page), you could easily query for all textareas:
document.getElementsByTagName("textarea");
and select the one you want. Another solution is to hand over the control to JS and render the textarea on the clientside.
http://jsfiddle.net/FExQy/
Related
I'm displaying an array in HTML page. On a text column when onfocus event is fired i display the text in CKedit using CKEDITOR.replace('#elementId').
I would like hide the CKeditor once the element is not anymore selected (using onblur event) and display unformated text as it was before selecting the element.
Does anyone know how to do that?
I think, only way is destroy instance of CKEditor
CKEDITOR.instances["YourInstanceID"].destroy();
You can recreate instance again, when needed
CKEDITOR.replace("YourInstanceID")
But, may be you should check inline version:
CKEditor inline example
I think most convenient will be using inline editors. Which only appear when user select specific element.
Another option is replacing editor after event and destroy it in other way. But this approach might be a little bit laggy, because editor should be properly destroyed and recreated, what might be time consuming for a browse. Here is an example on doubleclicking the divs, similar approach you could be able to use for focusing and bluring.
Thans for your answers.
I finaly simply added or removed ckeditor editor class in the textarea tag.
I am looking through the samples and I have got solution for focusing on dom element using tab.I am trying to focus on textarea which is on site,
so i had used virtual Tab key press to find that particular textarea and its working correctly.
But can anyone suggest how to directly focus on textarea. I also used excuteJavascript function but its not working.
DotNetBrowser DOM API provides two methods: DOMElement.Focus() and DOMElement.Blur(). This functionality allows you to request focus on particular HTML DOM element.
I am allowing my users to add YouTube embedded videos via the TinyMCE editor. I know that the content of the WYSIWYG is going into a responsive website, I want to automatically wrap the in the fluid width video wrapper (https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php).
So anywhere we have an Iframe inserted I want to wrap that in a div class=videoWrapper. I can't seem to find how I can wrap around existing content. Thanks in advance.
There are two questions here that will change how you can do this...
At what point do you have to have this <div> in place?
Does it have to happen when content is inserted?
Can you do this work when you go to save the content?
What are the ways people can insert this video data?
Do you have a custom UI to do this?
Are you relying on the TinyMCE Insert Media dialog?
Other?
To address item #1 above:
If you don't need to add this at the moment the content is added you can always add this when the content is posted to the server for storage. You can walk the DOM and look for the releavant <iframe> tags and wrap them in the <div>. This is likely the simplest approach as you only do this on content save and its done on the server which is a more controlled environment. This would also catch people using code view and removing your wrapper <div> in a subsequent editing session.
If you have to add things on the fly then item #2 becomes important...
If you have only one way to add the <iframe> then you can look at how they are doing that and see if that approach fires any event(s) that you can use to be notified (e.g. there are events for paste, keyup, etc). If there are multiple ways to add this data (Insert Media, copy/paste, code view, etc) then it will be pretty hard to find events that work for all of these possible approaches.
Note: Not all TinyMCE plugins fire events for everything they are doing so you may not find an event that you can catch right when the content is entered regardless of how its added.
If that is the case you can use one of TinyMCE's generic events (e.g. 'change') and look for unwrapped <iframe> tags at that time:
tinymce.init({
selector: '#myTextarea',
setup: function (editor) {
editor.on('change', function () {
//Update the DOM here
});
}
})
The built in editor events are documented here: https://www.tinymce.com/docs/advanced/events/
Long story short I am cowboying some code in which a custom framework I am using allows me to insert a script to manipulate the page to do what I want.
I want to fire a function, but only after the textbox I want to use has been populated from the webservice that gets called.
In Jquery/Javascript is there anyway to call a function like the jquery change function, but one that can detect when the textbox has been changed from javascript, and not by the user in the browser.
I currently just have:
$("#mytexbox").on('input propertychange paste change',function() {
doSomething();
});
But this does not fire when the original function in locked code sets the value of the textbox.
Note: I can not just overload the original function as most of it is built up from dynamic server side code that I can't mimic in Javascript.
I also want to avoid having to use setTimeout() as this is unreliable and not really a nice solution.
Thanks in advance!
Maybe you can use a hidden div or input and check the changes on this instead of changes on #mytextbox. Obviously, the user can not change the hidden div, but the script can. You get the trick? ;)
I have a textarea which uses a jquery plugin to resize itself while the user types in it.
The problem is, I want users to be able to edit things they've already typed. However since the textarea starts with 35 cols, 1 row, if the user had a long message he typed, then it doesn't completely show, only one line shows which cuts off.
Is there a way to simulate a keypress event in that textarea, so that the text resizing will fire up and resize the textarea?
There's no way to programatically call the text resize function.
Just trigger the keypress event on that textarea:
$(function(){
$('textarea').trigger('keypress');
}).
if there are multiple textareas, and you want to trigger the event on a specific textarea that has an id, of course the syntax becomes:
$(function(){
$('#myTextarea').trigger('keypress');
}).
If this is your own code, then you can just call your function
Your text area likely already has some function that gets called on each keystroke. The simplest way for you is then to call this same function when your page loads and that's it.
<textarea onkeypress="someFunc();" />
just call this someFunc when page loads and it should do the same thing as if you pressed a key.
Not written by you? Using third party plugins then
If you're using some sort of a jQuery plugin (not your own) then you should check whether it provides this functionality to initially set text area's size. If it doesn't then I suggest you switch to a different plugin that does that. Or write your own if you know how.