I am trying to make a small javascript program in which I have a Div that is transparent initially, and contains an editbox inside. But I want that transparent div to become pink if the text inside editbox is not number. How can I do this? I tried something like this but nothing works:
function proz(){
var textbox = document.getElementById("nr").value; / nr is editbox
var div = document.getElementById("proz"); / proz is the transparent div
if (document.getElementById("nr").value == "a"){ / i tried with if var == "a" but nothing.
div.setAtribute("id", "proz2"); /here proz 2 is another pink div, trying to overlay first div
}
}
I am trying with only letter "a" instead of numbers to check if anything works at least...
So any advices please.
Thank you!
Later Edit:
HTML part:
<body>
<div class="patratpunctat">
<h1><center> Panou centrat </center></h1>
<p> Acest panou va fi centrat vertical si orizontal in pagina.</p>
<div class="pportocaliu">
<div class="prosualbastru"> </div>
</div>
<!-- -->
<!-- partea pentru patratul roz cu javascript-->
<div class="proz">
<div class="inputt">
<input type="text" placeholder="Numar interg" name="nrintreg">
</div>
<script>
function check(){
var textbox = document.getElementById("nrintreg").value;
if (document.getElementById("nrintreg").value == "a"){
window.alert('omg')
}
}
</script>
</div>
</div>
</body>
And yes, I am trying to make it instantly. Like if there is something else than a number there, to make the div pink. if it is Number, div remains transparent.
Is something like this what you're going for?
var textbox = document.getElementById("nr"); // nr is editbox
var div = document.getElementById("proz"); // proz is the transparent div
function proz() {
div.style.backgroundColor = textbox.value
}
textbox.addEventListener('input', function(evt) {
proz();
});
#proz {
height:250px;
width:250px;
border:1px solid black;
}
<input type="text" id="nr" />
<div id="proz"></div>
You need to add a change event handler to the editbox (input, textarea?) and execute your code.
Also, don't change the id because then when your code is executed again it will fail at getElementById("proz"). Use a css class instead to format the element.
Here you have a working version (the div will be pink when the value of the input text is a):
var textbox = document.getElementById("nr");
var div = document.getElementById("proz");
textbox.onkeyup = proz;
function proz() {
if (textbox.value == "a") {
div.classList.add("pink");
} else {
div.classList.remove("pink");
}
}
#proz {
width: 100px;
height: 100px;
}
#proz.pink {
background-color: #FF9999;
}
<input id="nr" />
<div id="proz"></div>
I'm not sure exactly what you're trying to achieve but this was my interpretation of what you might want based on your question.This code checks if the input is a number. If it is, then it will do nothing. If it isn't a number, it will make the transparent div around the text box pink. Hope it helps in some way
document.getElementById('nr').addEventListener("keyup", proz);
function proz(){
var textbox = document.getElementById("nr").value;
var div = document.getElementById("proz");
if (isNaN(textbox) == true){
document.getElementById("some-div").style.background = "pink";
}
else
{
document.getElementById("some-div").style.background = ' transparent';
}
}
#some-div
{
position: absolute;
top: 0;
left: 0;
width:200px;
height:200px;
z-index:-1;
}
<div id = "some-div">
<input type="text" id='nr'><br>
</div>
Related
I have an animated background that randomly displays 0s and 1s in pastel shades and fills the whole screen and Im trying to get text over that but it doesn't seem to be working. Could someone please help?
This is the html code
<p style="font-size:20px;z-index:-1;" class="back"></p>
<div class="main">
<p style="font-size:100px;z-index:1;">Hello!There!</p>
</div>
</div>
And this is the JavaScript code
var lines=10;
var lenght=100;
function getcolor()
{ var color='#';
var letters = "BCDEF";
for(var i=0;i<6;i++)
{color+= letters[Math.floor(Math.random() * 5)];}
return color;}
function genstring()
{var letters="01010101010101"
var string="<p>"
for(var i=0;i<2000;i++)
{for(var j=0;j<Math.floor(Math.random()*10);j++)
{
string+=letters[Math.floor(Math.random()*2)];
}
string+=" "
}
string+="</p>"
return string;
}
function changer()
{var x=genstring()
var y=document.querySelector(".back")
var color=getcolor()
y.innerHTML=x
y.style.color=color}
setInterval("changer()",1300)
The complete code is on repl : https://repl.it/#Ajkallivayalil/about#script.js
And the output currently looks like this: https://about--ajkallivayalil.repl.co/.
Thank you in advance for your help ^^
Your text ("Hello! There!") exists, it is just under field of screen (because it is in another <div> block, that is placed via engine under first <div> according default order of <div> on webpage). You can inspect your div.main element via Chrome Developer Tools or change scale of page to see where it is.
What you can do with that:
Add attributes position: absolute; top: 40px; left: 40px; to style of <p style="font-size:100px;z-index:1;">Hello!There!</p>
Then it will looks this way:
<p style="font-size:100px;z-index:1;position: absolute; top: 40px; left: 40px;">Hello!There!</p>
Just place div.main over <div style="width:100%;height:100%;overflow:hidden;"> (div with 01010101010101) in HTML code
I have several boxes of cards on one page, these boxes can come dynamically in different, not upper right corner has a text for the click to open the accordion type content, for each class I have to do an action as below, I think of something Regardless of the number of classes.
*new
I do not know how to explain it, I'll try a summary:
Change the text of only one div when clicking, because when I click on the item in the box it changes all the other texts of the
Other boxes.
$('.change-1').click(function () {
var $mudartxt = $('.mudartexto');
if ($mudartxt.text() == 'expandir')
$mudartxt.text('ocultar');
else {
$mudartxt.text('expandir');
}
});
You need to find the current clicked item.
For that you can use the event object
$('.change-1').click(function (e) {
// Get current target as jquery object
var $target = $(e.currentTarget);
// Find mudartexto in current target.
var $mudartxt = $target.find('.mudartexto');
if ($mudartxt.text() == 'expandir')
$mudartxt.text('ocultar');
else {
$mudartxt.text('expandir');
}
});
.change-1 {
display:inline-block;
width:200px;
height:50px;
text-align: center;
background-color:#dfdfdf;
clear: both;
float: left;
margin-top:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="change-1">
<div class="mudartexto">expandir</div>
</div>
<div class="change-1">
<div class="mudartexto">expandir</div>
</div>
<div class="change-1">
<div class="mudartexto">expandir</div>
</div>
<div class="change-1">
<div class="mudartexto">expandir</div>
</div>
If you are asking how to change text of an element, inside a clicked box, this should do it.
$('.change-1').click(function () {
var $mudartxt = $(this).find('.mudartexto');
if ($mudartxt.text() == 'expandir')
$mudartxt.text('ocultar');
else {
$mudartxt.text('expandir');
}
});
I am trying to make a simple text editing box so that I can eventually post text to another section of a website. I'm attempting to make buttons to make text bold, italicized, add a code box etc, (hence insertAdjacentHTML not insertAdjacentText) but I decided to just start making sure I could get plain text to print to a textarea.
I have achieved this easily but now my question becomes how do I make it so that the button still affects the text area after a user has added text to it? the code below will happily type out "hello"'s up until you click on the textarea, and from that point on it refuses to and I can't figure out why.
window.hello = function(textarea) {
var obj = document.getElementById("text");
obj.insertAdjacentHTML('beforeend', 'hello');
}
<body>
<button onclick="hello()">hello</button>
<form>
<p></p>
<textarea id="text"></textarea>
</form>
</body>
As you can read from MDN a textarea can contain only Character data.
This is the reason because you cannot use insertAdjacentHTML and instead you can use the value.
If you need to add text in bold or ... you can use a contenteditable div element.
The snippet:
window.helloDiv = function() {
var obj = document.getElementById("textDiv");
obj.insertAdjacentHTML('beforeend', 'hello');
};
window.helloTxtArea = function() {
var obj = document.getElementById("textTxtArea");
obj.value += 'hello';
}
div {
width: 300px;
height: 100px;
border: 1px;
border-style: solid;
}
textarea {
width: 300px;
height: 100px;
margin-top: 10px;
}
<button onclick="helloDiv()">helloDiv</button>
<button onclick="helloTxtArea()">helloTextArea</button>
<form>
<p></p>
<div id="textDiv" contenteditable="true"></div>
<textarea id="textTxtArea" contenteditable="true"></textarea>
</form>
Sample:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Toggle</title>
<style>
#first {
color: blue;
}
#second {
border: 1px solid green;
}
#third {
background: tan;
}
</style>
</head>
<body>
<label for="box">Toggle</label>
<input type="checkbox" id="box" onchange="toggle();">
<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
<script>
function toggle() {
var box = document.getElementById('box');
var first = document.getElementById('first');
var second = document.getElementById('second');
var third = document.getElementById('third');
if (box.checked) {
first.style.color = 'red';
second.style.border = '2px dotted blue';
third.style.background = 'olive';
} else {
first.style.color = 'blue';
second.style.border = '1px solid green';
third.style.background = 'tan';
}
}
</script>
</body>
</html>
DEMO
I wonder if an input checkbox is the right element to create a toggle. I also want to know how to undo what I have in the if clause: in else do I have to repeat my stylesheet or is there a shorter neater way to get back to the initial state?
You can do it in better way like this: demo
Add a parent div in html like this:
<div id="parent">
<div id="first">First</div>
<div id="second">Second</div>
<div id="third">Third</div>
</div>
Then handle your front end with css instead inline styling:
.checked #first {
color:red;
}
.checked #second {
border:2px dotted blue;
}
.checked #third {
background:olive;
}
Then add and remove only one class with javascript:
function toggle() {
var box = document.getElementById('box');
var parent = document.getElementById('parent');
if (box.checked) {
parent.className = parent.className + "checked";
} else {
parent.className = "";
}
}
1. I wonder if an input checkbox is the right element to create a toggle?
Definition of toggle*:
COMPUTING a key or command that is operated the same way but with
opposite effect on successive occasions.
Explanation of checkbox**:
In computing, a checkbox (check box, tickbox, or tick box) is a
graphical user interface element (widget) that permits the user to
make a binary choice, i.e. a choice between one of two possible
mutually exclusive options.
So yes, it is the best choice.
2. I also want to know how to undo what I have in the if clause: in else do I have to repeat my stylesheet or is there a shorter neater way to get back to the initial state?
In order to do this you could using jQuery:
Use either addClass()/removeCLass() methods or toggleClass(); You would put your active class stylings into a new class, apply these then simply remove them on the else/off state. This would also mean you maintain the separation between contents and styling.
Or regular JS:
.setAttribute("class", "active"); and .removeAttribute("class", "active"); or simply .removeAttribute("style"); to unset the styles you applied inline and revert to the original state.
*Source
**Source
To answer the second question:
You could use getElementById("id").removeAttribute("style"); to remove inline styles.
if (box.checked) {
first.style.color = 'red';
second.style.border = '2px dotted blue';
third.style.background = 'olive';
} else {
first.removeAttribute("style")
second.removeAttribute("style")
third.removeAttribute("style")
}
I have created an employee spotlight webpart on our SharePoint site that randomly selects an employee with each page load. In the spotlight section is bio on the employee that is pulled from their 'about me' section of the User Information List. I am attempting to make it so the bio is expandable so that a few lines of the bio are intially visible and then the user can click a 'more' link to expand the text out to read the rest. What I have works but I have it jumping down to a fixed height where I would prefer it only expand down to amount of text with in the <div>
The div section:
<div id=\"expandable\" >" + Employees[randId].aboutMe +
"</div>more...
The style:
#expandable { height:55px; overflow:hidden; }
A simple script to expand:
function Tog() {
var expandable = document.getElementById('expandable');
if (expandable.style.height == '400px') {
expandable.style.height = '55px';
}
else {
expandable.style.height = '400px';
}
}
Is there a better way to expand out the content and while still having some of the text show when collapsed?
Instead of setting the height to a fixed value, just set it to auto, and the div will expand to fit the content:
function Tog() {
var expandable = document.getElementById('expandable');
if (expandable.style.height) {
expandable.style.height = '';
} else {
expandable.style.height = 'auto';
}
}
(Demo at jsfiddle.net).
UPDATE: Also consider replacing your inline JS (href="javascript:Tog()") with a proper event listener, as suggested by Bergi.
Do not set a height so the whole content can show up, instead remove a class with a max-height/ overflow set.
HTML
<div id="content" class="collapsed">
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
</div>
CSS
div#content{ border: 1px solid black; cursor: pointer;}
div.collapsed{
max-height: 40px;
overflow:hidden;
}
JavaScript
var cont = document.getElementById("content");
cont.onclick = function() {
var newClass = (cont.className==="collapsed") ? "" : "collapsed";
cont.className = newClass;
};
The JavaScript is a basic example, better to use a add/remove class library so you can have more than one class.
Example
JSFiddle
Here's a working example of what I said in my comment. By default, the div takes up whatever space is required by its content. You restrict it to your dimensions by adding the short class to the element. The toggle function simply adds and removes this class.
HTML
<div id="expandable" class="short">Content here</div>
more...
CSS
.short {
height: 200px;
overflow: hidden;
}
JS
function toggle() {
var elem = document.getElementById("expandable");
if(hasClass(elem, "short"))
removeClass(elem, "short");
else
elem.className = elem.className + " short";
}
//These functions from http://stackoverflow.com/a/2155755/219118
function hasClass(ele,cls) {
return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}
function removeClass(ele,cls) {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
}