I have a simple "dice" roller, where the user can choose how many sides and how many dice based on input.
My issue is that if the user selects a large number of dice, it will force the page to scroll left in order to view the other dice.
I have tried to keep these dice within a div , even trying word-wrap: break-word; within the css, but this stacks the dice on top of eachother.
heres my code.
$(document).ready(function() {
$('#autoLoadR').click(function() {
$('#buttnLodr').html("");
if ($('#sideNum').val() < 100) {
if ($('#diceNum').val() < 20) {
for (i = 0; i < $('#diceNum').val(); i++) {
let index = i + 1;
let roll = index;
sidesAmount = $('#sideNum').val();
roll = Math.floor(Math.random() * sidesAmount) + 1;
$('#buttnLodr').append("<span id='diceBox'>" + roll + "</span>")
}
} else {
alert("Please enter a number for less than 20 for number of dice")
}
} else {
alert("Please enter a number less than 100 for number of sides")
}
});
});
body {
background: #add8e6;
margin-left: 2%;
margin-top: 2%;
width: 500px;
}
#spaceR {
color: lightblue;
}
.rollMeNow {
display: block;
color: #fff;
cursor: pointer;
border: 1px solid #d7d7d7;
font-size: 72px;
height: 156px;
line-height: 156px;
width: 256px;
background: #df1f3b;
border-radius: 4px;
text-align: center;
}
#optionDice {
border: solid;
width: 100%;
}
#diceBox {
border: solid;
padding: 7px 14px;
box-shadow: 10px 5px;
margin: 2%;
}
#rollTable {
width: 100%;
background: #fff;
height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://aaronlilly.github.io/CDN/css/bootstrap.min.css">
<div id="optionDice">
<h1>Number of Dice :
<span id='spaceR'> :</span>
<input type="text" id="diceNum" placeholder="Dice" size="5" style="margin-top: 10px;padding-bottom: 5px;padding-top: 4px;">
</h1>
<h1>Number of Sides :
<input type="text" id="sideNum" placeholder="Sides" size="5" style="margin-top: 10px;padding-bottom: 5px;padding-top: 4px;">
</h1>
</div>
<br><br>
<div class="rollMeNow" caption="Populate" id="autoLoadR">Roll</div>
<br>
<h1>
<div id='rollTable'>
<br>
<div class="container">
<div class="row">
<!-- <div class="col-sm"> -->
<div id='buttnLodr'> </div>
</div>
</div>
</div>
</div>
</h1>
#diceBox {
// ...
display: inline-block;
}
Also, some other suggestions:
you have some implicitly declared variables (i in your for loop and sidesAmount in that loop)
use const instead of let whenever you are not re-asigning a variable
why looping from 0, then add 1 and then store it to another variable. And then you overwrite that variable with Math.floor
try to avoid selecting DOM elements (event if its only single) by IDs. Always use class.
Related
I have a button of fixed size and various chunks of text. The length of the texts is different. How can I make the size of the text font change dynamically according to its length in order to fit the button boundaries properly? Thank you.
Well, depends. Is the height fix as well? If both height and width are fixed, you will have to calculate the fontsize via javascript.
In most of the cases two or three if conditions should be absolutely sufficient for the specific usecase.
function font_size_adjust () {
// Grab the string
var string = $('#button_text').text()
// Get the length in characters of the string
var string_size = string.length
// Build variable to change attribute
var font_size = 0
// Define logic for resizing, adapt this to your personal needs
if (string_size < 60) {
fontsize = '2vw';
} else if (string_size > 60) {
fontsize = '4vw';
} else {}
// Change fontsize
$('#button_text').css('font-size', fontsize)
}
// Call the function where- and whenever needed:
font_size_adjust();
// Example stuff
$('#toggle_small').click(function () {
$('#button_text').text('Now I am small again!')
font_size_adjust();
})
$('#toggle_big').click(function () {
$('#button_text').text('Now I am large again! Lets get this rollin! rollin! rollin! rollin!')
font_size_adjust();
})
#ctn {
display: flex;
float: left;
}
#button {
width: 45vw;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
font-family: Varela Round;
color: #FFF;
background: linear-gradient(126deg, rgba(143,61,217,1) 12%, rgba(109,35,177,1) 43%, rgba(101,34,162,1) 72%);
}
#ctn_toggle {
display: flex;
float: left;
}
.toggle {
background-color: lightblue;
font-size: 3vw;
padding: 10px;
border-radius: 25px;
width: 11vw;
text-align: center;
margin-right: 2vw;
font-family: Varela Round;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<html>
<body>
<div id="ctn">
<div id="button">
<p id="button_text">Make me small and big all day long this is so exciting! Let's go broooh!</p>
</div>
</div>
<div id="ctn_toggle">
<div id="toggle_small" class="toggle">
<p id="button_small">Click me to shrink!</p>
</div>
<div id="toggle_big" class="toggle">
<p id="button_big">Click me to expand!</p>
</div>
</div>
</body>
</html>
Otherwise, these are the options... :
#ctn {
display: flex;
float: left;
}
#button {
width: 20vw;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
}
#button_text {
font-size: 4vw;
}
#button2 {
width: 20vw;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
}
#button_text2 {
}
#button3 {
width: 20vw;
height: 10vh;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
margin-right: 1vw;
}
#button_text3 {
font-size: 4vw;
}
#button4 {
width: 20vw;
height: 10vh;
background-color: lightblue;
padding: 10px;
border-radius: 25px;
}
#button_text4 {
}
<html>
<body>
<div id="ctn">
<div id="button">
<p id="button_text">Fix button width and fix font-size</p>
</div>
<div id="button2">
<p id="button_text2">Fix button width and no specific font-size</p>
</div>
<div id="button3">
<p id="button_text3">Fix button width, fix button height and fix font-size</p>
</div>
<div id="button4">
<p id="button_text4">Fix button width, fix button height and no font-size</p>
</div>
</div>
</body>
</html>
So I taught myself coding a few years ago, and got it just enough to put together a few tools for work. I recently had to migrate my site out of CodePen and onto an actual web server. Now I'm having an issue where part of my javascript is executing properly (a portion that empties all other input fields when a user enters an input field using JQuery), but the button that calculates an answer will not work. I believe the .click is not picking it up. Either way I'm not getting error messages, the button just does nothing when I press it.
When I put the code in a snippet to share with you guys, it works (just like it did in CodePen), but the exact same code on my web host does not work. I'm really at a loss here and any help would be greatly appreciated. I feel like I'm missing some small line of code that's supposed to be included in all web files.
$(document).ready(function() {
//Clear out input fields when not selected
$("#sg").focusin(function() {
$("#density").val("");
});
$("#density").focusin(function() {
$("#sg").val("");
});
$("#pounds").focusin(function() {
$("#grams").val("");
$("#percentage").val("");
});
$("#grams").focusin(function() {
$("#percentage").val("");
$("#pounds").val("");
});
$("#percentage").focusin(function() {
$("#pounds").val("");
$("#grams").val("");
});
$(".input_field").focusin(function() {
$("#density").removeClass('highlight');
$("#sg").removeClass('highlight');
$("#pounds").removeClass('highlight');
$("#grams").removeClass('highlight');
$("#percentage").removeClass('highlight');
});
//Calculate on press of enter
$("#button").keypress(function(e) {
if (e.which == 13) {
alert("this is working");
}
});
$("#button").click(function() {
calculateButton();
});
//Calculate values on button hit
function calculateButton() {
function numberWithCommas(x) {
x = x.toString();
var pattern = /(-?\d+)(\d{3})/;
while (pattern.test(x))
x = x.replace(pattern, "$1,$2");
return x;
}
function removeCommas(x) {
x = x.replace(",", "");
return x;
}
var results = 0;
//Pulling information from input cells
var densityStr = document.getElementById("density").value;
var sgStr = document.getElementById("sg").value;
var poundsStr = document.getElementById("pounds").value;
var gramsStr = document.getElementById("grams").value;
var percentageStr = document.getElementById("percentage").value;
//remove commas from string and then convert string to number
var densityNum = Number(removeCommas(densityStr));
var sgNum = Number(removeCommas(sgStr));
var poundsNum = Number(removeCommas(poundsStr));
var gramsNum = Number(removeCommas(gramsStr));
var percentageNum = Number(removeCommas(percentageStr));
if (densityStr.length !== 0) {
var sgConversion = densityNum / 8.3454;
$("#sg").val(sgConversion.toFixed(3));
$("#density").addClass('highlight');
} else if (sgStr.length !== 0) {
var densityConversion = sgNum * 8.3454;
$("#density").val(densityConversion.toFixed(3));
$("#sg").addClass('highlight');
}
if (poundsStr.length !== 0) {
$("#pounds").addClass("highlight");
densityNum = document.getElementById("density").value;
var gramsConversion = poundsNum * 119.83;
var percentageConversion = poundsNum / densityNum * 100;
$("#grams").val(gramsConversion.toFixed(0));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (gramsStr.length !== 0) {
$("#grams").addClass("highlight");
densityNum = document.getElementById("density").value;
var poundsConversion = gramsNum / 119.83;
var percentageConversion = poundsConversion / densityNum * 100;
$("#pounds").val(poundsConversion.toFixed(2));
$("#percentage").val(percentageConversion.toFixed(2));
} else if (percentageStr.length !== 0) {
$("#percentage").addClass("highlight");
densityNum = document.getElementById("density").value;
var percentageDec = percentageNum / 100;
var poundsConversion = densityNum * percentageDec;
var gramsConversion = poundsConversion * 119.83;
$("#pounds").val(poundsConversion.toFixed(2));
$("#grams").val(gramsConversion.toFixed(2));
}
}
});
body {
margin: 0;
font-family: 'Lato', sans-serif;
background: #d2d2d2;
}
p {
text-align: center;
}
conatiner {
max-width: 1024px;
margin: 0 auto;
}
#navbarContainer {
background: #F44336;
overflow: hidden;
width: 100%;
margin: 0;
}
.navbar {
float: left;
display: block;
font-family: 'Lato', sans-serif;
height: 40px;
width: 200px;
line-height: 40px;
text-align: center;
background: #F44336;
text-decoration: none;
color: #212121;
}
.navbar:hover {
background: #E57373;
color: white;
}
.active {
background: #C62828;
color: white;
}
#formContainer {
width: 450px;
background: #FDFFFC;
margin: 50px auto;
padding: 0px;
border-radius: 8px;
overflow: hidden;
}
#formContainer header {
width: 100%;
height: 130px;
background-color: #3cba54;
overflow: auto;
color: white;
}
header h1 {
margin: 35px 0 0 0;
text-align: center;
line-height: 30px;
}
header h3 {
line-height: 40px;
text-align: center;
margin: 0;
}
#heading {
background-color: #3cba54;
height: 40px;
color: white;
margin-bottom: 25px;
margin-left: -30px;
}
#heading h3 {
line-height: 40px;
}
form {
padding: 20px 0 0 20px;
text-align: center;
}
label {
display: inline-block;
width: 220px;
text-align: right;
}
#myForm .input_field {
margin-left: 20px;
margin-bottom: 10px;
font-size: 20px;
padding-left: 10px;
width: 125px;
height: 35px;
font-size: 17px;
border-radius: 3px;
background-color: #E0E0E0;
border: none;
}
#button {
display: block;
border-radius: 6px;
width: 200px;
height: 50px;
padding: 8px 15px 8px 15px;
margin: 0 auto;
margin-bottom: 50px;
font-size: 16px;
box-shadow: 0 6px #540000;
background-color: #FF3636;
border: none;
outline: none;
}
#button:active {
background-color: #B81B1B;
box-shadow: 0 1px #27496d;
transform: translateY(5px);
}
.highlight {
background: #FFEB3B !important;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
</body>
</html>
Sometimes putting script tags before the elements on the page can cause issues. You can try to put the scripts at the bottom of the body like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="navbarContainer">
<a class="navbar" id="62" href="https://s.codepen.io/awheat/debug/MpMrEo/yYAyLDjQWgKr">326 IAC 6-2 Tool</a>
<a class="navbar" id="63" href="https://s.codepen.io/awheat/debug/gWmazm/NQkzYnjeQZyA">326 IAC 6-3 Tool</a>
<a class="navbar active" id="voc" href="https://s.codepen.io/awheat/debug/qVpPNm/VGAWNnJYBjZr">VOC Conversion Tool</a>
</div>
<div id="formContainer">
<header>
<h1>VOC Conversion Tool</h1>
<h3>(for conversion of VOC data to other units)</h3>
</header>
<form id="myForm">
<label>Density of Coating (lbs/gal): </label><input type="text" id="density" class="input_field">
<label>Specific Graviy: </label><input type="text" id="sg" class="input_field">
<div id="heading">
<h3>VOC Content</h3>
</div>
<label>Pounds per Gallon (lbs/gal): </label><input type="text" id="pounds" class="input_field">
<label>Grams per Liter (g/L): </label><input type="text" id="grams" class="input_field">
<label>Percentage (%): </label><input type="text" id="percentage" class="input_field"><br><br>
<input type="button" id="button" value="Calculate" autofocus>
</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
I want to create an input that holds an integer value. The input value will be increased by 1 if the caret-up button is clicked and decrease by 1 if the cater-down button is clicked.
My problem is the style of the down-caret is wrong. I would like to place the down-caret at the top of the blue rectangle.
Currently, the down-caret is at the bottom of the div. Below is an image of the currently output.
I tried several things like flex, absolute position, etc. But these are overlapping areas of the Red div and Blue div.
// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
input.value = parseInt(input.value) + parseInt(value);
}
/* style the qty div to display both input and buttons div in the same line*/
.qty {
width: 250px;
height: 50px;
}
/* add the wrapper div to easy styling the element*/
#remind_number_wrapper {
width: 230px;
float: left;
height: 100%;
}
/* adjust the height of the input to fit out the div parent, it easier to see*/
#remind_number_wrapper input {
width: 220px;
height: 100%;
}
/* style the buttons div to display input and caret in the same line*/
#buttons {
width: 20px;
height: 100%;
float: right;
display: block;
}
/* style the action button to fit the height of the div*/
.action_btn {
height: 25px;
}
#plus_remind {
font: 33px/1 Arial,sans-serif;
border: 1px solid red;
cursor: pointer;
}
#minus_remind {
font: 33px/1 Arial,sans-serif;
border: 1px solid blue;
cursor: pointer;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="qty">
<div id="remind_number_wrapper">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
</div>
<div id="buttons">
<!-- add className 'action_btn' to easier to style button in the same place-->
<div class="action_btn" id="plus_remind" onclick="addValue(1)">
<!-- change the fas to fa for the right class of font-awesome -->
<i class="fa fa-caret-up"></i>
</div>
<div class="action_btn" id="minus_remind" onclick="addValue(-1)">
<i class="fa fa-caret-down"></i>
</div>
</div>
</div>
Your description is somewhat unclear, if I understood you correctly, check out the example below to see whether it is what you want or not.
* {
box-sizing: border-box;
}
.qty {
position: relative;
}
.new {
position: absolute;
right: 0;
top: 0;
}
#plus_remind, #minus_remind {
margin: 0;
height: 24px;
width: 22px;
font: 33px/1 Arial,sans-serif;
cursor: pointer;
}
#plus_remind {
border: 1px solid blue;
}
#minus_remind {
border: 1px solid red;
}
input {
height: 48px;
font-size: 1.5rem;
margin: 0px;
padding: 0px;
line-height: 1.5rem;
width: 100%;
}
<div class="qty">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="25">
<div class="new">
<div onclick="document.getElementById('remind_number').value-=-1;" class="" id="plus_remind">
<i class="fas fa-caret-up"></i>
</div>
<div onclick="document.getElementById('remind_number').value-=1;" class="" id="minus_remind">
<i class="fas fa-caret-down"></i>
</div>
</div>
For number, there is another solution that uses the input with type number
<input type="number" placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number">
Another way, I remove usage of font-awesome and create triangle by pure CSS
// add a javascript function to change the value of the input when clicking the caret
// get the input element
var input = document.getElementById("remind_number");
// function to modify the value of the input
function addValue(value) {
input.value = parseInt(input.value) + parseInt(value);
}
.qty {
width: 200px;
}
#remind_number_wrapper {
float: left;
}
i {
display: inline-block;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
cursor: pointer;
}
.up {
border-bottom: 5px solid black;
margin-bottom: 0px;
}
.down {
border-top: 5px solid black;
margin-top: 0px;
}
<div class="qty">
<div id="remind_number_wrapper">
<input placeholder="Remind Number" name="remind_number" class="form-control" type="text" id="remind_number" value="0">
</div>
<div id="buttons">
<!-- add className 'action_btn' to easier to style button in the same place-->
<div class="action_btn" id="plus_remind" onclick="addValue(1)">
<i class="up"></i>
</div>
<div class="action_btn" id="minus_remind" onclick="addValue(-1)">
<i class="down"></i>
</div>
</div>
</div>
So, with my code, Im trying to make this bar go to multiple urls based on what I put in. Like, "Take me to cats" will send me to "cats.com". Im trying to go to multiple html pages based on various words from the user. How do I do this? If you could do this it would help alot.
Here is the code:
/**
* Step 2: In your JavaScript, attach an event listener to the input element.
*/
document.getElementById('url-bar')
.addEventListener('keypress', function(event) {
// The keyCode for the "Enter" key is 13.
if (event.keyCode === 13) {
let urlValue = event.target.value
window.location ='Store.html';
}
});
body {
font-family: Arial
}
* {
box-sizing: border-box;
}
/* The browser window */
.container {
border: 3px solid #f1f1f1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* Container for columns and the top "toolbar" */
.row {
padding: 10px;
background: #f1f1f1;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
}
.left {
width: 15%;
}
.right {
width: 10%;
}
.middle {
width: 75%;
}
/* Clear floats after the columns */
.row::after {
content: "";
display: table;
clear: both;
}
/* Three dots */
.dot {
margin-top: 4px;
height: 12px;
width: 12px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
}
/* Style the input field */
input[type=text] {
width: 100%;
border-radius: 3px;
border: none;
background-color: white;
margin-top: -8px;
height: 25px;
color: #666;
padding: 5px;
}
/* Three bars (hamburger menu) */
.bar {
width: 17px;
height: 3px;
background-color: #aaa;
margin: 3px 0;
display: block;
}
/* Page content */
.content {
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<div class="row">
<div class="column left">
<span class="dot" style="background:#ED594A;"></span>
<span class="dot" style="background:#FDD800;"></span>
<span class="dot" style="background:#5AC05A;"></span>
</div>
<div class="column middle">
<input id="url-bar" type="text" value="/Home">
</div>
<div class="column right">
<div style="float:right">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</div>
</div>
<div class="content">
<h3>The Poke Browser</h3>
<p>Surf for Things in the Poke World</p>
</div>
</div>
</body>
</html>
Thats the code. I was able to only get it to take me to 1 page based on ANY input instead of a specific input.
youhave to seperate the search value which is entered by user using some kind of seperator such as space or , in your search text field. Then you can make use of split function of javascript to create a array of search url and iterate through it to open it seperately using forEach loop. Sharing with you the codepen link -
https://codepen.io/hims89/pen/WPVjLX
you can make use of IFFY for registering events
(function(){
var seperator=" ";
var searchref=document.getElementById("search");
searchref.addEventListener("keypress",function(ev){
if(ev.keyCode===13)
{
var urlarr=searchref.value.split(seperator);
urlarr.forEach(function(rec){
window.open(rec,"_blank");
});
}
});
})();
I want the same functionality that can be seen here.
I need a directive that loops over the array that is displayed within the textare/highlighter and compares if the value matches the following regExp(integers, floats and scientific notation both positive and negative values):
/-?\d+[\.,]?\d*[eE]?-?\d*/g
If it matches there will be no span around that element in the "highlighter" div, otherwise it will be wrapped in a "span" and therefore highlighted in red.
Best approach?
Template:
<script type="text/ng-template" id="form_field_float">
<div>
<div class="highlighter" id="mirror">
<p ng-repeat=" x in dbo.attributes[attobj.name]"><span>{{ x }}</span></p>
</div>
<textarea id="textarea" rows="{{dbo.attributes[attobj.name].length + 2}}" ng-model="dbo.attributes[attobj.name]" ng-list="
" ng-trim="false"></textarea>
</div>
</script>
CSS:
.highlighter, #textarea {
width: 400px;
height: 300px;
font-size: 10pt;
font-family: 'verdana';
}
.highlighter p {
font-size: 10pt;
font-family: 'verdana';
margin:0 0 0 0;
}
.highlighter {
position: absolute;
padding: 1px;
margin-left: 1px;
color: white;
}
.highlighter span {
color: red;
background: red;
opacity:.4;
}
#textarea {
position: relative;
background-color: transparent;
}
Ok my brain finally came around and found a solution:
Template:
<script type="text/ng-template" id="form_field_float">
<div spellcheck="false">
<div class="highlighter" id="mirror">
<div ng-repeat=" x in dbo.attributes[attobj.name] track by $index" ng-controller="textVal">
<div ng-if="!check(x)"><span>{{ x }}</span></div>
<div ng-if="check(x)">{{ x }}</div>
</div>
</div>
<textarea id="textarea" rows="{{dbo.attributes[attobj.name].length + 2}}" ng-model="dbo.attributes[attobj.name]" ng-list="
" ng-trim="false"></textarea>
</div>
</script>
Controller:
app.controller('textVal', ['$scope',
function ($scope) {
$scope.check = function(valueToCheck){
if(!isNaN(valueToCheck)){
return true;
} else{ return false;}
}
}
]);
CSS:
.highlighter, #textarea {
width: 100%;
}
.highlighter {
position: absolute;
padding: 1px;
margin-left: 1px;
color: white;
}
.highlighter span {
color: red;
background: red;
opacity:.4;
}
#textarea {
position: relative;
background-color: transparent;
}
STILL HAVE ONE ISSUE MAYBE SOMEONE CAN GIVE ME A NICE CLEAN SOLUTION FOR!!!:
"If enter is pressed, no value is typed and enter is pressed again, an offset will occur between the textarea value and the highlighter-div":