click to add div: am I "doing it wrong"? - javascript

(I'm a refugee from the Flex/Actionscript world and am trying to make the switch to html5/css3/JS. If this question is a duplicate or too dumb, let me know and I will delete it)
The Exercise: make an "app" with a "clickable" image background which creates new elements on a click event (and not using canvas);
I've got a functioning result – it just adds an empty colored div on click – but it seems like I am working way too hard – concatenating and converting to strings, reaching into the css style, etc. I'm also not clear how I would go about:
adding some Javascript behaviors to the newly created elements (so that it would be possible, for example, to drag these elements). I tried adding an eventListener to the newly created element but the blockClicked function never gets called;
trapping clicks on newly created elements so they don't pass through to the background, causing new items to get stacked on top of each other
creating an instance of something more complex than an empty div - like an html "component" – with an image, label, etc. without having to build an html string in JS.
Is there a better or cleaner way to do this sort of thing? I've been looking at various JS frameworks but didn't want to jump into something abstract before I understood some of the basics (and the problems these frameworks solve).
JS
"use strict";
var counter = 0;
var levelImg;
var eventContainer;
function setupBackground() {
eventContainer = document.getElementById("event-container");
levelImg = document.getElementById("levelImage");
levelImg.addEventListener("click", addEventItem);
};
function blockClicked(event){
console.log("blockClicked");
}
function addEventItem(event) {
console.log("create one");
var rectArray = levelImg.getClientRects();
var rect = rectArray[0];
var w = 40;
var h = 80;
// define x/y relative to edge of background image
// and offset position so div appears centered at mouse click
var xPos = (event.pageX - rect.left) - (w/2);
var yPos = (event.pageY - rect.top) -(h/2);
var divTmp = document.createElement("div");
divTmp.className = "levelEvent";
divTmp.id = "event" + counter++;
divTmp.addEventListener("click", blockClicked, false);
divTmp.style.width = w + 'px';
divTmp.style.height = h + 'px';
divTmp.style.left = xPos + 'px';
divTmp.style.top = yPos + 'px';
eventContainer.appendChild(divTmp);
}
CSS
.levelEvent {
position: absolute;
border: 1px solid green;
background-color: palegreen;
display:block;
width: 100px;
height: 100px;
max-width: 120;
max-height: 120;
}
#content-container{
position: relative;
border: 1px solid red;
max-width: 1024px;
margin: 0 auto;
}
#event-container{
position: absolute;
left: 0;
top: 0;
border: 4px solid blue;
width: 100%;
height: 100%;
margin: 0 auto;
pointer-events:none;
}
HTML
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body onload="setupBackground()">
<script src="js/clickToAdd.js"></script>
<div id="content-container">
<img id="levelImage" src="images/image3.png" width="100%" />
<div id="event-container">
</div>
</div>
</body>
</html>

You're definitely not doing it wrong, although I found 2 issues:
max-width: 120 is ignored because px is missing
I bet that the following part of your code is intended to work differently. I think, when you scroll down, the green rectangles should still appear under the cursor when clicking: (I tried it out in this jsfiddle)
var xPos = event.pageX - rect.left;
var yPos = event.pageY - rect.top;
My suggestion:
var xPos = event.pageX;
var yPos = event.pageY;

Related

Make an element falling down to the page using html ,css, js

