Changing colour of each array element - javascript

I am new to HTML/CSS/JavaScript/Jquery/
I have an array of div tags which are represented as boxes. I would like to change the colour of the boxes when I hover over them but I am not sure how to access each div tag and change its properties.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet3.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script3.js"></script>
<body>
<div class="wrapper">
</div>
</body>
</head>
</html>
CSS:
body
{
background:#000;
}
.square
{
display: table-cell;
vertical-align: middle;
text-align: center;
border:2px solid #73AD21;
height: 2.5rem;
width: 2.5rem;
background-color: white;
}
Javascript/Jquery:
$(document).ready(function() {
for(i=0; i<16; i++) {
$('.wrapper').append('<div class="line">');
for(j=0; j<16; j++) {
$('.wrapper').append('<div class="square">'+j+'</div>');
}
$('.wrapper').append('</div>');
}
/*$('.wrapper').hover(function()) {
$(this).css("background","#F00");
}*/
});
When I add the commented lines in Javascript/Jquery section, the whole webpage becomes black.

When I add the commented lines in JavaScript/jQuery section, the whole webpage becomes black.
That's because there is a syntax error. When this occurs, none of the .square elements are being appended, which is exactly why you are seeing a blank page.
The .hover() method expects two functions as parameters (a hover-in, and hover-out callback). Therefore it seems like you want the following:
Example Here
$('.wrapper .square').hover(function() {
$(this).css("background", "#f00");
}, function() {
$(this).css("background", "#fff")
});
However, you can do this with pure CSS using the :hover pseudo-class. You don't actually need jQuery for this.
Example Here
.square:hover {
background-color: #f00;
}

There is some syntactical error in your code on commented lines.
This is correct one
$(document).ready(function() {
for(i=0; i<16; i++) {
$('.wrapper').append('<div class="line">');
for(j=0; j<16; j++) {
$('.wrapper').append('<div class="square">'+j+'</div>');
}
$('.wrapper').append('</div>');
}
$('.square').hover(function() {
$(this).css("background","#F00");
},function(){
$(this).css("background","#fff");
});
});
WORKING FIDDLE

