I have html textarea dynamically it's content changing line by line. I want to add some styles to the updated or modified line content. Is there any windows selection, like properties, to do it??
What I want is make user feel, that the change has happen. Or any other way to achieve it?
There is no simple way to achieve it just by CSS with textarea, but the problem is solvable for sure :)
you can replace textarea with <div contenteditable><p></p></div>
you can set textarea CSS: background: transparent and manipulate some element below the textarea
you can modify this jQuery plugin: https://github.com/cotenoni/jquery-linedtextarea to manipulate specific lines (some CSS work required, cause by default you can manipulate just left column)
you can set custom background for textarea and move it up and down to specific line by background-position: 0 X
Related
So I have a HTML, JavaScript, and CSS files;
I have an array in my JavaScript file and I made an empty paragraph in my html file, then changed the innerHTML of the paragraph with id "par" to display the array. When I run the html, the array is displayed but it continues off on the page that I need to scroll right to view it all. I want it to fill up the whole page, and break up into lines, but I cannot seem to figure out how.
In my CSS file, I have tried doing
#par {width: 150px;height: 150px;}
and even tried messing around with font-align but I cannot seem to figure out how to do it. Can anyone help me?
You could use a <pre> tag for handling your literal input. Also see the white-space property of CSS. This will literally interpret your input like a <pre> tag would.
Try white-space: pre and see if that suits your needs. If you are not formatting your array and want it to automatically break once it hits the edge of the screen, try white-space: pre-wrap.
If you use "par" as id of html element on your page, you need to update your css and change the dot to hash as:
#par {width: 150px;height: 150px;}
I want to add Custom set of cursor on my website. I have added that cursor but while hover anything that cursor change I have the Set of Pointers including both .ani & .cur required for my site. I have already tried :
This is the JavaScript that I used !
<script>
document.getElementsByTagName("body")[0].style.cursor = "url('cursor/blue.cur'), auto";
</script>
My cursor:
bluecursor
I have its Set , but I dunno the code to set while cursor for crosshair ,help , wait etc.
cursorset
Is this possible?
All supported cursors can be enabled through CSS: http://www.w3schools.com/cssref/pr_class_cursor.asp
If you have to do this with javascript it seems as a bether idea to have a class in your css with the desired behaviour/style and then only set that class with javascript.
If you want to do this, it is better to do it in css:
For example, if you wanted to have the cursor change to your custom cursor only when hovering over an anchor tag then you can do this:
a {
cursor: url(cursor/bluecursor.cur), auto;
}
If you wanted to have the cursor ALWAYS use custom cursors, then you have to decide when to use a special cursor. You can do this with classes:
.help {
cursor: url(cursor/help.cur), auto;
}
Then apply that class to the particular element that you want to display the custom cursor:
<div class="help">Help Me</div>
There is no way (to my knowledge) to simply tell the browser just replace all cursors with a custom set.
This code worked for me (not JS but jQuery):
$("body").css('cursor', 'url(arrow_blue.cur) , auto');
$(".button").mouseover(function(){
$(this).css('cursor', 'url(arrow_blue.cur) , auto');
});
Don't forget to override if there is any specific items like buttons, etc... Just defining a cursor for body does not cover the elements under, if something special is defined for them. So you have to override, for mouseover etc...
Is it possible to have multiple texts over each other and yet only one of them readable/visible, without setting the background-color of the text container of the desired readable one ?
I dream about something like:
text-background: hide-other-text;
more info:
I need the background color of the elements behind the text, and text "below" needs to go up to the text on top.
You could use jQuery to hide the one piece of text, and add the other piece of text, if you so desired. That might be much simpler in this case.
Sorry if this is a pain the ass, but I could really use some help here:
http://dev.rjlacount.com/treinaAronson-form/
The contact form can be seen by clicking the "Contact" button on the top left. I'm using the jqTransform jQuery plugin to style it. It's hidden initially with display:none; applied to the div with the ID "panel", and slid in with the following:
$("#flip").click(function(e){
e.preventDefault();
$("#panel").slideToggle("3000");
});
With this setup, the contact form isn't displaying the current value of the select box inside its field. If I instead remove the display:none; rule for the panel div from my CSS, and hide the form after the page has loaded with:
$("#panel").hide();
The form display correctly. Does anybody know how I can make this work and avoid the flash of an open panel I get if I hide it with jQuery after the page loads?
Thanks so much for any advice. Please let me know if I can provide any more information.
The problem is, jqtransform is setting width for a label (currently visible value in a transformed select) to match the width of original select.
If the original select (or its parent) has display:none set, and it doesn't have any css width specified, the result of .width() on that element is zero.
You can in fact check (using firebug or google chrome dev tools), that it's not that contact form isn't displaying the current value of the select element, but rather displaying it with a width equal to zero.
The easiest solution in your case, is to set (in your css file) fixed width for the selects that are part of a contact form. That way, even though they will be hidden at first, the jqtransform will set correct width for label. For example:
/* css declaration */
#change-form select {
width: 390px;
}
Side note: there are of course other ways to make it work, including tweaking the jqtransform script to fit your specific use case. Part of the script related to setting mentioned width of a label starts on line 289.
I have about 7 textareas on a web page, all of them are rich text editors using TinyMCE. However at page load only 1 of them is visible and the rest of them hidden. The user can click a 'show' link which would display the remaining textareas one by one.
However, I have a weird problem. All the textareas are setup like this:
<textarea cols="40" rows="20"></textarea>
However, only the textarea displayed on page load is the full size I want it to be. The remaining textareas are really small when I show them. So I'm thinking that perhaps they aren't rendered because they are hidden on page load.
How can I remedy this?
Try adding some CSS to textareas that are hidden.
For example, use
<textarea cols="40" rows="20" style="width: 40em; height: 20em"></textarea>
I think I ran into this, where TinyMCE's CSS overrides some of the default CSS behaviour. I ended up having to "re-override" it, and eventually edited the TinyMCE's css pages.
I think this is an MCE bug, or at least a feature that MCE lacks.
Since I wanted to style my input box in CSS, not in HTML (yuck) I tried
visibility: hidden;
instead of
display: none;
and everything worked again.
I believe that the latter causes the element to take up no space, which trips up the MCE code which detects the width and height of the element.
When loading TinyMCE with jQuery, this problem can be solved as such:
1- On your textarea, specify a height in the inline style attribute:
<textarea style="height:200px;" class="tinymce" name="myfield"></textarea>
2- add a callback function when instantiating a TinyMCE editor. e.g. tinymceLoaded
$('textarea.tinymce').tinymce({
// Location of TinyMCE script
script_url : 'PATH_TO_TINYMCE.js',
// General options ...
// Theme options...
// callback function
init_instance_callback : "tinymceLoaded"
});
3- Set the height of your Editors in the tinymceLoaded function:
function tinymceLoaded(inst){
// get the desired height of the editor
var height = $('#' + inst.editorId).height();
// when the editor is hidden, the height calculated is 0
// Lets use the inline style text to solve this problem
if(height == 0){
height = $('#' + inst.editorId).css('height'); // 200px
height = height.replace(/[^0-9]/g, ""); // remove all non-numeric characters to isolate the '200'
}
// set the height of the hidden TinyMCE editor
$('#' + inst.editorId + '_ifr').css({height: height + 'px'});
}
Without having a few more specifics about your actual setup and how you're doing the vaious display/hide functionality it's hard to give a definitive answer.
I can throw a few general thoughts out though:
Do they render properly when you don't hide them on page load? That would give a definative answer for at what point the bug's occuring.
When you toggle the view of the textarea can you explicity set the row/col attributes at the same time?
Can you use css (maybe with !important) to set textarea width and height than to test if that has an effect?
From TinyMCE inside hidden div are not displayed as enabled when we put the div visible, user's slolife answer helped me:
Try calling tinyMCE.init(...) after you unhide the containing div.
I've been having the same issue where the height of the hidden textarea controls that were converted into TinyMCE editors were too small. Setting visibility to none worked but leaves a big empty space in its place.
The following solution worked well for me:
Do not hide your textarea controls initially on page load
Instead, set all of your TinyMCE's init config as follows:
tinyMCE.init({
...
init_instance_callback : "onInstanceInit"
});
In your onInstanceInit function, hide the initialized TinyMCE editor dynamically
If you show this editor afterwards, the height will be normal again just like it was never hidden
If you use production version of TinyMCE, you probably forgot to copy folders that tinymce.min.js needs. You need to have folders langs, plugins, skins and themes in the same folder as your tinymce.min.js file.
Another reason for the hidden thing is when you remove elements from the dom with tinymce initialized on them. You need to remove tinymce from this element first, so you will avoid weird behaviour when initialize new tinymce elements.
So for exemple :
removeElementWithTinymce = function(elementToRemove){
var parent = elementToRemove.parentNode;
tinymce.remove(elementToRemove.getAttribute('id'));
parent.removeChild(elementToRemove);
};
That's it.