I am trying to practice JavaScript with basic DOM manipulation but I keep getting 2 errors:
1.SyntaxError: missing ; before statement
2.TypeError: size is not a function
function size() {
var height = document.body.getElementById('hover1').style.height: 500 px;
var width = document.body.getElementById('hover1').style.width: 500 px;
}
console.log(hover);
<!DOCTYPE html>
<html>
<head>
<title>javascript practice</title>
<meta charset="utf-8" />
<style>
body {
margin: 7em auto;
background-color: green;
width: 90%;
}
#size1 {
background-color: blue;
width: 150px;
height: 150px;
margin: 3em auto;
}
</style>
</head>
<body>
<div id="size1"></div>
<input type="button" value="size" onclick="size();">
</body>
your error is here:
var height = document.body.getElementById('hover1').style.height: 500px;
var width = document.body.getElementById('hover1').style.width: 500px;
// -------------------^ and -------------------------------------^
replace those lines with these:
var height = document.getElementById('hover1').style.height;
var width = document.getElementById('hover1').style.width;
There is nothing called document.body.getElementById instead change this to document.getElementById use as below
var height = (document.getElementById('hover1'))?document.getElementById('hover1').style.height: "500px";
var width = (document.getElementById('hover1'))?document.getElementById('hover1').style.width: "500px";
function size1() {
console.log("test")
var height = (document.getElementById('hover1'))?document.getElementById('hover1').style.height: "500px";
var width = (document.getElementById('hover1'))?document.getElementById('hover1').style.width: "500px";
}
//console.log(hover);
<!DOCTYPE html>
<html>
<head>
<title>javascript practice</title>
<meta charset="utf-8"/>
<style>
body {
margin: 7em auto;
background-color: green;
width: 90%;
}
#size1 {
background-color: blue;
width: 150px;
height: 150px;
margin: 3em auto;
}
</style>
</head>
<body>
<div id="size1">
</div>
<input type="button" value="size" onclick="size1()">
</body>
If you are going to set the height of the element and assign the height to var height then you need to do the following:
var height = document.getElementById("size1").style.height = "500px";
If you are going to just assign the height of the element to var height then you need to do the following:
var height = document.getElementById("size1").style.height;
If you are just going to set the height of the element then you just need to do:
document.getElementById("size1").style.height = "500px";
You should also make your 500px with quotes as numbers do not need " " around them but once you add text...it all becomes text. So either way you should have "500px"
I would also make your button into this:
<button type="button" value="size" onclick="size()">Size</button>
Based on a belief that you are trying to make the div larger onclick of Size button then you should have the following:
Style
body {
margin: 7em auto;
background-color: green;
width: 90%;
}
#size1 {
background-color: blue;
width: 150px;
height: 150px;
margin: 3em auto;
}
HTML
<div id="size1"></div>
<button type="button" value="size" onclick="size()">Size</button>
JavaScript
function size() {
document.getElementById('size1').style.height = "500px";
document.getElementById('size1').style.width = "500px";
}
Related
I have a basic Graphics User Interface where if the user clicks "move"
then a div (yellow rectangle) moves across the screen.
However, I want there to be an event based on Where the rectangle is on the page. In example, If the div is at 400px (right) then alert "hey", else, move the div.
here is the moving div
<html>
<head>
<title>Move Div</title>
<script language ="javascript">
<!--
function MoveDiv()
{
div = document.getElementById("myDiv");
div.style.left = parseInt(div.style.left) + 100 + "px";
}
//-->
</script>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
here is the moving div
<html>
<head>
<title>Move Div</title>
<script language ="javascript">
<!--
function MoveDiv(){
if ($('#myDiv').css == marginTop: '-=15px' ) {
div = document.getElementById("myDiv");
div.style.left = parseInt(div.style.left) + 100 + "px";
}}
//-->
</script>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
errors mostly because im not sure on the syntax :(
hope its help you
You must use var (let, const) when create a new variable
I added CONSTANTS for easy configuration,
isDivCanMoveForward for your:
Where the rectangle is on the page. In example, If the div is at 400px (right) then alert "hey", else, move the div.
var MAX_POSITION_OF_DIV_NODE = 400;
var STEP_OF_DIV_NODE = 100;
var div = document.getElementById("myDiv");
var currentPositionOfDivNode = parseInt(div.style.left, 10);
function MoveDiv() {
currentPositionOfDivNode += STEP_OF_DIV_NODE; // increment
if (!isDivCanMoveForward()) {
return; // stop functinon when div have max position
}
div.style.left = currentPositionOfDivNode + "px";
}
function isDivCanMoveForward() {
if (currentPositionOfDivNode > MAX_POSITION_OF_DIV_NODE) {
currentPositionOfDivNode = MAX_POSITION_OF_DIV_NODE // set max of value
alert('hey')// user message
return false;
}
return true;
}
<html>
<head>
<title>Move Div</title>
</head>
<body>
<input type="button" value="Move Div" onclick="MoveDiv()" />
<div id="myDiv" style="border: 10px solid black; background-color: Yellow; width: 100px; height: 30px; position: absolute; top: 1px; left: 100px;"></div>
</body>
</html>
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 adjust a box width and height according to the following rules:
Whenever the window is resized, the box size needs to be recalculated
The box needs to be the height of the body with slightest margin, but no scrollbars
The box needs to be 1/2 as wide as it is high in pixels
I am restricted to HTML5, CSS3, and vanilla JS (no jQuery)
I think I've got a pretty good working model, that works except for a small annoyance. Resizing the browser horizontally only fires the resizeWindow() once, and only at the start. Once the first horizontal resize fires, no amount of horizontal resizing triggers an update to the box text. Resizing the window in the vertical direction causes the desired behavior.
I would like to see the text update (via the resizeWindow() call), even if the size of the box doesn't have to change.
Snippet only seems to work in full page mode :/
function resizeWindow() {
ht = window.innerHeight;
wd = window.innerWidth;
elPreview = document.getElementById("preview");
elPreview.style.height = "98.5vh";
elPreview.style.width = (ht / 2) + "px";
elPreviewText = document.querySelector("#preview p");
elPreviewText.textContent = "Width: " + (ht / 2) + ", Height: " + ht;
}
window.addEventListener('resize', resizeWindow, true);
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.box {
background-color: black;
border-radius: 20px;
color: white;
padding: 5px 0;
font-size: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index_proto.css">
</head>
<body>
<div class="box" id="preview">
<p>Preview</p>
</div>
<script src="index_proto.js"></script>
</body>
</html>
You could always use the css #media to change the width and height of your elements.
For Example:
#media only screen and (max-width: 720px) {
.DivElementClassName {
width: 300px;
margin-left:25%;
}
}
function resizeWindow() {
ht = window.innerHeight;
wd = window.innerWidth;
elPreview = document.getElementById("preview");
elPreview.style.height = "98.5vh";
elPreview.style.width = (ht / 2) + "px";
elPreviewText = document.querySelector("#preview p");
elPreviewText.textContent = "Width: " + wd + ", Height: " + ht;
}
window.addEventListener('resize', resizeWindow, true);
html, body {
height: 100%;
width: 100%;
margin: 0;
}
.box {
background-color: black;
border-radius: 20px;
color: white;
padding: 5px 0;
font-size: 1em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="index_proto.css">
</head>
<body>
<div class="box" id="preview">
<p>Preview</p>
</div>
<script src="index_proto.js"></script>
</body>
</html>
As I said above, please disregard. Some chucklehead of a programmer (me) was putting a number that would never change into an output that he expected to change.
I want to calculate the scrolled distance of a div element within another div element. I am using offsetTop for that, but it always returns 0 in my code. I am unable to figure out where I am making the mistake.
function getScrollVal() {
console.log(window.pageYOffset);
var wrap = document.getElementById("wrapper");
console.log(wrap.id);
console.log(wrap.offsetParent.id);
var parent = wrap.offsetParent;
console.log("scrollTop: " + wrap.scrollTop + " scrollLeft: " + wrap.scrollLeft);
console.log("offsetTop: " + wrap.offsetTop + " offsetLeft: " + wrap.offsetLeft);
/*
var xx = wrap.offsetLeft;
var yy = wrap.offsetTop;
while(wrap = wrap.offsetParent){
xx += wrap.offsetLeft;
yy += wrap.offsetTop;
}
*/
}
body, html {
margin: 0;
padding: 0;
}
#contain {
position: relative;
width:100%;
height: 100vh;
background: yellow;
overflow: auto;
}
#wrapper {
width: 85%;
margin: 0 auto;
background: red;
}
.full {
height: 100vh;
width: 85%;
margin: 0 auto;
}
#one { background:#222;}
#two{ background:#00c590;}
#three{ background:#3429c5;}
#four{background:#bbb;}
#b {
position: fixed;
z-index: 1000;
top: 30px;
left: 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<div id="contain">
<div id="wrapper">
<div id="one" class="full"></div>
<div id="two" class="full"></div>
<div id="three" class="full"></div>
<div id="four" class="full"></div>
</div>
</div>
<button id="b" type="button" onClick="getScrollVal();" value="click me">Press me</button>
</body>
</html>
I have tried the js code inside the comment. That one is not providing a fruitful result. Thanks in advance.
Since the element #contain is the overflow element, you can try get the scrollTop like this:
console.log("scroll top:", document.getElementById('contain').scrollTop);
From MDN:
An element's scrollTop is a measurement of the distance of an element's top to its topmost visible content. Element.scrollTop
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