Hope you want this...
$(document).ready(function() {
for(i=0; i<16; i++) {
$('.wrapper').append('<div class="line">');
for(j=0; j<16; j++) {
$('.wrapper').append('<div class="square">'+j+'</div>');
}
$('.wrapper').append('</div>');
}
$('.wrapper').on('hover','.square',function() {
$(this).css("background","#F00");
});
$('.wrapper').on('mouseleave','.square',function() {
$(this).css("background","#FFF");
});
});
body
{
background:#000;
}
.square
{
display: table-cell;
vertical-align: middle;
text-align: center;
border:2px solid #73AD21;
height: 2.5rem;
width: 2.5rem;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet3.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="script3.js"></script>
<body>
<div class="wrapper">
</div>
</body>
</head>
</html>

That is because you have a syntax error on this line
$('.wrapper').hover(function()) {
$(this).css("background","#F00");
}
You are closing the hover function before you call the $(this).css function so the "this" that is being selected is the body. It should be:
$('.square').hover(function() {
$(this).css("background","#F00");
}, function() {
$(this).css("background","#FFF");
});

Related

children of element with column-width move around when clicked with a <body> of a certain size

I cannot manage to reproduce the problem in fiddle.
The problem occurs when is exactly 1286px wide (in the inspector), but it might also happen at other widths.
Clicking the elements changes the height of the body, from 86 to 85.9833.
https://i.imgur.com/rGJPFyW.png
https://gfycat.com/acidicmarvelousabyssiniancat
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
body {font-family: monospace; background: #222; color:#aaa;}
html{scrollbar-color: grey black;}
#ui_tags{
column-width: 80px;
margin: 1em;
padding: 1em;
background-color: #181818;
/*width: 90%;*/
}
.tag_select {
cursor:pointer;
color:#aaa;
}
.tag_select:hover {
background: #222;
}
.tag_select:active {
background: #f00;
}
p {margin-bottom:1px;margin-top:1px;}
</style>
<body>
<div id="ui">
<div id="ui_tags"><p class="tag_select">4ch:114</p><p class="tag_select">avtr:54</p><p class="tag_select">awe:53</p><p class="tag_select">btfl:211</p><p class="tag_select">cat:319</p><p class="tag_select">charc:19</p><p class="tag_select">cmc:145</p><p class="tag_select">dung:15</p><p class="tag_select">frnc:53</p><p class="tag_select">fun:5</p><p class="tag_select">inspr:192</p><p class="tag_select">lego:16</p><p class="tag_select">lndsc:63</p><p class="tag_select">mchn:5</p><p class="tag_select">meh:42</p><p class="tag_select">mnstr:87</p><p class="tag_select">pgrmh:62</p><p class="tag_select">pltc:239</p><p class="tag_select">ppl:22</p><p class="tag_select">pxlr:72</p><p class="tag_select">shrlt:79</p><p class="tag_select">txl:145</p><p class="tag_select">urbn:6</p><p class="tag_select">vlgr:135</p><p class="tag_select">wrd:23</p>
</div>
</div>
<div id="gallery">
</div>
<script type="text/javascript">
window.onload = function(){
var tag_selects = document.getElementsByClassName("tag_select");
for(var i = 0, size = tag_selects.length; i < size ; i++){
// var elem = tag_selects[i].children[1];
var elem = tag_selects[i];
elem.addEventListener("click", function(event){
char = this.innerHTML;
document.getElementById('gallery').innerHTML = char;
});
}
}
</script>
</body>
</html>
I don't know if I'm using bad practices, or how to avoid this problem. I think column-width is not really stable and should be avoided but I'm not sure.
I modified the <p> to <span> and the problem went away.

One of Multiple Scripts in HTML Sheet Not Working

I am trying to have multiple scripts run in my html sheet, and it seems to not be working. All the other scripts work except for the script for the blinking function. I don't see what the problem is. Can you find the issue with my code? Thanks in advance!
Here is my code below:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
});
</script>
<script>
//blink
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
</script>
</head>
<body>
<p>This is a paragraph.</p>
</div>
<div class="text2">
-- : --
</div>
<button class="btn1">online</button>
</body>
</html>
The second script must be inside a JQuery function.
$(document).ready(function(){
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
shown = false;
} else {
element.show();
shown = true;
}
}
});
The second script's contents should be in the document ready handler otherwise the code attempts to locate and work with the .text2 element before that element has been parsed into memory.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: coral;
color: white;
}
.text2{
color: white;
width: 100px;
float: right;
padding-top: 10px;
}
</style>
<link rel="stylesheet" href="styles.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".btn1").on('click',function(){
$("p").hide();
$(".text2").hide()
$('body').css("background", "black");
});
var element = $(".text2");
var shown = true;
setInterval(toggle, 500);
function toggle() {
if(shown) {
element.hide();
} else {
element.show();
}
shown = !shown;
}
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<div class="text2">-- : --</div>
<button class="btn1">online</button>
</body>
</html>

How to stack div elements using JavaScript

