First and foremost, this is my code.
var size = 400
function createGrid(size) {
$("#create").click(function() {
for (i = 0; i <= size; i++) {
$("#container").append('<div class="grid"> </div>');
}
});
}
$(document).ready(createGrid);
#container {
top: 10px;
position: relative;
width: 960px;
height: 960px;
border-color: black;
margin: auto;
outline: 2px solid black;
}
.grid {
display: inline-block;
border: 1px solid white;
background-color: black;
float: left;
width: 10px;
height: 10px;
}
<!DOCTYPE html>
<html>
<title>
Sam's Etcha Sketch
</title>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div>
<button id="create">Create!</button>
</div>
<div id="container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
My goal is to create square divs inside #container after clicking on the button #create. I don't mind how ugly it looks right now, I just want to be able to click on the button to add squares(which isn't the result as of now). I checked JS Bin and my browser console for any bugs or errors but I can't seem to find any. Not sure what I'm doing wrong as I tried a simple FadeOut function on the button and it didn't seem to work, so maybe it's the way I placed the into the HTML? (I tried placing it inside as well.)
TL;DR
What is wrong with my code that is causing my click() function to not append any square divs inside a container?
You're never passing size to createGrid
Here's your code.
// the outer "size" variable
var size = 400
// this creates a new "size" variable which shadows the outer one
function createGrid(size) {
$("#create").click(function() {
for (i = 0; i <= size; i++) {
$("#container").append('<div class="grid"> </div>');
}
});
}
// this passes "createGrid" to the event handler, which calls it without any argument
$(document).ready(createGrid);
Here's how to do it:
// this generates an event handler with a custom "size" in its scope
function getGridCreator(container, size) {
return function () {
$("#create").click(function() {
for (i = 0; i <= size; i++) {
$(container).append('<div class="grid"> </div>');
}
});
};
}
// this passes the grid creator to the event handler, which again calls
// it without any argument, but this time "size" is in scope
$(document).ready(getGridCreator("#container", 400));
As a general tip: Avoid global variables, use function parameters and closures instead.
Try this i made a few changes in your script
$(document).ready(function(){
var size = 400
function createGrid(size) {
$("#create").click(function() {
for (i = 0; i <= size; i++) {
$("#container").append($('<div class="grid"/>'));
}
});
}
createGrid(size)
});
#container {
top: 10px;
position: relative;
width: 960px;
height: 960px;
border-color: black;
margin: auto;
outline: 2px solid black;
}
.grid {
display: inline-block;
border: 1px solid white;
background-color: black;
float: left;
width: 10px;
height: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<title>
Sam's Etcha Sketch
</title>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div>
<button id="create">Create!</button>
</div>
<div id="container"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Related
the svg id = "map"
the normal path class = "T"
Selected class ="Tactive"
Tcurrent is a active shave by Default
var oMap= document.getElementById("map");
var oRng= document.getElementsByClassName("T");
var Tcurrent
for (var j = 0; j < oRng.length; j++) {
oRng[j].addEventListener("click", function () {
Tcurrent = document.getElementsByClassName("T Tactive");
Tcurrent[0].classList ="T"
this.classList = "T Tactive";
});
}
Hopefully this may help...
$('.svg').click(function() {
$('.svg').removeClass('selected'); // removes initial selected classes.
this.classList.add('selected'); // adds selected class for clicked svg.
});
.svg {
margin: 15px;
padding: 8px;
height: 100px;
width: 100px;
display: inline-block;
background: #eee;
border-radius: 4px;
}
.svg:hover {
cursor: pointer;
}
.selected {
border: 2px solid #333;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Selected</title>
</head>
<body>
<main>
<div class="svg">a.</div>
<div class="svg">b.</div>
</main>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
I try to load an array from an external JS file into my HTML and have problems with that.
My js.js:
var temp_max = [4,9,2,5,8,4,2,10];
My HTML:
Note: Please download this file DateJS and insert it into "DATE-JS"!!
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--CSS for layout-->
<link rel="stylesheet" type="text/css" href="mystyle.css">
<!--Date library for german date layout-->
<script src="DATE-JS"></script>
<script src="js.js"></script>
</head>
<body>
<br>
<br>
<div style="width:80%" position="absolute">
<div class="header">
<script>
for(var i = 0 ; i <8 ; i++)
{
var weekday=Date.today().addDays(i).toString('dddd');
document.write("<div id='div_weekday'>" + weekday + "</div>");
}
for(var i = 0 ; i <8 ; i++)
{
var day = Date.today().addDays(i).toString('dd');
document.write("<div id='div_date'>" + day + "</div>")
}
</script>
</div>
</div>
</body>
</html>
My CSS:
* {
box-sizing: border-box;
}
body {
background-color: rgb(86,86,85);
}
h1:after {
content: " ";
width: 70.5%;
height: 2px;
background-color: rgb(228,203,153);
position:absolute;
top: 50%;
margin-left: 15px
}
.header {
width: 100%;
}
.header > div {
color: rgb(228,203,153);
width: 12.5%;
float: left;
border: solid rgb(228,203,153);
border-width: 1px 1px 1px 0;
text-align: left;
word-break: break-all;
}
.header > div:first-child {
border-width: 1px;
}
#div_date {
border: none;
width: 12.5%;
font-size: 60px;
text-align: right;
border-bottom: solid rgba(228,203,153,0.3);
border-width: 0.5px;
padding-right: 1%
}
#div_weekday {
border: none;
width: 12.5%;
font-size: 20px;
text-align: left;
padding-left: 1%
}
Here is a screenshot without importing the JS array.
So I want that my temp_max array values are displayed exactly above the German weekdays!
So above the first information: 'Donnerstag' the script should display the value 4 from the array and so on.
Please note that I want to export this array from an external JS-file, I am not able to write this variable into my HTML file!
I already tried to use
document.getElementById
but this does not work for me.
If the problem just in looping over the created divs, I think you can do this.
All what you need to change is just adding a different ids to your divs.
Just use i index in your ids.
Something like this:
Creation:
for(var i = 0 ; i <8 ; i++) {
var weekday=Date.today().addDays(i).toString('dddd');
document.write("<div id='div_weekday_" + i + "'>" + weekday + "</div>");
}
Updating data:
for (var i = 0; i < 8; i++) {
document.getElementById('div_weekday_' + i).innerHTML = temp_max[i].weekday;
}
I’ currently working on a website, where a user should be able to write and insert new songs with belonging chords into a database.
To sum things up, and get to the point pretty quick, here is my problem:
I have a div with the id “#textarea”, and the attribute contenteditable=“true”. On each enter/linebreak, I would like to create a new div with the class “.chords” and the attribute contenteditable=“false”. This ".chords" div should be placed right before the new line, like the image shows here:
The red color is the #textarea div, and the blue color the .chords divs
So my question is: how do I do this?
I’ve posted the code I've tried in the end of this post, but as you see if you run it, the .chords divs are positioned below the new line, so I’m now a bit stuck.. If any of you guys have an idea on how to do this, please let me hear from you!
$(function(e) {
$('#textarea').keydown(function(e) {
var i = 0;
// Check if the returnkey is being pressed
if (e.keyCode === 13) {
$("#textarea div:last-of-type").after("<div class=\"chords\" id=\"" + (i + 1) + "\" contenteditable=\"false\"></div>");
i = i + 1;
}
});
})
#textarea {
border: 1px solid black;
line-height: 50px;
font-size: 20px;
}
.chords {
height: 30px;
border: 1px solid black;
position: relative;
}
#textarea div:not(.chords) {
margin-top: 20px;
min-height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="textarea" contenteditable="true">
<div class="chords" id="1" contenteditable="false"></div>
<div></div>
<!--End of #textarea-->
</div>
Similar Something like that
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#textarea {
border: 1px solid red;
line-height: 50px;
font-size: 20px;
min-height: 40px;
}
.chords {
height: 30px;
border: 1px solid black;
position: relative;
margin-top:5px;
}
#textarea div:not(.chords) {
margin-top: 20px;
min-height: 40px;
}
</style>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(e) {
$('#textarea').keydown(function(e) {
var i = 0;
// Check if the returnkey is being pressed
if (e.keyCode === 13) {
$(this).after('<div class="chords" id="'+ (i + 1) +'" contenteditable="false"></div><div>'+$(this).html()+'</div>');
$(this).html("");
i = i + 1;
}
});
})
</script>
<div id="textarea" contenteditable="true">
</div>
<div class="chords" id="1" contenteditable="false"></div>
<div></div>
<!--End of #textarea-->
</body>
</html>
Check it out
https://jsfiddle.net/emarufhasan/66L2ohnp/?utm_source=website&utm_medium=embed&utm_campaign=66L2ohnp
var count = 0;
$(document).ready(function() {
$("div").on("click", function() {
$("#test").fadeOut(500);
count++;
$("#test").fadeIn(500);
document.getElementById("test").innerHTML = count;
});
});
div {
background-color: gold;
border: 2px solid goldenrod;
border-radius: 7px;
text-align: center;
vertical-align: middle;
font-family: Arial;
font-size: 35px;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div><span id="test">0</span></div>
</body>
</html>
I am new to Jquery. In the above code, the number inside the div increments on clicking and fades out and in. I want it to work such that the existing number disappears first and then the next number appears while, here, the number first changes and then fades out and in, which is not how I want it to work. Please run the snippet to see the problem. What is wrong or missing in my code? Any help would be appreciated.
It's because it takes the fadeOut 500 ms but the increment of count and the assignment happens right away. You can use the callback complete of fadeOut to achieve what you need:
$("#test").fadeOut(500, function() { // the function will be called when the fadeOut is completed
count++; // increment count
this.textContent = count; // assign it to this element (#test) textContent
}).fadeIn(500); // then fadeIn
var count = 0;
$(document).ready(function() {
$("div").on("click", function() {
$("#test").fadeOut(500, function() {
count++;
this.textContent = count;
}).fadeIn(500);
});
});
div {
background-color: gold;
border: 2px solid goldenrod;
border-radius: 7px;
text-align: center;
vertical-align: middle;
font-family: Arial;
font-size: 35px;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div><span id="test">0</span></div>
</body>
</html>
Try this
you need to increment in callback of fading out, meaning increment when animation is complete
var count = 0;
$(document).ready(function() {
$("div").on("click", function() {
$("#test").fadeOut(500, function(){
count++;
document.getElementById("test").innerHTML = count;
}
);
$("#test").fadeIn(500);
});
});
div {
background-color: gold;
border: 2px solid goldenrod;
border-radius: 7px;
text-align: center;
vertical-align: middle;
font-family: Arial;
font-size: 35px;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div><span id="test">0</span></div>
</body>
</html>
var count = 0;
$(document).ready(function() {
$("div").on("click", function() {
count++;
$("#test").fadeOut(500).$("test").text(count).fadeIn(500);
});
});
"JQuery Chaining"
https://www.w3schools.com/jquery/jquery_chaining.asp
I have been making a simple page using flexboxes that should expand one flex box to the majority of the page on a click. However, the page will occasionally make the sizes of all of the flexboxes equal (see the below picture). I've only notices it when I click in the corners of the page on the yellow or blue sections. Does anyone have an idea of what is going on?
Edit: Added relevant code and removed JS Bin links
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home Page</title>
<link href="/stylesheets/flex.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="yel" class="page selected">
<h2>Home
</h2>
</div>
<div id="green" class="page">
<h2>About Me
</h2>
</div>
<div id="red" class="page">
<h2>Portfolio
</h2>
</div>
<div id="blue" class="page">
<h2>Playground
</h2>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
width: 100%;
height: 100%;
display: -webkit-flex;
-webkit-flex-flow: row;
}
.selected {
min-width: 90%;
}
#red {
background-color: #f00;
}
#yel {
background-color: #ff0;
}
#green {
background-color: #008000;
}
#blue {
background-color: #00f;
}
.page {
flex: 1;
min-width: auto;
min-height: 100%;
-webkit-transition-duration: 750ms;
}
.page h2 {
font: 20px Helvetica, Tahoma, sans-serif bold;
color: #ccc;
-webkit-transform: rotate(90deg);
margin: 5px;
}
.content {
margin: 10% auto auto auto;
padding: 10px;
width: 90%;
height: 50%;
border: 1px solid #000;
}
JS
var $ = function(sel, e) {return (e || document).querySelector(sel)};
var $$ = function(sel, e) {return (e || document).querySelectorAll(sel)};
var boxes = $$('.page');
var links = $$('.nav');
var flexTransitionTo = function flexTransitionTo(el) {
if(!el.classList.contains('selected')) {
$('.selected').classList.remove('selected');
el.classList.add('selected');
}
};
for(var i = 0; i < boxes.length; i++) {
var el;
boxes[i].addEventListener('click', function(event) {
el = event.target;
flexTransitionTo(el);
});
}
for(var i = 0; i < links.length; i++) {
var el;
var pageEl;
links[i].addEventListener('click', function(event) {
el = event.target;
pageEl = $(el.dataset.page); //should get the page I want
flexTransitionTo(pageEl);
});
}
I can tell you the why, but I can't give you the fix (my JavaScript-fu is weak). The problem is that when you click on the h2 element (or probably any other descendant of the page element), it is intercepting the click event and it has the selected class applied to it. Because the selected class is removed from all page elements, none of them are set to selected.