I'm trying to color my HTML textarea element with CSS and/or JavaScript, so it would show different colors when I type something in.
For example, if I typed in "Hello world," I might want it to be green because it is a string. Yet, I can't figure out how to do this.(Reminder: this is for typing in on a page, not in the pages source code)I know it's possible because W3Schools did it.
But, I can't just seem to find out how to color it. Here is an example page from W3Schools. If you type something in, it will change color depending on what it is. I don't know how to make it do that though. Help would be much appreciated!
I suggest using library like https://markjs.io because it would be too much time consuming to implement that from zero.
Here's an example of highlighting "found words"
$(function() {
var $input = $("input[name='keyword']"),
$context = $("table tbody tr");
$input.on("input", function() {
var term = $(this).val();
$context.show().unmark();
if (term) {
$context.mark(term, {
done: function() {
$context.not(":has(mark)").hide();
}
});
}
});
});
More: https://jsfiddle.net/julmot/bs69vcqL/
Related
I have created a website with wordpress and i have a bulleted list on it as follows:
Pros
realistic colors
very sharp
The problem is sometimes (like each fifth time) when i load the page in Chrome, the letters of the word Pros are wrong like Qspt. See the following picture:
Does anybody have an idea?
Your hints got me on the right path. It was a javascript issue in 'jquery.appear':
if ($('.review-wrapper').length) {
$('.review-wrapper').appear().on('appear', function(event) {
// this element is now inside browser viewport
var $this = $(this);
if ($this.hasClass('delay-animation')) {
$this.removeClass('delay-animation');
}
});
$.force_appear(); // if it's right there on document.ready
}
It seems that force_appear was responsible for the wrong letters. So I am using force_process option now instead:
if ($('.review-wrapper').length) {
$('.review-wrapper').appear({force_process: true}).on('appear', function(event) {
// this element is now inside browser viewport
var $this = $(this);
if ($this.hasClass('delay-animation')) {
$this.removeClass('delay-animation');
}
});
}
I wish to change the color of certain words in the data-tooltip string.
<a class="link1" href="somejavascriptignore" data-tooltip="Click this to refresh the page">Refresh page</a>
The words i wish to color a different way is "refresh" how can i target those words without having to edit the source link? Is it possible with CSS?
UPDATE:
After a more careful reading of your question I got inspired. You're asking to highlight text in the tooltip, not just the element itself, so here's a way to do just that with JS (jQuery is used heavily):
$("[data-toggle=popover]").popover({ trigger: 'hover', html: true })
.on('show.bs.popover', function() {
var ele = $(this);
ele.attr('data-original-content', ele.attr('data-content'));
var origContent = ele.attr('data-original-content');
var searchTerm = "refresh";
var searchRegex = new RegExp(searchTerm, 'gi');
var newContent = origContent.replace(searchRegex, function(match) {
return "<span class='green-text'>" + match + "</span>"
});
$(this).attr('data-content', newContent);
})
.on('hidden.bs.popover', function() {
$(this).attr('data-content', $(this).attr('data-original-content'));
});
And here's a bootply to show it working
Basically on the callback for show I pre-parse the content and add in the highlighting like I discussed above. Then on hide I restore it so it doesn't compound on each popover call.
You have to do it this way because the popover node is generated and destroyed dynamically with each show and hide.
That was a fun problem.
Original Answer
Short answer: No, you need JavaScript.
Longer answer: You'll need to use JavaScript to get the content of the link, parse it for the words you want, surround them with <span> elements with a class that CSS can act on to change their color.
The end result would look like this:
<a class="link1" href="somejavascriptignore" data-tooltip="Click this to refresh the page"><span class="green-text">Refresh</span> page</a>
Rather than do this yourself, try a plugin. Like this one
This isn't exactly a duplicate, but the more detailed answer to your question can be found here: How to highlight text using javascript
I'm updating an html5 datalist dynamically, as the user types, with the following script:
$('#place').on('keyup', function() {
$.post('content/php/autocomp.php', { field: 'plaats', val: $('#place').val() }).done(function(response) {
$('#autocomp-places').html(response);
});
});
Which works fine except that the datalist often doesn't show right away. When I inspect the element the html is there but the datalist is not shown as soon as it's updated. How can I force it to show?
For the record: it works... I just wish it would always show the new suggestion right away.
Please use success instead of done method of ajax and try again.
$('#place').on('keyup', function () {
$.post('content/php/autocomp.php', {
field: 'plaats',
val: $('#place').val()
}).success(function (response) {
$('#autocomp-places').html(response);
});
});
I think I just have found a decent workaround for this!
Here is my pseudo-code:
As I type, I make async httprequests to get data.
When data is returned, i clear and re-populate the datalist.
If the current input field is still focused, manually call .focus() on the input element (this seems to force the data-list popup behavior to occur).
First, I would try to use one of already available solutions such as the jQuery UI autocomplete. It will shorten your development time and make the code free of typical bugs (not to mention getting the benefits from someone else work in the future).
If you really want to create your own version, I would make sure the list is cleared and repopulated with the following code:
$('#place').on('keyup', function() {
var posting = $.post('content/php/autocomp.php', { field: 'plaats', val: $('#place').val() });
posting.done(function(data) {
$('#autocomp-places').empty().append(data);
});
});
I'm trying to use the placeholder="xxx" attribute in my web application, and I don't want to have a special visual for IE9. Can people throw out some good suggestions for achieving this functionality in IE9?
I've found a couple links on here but none of the suggested scripts were sufficient... and the answers were from mid-2011, so I figured maybe there is a better solution out there. Perhaps with a widely-adopted jQuery plugin? I do not want to use anything that requires intrusive code such as requiring a certain css class or something.
Thanks.
EDIT - I also need this to work for password input fields.
// the below snippet should work, but isn't.
$(document).ready(function() {
initPlaceholders()();
}
function initPlaceholders() {
$.support.placeholder = false;
var test = document.createElement('input');
if ('placeholder' in test) {
$.support.placeholder = true;
return function() { }
} else {
return function() {
$(function() {
var active = document.activeElement;
$('form').delegate(':text, :password', 'focus', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && _val == _placeholder) {
$(this).val('').removeClass('hasPlaceholder');
}
}).delegate(':text, :password', 'blur', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && (_val == '' || _val == _placeholder)) {
$(this).val(_placeholder).addClass('hasPlaceholder');
}
}).submit(function() {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
$(':text, :password').blur();
$(active).focus();
});
}
}
}
We just researched the same thing. We decided on reusing this gist, by Aaron McCall, after making some minor changes. The main advantage is that it's simple, easy to understand code:
Remove the kernel and setup_placeholders parts. Just call it immediately in an anonymous function.
Add var before test.
For browsers that support placeholder, it simply falls back to that. It also handles new input elements (note the use of delegate) in existing forms. But does not handle dynamic new form elements. It could probably be modified to do so with jQuery.on.
If you don't like this one, you can use one of the ones here. However, some of them are overcomplicated, or have questionable design decisions like setTimeout for detecting new elements.
Note that it needs to use two pairs of parens, since you're calling an anonymous function, then calling the returned function (this could be factored out differently):
(function () {
// ...
})()();
I wrote a jquery plugin a while back that adds the placeholder support to any browser that does not support it and does nothing in those that do.
Placeholder Plugin
Here's a jQuery plugin that works with password fields as well. It's not as tiny as the code suggested by Matthew but it has a few more fixes in it. I've used this successfully together with H5Validate as well.
http://webcloud.se/code/jQuery-Placeholder/
I have a Prototype snippet here that I really want to see converted into Mootools.
document.observe('click', function(e, el) {
if ( ! e.target.descendantOf('calendar')) {
Effect.toggle('calendar', 'appear', {duration: 0.4});
}
});
The snippet catches clicks and if it clicks outside the container $('calendar') should toggle.
Are you trying to catch clicks anywhere in the document? Maybe you could try...
var calendar = $('calendar');
$$('body')[0].addEvent('click', function(e) {
if (!$(e.target).getParent('#calendar')) {
var myFx = new Fx.Tween(calendar, {duration: 400});
myFx.set('display', 'block');
}
}
I'm not sure how you are toggling visibility but the way Fx.Tween.set works allows you to change any CSS property. You may want to look at http://mootools.net/docs/core/Fx/Fx.Tween for other possibilities.
Also, notice that I wrapped e.target using a $. This is specifically for IE. I wrote a post about this here under the sub-heading "Mootools Events Targets".
Lastly, I factored out $('calendar') so that you are not searching the DOM every time.