I am a novice coder so I am having trouble getting this to work.
I have a javascript that scrolls the content of a <textarea> tag to bottom on button click, but when I add NicEdit plugin in it the script doesn't work.
I've already tried all the alternative ways to get it to work by creating external divs and wrappers but I'm sure it's coz of NicEdit.
Working Script Without NicEdit: http://jsfiddle.net/gab4qhc1
Not working script with NicEdit: http://jsfiddle.net/sgdLzjau
Kindly help me to get the script working along with nicedit.
Thanks
First of all, I would recommend you to use CKEditor or TinyMCE because nicEdit is not in active development (http://nicedit.com/docs.php).
Let's come to the problem, There was an error in console bkLib.domLoad[i] is not a function(I don't know what is bkLib) so what I did is, I removed that function and removed JS code
nicEditors.allTextAreas({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript']});
from HTML file and added in the script file (I think it is good to separate JS and HTML code if possible) as following
HTML
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<textarea id="textarea" cols=30 rows=5 >
Please presse enter Please presse enterPlease presse enter
Please presse enterPlease presse enterPlease presse enter
Please presse enterPlease presseenter
Please presse enterPlease presse enter
Please presse enter
</textarea>
<button id="button">click</button>
Script
$(document).ready(function(){
nicEditors.allTextAreas({buttonList : ['fontSize','bold','italic','underline','strikeThrough','subscript','superscript']});
$("#button").click(function(){
var textArea = $('.nicEdit-main');/*replace #textarea with .nicEdit-main*/
textArea.scrollTop( textArea[0].scrollHeight - textArea.height() );
});
});
(Not need to modify CSS)
Why #textarea selector is not working and .nicEdit-main is working
So, the reason behind this is every HTML based text editor use there own wrapper instead of textarea to make it more customizable like to apply bold, italic effects and in nicEdit they use a div with class nicEdit-main.
I hope this will help you to solve your problem. Happy Coding... :)
Related
I'm working on a product where my requirement is when user focus on particular text box then change the background color of particular tag using the class of that tag inside iFrame. I have tried few solutions from stack but got no luck.
Here is my code
Below is Html code.
<input type="number" class="form-control bodyStyle" name="bodyFontSizeDesk" id="bodyFontSizeDesk" value="" placeholder="px">
Below is my js code.
$('.bodyStyle').on('focus', function() {
$('iframe').contents().find(".headings").css('background', 'red');
});
Below is the tag inside iframe.
<h1 class="headings">Street artist & painter based in New Delhi.</h1>
Any lead will be appreciated.
Thank you.
Is there a way to add unbound label (for guidance purposes) to quick-create form? Only way I have found is to create a web resource like:
<html>
<body>
<label>some text</label>
</body>
</html>
And include it on a form. This seems to work for main forms; as for localization - it can be done like:
<html>
<body>
<label id="label"></label>
<script>// fetch and setup label content</script>
</body>
</html>
The issue is - there is no such option for quick create forms. Also it seems overly complex. Is there a simpler way how to include simple label/text for guidance purposes?
Easy way I could think of is using setFormNotification and it works in Quick Create form also. You can fetch & setup whatever you want for localization.
if (Xrm.Page.ui.getFormType() === 1) {
Xrm.Page.ui.setFormNotification("Note: Please do so and so", "INFO", "someUniqueName");
}
Also, when you fill the attribute description in Entity customizations that text will show as a tooltip on mouseover on form control label (Thought of mentioning, ignore if it's not useful for you).
Another option is like using Multiline textbox or Textarea control as a placeholder to show guidance text. Make it read-only & don't display the label in the form.
Hey if anybody knows http://jscolor.com/ I'm trying to have it in html without showing the hex code. I can't find where to hide the text in the long js file, any tips would be appreciated.
Use {valueElement:null}. Example:
<button
class="jscolor {valueElement:null,value:'66ccff'}">
</button>
More info:
http://jscolor.com/examples/#example-custom-look
i have an issue with innerHTML and getElementsById(); method but I am not sure if these two methods are the root of the issues i have.
here goes my code :
<script type="text/javascript">
function clearTextField(){
document.getElementsById("commentText").value = "";
};
function sendComment(){
var commentaire = document.getElementById("commentText").value;
var htmlPresent = document.getElementById("posted");
htmlPresent.innerHTML = commentaire;
clearTextField();
};
</script>
and my HTML code goes like this:
<!doctype html>
<html>
<head></head>
<body>
<p id="posted">
Text to replaced when user click Send a comment button
</p>
<form>
<textarea id="commentText" type="text" name="comment" rows="10" cols="40"></textarea>
<button id="send" onclick="sendComment()">Send a comment</button>
</form>
</body>
</html>
So theorically, this code would get the user input from the textarea and replace the text in between the <p> markups. It actually works for half a second : I see the text rapidly change to what user have put in the textarea, the text between the <p> markup is replaced by user input from <textarea> and it goes immediately back to the original text.
Afterward, when I check the source code, html code hasn't changed one bit, given the html should have been replaced by whatever user input from the textarea.
I have tried three different broswer, I also have tried with getElementByTagName(); method without success.
Do I miss something ? My code seems legit and clean, but something is escaping my grasp.
What I wanted out of this code is to replace HTML code between a given markup (like <p>) by the user input in the textarea, but it only replace it for a few milliseconds and return to original html.
Any help would be appreciated.
EDIT : I want to add text to the html page. changing the text visible on the page. not necessarily in the source. . .
There is no document.getElementsById, however there is a document.getElementById. This is probably the source of your problem.
I don't think there is any document.getElementsById function. It should be document.getElementById.
"To set or get the text value of input or textarea elements, use the .val() method."
Check out the jquery site... http://api.jquery.com/val/
I have an automatically generated text-area (by the Erlang Web framework) that looks like the following:
<span class="form_input">
<textarea id="question_text" class="tinymce" name="question_text"> </textarea>
</span>
I'm trying to apply the TinyMCE editor to it, but what happens is the following:
http://img24.imageshack.us/img24/9250/tinyt.jpg
So, my textarea is not replaced, but it's "embedded" in the RTE.
I'm initializing TinyMCE as follows:
<script type="text/javascript">
tinyMCE.init({
mode : "specific_textareas",
editor_selector : "tinymce"
});
</script>
Any hint?
try the following, cause I remember I did something similar and you have to specify the id of the textarea.
<script type="text/javascript">
tinyMCE.init({
mode : "exact",
elements : "question_text"
});
</script>
from screen shot it looks like one or many of the following might be an issue.
1) doctype and rendering of your html/css rules
2) your css rules might conflict
3) your html structure broken, DOM
4) tiny mc javascript may be having issues with dom structure, which in turn can be caused by doctype, html structure
is this issues page specific? or it happens on every page?
are your form elements inserted and created by js?
I tried to put a different #id from name attribute and it works
<textarea id="question_text" class="tinymce" name="question_text"> </textarea>
to
<textarea id="question_text_textarea" class="tinymce" name="question_text"> </textarea>
and then later...
tinymce.init({selector:'textarea'});