I am looking for a javascript that can help me to change the color of a text inside the textarea tag. For example, to have a variable in the javascript:
var a = '<div class="carleft"><p class="coto1">';
now, the javascript should make the text that is inside the variable, to be displayed as bold with red color in the textarea.
See this previous question/answer: jQuery wrap selected text in a textarea
Inner HTML of the textarea element you cannot change the styles/colors of the partial words or characters.
You should use or some other element to implement this.
You can consider the
contenteditable="true" attribute for this purpose.
By using this attribute you can dynamically edit any html element. Which was styled before.
A textarea does not support different styles or colors in the text. You can use contenteditable="true", but that will probably give the user more freedom than you want. I think a better option would be to use a library like CodeMirror or MDK-Editor.
Related
How is it possible to highlight the code inside a pre element? There is already questions about highlighting it, but the answers is all in JQuery. Is it possible to do it without the tags and it's id in JavaScript and not JQuery. I don't want the whole code block to be the same colour I want every tag-open and tag-close to be a colour, the tag value to be another colour and the attributes and it's value to be another colour.
document.getElementById("idofpre").style.color="#99999";
Have you tried this?
document.getElementById("the_id_of_pre_block").style.property="value";
The upper code will get the ID of the element and update the style. Second thing you can use TagName too:
document.getElementsByTagName("pre").style.property="value";
Or else you can use jQuery (the easier way but not your way) to style the content. Using this:
$(document).ready(function() {
$('pre').css('background-color', '#anyhexcode');
});
This will change the background-color of all the text placed inside the pre block. That's what you can do with JavaScript.
One more thing:
You are using onload=hightlight() but you are having a function as colorize() are you sure that's good? I think you need to change that!
Like attribute selectors in CSS, is it possible to apply style on text which is in bold inside a DIV. For example I can select a DIV using CSS attribute selector like below
div[attr = value]{
...
}
Is there any way to select Bold text like above selector? If JavaScript there are several ways to make that work but I am just looking for possibility of CSS solution. And my target is only Chrome
No. CSS doesn't provide any selectors that operate based on the style of an element.
this should be quite easy.
div b{font-weight:normal;}
this will select every <b> tag contained within every <div> tag, and set the font weight to normal.
If you wanted to be specific, use the div class or id.
#someDivId b{font-weight:normal;}
If your bold text is not defined with <b> tags, but you know what tags are used, such as span, then you might try,
span[style*="font-weight"]{font-weight:normal !important;}
http://jsfiddle.net/G8NaB/
Hope this helps...
According to http://www.w3.org/TR/css3-selectors/#attribute-selectors
[att*=val] Represents an element with the att attribute whose value
contains at least one instance of the substring "val". If "val" is the
empty string then the selector does not represent anything.
So you may try:
div[style*=bold]{
...
}
This will work if you apply inline styles.
You can try this fiddle.
HTML
<div data-role="page">Bold text</div>
CSS
div[data-role~="page"]{font-weight:bold;}
Hope this helps.
I have several telerik radcomboboxes inside a div with various id's. I want to find all of them and disable them without using those id's like say finding the tag name using javascript.
Please help
Each RadControl renders a specific CSS class identifying the type of the control on the control container element. Additionally the JS object is an expando of the container element - control.
So, you can use this: $('.common-container-class-name .RadComboBox').each(function() { this.control.disable(); });
Not sure what a Rad Combo Box is but it seems like different types of input / text elements so try:
$('.someContainerDiv input').attr('disabled','disabled');
Change input for whatever the element is, like the <textarea> tag.
I have a contenteditable div that I want users to be able to select a portion of, and then click a button to wrap a div with some class and styles around.
The div I want to wrap around:
var newNode = $('<div class=\'selectedFont\' style=\'text-align=center;\'>');
The methods I need to use are in the title, I'm looking for an example.
Thanks.
My answer to this related question does what you need: apply style to range of text with javascript in uiwebview
I need to make a div layer so that when you click on it you will have your cursor there blinking and you can insert/delete text just like <input type="text"> does, except that I do not want to use it as it is slightly too limited to my case.
I can definitely use JavaScript.
DIV element has (other elements as well) contentEditable property that you can set in Javascript to true.
getElementById('YourDiv').contentEditable = true;
You can make the div editable by setting its contentEditable attribute / property to true. However, for anything that is slightly more powerful or flexible then very basic editing, you might want to look at existing solutions such as:
TinyMCE
Kevin Roth's RTE
The YUI editor
Jquery can be used like this:
$.('#yourDiv').click(function() {
$(this).attr('contenteditable', 'true');
});
I suggest you to use a textarea, and if that's not enough, use a WYSIWYG editor like tinyMCE or FCKeditor.
as I understand your problem, you can resove it by adding textarea into your div. It is very simply to make this textarea autosize to occupy whole div area and looks like this div.
As for contentEditable, I have seen some browsers, supported this feature for div-element and does not. Anyway, you can use iframe in your div. It's document-element can have contentEditable.
contenteditable attribute could be used for this purpose. Following code line has been tested in IE7 and Firefox 3.0.10. One part, I have noticed that this attribute should be used in lower case only; else it wont work in Firefox.
<div id="Div_ID" contenteditable="true" tabindex="0">
Enter text here
</div>