I am trying to create a checker board using pure JavaScript, not jQuery.
I have created the first row, but cannot seem to "stack" the rows to create a full board. If there is a better way to go about this than the road I'm going down, please enlighten me.
<!DOCTYPE html>
<html>
<head>
<title>Checkerboard</title>
<style>
.box {
height: 50px;
width: 50px;
border: 1px solid black;
display: inline-block;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
var row = function (node, count) {
for (var i = 1; i < count; i++) {
if (i % 2 === 0) {
copy = node.cloneNode(true);
node.parentNode.insertBefore(copy, node).style.backgroundColor = "white";
} else {
copy = node.cloneNode(true);
node.parentNode.insertBefore(copy, node).style.backgroundColor = "red";
}
}
}
row(document.querySelector('.box'), 8);
</script>
</html>
Your code works fine, you just need to actually run the function you've created:
row(document.getElementsByClassName("box")[0], 50);
JSFiddle: http://jsfiddle.net/63dcjsk4/
Edit
If you're talking about the gap that appears between rows, fix this by using float and removing the inline-block display:
.box {
border: 1px solid black;
height: 50px;
float: left;
width: 50px;
}
JSFiddle: http://jsfiddle.net/63dcjsk4/1/

$(".grid").mouseenter doesn't run after I create new divs

My $(".grid").mouseenter doesn't run after I press my new button, which deletes old divs (.grid) and creates new ones. So, what can I change to make it work after that. Also, why are there empty spaces above all .grid divs?
$(document).ready(function(){
createGrid();
$(".grid").mouseenter(function(){
$(this).addClass("hovered")
});
$("#new").click(function(){
clear();
createGrid(prompt("How big would you like your new grid to be (x<64)?"));
});
$("#clear").click(function(){
clear();
});
});
function clear(){
$(".grid").removeClass("hovered");
};
function gridSize(measuring, howBig){
if (howBig==null){
howBig = 16;
}
switch(measuring){
case "height":
return parseInt($("#surface").height()/howBig);
case "width":
return parseInt($("#surface").width()/howBig);
}
};
function createGrid(howBig){
$("#surface").empty();
if(howBig == null || howBig == ""){
for(var i=0; i < 16; i++){
$("#surface").prepend("<div class = 'grid' style = 'width: " +gridSize('width')+"px ; height:"+gridSize('height')+ "px;'></div>");
for(var j=0; j < 15; j++){
$("#surface").prepend("<div class = 'grid' style = 'width: " +gridSize('width')+"px ; height:"+gridSize('height')+ "px;'></div>");
}
}
}
else {
for(var i=0; i < howBig; i++){
$("#surface").prepend("<div class = 'grid' style = 'width: " +gridSize('width', howBig)+"px ; height:"+gridSize('height', howBig)+ "px;'></div>");
for(var j=0; j < howBig-1; j++){
$("#surface").prepend("<div class = 'grid' style = 'width: " +gridSize('width', howBig)+"px ; height:"+gridSize('height', howBig)+ "px;'></div>");
}
}
}
};
* { margin:0; padding:0; }
.wrapper {
width: 800px;
margin: 0px auto;
}
#reset {
width: 60px;
margin : 15px auto;
}
#surface {
margin: 0px auto;
width: 800px;
height: 800px;
}
.grid {
background-color: #D3D3D3;
margin: 0px;
display: inline-block;
}
.hovered {
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<link rel = "stylesheet" href = "css/styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src = "js/script.js"></script>
</head>
<body>
<div class = "wrapper">
<button id ="new">New</button>
<button id ="clear">Clear</button>
<div id = "surface"></div>
</div>
</body>
</html>
Replace:
$(".grid").mouseenter(function(){
$(this).addClass("hovered")
});
with
$("#surface").on('mouseenter','.grid',function(){
$(this).addClass("hovered")
});
This is required because your original code was attaching event handlers to the .grid elements, which you delete and create new elements (which don't have the handlers attached). You could just re-run your original code to attach new handlers when you create new elements, but using event delegation is a much better approach as you only attaching an event handler on one element (#surface) rather than on each individual .grid element, and of course, since you aren't removing and recreating the #surface element, you don't need to detach/re-attach it when you create a new grid.
You can read more about jQuery's on method and event delegation here: http://api.jquery.com/on/
As for the spacing issue, it is because you are using inline-block elements, and inline-elements will preserve atleast one space if present between elements. You can either remove all spaces (and line breaks) between the elements, or you can place font-size:0; on the #surface element to shrink the space size to nothing.
maxSize=16;
$(document).ready(function(){
createGrid(16);
$("#surface").on('mouseenter','div',function(){
$(this).addClass("hovered")
});
$("#new").click(function(){
createGrid(prompt("How big would you like your new grid to be (x<" + maxSize + ")?"));
});
$("#clear").click(function(){
$("#surface>div").removeClass("hovered");
});
});
function gridSize(measuring, howBig){
switch(measuring){
case "height":
return parseInt($("#surface").height()/howBig);
case "width":
return parseInt($("#surface").width()/howBig);
}
};
function createGrid(howBig){
howBig=parseInt(howBig);
if(howBig == NaN || howBig<1 || howBig>maxSize){
howBig=16;
}
$("#surface").empty();
for(var i=0; i < howBig*howBig; i++){
$("#surface").append("<div style='width:" +gridSize('width', howBig)+"px; height:"+gridSize('height', howBig)+ "px;'></div>");
}
};
* { margin:0; padding:0; }
.wrapper {
width: 800px;
margin: 0 auto;
}
#reset {
width: 60px;
margin : 15px auto;
}
#surface {
margin: 0 auto;
width: 800px;
height: 800px;
font-size: 0;
}
#surface>div {
background-color: #D3D3D3;
margin: 0;
display: inline-block;
}
#surface>div.hovered {
background-color: black;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
<body>
<div class="wrapper">
<button id="new">New</button>
<button id="clear">Clear</button>
<div id="surface"></div>
</div>
</body>
</html>
I've also taken the liberty to clean up some of the javascript for you.
You will need to use event delegation to work with dynamically created elements
$("#surface").on('mouseenter','.grid',function(){
$(this).addClass("hovered");
});
---> https://learn.jquery.com/events/event-delegation/
it does not work because the divs created after you attach the action to it so you must to use one of this statements :
Example 1:
$("body").on('mouseenter','.grid',function(){
$(this).addClass("hovered");
})
http://api.jquery.com/on/
Example 2:
$("body").live('mouseenter','.grid',function(){
$(this).addClass("hovered");
})
http://api.jquery.com/live/
Example 3:
$("body").delegate('mouseenter','.grid',function(){
$(this).addClass("hovered");
})
http://api.jquery.com/delegate/