I want to make the grid element to fall down to the page . I used setInterval to repeat the proces (the bottom will decrease so the grid will descend ) . I think I didn't create move() function correctly.I just want to know how can I set the function correctly .
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel= "stylesheet" href ="style.css"></link>
</head>
<body>
<div class="grid"></div>
<script src="javascript.js" ></script>
</body>
</html>
.grid {
background-color:blue;
height: 20px;
width :100px;
left:600px;
top:150px;
position : absolute;
}
var grid =document.querySelector('.grid');
function move () {
grid.style.bottom-=4;
grid.style.bottom=grid.bottom +'px';
}
move();
setInterval(move,30);
If you would still like to implement your approach to realize this movement, here is some feedback.
Bottom value is String, not numerical (e.g. 300px vs 300)
If you want to manipulate the bottom value of an element, you have to parse the numerical value first, then change it, and then append a 'px' (or whatever unit you're using).
// grid.style.bottom-=4; // subtraction on strings is not allowed
// instead, use:
const currentBottom = parseInt(grid.style.bottom, 10)
grid.style.bottom = (currentBottom - 4) + 'px'
document.getElementById(...).style misses styles from <style> blocks and stylesheets
If you want to get all current styles of a DOM element, you should use window.getComputedStyle. As described in the docs:
getComputedStyle is read-only, and should be used to inspect the element's style — including those set by a element or an external stylesheet
In the snippet below, you can see and compare the values grid.style.bottom and window.getComputedStyle(grid). At first, the first version is empty, but the second has the expected value from the stylesheet.
Alternatively, you could directly apply the style in-line with the HTML element. Then you could use .style as well for accessing the correct value from the beginning.
<div class="grid" style="bottom: 100px"></div>
Check out the fixed version of the snippet below with a delay of 3 seconds for better understanding.
var grid = document.querySelector('.grid');
function move() {
const style = grid.style.bottom
const computedStyle = window.getComputedStyle(grid)
console.log('bottom', style)
console.log('bottom from computed style', computedStyle.bottom)
// grid.style.bottom -= 4;
// grid.style.bottom = grid.bottom + 'px';
const newBottom = parseInt(computedStyle.bottom, 10) - 4; // parseInt only reads the numeric value from the bottom string
grid.style.bottom = newBottom + 'px';
}
move();
setInterval(move, 3000);
.grid {
background-color: blue;
height: 20px;
width: 100px;
left: 100px;
bottom: 200px;
position: absolute;
}
<div class="grid"></div>
I would recommend you to use a CSS animation for that, you don't need JavaScript for that.
.grid {
background-color: blue;
height: 20px;
width: 100px;
left: 100px;
position: absolute;
animation: move 1.5s forwards;
}
#keyframes move {
from {
bottom: 200px;
}
to {
bottom: 0;
}
}
<body>
<div class="grid"></div>
</body>

moving an element in JS

