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());
Related
I currently have buttons that adjust the height, color, opacity of a box for example-
document.getelementbyID("growbutton").addEventlistener("click", function growFunction() {
document.getelementbyID("box").style.height = "300px"
});
document.getelementbyID("bluebutton").addEventlistener("click", function blueFunction() {
document.getelementbyID("box").style.color = "#0000FF"
});
Those work fine- What I want is a reset button, that will reset "box" back to original settings. Current JS looks like this.
document.getelementbyID("resetbutton").addEventlistener("click", function resetFunction() {
document.getelementbyID("box").style.height = "150px"
});
document.getelementbyID("resetbutton").addEventlistener("click", function resetFunction() {
document.getelementbyID("box").style.color = "#FFA500"
});
When executed however, the "box" only resets in height, but does not reset in color. Any help would be greatly appreciated.
You don't need to send a single action per function. You can create a function resetFunction and pass it to addEventListener.
function resetFunction(){
let box = document.getElementById("box");
box.style.height = "150px";
box.style.color = "#FFA500";
}
document.getElementById("resetbutton").addEventlistener("click", resetFunction);
This is the best way, but probably changing the name of your second function to resetFunction2 would also work
In effect you'll need to store a set of default values that you can refer to.
You can do this when the document loads, ie:
<head>
<script>
var defaults = {}
function setDefaults() {
defaults.box = {
height: document.getElementByID("box").style.height,
color: document.getElementByID("box").style.color
}
// I tucked these functions in here since they need to fire after the page loads
document.getElementByID("resetbutton").addEventListener("click", function resetFunction() {
document.getElementByID("box").style.height = defaults.box.height
document.getElementByID("box").style.color = defaults.box.color
});
}
</head>
<body onload='setDefaults()'>
...
Ya'll are going to be really mad at me... Super noob mistake. The reset function would've been working this whole time with all of the JS that was posted. My color change button address backgroundcolor, my reset addresses color. It's fixed now!
I have a Javascript code that shows a tooltip when hovering over an HTML element. Now I want to give this element a latency of about 6 milliseconds. In CSS it is very easy with the transition command. However, I did not find a transition style command in Javascript. Is there a solution or do I have to change to another programming language?
Javascript code:
var bghtooltipin = document.getElementById('bgh-tooltipin1');
var bghtooltipout = document.getElementById('bgh-tooltipout1');
bghtooltipin.addEventListener('mouseover', bghtooltipinmouseOver);
bghtooltipin.addEventListener('mouseout', bghtooltipoutmouseOut);
function bghtooltipinmouseOver() {
bghtooltipout.innerHTML = 'Go to Login';
bghtooltipout.style.color = "white";
bghtooltipout.style.top = "0";
}
function bghtooltipoutmouseOut() {
bghtooltipout.innerHTML = ' ';
bghtooltipout.style.top = "-99999px"
}
You can use something like this:
bghtooltipout.style.transition = "all 6s";
something like this it works is Vanila JS
bghtooltipout.style.transition = "all 2s";
There are 2 ways to interpret "latency". I will show you how to perform both implementations.
Delay.
6ms would pass, and then the transition would play. In JavaScript, this is done as the following:
setTimeout(function() {
// Code here
}, delay_in_ms);
Duration.
If you want your animation to last for 6ms, then you would do something as follows:
const element = document.querySelector("#testthing");
element.addEventListener("mouseover", function(){
this.style.opacity = "0";
this.style.transition = "opacity 0.6s";
});
element.addEventListener("mouseout", function(){
this.style.opacity = "1";
this.style.transition = "opacity 0.6s";
});
#testthing {
width: 100px;
height: 100px;
background: red;
}
<div id="testthing"></div>
PLEASE NOTE: In this example, the transition actually lasts for 600 milliseconds, not 6. This is because 6ms is just too quick to see. It just appears as an instant change.
Please review this question first:
document.body.style.marginTop returning blank string in JS
There were a couple working solutions... then there was my working solution:
https://stackoverflow.com/a/34473070/2813224
Summary:
Tried to get the margin-top value of a div by doing the following code as well as variations of the same:
/*~~~~~~~~~~~~~~~~~~~[ Attempt 1 ]~~~~~~~~~~~~~~~~~~~~~~~~*/
alert(document.getElementById("testDiv").style.marginTop);
/*~~~~~~~~~~~~~~~~~~~[ Attempt 2 ]~~~~~~~~~~~~~~~~~~~~~~~~*/
var tDiv = document.getElementById('testDiv');
var tMgn = tDiv.style.marginTop;
alert(tMgn);
/*~~~~~~~~~~~~~~~~~~~[ Attempt 3 ]~~~~~~~~~~~~~~~~~~~~~~~~*/
var tDiv = document.querySelector('testDiv');
alert(tDiv.style.marginTop);
/*~~~~~~~~~~~~~~~~~~~[ Attempt 4 ]~~~~~~~~~~~~~~~~~~~~~~~~*/
function mTop() {
var tDiv = document.getElementById('testDiv');
var tMgn = tDiv.style.marginTop;
alert(tMgn);
}
mTop();
The one thing these combinations had in common is .style.marginTop. The Op's question was answered shortly thereafter.
My question is this:
I don't know why, but I got it working by explicitly assigning the margin-top by JS first. I never had to set a style value first just to get a style value back, especially if it's already set by CSS. Why would something simple like:
alert(document.getElementById("testDiv").style.marginTop);
not work, but this does:
document.getElementById("testDiv").style.marginTop = "50px";
alert(document.getElementById("testDiv").style.marginTop);
When CSS is already:
#testDiv { margin-top: 50px; }
?
Snippet of my working answer:
document.getElementById("testDiv").style.marginTop = '50px';
document.body.style.marginTop = '100px';
alert(document.getElementById("testDiv").style.marginTop);
alert(document.body.style.marginTop);
body {
margin-top: 100px;
}
#testDiv {
margin-top: 50px;
}
hi!
<div id="testDiv">test</div>
You need to use the window.getComputedStyle to get the style that was computed, but not set through JavaScript, as HTMLElement.style can get only the inline styles.
The syntax is:
var style = window.getComputedStyle(element[, pseudoElt]);
So in your case, it should be:
var elem = document.getElementById("testDiv");
var theCSSprop = window.getComputedStyle(elem,null).getPropertyValue("margin-top");
document.getElementById("output").innerHTML = theCSSprop;
How to change HTML background with JavaScript Function? I need some simple function to change background from one image to another?
Try something like this:
function newBackGround (element,background) {
element.style.backgroundImage = "url("+background+")";
}
newBackground (myElement,"newBackground.jpg");
An alternative IFF using jquery
$("body").css("background-image", "url(/image.jpg)");
Very simple like this:
function changeBGImage(){
document.body.background = "image.jpg";
}
UPDATE
Or if you wanna use CSS (more elegant solution) with it, you could use:
<style>
.bg1 {
background-image: url(images/my_image.jpg);
}
</style>
<body id="page_body">
<script>
function changeBGImage(whichImage){
document.getElementById('page_body').className="bg"+whichImage;
}
</script>
demo codes:
element = document.querySelector("body");
element.style.backgroundImage = "url('https://cdn.xgqfrms.xyz/logo/logo.png')";
elements = document.querySelectorAll("div");
for(let element of elements){
element.style.background = "url('https://cdn.xgqfrms.xyz/logo/logo.png')";
}
reference links:
http://www.w3schools.com/jsref/dom_obj_style.asp
http://www.w3schools.com/jsref/prop_style_background.asp
http://www.w3schools.com/jsref/prop_html_style.asp
http://www.w3schools.com/jsref/met_document_queryselectorall.asp
http://www.w3schools.com/jsref/met_document_queryselector.asp
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll
function changeBGImage(whichImage){
document.body.style.backgroundImage = "url(" + whichImage + ")";
}
All of these answers change the body. The most direct way to change the html background is like so:
const imagePath = "/img/sub-folder/my-image.png";
document.documentElement.style.background = `url("${imagePath}")`;
I am using mootools1.2 as my js framework.
I have one problem regarding the highlight my some html element when page gets load.
I need to highlight my error message if any on page when page loads.
For example.
When page load then error div have #FFFFFF as bg color.
For highlight it will use #FC0000 as a bg color and then after it will get back to #FFFFFF bg color.
Any one can please suggest how can i do this..
Thanks in advance.
Avinash
MooTools way:
window.addEvents({
domready: function(){
var errorMsg = $$('.errorMessageEl');
errorMsg.highlight('#FC0000');
}
});
Here's an example: http://mootools.net/shell/s7mRh/
Repeating the highlight
Repeating the highlight a number of times is a bit more complicated– you'd probably want to create a mixin like this:
Array.implement({
blink: function(color, repeats){
this.set('tween', {
link: 'chain'
});
var i = 0;
while (i <= repeats-1){
this.highlight(color);
i++;
}
return this;
}
});
var errorMsg = $$('.errorMessageEl');
errorMsg.blink('#f00', 3);
Example: http://mootools.net/shell/8M9xx/1/
I don't remember exact mootools syntax, but the idea is something like that:
window.addEvent("onload",function()
{
$('divName').style.backgroundColor='#FC0000';
setTimeout($('divName').style.backgroundColor='#FFFFFF',5000) // will wait 5 seconds before returning to orig. color
}
);
If you want it to blink, you can write a function like this:
function blinkit(){
var intrvl=0;
for(nTimes=0;nTimes<3;nTimes++){
intrvl += 1000;
setTimeout("$('divName').bgColor='#0000FF';",intrvl);
intrvl += 1000;
setTimeout("$('divName').bgColor='#FFFFFF';",intrvl);
}
}
source:
http://w3schools.invisionzone.com/index.php?showtopic=21893