How to Add a function to a dynamically created Selectable(jqueryui)?

I tried to add a function to the selectable jquery ui dynamically. I tried to generate the selectable list dynamically and assigned an function to it. The alert message from myFUnction should popped up when I clicked the list, but for some reason it only works in Firefox. The alert is not popping out in chrome or IE. Any idea why is it not working on chrome or IE?
cheers,
<html>
<head>
<title>jQuery UI Selectable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style>
#feedback { font-size: 1.4em; }
#selectable .ui-selecting { background: #FECA40; }
#selectable .ui-selected { background: #F39814; color: white; }
#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#selectable li { margin: 3px; padding: 0.4em; font-size: 1.4em; height: 18px; }
</style>
<script>
$document.ready(function() {
$("#myButton").button();
});
function generate(){ //generate a selectable list
$content=$("<ol id='selectable'>");
for (a=0;a<3;a++)
{
$content.append("<li class='ui-widget-content' onclick='myFunction()'>item"+a+"</li>");
}
$content.append("</ol>");
$("#myList").append($content);
$( "#selectable" ).selectable();
}
function myFunction()//simple alert msg
{
alert("Hello World!");
}
</script>
</head>
<body>
<div id='myList'/>
<div id='myText'/>
<button id="myButton" onClick="generate()">Generate List</button>
</body>
</html>
I see several problems with your code.
1: Where is $document declared? I think you meant
$( document )
2: You should never declare variables in global-space from with-in your functions.
$content=$("<ol id='selectable'>");
Declares $content in the global scope not inside the function as you probably meant to do.
var $content=$("<ol id='selectable'>");
Note the keyword "var".
3: Don't use inline events in your HTML, bind the events via JavaScript http://api.jquery.com/on/
4: I'd advise you to use jslint or jshint to check your JS-code for these types of errors.

Categories