I'm learning javascript and trying to make a simple exercise : I have a text box and want control it with keyboard.
My HTML is the following (for now, I'm just trying 1 direction)
const myBox = document.querySelector("h1");
document.addEventListener('keydown', function (event){
if (event.keyCode == '38'){
myBox.style.top -= 5;
console.log("test if it works");
}
});
and my HTML is
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Tuto</title>
<style>
h1 {
width: 200px;
height: 40px;
border: 5px solid #BADA55;
color: #A28;
margin: 0;
text-align: center;
}
</style>
</head>
<body>
<div><h1>My text</h1></div>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
My check test with console log works. So event listener does.
But my box doesn't move. How can I solve it and why my use of .style.top is incorrect ?
Thank you
Positions property like "top", "bottom", "left" and "right" will not work unless your element has the property "position" as "absolute" or "relative".
In that case, what you want is to add "position: relative" to your h1 style on css.
If you want to understand more about that, this can give you a headstart https://www.w3schools.com/css/css_positioning.asp :D
To move an element by changing it's top value, the element can't have a static position (the default). You'll need to change the position to absolute, relative, fixed, etc....
Get the current top, left, etc... using Element#getBoundingClientRect, which will give you the correct initial value, and save you the need to parse a string. Since top needs to have a unit (px, em, etc..), add px to the changed top.
const myBox = document.querySelector("h1");
document.addEventListener('keydown', function(event) {
if (event.keyCode == '38') {
myBox.style.top = myBox.getBoundingClientRect().top - 5 + 'px'; // parse the string to number, subtract 5, and add 'px'
console.log(myBox.style.top);
}
});
h1 {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 40px;
border: 5px solid #BADA55;
color: #A28;
margin: 0;
text-align: center;
}
<div>
<h1>My text</h1>
</div>
1- you have to use let not const, because you want to change it and it is not fix;
let myBox = document.querySelector("h1");
2- you have to set your element as absolute position. because top property work not in static position
position:absolute;
3- you have to convert value of top position to number and then do something
myBox.style.top = parseFloat(myBox.style.top || 0) - 5 + 'px';
see my code : https://codepen.io/miladfm/pen/dRNLvw

How to create image inside a scrollable div

I have a div, an image(arrow.gif), another image(Untitled-1.jpg), two textboxes and a button.
I want to move the arrow.gif within a scrollable div with an image inside.
But i'm having a trouble creating the div into a scrollable one (making the Untitled-1.jpg fill the div) and moving the arrow.gif based on the Untitled-1.jpg's coordinates. Can anyone help me with this? Any help/assistance will be greatly appreciated .
<!DOCTYPE html>
<html>
<head>
<title>Move to Click Position</title>
<style type="text/css">
body {
background-color: #FFF;
margin: 30px;
margin-top: 10px;
}
#contentContainer {
border: 5px black solid;
background-color: #F2F2F2;
cursor: pointer;
background-image:url('Untitled-1.jpg');
background-repeat: no-repeat;
background-size: fixed;
width:1030px;
height:912px
}
#thing {
position: relative;
left: 50px;
top: 50px;
height: 68px;
width: 41px;
transition: left .5s ease-in, top .5s ease-in;
z-index: 10000;
}
</style>
</head>
<body>
<div id="contentContainer">
<img id="thing" src="arrow.gif" >
</div>
<form method="post" action="">
<input type="button" value="submit" name="submit" onclick="getClickPosition()">
<input type="text" id="valuex" name="valuex">
<input type="text" id="valuey" name="valuey">
</form>
<script src="prefixes.min.js"></script>
<script>
function getClickPosition() {
var theThing = document.querySelector("#thing");
var container = document.querySelector("#contentContainer");
var x1 = document.getElementById('valuex').value;
var y1 = document.getElementById('valuey').value;
var parentPosition = getPosition(x1.currentTarget);
var parentPosition = getPosition(y1.currentTarget);
var xPosition = x1 - parentPosition.x - (theThing.clientWidth / 2);
var yPosition = y1- parentPosition.y - (theThing.clientHeight / 2);
theThing.style.left = xPosition + "px";
theThing.style.top = yPosition + "px";
}
function getPosition(element) {
var xPosition = 0;
var yPosition = 0;
while (element) {
xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
element = element.offsetParent;
}
return { x: xPosition, y: yPosition };
}
</script>
</body>
</html>
First things I'm noticing is that you have:
background-size: fixed;
Fixed isn't an option for the background-size property.
You also have:
height:912px
Which is missing a semicolon, and will break your stylesheet further on.
1) Full-size background
If you want your 'Untitled-1.jpg' image to fill the frame you could set background-size to either cover or contain.
2) Scrollable div
In order to change your div into a scrollable one you can do so as follows:
#div{
width:1030px;
height:912px;
overflow: auto;
}
Overflow auto will add horizontal and vertical scrollbars to the div in the event that it extends outside its bounds. Or can use scroll if you want scrollbars to always be visible on the div.
You could also use overflow-x and overflow-y to specify which orientation you want scrollbars to appear.
3) Moving the thing
You're on the right track setting the position of the thing, there's a bit of fiddly stuff involved though to get it all functioning. See my Fiddle.
Demo
I've modified your code a fair bit, but in this fiddle you can change the position of the thing within the scrollable div, using the coordinate boxes.
https://jsfiddle.net/8y0qhdwx/
I'm not sure where you are heading with this, but it would be worth looking into the HTML5 canvas element, as it's built to handle the positioning of objects within it.
Hope this helps.

JavaScript and CSS positioning an image for any resolution

