Here is simple javascript that changes span of letters with mouse over and mouseout. I want to make my mouseout delayed with setTimeout but im still too newbie for that. Here is the code. Appreciate the help.
function markedletter() {
this.style.boxShadow = "20px 20px 20px black";
this.style.fontSize = "52pt";
this.style.color = "cyan";
}
function unmarkedletter() {
this.style.boxShadow = "0px 0px 0px transparent";
this.style.color = "white";
}
let elems = document.getElementsByTagName("span");
for (let i = 0; i < elems.length; i++) {
elems[i].addEventListener("mouseover", markedletter, false);
elems[i].addEventListener("mouseout", unmarkedletter, false);
}
Everything above works fine. I just dont know how to implement setTimeout here. I want it to delay mouse out on each letter.
I did
try some methods but am still new to js.
function setup() {
setTimeout(nmarkedlatter, 5000);
}
I created function setup like this but it doesnt work alone and I wasnt sure how to implement it in loop nor if I even need to.I Did try some stuff in loop but even the syntax wasnt correct so here we are.
Put the call to setTimeout() in unmarkedletter.
function unmarkedletter() {
setTimeout(() => {
this.style.boxShadow = "0px 0px 0px transparent";
this.style.color = "white";
}, 5000);
}
Related
I'm trying to get a color name from text input using js but the code doesn't work at all. (I'm using p5.js btw)
my HTML :
<input placeholder="Type color name OR type 'Random' for a random tint!" style="width: 340px; border-radius: 5px; border: 3px rgb(0, 0, 0) solid; background-color: rgb(197, 197, 197);" id="colors"></input>
my JS :
colorss = "";
function preload() {
}
function setup() {
canvas = createCanvas(400, 400);
canvas.position(480, 300);
video = createCapture(VIDEO);
video.hide();
colorss = document.getElementById("colors").value;
console.log(colorss);
}
function draw() {
image(video, 0, 0, 400, 400);
}
function submit() {
r = random(255);
g = random(255);
b = random(255);
if(document.getElementById('colors').value == "Random") {
tint(r,g,b);
} else{
tint(colorss);
}
}
I'm using p5.js too and I tried using a different variable, so i don't understand why it isn't working... pls help
I assume your setup() function is executed ones when the page is opened and than submit() is executed once the submit button is clicked.
So what you have here is you execute setup() and load value of your input field into colorss variable. At this point the value is an empty string.
Then when you submit the form, you are using the value of colorss variable which is still an empty string.
What you need to do is use something like this:
tint(document.getElementById("colors").value);
Also, please declare variable with var, let and/or const
I want to change an input value by clicking on a div + adding a CSS effect . The issue is that I got 10 divs. I can do it by making a function for each one of them but i´m pretty sure that there is a much better way to do it without repeating the code. I´m starting at this, so it would be great if i could get some help.
I got an input and a few divs with just numbers:
<input type="text" id="screen" dir="rtl"/>
<div class="key" id="tres">3</div>
<div class="key" id="dos">2</div>
<div class="key" id="uno">1</div>
...
And then the function:
var screen = document.getElementById("screen");
var tres = document.getElementById("tres");
var dos = document.getElementById("dos");
var uno = document.getElementById("uno");
uno.onclick=function to () {
screen.value+=uno.innerHTML;
uno.style.boxShadow="none";
setTimeout(function() {
uno.style.boxShadow="0px 0px 5px 2px rgba(0, 0, 0, 0.2), inset 0px 0px 1px 1px rgba(0, 0, 0, 0.2)";
}, 220);
}
Now what i want to do is to use the same ".onclick" function on every single div, not in my newbie way (re writting the function and changing variables) but in a practical one. I've been trying with "classname" instead of "id". I´ve attempted with ".replace" by trying to replace the value names. And actually im trying with something like this:
var hell=["uno","dos","tres"];
var screen = document.getElementById("screen");
for (var i = 0; i < hell.length; i++) {
document.getElementById(hell[i]).onclick=function to() {
screen.value+=document.getElementById(hell[i]).innerHTML;
}
}
I barely know what I´m doing so a little bit of enlightenment would be grateful (avoiding jQuery if possible).
Thanks a lot! (Sorry about my bad English)
You can simply select the elements by class name, attach an eventListener to each of the elements, and you'll get what you wanted.
var screen = document.getElementById("screen");
var elements = Array.from(document.getElementsByClassName('key'));
elements.forEach(el => el.addEventListener('click', fn));
function fn(e) {
screen.value = (parseInt(screen.value, 10) || 0) + parseInt(e.target.innerText, 10);
elements.forEach(el => el.style.boxShadow = "none");
setTimeout(function() {
e.target.style.boxShadow = "0px 0px 5px 2px rgba(0, 0, 0, 0.2), inset 0px 0px 1px 1px rgba(0, 0, 0, 0.2)";
}, 220);
}
<input type="text" id="screen" dir="rtl" />
<div class="key" id="tres">3</div>
<div class="key" id="dos">2</div>
<div class="key" id="uno">1</div>
I think what you're looking for is querySelectorAll. Basically, instead of getting each one by ID, you can get all of them in an array by getting them by their class (since they all have the same class).
var myInput = document.getElementById('screen');
var inputs = document.querySelectorAll('.key');
inputs.forEach(function(input) {
input.onclick = function() {
myInput.value += input.innerHTML;
// everything else goes here
}
});
See this pen for a working example.
ES6
Here is a more optimal solution to your problem. It may seem a bit obscure if you don't know new ES6 syntax, but since you want to learn anyway, here it goes:
let screenValue = 0,
lastClickedDiv;
const screen = document.getElementById('screen'),
keys = [...document.getElementsByClassName('key')];
const toggleBoxShadow = (clickedDiv) => {
if (clickedDiv !== lastClickedDiv) {
clickedDiv.classList.add('active');
if (lastClickedDiv !== undefined) {
lastClickedDiv.classList.remove('active');
}
lastClickedDiv = clickedDiv;
}
};
const keysClickListener = (event) => {
screenValue += parseInt(event.target.textContent);
screen.value = screenValue;
setTimeout(() => toggleBoxShadow(event.target), 220);
};
keys.forEach(key => key.addEventListener('click', keysClickListener));
.key.active {
box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.2),
inset 0 0 1px 1px rgba(0, 0, 0, 0.2);
}
<input type="text" id="screen" dir="rtl"/>
<div class="key">3</div>
<div class="key">2</div>
<div class="key">1</div>
[...document.getElementsByClassName('key')] gets all elements with class name key and turns that collection into an array using spread operator.
keys.forEach(key => key.addEventListener('click', keysClickListener)) adds click listener named keysClickListener to each element of keys array.
keysClickListener function updates screenValue counter by adding number from clicked div to value it already stores and sets that as #screen's value. Then it invokes toggleBoxShadow() after 220 ms.
If you want anything else explained, let me know.
I was trying to write a function that changes the color of background of a section by going over it with the mouse - using 'onmouseover'. I was looking for similar question and tried the solutions that was offered but it did not work on my code.
Here is what i did:
function Rectangle(count){
var newRec = document.createElement("SECTION");
newRec.style.width="202px";
newRec.style.height="312px";
newRec.style.border="1px solid #3f3f3f";
newRec.style.background = "#FFFFFF";
newRec.style.display = "inline-block";
newRec.style.margin= "44px";
newRec.style.size= "50px";
var appendRec = function() {
document.addEventListener("onmouseover", myFunction);
document.getElementsByTagName('main')[0].appendChild(newRec);
};
function myFunction() {
document.getElementTagName("SECTION").style.background = "#000000";
};
appendRec();
};
Can anyone tell me what i did wrong?
And I was trying to work with the console but this code doesn't say anything is wrong...
document.getElementTagName("SECTION").style.background = "#000000"; is wrong.
First, it's called getElementsByTagName(). And second, it returns an array, not just one element.
Solution: Give the <section> an id and use getElementById() instead.
You just need
document.getElementById('WhichElementWillBeHoveredID').onmouseenter = function() {
// when entering element...
}
document.getElementById('WhichElementWillBeHoveredID').onmouseleave = function() {
// when leaving element
}
Sure... you can easily use CSS as well..
SELECTOR:hover { background-color: #444 }
I created a fiddle to change background color and this is the only requirenment then I think it is good
http://jsbin.com/cagawa/edit?html,css,output
#mydiv{
background: #cccccc;
}
#mydiv:hover{
background: #ffdd00;
}
try change
var appendRec = function() {
document.addEventListener("onmouseover", myFunction);
document.getElementsByTagName('main')[0].appendChild(newRec);
};
to
var appendRec = function() {
document.getElementsByTagName('main')[0].appendChild(newRec);
newRec.addEventListener("mouseover", myFunction);
};
I edited littlebit code, try now :)
If im not wrong on line 12:
document.addEventListener("onmouseover", myFunction);
should be replaced by
document.addEventListener("onmouseover",myFunction());
Im trying to make a 'blanket' of divs containing child divs 150px high and 150px wide.
I want each child div to fade in 1 after the other after after a millisecond or so, opacity changing from 0, to 1.
I cant seem to figure out how this works, or how id do it though?
http://jsfiddle.net/CCawh/
JS
$(function(){
var figure = [];
w = 1500;
h = 450;
for(i = 0, i < 30, i++){
$('div').append(figure[].clone()).fadeIn();
}
});
Here is a working solution.
The problems in your code
in for(i = 0, i < 30, i++), you should use ';', not ',' . Use developer tools in your browser to catch such typos
In your code $('div').append(figure[].clone()).fadeIn(); , The fadeIn applies to $('div') as append() returns the calling object itself. You must replace it with $('<figure></figure>').appendTo('div').fadeIn('slow'); and to fadeIn items one by one you could set a timeout with incrementing delays
Add display: none; style to the figure to keep it hidden initially
Here is the full code.
$(function(){
for(i = 0; i < 30; i++){
setTimeout(function(){$('<figure></figure>').appendTo('div').fadeIn('slow');}, i*200);
}
});
Here is a fiddle to see it working http://jsfiddle.net/CCawh/12/
Try using greensock TweenLite http://www.greensock.com/get-started-js/.
It has staggerTo/staggerFrom action that does exactly what you are asking. TweenLite in conjunction with jQuery makes animation very easy.
This would be a possible solution (DEMO).
Use an immediate function and call it again n times in the fadeIn callback.
$(function(){
var figure = $('figure');
var counter = 0;
(function nextFade() {
counter++;
figure.clone().appendTo('div').hide().fadeIn(500, function() {
if(counter < 30) nextFade();
});
})();
});
You can use the following implementation as an example. Using setTimeout() will do the trick.
I've updated your jsfiddle here: http://jsfiddle.net/CCawh/5/
HTML:
<div class="container">
<div class="box"></div>
</div>
CSS:
.box {
display: none;
float: left;
margin: 10px;
width: 150px;
height: 150px;
background-color: #000;
}
JS:
$(function() {
var box = $('.box');
var delay = 100;
for (i = 0; i < 30; i++) {
setTimeout(function() {
var new_box = box.clone();
$('.container').append(new_box);
new_box.fadeIn();
}, delay);
delay += 500; // Delay the next box by an extra 500ms
}
});
Note that in order for the element to actually fade in, it must be hidden in the first place, i.e. display: none; or .hide()
Here's perhaps a more robust solution without counters:
http://jsfiddle.net/CCawh/6/
for(var i = 0; i < 30; i++){
$('div').append($('<figure>figure</figure>'));
}
(function fade(figure, duration) {
if (figure)
figure.fadeIn(duration, function() { fade(figure.next(), duration); });
})($('figure').first(), 400);
By the way, clauses in for loops are separated using semicolons, not commas.
I'ld like to change the "imgTag.style.border='5px solid #FF00FF'" to black when the mouse is over an image.
This is my JavaScript:
javascript:for(i=0;i<document.getElementsByTagName('img').length;i++)
{
var imgTag=document.getElementsByTagName('img')[i];
imgTag.style.border='5px solid #FF00FF';
imgTag.title='';
imgTag.onclick=function()
{
return !window.open('http://www.example.com/#/'+this.src);
}
}
void(0)
How can it be done?
Thanks
Frank
You need to bind handlers to the mouseover and mouseout events to change the image's border color:
var imgs = document.getElementsByTagName('img');
for(var i = 0; i < imgs.length; ++i) {
imgs[i].onmouseover = function() {
this.style.borderColor = '#000';
};
imgs[i].onmouseout = function() {
this.style.borderColor = '#f0f';
};
}
For example: http://jsfiddle.net/bNk4Y/
Not sure what's wrong with the code you have, but if i understand your question correctly, this should do it:
HTML:
<img src="" >
<img src="">
...
JS:
var imgs = document.getElementsByTagName("img");
for(i=0;i<imgs.length;i++)
{
imgs[i].onmouseover = function() {this.style.border="1px red solid";};
}
Note, however, that this can easily be achieved with CSS as well, which is a better practice - in case users have JS disabled, etc
img:hover {
border: 1px red solid;
}