Hello All I am a beginner in html and js, and I am trying to create a webpage containing a rectangle collection in which when a new rectangle is created is placed beside the previous rectangle.
I have created a div element and trying to add newly created div (rectangle shape with background color different based on condition), but I am not able to get the desired result.
<html>
<head>
<title>parkIn</title>
<meta charset="utf-8" />
</head>
<style>
.ParkSlots {
border: solid 1px;
width: 60%;
height: 400px;
top: 50%;
left: 50%;
position: fixed;
transform: translate(-50%, -50%);
display: inline;
}
.row:before,
.row:after {
content: "";
display: table;
clear: both;
}
.col-1 {
width: 15%;
margin-left: 10px;
height: 350px;
padding: 2px;
}
</style>
<body onload="viewCreate()">
<div class="ParkSlots">
<div class="row" id="content">
</div>
</div>
</body>
<script language="javascript">
function viewCreate() {
for (int i = 0; i < 5; i++) {
if (i % 2 == 0) {
createGreenBox();
} else {
createRedBox();
}
}
}
function createRedBox() {
var = document.createElement('div');
div.className = 'col-1';
div.style.backgroundColor = 'red';
document.getElementById('content').appendChild(div);
}
function createGreenBox() {
var = document.createElement('div');
div.className = 'col-1';
div.style.backgroundColor = 'lightgreen';
document.getElementById('content').appendChild(div);
}
</script>
</html>
I want an output that looks something like this:
Just in glancing at your code, I see at least two typos:
for (int i = 0; i < 5; i++) { - in JS, int is not used in this way. Use var i = 0...
var = document.createElement('div'); - you're missing a variable name on this line in both create box functions. I assume, from the rest of the code you need var div = document.createElement('div');
The rest will be CSS. In your stylesheet you're applying the border to the outter most containing div, from you're example, you need to apply that to the .col-1 class. You'll also want to use display:inline-block on that class, and set widths and margins to play nicely with the border size. I took the liberty of creating a jsfiddle for you with my recommended changes.
Related
I am supposed to assign .moon and .planet to the "planet" class and add a background colour to it, so I need to create a div. I have no idea on how to append a div to the body.
The code below shows what I'm currently trying. Please point out my mistake(s).
<html>
<head>
<meta charset="utf-8">
<title>Challenge: Create a solar system</title>
<style>
body {
background-color: black;
padding: 10px;
}
.planet {
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
padding: 10px;
position: relative;
}
.moon {
position: absolute;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgb(237, 237, 237);
}
</style>
</head>
<body>
<script>
var bodyEl = document.querySelector("body");
for (var i = 0; i < planetsNode.length; i++) {
var planetsNode = document.createElement("div");
planetsNode[i].className += "planet";
planetsNode.body.backgroundColor = "rgb(235, 12, 235)";
document.body.appendChild(planetsNode);
}
</script>
</body>
</html>
You are accessing the variable 'planetsNode' before it gets created and you are accessing body from 'planetNode' element while assigning background color.
Hope this might help.
<script>
var body = document.querySelector("body");
var planetsNode = document.createElement("div");
planetsNode.className = "planet";
body.style.backgroundColor = "rgb(235, 12, 235)";
body.appendChild(planetsNode);
</script>
I don't know why you are using loop.
You are trying to access 'length' property of the 'planetsNode' variable before it has been created. If you are looking to create a new div for each planet create an array of planets and loop through them.
<script>
var planets = [
["Mercury", "46.3, 46.3, 46.3"],
["Venus", "80.4, 78.4, 76.1"],
["Earth", "34.9, 37.3, 51.4"],
["Mars", "99.6, 52.9, 37.3"],
["Jupiter", "85.1, 74.9, 65.1"],
["Saturn", "86.3, 73.7, 50.6"],
["Uranus", "76.5, 91.4, 92.5"],
["Neptune", "28.2, 47.5, 98.8"]
];
for (var i = 0; i < planets.length; i++) {
var planetNode = document.createElement("div");
planetNode.style.backgroundColor = "rgb(" + planets[i][1] + ")";
var nameNode = document.createTextNode(planets[i][0]);
planetNode.appendChild(nameNode);
var body = document.querySelector("body");
body.appendChild(planetNode);
}
</script>
I have created a button which should shift the window's Y to "BOX - 5" div's Y middle through onclick. So in other words I want to set the "Box - 5" div in the middle of the window. I have tried many methods using window.scrollTo and using elements.innerHeight/2, but I still cannot center the element to the middle of the window/screen. Please Help.
I wish to only use Javascript, but if its not possible with it then I would accept jQuery script.
index.html:
window.onbeforeunload = function () {
this.scrollTo(0, 0);
}
var content = document.getElementById("content"),
current = 0;
for (var y=0;y<10;y++) {
var box = document.createElement("div");
box.id = "box";
box.innerHTML = "Box - " + (y+1);
content.appendChild(box);
}
document.querySelector("BUTTON").onclick = function() {
var box_5 = document.querySelectorAll("#box")[4];
/*
NEED HELP HERE
*/
}
body {
margin: 0;
}
#box {
position: relative;
height: 500px;
width: 100%;
margin: 5% auto 5% auto;
color: black;
background-color: skyblue;
border: black 1px solid;
font-size: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>CLICK TO SET THE WINDOW'S Y MIDDLE TO (BOX 5)'s Y MIDDLE</button>
<div id="content"></div>
</body>
</html>
Updated your snippet as below. You can use DOM element property offsetTop to check its Y position and use window.scroll to scroll the view to that element. Another sidenote, it's better to not assign the same id to multiple elements, so I change the id property to class and added identifier _{index} for the class name.
window.onbeforeunload = function () {
this.scrollTo(0, 0);
}
var content = document.getElementById("content"),
current = 0;
for (var y=0;y<10;y++) {
var box = document.createElement("div");
box.className += "box _" + (y+1);
box.innerHTML = "Box - " + (y+1);
content.appendChild(box);
}
document.querySelector("BUTTON").onclick = function() {
var box_5 = document.querySelectorAll(".box._5")[0];
if (box_5) {
// scroll the window view to the element
window.scroll({
top: box_5.offsetTop,
behavior: 'smooth',
})
}
}
body {
margin: 0;
}
.box {
height: 500px;
width: 100%;
margin: 5% auto 5% auto;
color: black;
background-color: skyblue;
border: black 1px solid;
font-size: 50px;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button>CLICK TO SET THE WINDOW'S Y MIDDLE TO (BOX 5)'s Y MIDDLE</button>
<div id="content"></div>
</body>
</html>
I am trying to make a transition with a div that should grow and overlap a text.
Here are my codes
const box = document.querySelector("#box");
const mybutt = document.querySelector("#mybutt");
mybutt.addEventListener("click", transitionfunction);
function transitionfunction() {
if(box.style.height != "100px"){
box.style.height = "100px";
box.style.transition = "2s";
}
else {
box.style.height = "50px";
box.style.transition = "2s";
}
}
#box {
background: red;
height: 50px;
width: 50px;
}
#para {
postion: fixed;
}
<div id="parentdiv">
<div id="box"></div>
<p id="para">Help</p>
</div>
<button id="mybutt">click</button>
At the moment, on the click of the button, both the button and the paragraph para move down, I want them to be fixed and I want the div, #box to cover the para but its not working. I tried putting it to fixed but doesnt work. And on the click on the button again, it should reveal the text again.
If you use position: fixed;, you should manually set the top property.
To make a div overlay some text, use z-index
const box = document.querySelector("#box");
const mybutt = document.querySelector("#mybutt");
mybutt.addEventListener("click", transitionfunction);
function transitionfunction() {
if (box.style.height != "100px"){
box.style.height = "100px";
box.style.transition = "2s";
} else {
box.style.height = "50px";
box.style.transition = "2s";
}
}
#mybutt {
position: fixed;
top: 120px;
}
#box {
background: red;
position: fixed;
height: 50px;
width: 50px;
z-index: 2;
}
#para {
position: fixed;
z-index: 1;
top: 60px;
}
<div id="parentdiv">
<div id="box"></div>
<p id="para">Help</p>
</div>
<button id="mybutt">click</button>
Firstly, you spelled "position" wrong for #para. Change it to:
#para {
position: absolute;
top: 10%;
}
This will keep the paragraph positioned in one spot; it won't move.
Fixed will work, although you might want to use 'absolute' instead if you want it to anchored to it's parent instead of the window itself.
Also, 'position' is misspelled; not sure if it is in your testing code.
The 'top' property has to be set for the element to know where to anchor itself, the 'position' property is what to anchor to.
HTML
<div id="parentdiv">
<div id="box"></div>
<p id="para">Help</p>
</div>
</div>
<button id="mybutt">click</button>
CSS
<style>
#box {
background: red;
height: 50px;
width: 50px;
}
#para {
position: absolute;
top:70;
}
</style>
*You also might want to move '#para' outside '#parentdiv', but it depends what you'll trying to ultimately do, it does work inside too.
Added:
To include an alert at 75px, you have to use a function that gives you more granular control(as far as I know at least). This is one solution:
<script>
const box = document.querySelector("#box");
const mybutt = document.querySelector("#mybutt");
mybutt.addEventListener("click", transitionfunction);
var intHeight = $("#box").css("height").split("p")[0];
function transitionfunction() {
if(intHeight < 100) {
intHeight++;
$("#box").css("height", intHeight + "px");
if (intHeight===76)
alert("75px!")
requestAnimationFrame(transitionfunction);
}
intHeight = $("#box").css("height").split("p")[0];
mybutt.addEventListener("click", revtransitionfunction);
mybutt.removeEventListener("click", transitionfunction);
}
function revtransitionfunction() {
if(intHeight >= 50) {
intHeight--;
$("#box").css("height", intHeight + "px");
if (intHeight===74)
alert("75px!")
requestAnimationFrame(revtransitionfunction);
}
intHeight = $("#box").css("height").split("p")[0];
mybutt.addEventListener("click", transitionfunction);
mybutt.removeEventListener("click", revtransitionfunction);
}
I want to dynamically create 6 boxes when the page is loaded. They should be inline-block, so eventually it will look like 3 lines, with 2 boxes on each line.
I tried the code below without any JavaScript (just used some static HTML and CSS), and it seemed to work fine.
Generally, the script looks fine to me -- however, it does nothing. What am I doing wrong? Is it something about the order of the CSS and the JavaScript?
style1.css:
* {
margin:0;
padding:0;
}
header,section,nav,aside,footer{
display:block;
}
.wrapper{
position: relative;
height: 2150px;
width: 900px;
background-color: #336b98;
margin: 0 auto;
}
section#contentSection_layout3{
position: absolute;
top:193px;
height: 1957px;
width: 900px;
border-right: solid 1px #FFF;
}
HTML & JavaScript:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="includes/style1.css">
<script src="includes/JavaScript.js"></script>
<title> EX </title>
<script>
window.onload = function(){
var boxesNum = 6;
for(var i = 0; i < boxesNum; i++){
var rect = new rect();
rect.setAttribute('display', 'inline-block');
rect.setAttribute('margin-left', '200');
rect.setAttribute('margin-top', '100');
rect.setAttribute('height', '150');
rect.setAttribute('width', '150');
rect.setAttribute('background-color', '#FFF');
document.getElementById('contentSection_layout3').appendChild(rect);
}
};
</script>
</head>
<body>
<div class="wrapper">
<section id="contentSection_layout3"></section>
</div>
</body>
</html>
var rect = new rect();
Unless you have defined rect elsewhere, you want:
var rect = document.createElement('div');
Also, setAttribute is not for styles, style is for styles.
rect.style.display = 'inline-block';
rect.style.marginLeft '200px';
rect.style.marginTop = '100px';
rect.style.height = '150px';
rect.style.width = '150px';
rect.style.backgroundColor = '#FFF';
Also, don't forget your pxs.
I am trying to create a hovering menu, but it doesn't work. I create a menu and set it with a high z-index value. I then generate a table using javascript, but then I scroll down the table goes in front of my menu buttons.
Edit:
I am just trying to get this to work for FF8.
Edit 2:
This code will actually work. In order to make my buttons appear on top I just set my table z-index to -1;
#blackHead
{
width:100%;
background-color:White;
}
#table
{
position:relative;
width: 40%;
left: 30%;
z-index: -1;
}
#header
{
position: fixed;
top:3%;
left:30%;
width:40%;
z-index: 100;
}
.inv
{
visibility:hidden;
width:30px;
}
.headerButton
{
text-decoration:none;
position:relative;
font-family:Arial;
font-weight:bold;
color:White;
border: solid 1px black;
background-color: Black;
border-radius: 5px;
padding: 5px;
z-index: 101;
}
.headerButton:hover
{
background-color: White;
color: Black;
}
#myTable {
position: absolute;
top:10%;
}
#button1
{
position: absolute;
top:0%;
left:0%;
}
#button2
{
position: absolute;
top:0%;
right:0%;
}
#button3
{
position: absolute;
top:0%;
left:50%;
}
#button4
{
position: absolute;
top:10%;
left:50%;
}
#button5
{
position: absolute;
top:10%;
right:0%;
}
</style>
<html>
<head>
<title>Table</title>
</head>
<body>
<div id="header" class="headerBar">
Create Table
<span class="inv">" "</span>
Update Table
<span class="inv">" "</span>
Quit
<span class="inv">" "</span>
Send Json
<span class="inv">" "</span>
Start Timer
<span class="inv">" "</span>
Stop Timer
</div>
</body>
</html>
<script type="text/javascript">
function create_table() {
// get the reference for the body
var body = document.getElementsByTagName("body")[0];
// creates a <table> element and a <tbody> element
var tbl = document.createElement("table");
tbl.id = "table";
var tblBody = document.createElement("tbody");
tbl.style.zIndex = -1;
// creating all cells
var xmlDoc = getXML();
var x = xmlDoc.getElementsByTagName("Registers");
for (var i = 0; i < x.length; i++) {
// creates a table row
var row = document.createElement("tr");
// Create a <td> element and a text node, make the text
// node the contents of the <td>, and put the <td> at
// the end of the table row
var name = document.createElement("td");
name.style.width = "80%";
var nameText = document.createTextNode(x[i].getElementsByTagName("name")[0].childNodes[0].nodeValue);
name.appendChild(nameText);
row.appendChild(name);
var number = document.createElement("td");
number.style.width = "10%";
var numberText = document.createTextNode(x[i].getElementsByTagName("number")[0].childNodes[0].nodeValue);
number.appendChild(numberText);
row.appendChild(number);
var value = document.createElement("td");
value.style.width = "10%";
var valueText = document.createTextNode(x[i].getElementsByTagName("value")[0].childNodes[0].nodeValue);
value.appendChild(valueText);
row.appendChild(value);
row.addEventListener("dblclick", modify_value, false);
// add the row to the end of the table body
tblBody.appendChild(row);
}
// put the <tbody> in the <table>
tbl.appendChild(tblBody);
// appends <table> into <body>
body.appendChild(tbl);
// sets the border attribute of tbl to 2;
tbl.setAttribute("border", "2");
tbl.style.position = "absolute";
tbl.style.top = "30%";
}
</script>
myTable has position: absolute; - that will always go over something with position: static;
z-index will work, but both elements (the table and the menu have to both have z-index and position: absolute;
Without seeing the HTML it's pretty hard to detect the problem.
Example
Here's a fiddle describing the problem: http://jsfiddle.net/rZysU/
.a1's z-index is set to 1000 but it still is not visible. b1 is visible although its z-index is only 1. (it even is the same with -1)
In General
If you nest HTML elements then each nesting level creates its own z-index stack. If you set the z-index of an element inside a deeper node in the DOM tree then it might happen that although you've set the z-index to a high value it still will be underneath other elements that reside in a higher hierarchy level of the DOM.
Example:
div1
div1a
a (z-index= 100)
b (z-index= 101)
c (z-index= 102)
div1b
d (z-index= -1)
e (z-index= 1)
d will still be drawn on top of a as div1b is given a higher z-index because it is listed after div1a and HTML renderers draw one node after another and define z-indicies by that way if you don't provide it by your CSS definition.