The following script is creating a grid of 16 divs. Per mouseover effect I would like to change the color of the divs permanently. Can somebody give me a pointer how what function changeColor could look like?
<script>
let gridcontainer = document.querySelector('#gridcontainer');
gridcontainer.setAttribute('style', 'width: 20px; display: grid; grid-template-columns: auto auto auto auto;')
var index = [];
var boxes;
var i;
var change;
function createGrid(){
for(i=0;i<16;i++){
//console.log(index);
boxes = document.createElement('div');
console.log(boxes);
boxes.classList.add('boxes');
boxes.setAttribute('style','width: 30px; height:30px; background-color:
blue; margin: 5px;');
boxes.setAttribute('onmouseover', changeColor());
gridcontainer.appendChild(boxes);
}}
function changeColor(){
change = document.querySelector('.boxes');
change.setAttribute('style','background-color: red');
}
</script>
Thank you all for your help.
I have used jquery function (toggleClass) to change the color div on hover
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
.b1{
background:red;
width: 30px;
height: 40px;
margin: 10px;
}
.b{
background:blue;
width: 30px;
height: 40px;
margin: 10px;
}
</style>
</head>
<body>
<div class="b1"></div>
<div class="b1"></div>
<div class="b1"></div>
<div class="b1"></div>
<div class="b1"></div>
<script type="text/javascript">
$('div').hover(function () {
// body...
$("div").toggleClass("b");
});
</script>
</body>
</html>
Related
I have done this code with javascript to try out my first javascript animation, but when I open the page, it's showing me a blank page...
can anyone please tell me whats wrong with the code and why it's not showing anything?
thanks in advance...
<html>
<head>
<title>Trying js Animation</title>
</head>
<body>
<style>
#container{
width: 500px;
height: 500px;
color: green;
position: relative;
}
#box{
width: 50px;
height: 50px;
color: red;
position: absolute;
}
</style>
<div id="container">
<div id="box">
</div>
</div>
<script type="text/javascript">
var t = setInterval(move, 1);
var pos = 0;
var box = document.getElementById('box');
function move(){
pos += 1;
box.style.left = pos + "px";
}
</script>
</body>
</html>
The box is white. Change "color" to "background-color".
This question already has answers here:
why javascript this.style[property] return an empty string? [duplicate]
(2 answers)
Closed 6 years ago.
Hi there I'm having a problem. I made a box of blue color in HTML/CSS and want javascript to alert the name of color when the box is clicked. Here is my code.`
var clr = document.getElementById("box").style.backgroundColor;
document.getElementById("box").onclick= function() {
alert(clr);
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
#box {
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
</style>
</head>
<body>
<div id="box" class="box">
</div>
</body>
</html>
You need to use getComputedStyle(). .style is use to set a new value for target element.
var div = document.getElementById("box"), // element
divCSS = window.getComputedStyle(div), // element CSS
bgColor = divCSS.getPropertyValue('background-color'); // property
document.getElementById("box").onclick= function() {
alert(bgColor);
}
#box{
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
<div id="box" class="box"></div>
Here is the working code
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<style>
#box {
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
</style>
</head>
<body>
<div id="box" class="box">
</div>
</body>
</html>
<script>
/* var clr = document.getElementById("box").style.backgroundColor;*/
document.getElementById("box").onclick= function() {
var ele = document.getElementById("box");
var style = window.getComputedStyle(ele);
var bColor = style.getPropertyValue("background-color");
alert(bColor);
}
</script>
This works
var clr = document.getElementById("box").style.backgroundColor;
document.getElementById("box").onclick= function() {
alert(clr);
}
<!DOCTYPE html>
<html>
<head>
<title>
</title>
</head>
<body>
<div id="box" class="box" style="height: 100px;width: 100px;background-color: blue;margin: 0px;display: inline-block;"></div>
</body>
</html>
You can also use below code with provided html
<script>
var clr= window.getComputedStyle(document.getElementById("box")).getPropertyValue('background-color'); // property
document.getElementById("box").onclick= function() {
alert(clr);
}
</script>
Try using the variable clr inside the function.
Also invoke the fucntion using onclick on the div itself.
Using regex to get the property backgorund color in whole css.
You can also use filter on #box using
var boxCss = clr.match(/#box{((.*\s*.*)*)}/g);
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<script>
function colorAlert() {
var clr = document.getElementsByTagName("style")[0].innerHTML;
var res = clr.match(/background-color:.*;/g);
alert(res[0]);
}
</script>
<style>
#box{
height: 100px;
width: 100px;
background-color: blue;
margin: 0px;
display: inline-block;
}
</style>
</head>
<body>
<div id="box" class="box" onclick="colorAlert();">
</div>
</body>
</html>
You have two ways to solve this :
keep <script> tag after after closing <div> tag
move clr var in side the onclick function,then you can write <script> tag where ever you want
When I practice waterfall flow layout, it has a problemlike this:
When the page is first loaded or I click [refresh] or press [F5], it looks bad. Each column of the images stacks!
But when I press [enter] in address bar or scroll with mouse, it looks good.
So how can I solve the problem? Thanks a lot!
var dataPic=["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg"];
var curtIndex=0;
$(document).ready(function(){
$(window).on("load",function(){
init(); //initializes the display with 30 pictures，call loadPic()
placePic(); //layout
});
$(window).scroll(function(){
while(scrollSlide()){ //whether it needs loading more pictures
loadPic(); //div and img can be loaded dynamically
}
placePic(); //layout for the elements that are just loaded
});
});
function init(){
var i=30;
do{
loadPic();
}while(i-- >= 0);
placePic();
}
function initSlide(){
var box=$(".box");
var lastboxHeight=box.last().get(0).offsetTop;
var documentHeight=$(document).height();
return (lastboxHeight<documentHeight)?true:false;
}
function currentIndex(){
if(curtIndex==9){
curtIndex=0;
}
return curtIndex;
}
function loadPic(){
var boxadd=$("<div>").addClass("box").appendTo($("#container"));
var current=$("<div>").addClass("pic").appendTo(boxadd);
$("<img>").attr("src","./img/"+dataPic[currentIndex()]).appendTo(current);
curtIndex++;
}
function placePic(){
var box=$(".box");
var boxWidth=box.eq(0).width();
var num=Math.floor($(window).width()/boxWidth);
var boxArr=[];
box.each(function(index,value){
var boxHeight=box.eq(index).outerHeight(true);
if(index<num){
boxArr[index]=boxHeight;
}
else{
var minboxHeight=Math.min.apply(null,boxArr);
var minboxIndex=$.inArray(minboxHeight,boxArr);
$(value).css({
"margin":"10px",
"box-shadow":"2px 2px 2px rgba(0,0,0,.3)",
"border-radius": "4px",
"position":"absolute",
"top":minboxHeight,
"left":box.eq(minboxIndex).position().left
});
boxArr[minboxIndex]+=box.eq(index).outerHeight(true);
}
});
}
function scrollSlide(){
var box=$(".box");
var lastboxHeight=box.last().get(0).offsetTop+Math.floor(box.last().height()/2);
var documentHeight=$(window).height();
var scrollHeight=$(window).scrollTop();
return (lastboxHeight<documentHeight+scrollHeight)?true:false;
}
*{
margin: 0px;
padding: 0px;
}
#container{
margin-left: auto;
margin-right: auto;
}
.box{
margin:10px;
box-shadow:2px 2px 2px rgba(0,0,0,.3);
border-radius: 4px;
position: relative;
float: left;
}
.pic img{
margin: 0px;
padding: 0px;
width:200px;
height: auto;
vertical-align: bottom;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body bgcolor="">
<div id="container">
</div>
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
<script src="testjs.js"></script>
</body>
</html>
I need to create simple link display like below image;
What I thought is add separate styles for all of these links. but its looks not the best way to do this.
have anyone tried something like this? can I do this with JavaScript or JQuery?
This allows you to randomly position the Text. Maybe you could edit it slightly for your needs?
<html>
<head>
<style type='text/css'>
body {
border: 1px solid #000;
height: 300px;
margin: 0;
padding: 0;
width: 300px;
}
.box {
height: 30px;
position: absolute;
width: auto;
}
#div1 { background:0;color:red; }
#div2 { background:0;color:blue; }
#div3 { background:0; color:green;}
</style>
<script type='text/javascript'>
function setDivPos() {
for (i=1; i<=3; i++) {
var x = Math.floor(Math.random()*250);
var y = Math.floor(Math.random()*250);
document.getElementById('div'+i).style.left = x + 'px';
document.getElementById('div'+i).style.top = y + 'px';
}
}
</script>
</head>
<body onload='setDivPos();'>
<div id='div1' class='box'>one word</div>
<div id='div2' class='box'>another word</div>
<div id='div3' class='box'>and so on</div>
</body>
</html>
Anyone have time to help?
Alternative
An alternative to this would be: this demo
Links:
There are several links here that you might be interested in
I need to have text underneath the circle when I hover over it. I have to use html, css and javascript. I'm not that good with javascript so I know thats the problem. Any help would be appreciated and if there is a simpler way to do the javascript code that would be good too!
Here is my html code:
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="style.css"/>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
<p>I often scribble in the sand</p>
<p>The words I find so hard to say</p>
<p>And hope the wind will come along</p>
<p>And blow them all your way.</p>
<div data-bind="event: { mouseover: EnableDetails, mouseout: DisableDetails
}"></div>
<p data-bind="visible: DetailsViewable(), text: AuthorName"></p>
</body>
</html>
here is my css code
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border:2px solid black;
background-color: black;
}
here is my javascript code:
var ViewModel = function() {
var self = this;
self.AuthorFirstName = ko.observable("Joe");
self.AuthorLastName = ko.observable("Blow");
self.AuthorName = ko.computed(function(){
return self.AuthorFirstName() + " " + self.AuthorLastName();
});
self.DetailsViewable = ko.observable(false);
self.EnableDetails = function() {
self.DetailsViewable(true);
};
self.DisableDetails = function() {
self.DetailsViewable(false);
};
};
var viewModel = new ViewModel();
ko.applyBindings(viewModel);
You can do this all with CSS.
http://jsfiddle.net/hzpKu/
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border:2px solid black;
background-color: black;
}
div:hover + p {
display:block;
}
p {
display:none;
}
Why not try with Jquery? is more easy with it.
http://jquery.com
(just download the plug in and put in the header)
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
div {
display: inline-block;
margin-left: 5px;
height: 100px;
width: 100px;
border-radius: 100%;
border:2px solid black;
background-color: black;
}
</style>
</head>
<body>
<p>I often scribble in the sand</p>
<p>The words I find so hard to say</p>
<p>And hope the wind will come along</p>
<p>And blow them all your way.</p>
<div id="circle"></div>
<p id="circle_text"></p>
<script>
$( "#circle" ).hover(function() {
$("#circle_text").text("Joe Blow");
}, function() {
$("#circle_text").text( "" );
});
</script>
</body>
</html>
You can also try something like this with a little bit of jquery...
Live Demo
<div id="circle"></div>
<div id="text">
...
</div>
$('#circle').on('mouseenter', function () {
$('#text').show("slow");
});
$('#circle').on('mouseout', function () {
$('#text').hide("slow");
});
Updated:
or you can do it with less code by using hover and toggle
$('#circle').hover( function () {
$('#text').toggle("slow");
});
Live Demo 2