I am trying to create a simple slide show of an image that is set up in and background div. I dont have problem with creating the slideshow code but i have problem with positioning the image that should change according to the the width of others monitors resolution.
In the image bellow i described were i want to place the image. The image should be placed in the red div.
Here is the image that i want to put in the red div to be like a background. The resolution is (1900px x 500px)
Here is a model what i managed to do. I tried in java script code to declared a global variable sw which I assigned the window.innerWidth (sw=window.innerWidth), after in CSS using jquery selecting the red div $('#rotator') and assigned the sw ($('#rotator').css('width', sw)), but the result wasn't what I need to obtain. I obtained the image that was cropped from the right according to the screen resolution.
If someone know how to solve this question i will be greatful!
Here is my CODES:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" src="function.js"></script>
<script src="jquery.easing.1.3.js"></script>
</head>
<body >
<div id="rotator"></div>
<div class='slider'></div>
</body>
</html>
CSS
body{
margin: 0px;
margin-left: 0px;
}
.slider{
width: 940px;
height: 360px;
background-color: #FFDF00;
margin: 0 auto;
position: absolute;
left: 15%;
top: 20px;
}
#rotator {
position: relative;
height: 500px;
}
.puzzle {
width: 100px;
height: 100px;
background-position: -100px 0px;
float: left;
}
And JavaScript that also contain the function of slideshow effect (that is working).
$(document).ready(init)
sw=window.innerWidth;
if (sw % 100 == 0) {
sw=window.innerWidth
}
else{
sw=Math.floor(sw/100)*100
}
//counter of slider
current_slide=0;
image_list=new Array
(
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg",
"img/5.jpg"
);
function init ()
{
$('#rotator').css('width', sw)
change(image_list[current_slide]);
//start timer
setInterval( "change(image_list[current_slide])" ,2500);
}
function change(bg_image){
// this function creats cells inside <div id = 'rotator'>
rot = $('#rotator'); //constructor
rot.empty();
for(y = 1; y<=5; y++)
{
for(x = 1; x<=sw/100; x++)
{
rot.append('<div class = "puzzle p-' + x + '-' + y + ' "></div>');
//select the <div> using his class and setting up the cells coordinates
$('.p-' + x + '-' + y).css('background-position', (-(x-1)*100) + 'px ' + (- (y-1)*100) + 'px').css('background-image','url('+bg_image+')');
$('.p-' + x + '-' + y).css('opacity', 0).delay(parseInt(Math.random()*1000)).animate({opacity: 1}, {duration: 1000})
}
}
current_slide++;
if(current_slide >= image_list.length)current_slide=0
}
Thank you for your time and consideration!
You either have to put the image into a container div who's width is dynamic to the size of the page and set width of the image inside it to 100%, or use the CSS attribute background-size: cover; (which is only compatible with newer browsers).
Images set as the background image for a div will simply fill their container and be clipped by that container as it shrinks past the dimensions of the background image unless background-size: cover; is used. To gain the same effect in older browsers, the aforementioned 100% trick is used.
Cross-browser style:
http://jsfiddle.net/2D5Vw/
New(ish)-School:
http://jsfiddle.net/HLf2Q/

HTML presentation slide, elements resize to keep the ratio

I am quite new to HTML and am not very fluent in HMTL terminology (English as well :). I am trying to create presentation slide (something like Powerpoint in MS Office). The functionality should be:
Everything (text, pictures, etc.) inside the slide must stay in position, size and ratio relative to the slide while the slide resizes.
The slide has 4:3 resolution.
The slide should be realized by <div> element.
The slide stays in the middle of the screen.
No inline styles should have to be used inside the slide.
Plain Javascript, css and HTML must be used.
So far I have managed to devise this:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>
Image Resize Test
</title>
<style type="text/css">
*
{
margin: 0;
}
body
{
background-color: black;
width: 100%;
height: 100%;
}
#wrapper
{
font-size:100%;
background-color: white;
display: block;
position: absolute;
left: 50%;
}
#content
{
font-family:"Times New Roman";
font-size:80%;
}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>
<script>
window.onload = function()
{
window.onresize();
}
window.onresize = function()
{
var width = window.innerWidth;
var height = window.innerHeight;
if (width / 4 > height / 3)
{
width = height / 3 * 4;
}
else
{
height = width / 4 * 3;
}
var wrapper = document.getElementById("wrapper");
wrapper.style.height = height + "px";
wrapper.style.width = width + "px";
wrapper.style.marginLeft = (-width/2) + "px";
wrapper.style.fontSize = (height) + "%";
}
</script>
</head>
<body>
<div id="wrapper">
<div id="content">
<H1>
aaaa
</H1>
<H2>
bbbb
</H2>
<p>cccc</p>
text
</div>
</body>
</html>
Is this a good solution to my problem or are there simpler/more efficient/more robust or more "pro" ways to do this?
Could it be solved without the Javascript? Atleast partially.
Is there a way to easily specify x/y offset relative to the side for any element within the slide (perhaps as attribute)?
How to apply styles for elements that would be variably deep within the slide element tree?
Help on any of the things I ask would be appreciated.
this is basically same as yours but without explicitly setting margin in javascript. so remove that part and make margin: 0 auto; at wrapper.
http://jsfiddle.net/btevfik/VuqJX/
it seems like you can keep the aspect ratio with only css and html but as far as i can tell this only works when you resize width of the window. when you change height it wont work.
Maintain the aspect ratio of a div with CSS

Categories