Is there a neat way of highlighting texts in textarea on the fly while typing?
I would basically type in:
This is a [[note]] to do on friday.
on a textarea, then, using a highlighting library, I would call it in like this:
function FindAllNotes() {
var note = /^(?:\[{2}(?!\[+))(.+)(?:\]{2}(?!\[+))$/g
, input = ($(#textarea).val()).match(note);
$(#textarea).highlightWithinTextarea({
highlight: [input],
className: 'yellow'
});
}
$(#textarea).on('keyup', function () {
FindAllNotes();
});
But the problem is, everytime I type, it works and highlights notes enclosed in [[ ]], then I lose the cursor/focus on the textarea.
The plugin you linked to, can handle regular expression just as you want (although you should remove the ^ and $ from it, to not try to match the whole string).
$(function(){
$('.example').highlightWithinTextarea({
highlight: /(?:\[{2}(?!\[+))(.+)(?:\]{2}(?!\[+))/g,
className: 'highlight'
});
});
.example{
width:500px;
height:250px;
}
.highlight{
background-color:tomato;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://lonekorean.github.io/highlight-within-textarea/jquery.highlight-within-textarea.js"></script>
<link rel="stylesheet" href="http://lonekorean.github.io/highlight-within-textarea/jquery.highlight-within-textarea.css">
<textarea class="example">This is a [[note]] to do on friday.</textarea>
keep in mind that you need to include the css file from the plugin which wraps/aligns the textarea with the div text
You can use $("#textarea").focus(); to manually set the focus of a textbox. Maybe try calling this after your highlight function like the following:
$(#textarea).on('keyup', function () {
FindAllNotes();
$("#textarea").focus();
});
Related
I want to make the text as on the home page https://laracasts.com/
use for this library
https://mattboldt.com/demos/typed-js/
Question
How do I make when I click on text the animation stops and I can write my text
here is my code
<h1>
<span class="header-title-accent" id="typed" contenteditable="true" spellcheck="false" > Front-end Developer</span>
</h1>
<script>
$('document').ready(function(){
var typed = new Typed('#typed', {
strings: ['First ^1000 sentence.', 'Second sentence.'],
backSpeed:50,
typeSpeed:60,
cursorChar: '|||',
});
});
</script>
You could create 2 listeners on the input field to start() & stop() the Typed instance on blur & focus respectively. See the docs for more info: https://mattboldt.github.io/typed.js/docs/#typed
Example:
$('#typed').on('focus', function(e) {
typed.stop();
});
// You may not need/want this one...
$('#typed').on('blur', function(e) {
typed.start();
});
Codepen
I would like to live format an input box with Numeral.js.
I tried something like this.
$('#exchangeInputFirst').keyup(function () {
//eur formatting
numeral.language('sk');
$('#exchangeInputFirst').val(numeral($('#exchangeInputFirst').val()).format('0,0.00$');
//to HUF format $('#exchangeInputSecond').val($('#exchangeInputFirst').val()*$('#first').html());
numeral.language('hu');
var string = numeral($('#exchangeInputSecond').val()).format('0,0.00$');
$('#exchangeInputSecond').val(string);
});
The second function is working perfectly (to HUF format), but the first not.
I think you are missing the numeral language file:
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/languages.min.js"></script>
I cannot reproduce your situation unless I do not include the languages js file. Try your example and hit a key on the first input box:
var a = false;
$('#exchangeInputFirst, #exchangeInputSecond').click(function () {
$(this).caret(0);
});
$('#exchangeInputFirst, #exchangeInputSecond').keyup(function(){
if(a == false){
$(this).val('');
a = true
} else {
numeral.language($(this).data('language'));
$(this).val(numeral($(this).val()).format('0,0.00$'));
$(this).caret(0);
}
});
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/numeral.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/numeral.js/1.5.3/languages.min.js"></script>
<script src="http://zikro.gr/dbg/html/jquery.caret/dist/jquery.caret-1.5.2.min.js"></script>
<input type="text" data-language="sk" id="exchangeInputFirst">
<input type="text" data-language="hu" id="exchangeInputSecond">
UPDATE
You also have a problem with the cursor position. You can solve this by using this jQuery plugin acdvorak/jquery.caret to set the caret position to the beggining of the input each time characters are typed like this:
$(this).val(numeral($(this).val()).format('0,0.00$'));
$(this).caret(0);
Also, I have included the language in input's data like data-language="sk" and now you can read it directly in the keyup event like this:
numeral.language($(this).data('language'));
See my updated snippet. It should now works as you want.
I am trying to add and remove a span element dynamically. it's throwing syntax errors like
expected ')' and expected ';'
please help me to fix it.
<script type="text/javascript">
$(document).ready(function () {
$("input[data-required='true']").focus(function () {
$(this).css({ 'background-color': 'red' }).after("<span class="label_error;"style="color:red;font-size:10pt">This field is required</span>");
});
$("input[data-required='true']").blur(function () {
$(this).css({ 'background-color': 'white' }).remove("<span class="label_error;"style="color:red;font-size:10pt">This field is required</span>") ;
});
});
</script>
The way that you are concatenating the values in your HTML string is wrong,
.after("<span class='label_error' style='color:red;font-size:10pt;'>" +
"This field is required" +
"</span>");
To fix this issue either you can use single quote in your string wrapped by double quotes or try to escape the double quote by using \ like "avi\"s code is wrong".
On top of all, the best approach would be creating element by using jquery,
.after($("<span>", {class : 'label_error',
style : 'color:red;font-size:10pt;',
text : 'This field is required'
}));
This would be more readable and maintainable. And I forgot to spot another one error that you made in your code. You are using .remove() in a wrong way,
$("input[data-required='true']").blur(function () {
$(this).css({ 'background-color': 'white' }).next("span.label_error").remove();
});
You have to select the relevant element from your $(this) object and invoke remove over it.
And the best approach for finishing up your task is, allot the styling works to be done to the css by writing rules with relevant selectors (said by #rory)
input[data-required='true'] {
background-color: white;
}
input[data-required='true']:focus {
background-color: red;
}
span.label_error {
color: red;
font-size: 10pt;
}
And the js would be,
var errorMsg = $("<span>", {class: 'label_error',text: 'This field is required'});
$("input[data-required='true']").focus(function() {
$(this).after(errorMsg);
}).blur(function() {
$(this).next("span.label_error").remove();
});
DEMO
You have two issues. Firstly you need to use different quotes to delimit the string to those you use within the string. Helpfully, in JS you can use either single (') or double (") quotes to achieve the same purpose. Also, the class attribute should not have a trailing ;. It can be helpful to use a text editor which has syntax highlighting as it makes it nearly impossible to miss mistakes like that.
Your second problem is that the remove() method expects a selector, not a whole HTML string. To remove the span which was appended in the focus event, use next() to select it, then remove(). Try this:
$("input[data-required='true']").focus(function () {
$(this).css({ 'background-color': 'red' }).after('<span class="label_error" style="color: red; font-size: 10pt">This field is required</span>');
});
$("input[data-required='true']").blur(function () {
$(this).css({ 'background-color': 'white' }).next('span').remove();
});
Finally, note that it is much better practice to define your styles in CSS as it separates the HTML/JS from the styling rules, and helps make the JS shorter as well. Try this:
input[data-required='true'] {
background-color: white; /* transparent may work here too */
}
input[data-required='true']:focus {
background-color: red;
}
span.label_error {
color: red;
font-size: 10pt;
}
$("input[data-required='true']").focus(function () {
$(this).after('<span class="label_error">This field is required</span>');
}).blur(function () {
$(this).next('span').remove();
});
Working example
I found here on Stackoverflow similar topics but not the same.
I am using jquery Minicolors on my project: https://github.com/claviska/jquery-miniColors/
Everything work fine, but I need to do easy thing - I need to get actual color value and write it to the HTML document. So for example I need to do this:
<p><script>document.write(actualColor);</script></p>
Simply just write the actual color code anywhere in static HTML. I am very bad in JS and I didnt find some working solution.
My minicolors code look like this:
<script>
$(document).ready( function() {
$('.color-picker-1').each( function() {
$(this).minicolors({
defaultValue: $(this).attr('data-defaultValue') || '',
inline: $(this).attr('data-inline') === 'true',
});
});
});
</script>
And I use just this input for picking color:
<input type="text" id="inline" class="color-picker-1" data-inline="true" value="#4fc8db">
What can I do? I guess solution is very easy.
On change of the color, re-assign the value to the input element so that it contains new value. Then you can use that value. If you want, you can create another hidden input element to store the color values as well.
'change' event gets triggered when color value is changed. This is where all DOM manipulation should go into.
$("#inline").minicolors({
change: function(hex, opacity) {
$("#inline").val(hex);
}
});
On your code:
<script>
$(document).ready( function() {
$('.color-picker-1').each( function() {
$(this).minicolors({
defaultValue: $(this).attr('data-defaultValue') || '',
inline: $(this).attr('data-inline') === 'true',
change: function(hex, opacity) {
$(this).val(hex);
}
});
});
});
</script>
I want a string of text to change color from default to #c30 when I click a button somewhere on the page, and it changes back to default when I click the button again.
My code looks like this:
$("#button").click(function() {
var anno = $(#text);
if (anno.css('color') == '#c30') {
anno.css('color', '');
} else {
anno.css('color', '#c30');
}
});
But it doesn't seem to work on FF3. Works in IE though. Any idea?
I would try to separate the presentational details as much as possible, i.e. change the classes to which the element belongs, and leave the colour information in a separate stylesheet.
$("#button").click(function() {
$("#text").toggleClass('somethingDescriptive');
});
If you use named colors, this will work.
$("#button").click(function(){
$("#text").css('color', $("#text").css('color') == 'white' ? 'black' : 'white');
});
Hex values do not.
This is a bad way to do it anyways, I agree with the most voted up answer here. So I have updated my answer after some research.
<style type="text/css">
.color1 { color:#fff; }
.color2 { color:#000; }
</style>
<script>
$("#button").click(function(){
$("#text").toggleClass('color1').toggleClass('color2');
});
</script?
<div class="color1">Text</div>
The color #c30 is converted to #cc3300 - that's why it is not working.