I am displaying UV index from json data, however I can't figure how to display the colour relevant to the UV index value.
so far here is what I have:
document.getElementById("uvIndex").innerHTML = getUvIndex();
function getUvIndex() {
miliVolts = 0;
text = "UV Index: "
if (miliVolts < 50) {
text += " 0 <div style='width: 20px; height: 20px; display: inline-block";
text += "background-color: rgba(0,190,0, 0.5); position: relative; left: 5px;";
text += "top: 5px;background-color: rgba(0,190,0, 0.5);' ";
text += "width='20'></div>";
text += " <div>Exposure Level None - No Light</div>";
}
return text;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="label label-default" id="uvIndex">Loading UV index.</div>
but what I am thinking from bootstrap, I can apply class i.e. class="label label-default"something other based on value.
i think you can use HTML DOM className Property or jquery add class method.
Just customize it to your need.
HTML class name property example:
<!DOCTYPE html>
<html>
<head>
<style>
.mystyle {
width: 300px;
height: 100px;
background-color: coral;
text-align: center;
font-size: 25px;
color: white;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>Click the button to set a class for div.</p>
<div id="myDIV">
I am a DIV element
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myDIV").className = "mystyle";
}
</script>
</body>
</html>
Related
I have to achieve the output as like below image
Black color text is name and Orange color text is status. Depending on status it can change like Pending --> Orange, Completed-->Green. These things I can able to achieve by having one input tag and span tag inside a div which position is relative
<div style="display: inline-block;position: relative;overflow: hidden;width:100%">
<input
id="input"
class={computedInputClass}
type="text"
role="textbox"
required={required}
autocomplete="off"
value={computedInputValue}
name={name}/>
<span class={computedStatusClass} style={componentStyle}> - {inputStatus}</span>
</div>
The only problem what I am facing is placing the position of status text.
Depending on the length of name text the left of status text also has to be adjusted. I am doing left adjustment with this calculation but its not working
get componentStyle() {
// this.computedInputValue = 'William Thomas';
return `left:${this.computedInputValue.length-2}em`;
}
If my approach is wrong please suggest me for good solution but for sure I have to use <input> tag and I cant remove that also as it is LWC component
Here is what I tried
HTML
<template>
<div style="display: inline-block;position: relative;overflow: hidden;width:100%">
<input
id="input"
class={computedInputClass}
type="text"
role="textbox"
autocomplete="off"
value={computedInputValue}
/>
<span class={computedStatusClass} style={componentStyle}> - {inputStatus}</span>
</div>
</template>
JS
import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
#track inputStatus='Pending';
get computedInputValue() {
return 'William ThomasS';
}
get componentStyle() {
return `left:${this.computedInputValue.length-2}em`;
}
get computedStatusClass()
{
return 'customizedDropdownInputStatusLeft customizedDropdownPendingStatusColor';
}
get computedInputClass() {
return'slds-input';
}
}
CSS
.customizedDropdownInputStatusLeft{
position: absolute;
top:8px
}
.customizedDropdownPendingStatusColor{
color:orange;
}
.customizedDropdownStatusPadding{
padding-left:5px;
}
I believe you can achieve your desired result with the following code.
The key part is a hidden span element and a resizeUserInput function:
hiddenSpan.textContent = userInput.value - copy the input text into the hidden span element.
userInput.style.width = hiddenSpan.offsetWidth + px - get the width of the hidden element and apply it to the width of the user input.
Working example
HTML
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link href="src/styles.css" rel="stylesheet" />
</head>
<body>
<div class="box">
<p>
<span class="hidden-span" id="hidden-span"></span>
<input class='user-input' id="user-input" type="text" value="William Thomas" />
<span> - </span>
<span class="status">Pending</span>
</p>
<div>
<script src="src/index.js"></script>
</body>
</html>
CSS
body,
input {
font-family: sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
}
.box {
border: 1px solid lightgrey;
border-radius: 5px;
display: flex;
padding: 0 10px;
margin: 10px;
justify-content: space-between;
}
.hidden-span {
position: absolute;
height: 0;
overflow: hidden;
white-space: pre;
}
.user-input {
border: none;
min-width: 10px;
outline: none;
}
.status {
color: orange;
}
JS
const px = "px";
const hiddenSpan = document.getElementById("hidden-span");
const userInput = document.getElementById("user-input");
const resizeUserInput = () => {
hiddenSpan.textContent = userInput.value;
userInput.style.width = hiddenSpan.offsetWidth + px;
};
resizeUserInput() // run onload
userInput.addEventListener("input", resizeUserInput); // run on subsequent changes
I've a few dynamic elements being generated on click of a button.
On click of this button, I get dynamic divs generated which also contain link.
I get only the first href attribute value("link0.com") in the array "linkArr".
How do I get all of the href attributes stored inside this array?
Here's my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css">
<style>
.parent {
height: 25%;
width: 90%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
}
.parent:nth-child(odd){
background: skyblue;
}
.parent:nth-child(even){
background: green;
}
</style>
</head>
<body>
<button class="btn btn-primary" onclick="getData()">Get data</button>
<div class="box">
</div>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
var content = "";
linkArr = new Array();
function getData(){
var count = 0;
for(count=0; count<5; count++) {
content+= '<div class="container-fluid parent"><div class="row"><div class="col-md-6">Number: '+count+'</div><div class="col-md-6">Link'+count+'</div></div></div>';
}
$('.box').html(content);
$('.box').each(function(){
linkArr.push($(this).find('.mylink').attr('href'));
console.log(linkArr);
});
}
</script>
</body>
</html>
Since each of the link elements has it's own class, why not to just get all .myLink elements with a selector and push href attribute of each of them to the linkArr array?
var content = "",
linkArr = [];
function getData() {
var count = 0;
for (count = 0; count < 5; count++) {
content += '<div class="container-fluid parent"><div class="row"><div class="col-md-6">Number: ' + count + '</div><div class="col-md-6">Link' + count + '</div></div></div>';
}
$('.box').html(content);
$('.mylink').each(function() {
linkArr.push($(this).attr('href'));
});
console.log(linkArr);
}
.parent {
height: 25%;
width: 90%;
padding: 1%;
margin-left: 1%;
margin-top: 1%;
border: 1px solid black;
}
.parent:nth-child(odd) {
background: skyblue;
}
.parent:nth-child(even) {
background: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary" onclick="getData()">Get data</button>
<div class="box"></div>
There is only one .box element, so $('.box').each is only going to run one time. Change your selector to iterate over the child elements and it should work:
$('.box .container-fluid parent').each(function(){
linkArr.push($(this).find('.mylink').attr('href'));
console.log(linkArr);
});
I want to change the color of specific text in viewpoint in occurrence of the word “Sinux” (case insensitive) should be formatted in bold and red. I just able to bind the values my code is below
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h3>Write Someting in the below input area </h3>
Text Area: <input ng-model="name">
<h1>{{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "Please enter your text input";
});
</script>
</body>
</html>
I change the above code and able to highlighted word in the viewpoint area. But problem is in My text box area I have to write from the second line and then my writings are showings in first line. My question is I want to write from top of the text area and writings should be visible in below instead of above.
index.html file is
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.textarea {
font-family: arial;
font-size: 12px;
border: 0;
padding: 0;
width: 700px;
height: 200px;
}
.realTextarea {
margin: 0;
background: transparent;
position: absolute;
z-index: 999;
}
.overlayTextarea {
margin: 0;
position: absolute;
top: 1;
left: 1;
z-index: 998;
}
.textareaBorder {
border: groove 1px #ccc;
position: relative;
width: 702px;
height: 202px;
}
.highlight {
background: red;
}
</style>
</head>
<div class="textarea textareaBorder">
<textarea id="myTextarea" onkeyup="doit();" class="textarea realTextarea"></textarea>
<div id="myOtherTextarea"></div>
</div>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js file is
var _terms = ['Sinux'];
function preg_quote(str) {
return (str + '').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!\<\>\|\:])/g, "\\$1");
}
function doit() {
var s = myTextarea.value;
for (i = 0; i < _terms.length; i++)
s = s.replace(new RegExp(preg_quote(_terms[i]), 'gi'), '<span class="highlight">' + _terms[i] + '</span>');
myOtherTextarea.innerHTML = s.replace(new RegExp(preg_quote('\r'), 'gi'), '<br>');
}
I want to calculate the scrolled distance of a div element within another div element. I am using offsetTop for that, but it always returns 0 in my code. I am unable to figure out where I am making the mistake.
function getScrollVal() {
console.log(window.pageYOffset);
var wrap = document.getElementById("wrapper");
console.log(wrap.id);
console.log(wrap.offsetParent.id);
var parent = wrap.offsetParent;
console.log("scrollTop: " + wrap.scrollTop + " scrollLeft: " + wrap.scrollLeft);
console.log("offsetTop: " + wrap.offsetTop + " offsetLeft: " + wrap.offsetLeft);
/*
var xx = wrap.offsetLeft;
var yy = wrap.offsetTop;
while(wrap = wrap.offsetParent){
xx += wrap.offsetLeft;
yy += wrap.offsetTop;
}
*/
}
body, html {
margin: 0;
padding: 0;
}
#contain {
position: relative;
width:100%;
height: 100vh;
background: yellow;
overflow: auto;
}
#wrapper {
width: 85%;
margin: 0 auto;
background: red;
}
.full {
height: 100vh;
width: 85%;
margin: 0 auto;
}
#one { background:#222;}
#two{ background:#00c590;}
#three{ background:#3429c5;}
#four{background:#bbb;}
#b {
position: fixed;
z-index: 1000;
top: 30px;
left: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="contain">
<div id="wrapper">
<div id="one" class="full"></div>
<div id="two" class="full"></div>
<div id="three" class="full"></div>
<div id="four" class="full"></div>
</div>
</div>
<button id="b" type="button" onClick="getScrollVal();" value="click me">Press me</button>
</body>
</html>
I have tried the js code inside the comment. That one is not providing a fruitful result. Thanks in advance.
Since the element #contain is the overflow element, you can try get the scrollTop like this:
console.log("scroll top:", document.getElementById('contain').scrollTop);
From MDN:
An element's scrollTop is a measurement of the distance of an element's top to its topmost visible content. Element.scrollTop
Question has been answered
I'm trying to make a small word game,
and I already encountered a small problem I couldn't figure out.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>Word Game</title>
<!-- CSS -->
<link rel="stylesheet" type="StyleSheet" href="style.css" />
<!-- Scripts -->
<script src="script.js"></script>
</head>
<body>
<h1>Word Game</h1>
<div id="board">
<p>Do you want to play? (yes/no)</p>
</div>
<div id="form">
<form>
<fieldset>
<input type="input" id="userTxt"></input>
<button type="button" id="btn" onclick = "post()">Send</button>
</fieldset>
</form>
</div>
</body>
</html>
CSS:
*{
margin-left: auto;
margin-right: auto;
}
h1 {
text-align: center;
}
#board {
width: 75%;
height: 100%;
min-height: 300px;
border: 1px solid black;
}
#board p {
padding-left: 3%;
}
#form {
width: 75%;
margin-top: 3%;
}
input {
margin: auto;
display: block;
}
button {
display: block;
clear: both;
margin-left: auto;
margin-right: auto;
}
JavaScript:
var post = function() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("board");
var text = userTxt.value;
boardId.innerHTML = "<p>- " + text + "</p>";
}
Now, the function works alright. But,
if you check the code you'll see that, for example if you'd write "p" in the box and submit it and then for example "e", the "p" will CHANGE to "e" and not add a new <p></p> to the board. How do I make it add a new element, and not replace the old element?
Try to just concat the innertext:-
var post = function() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("board");
var text = userTxt.value;
boardId.innerText = boardId.innerText.trim();
boardId.innerText += " - " + text;
}
Edit the html to add an id directly to your <p> tag for ease of access.
<div id="board">
<p id="text-container">Do you want to play? (yes/no)</p>
</div>
And change the function as this
function post() {
var userTxt = document.getElementById("userTxt");
var boardId = document.getElementById("text-container");
var text = userTxt.value;
if (boardId.textContent == "Do you want to play? (yes/no)") {
boardId.textContent = "- " + text;
} else {
boardId.textContent += text;
}
}
Try it here on this fiddle.