I'm having trouble understanding whats going on with a grid I created. I made some code for a grid via javascript that changes the cell color when the mousepointer passes over it, however whenever I view this grid in a fullscreen window the view of the grid changes to four separate columns. This only happens when I look at the grid in fullscreen however, when viewing the grid in any smaller sized window it looks exactly how you envison a grid; with no spaces in between columns.
gridProblem
This is how the grid looks fullscreen with the spacing issue shown
grid solution
This is how the grid looks in any window sizing outside of maximized, and how I would like the grid to display 100% of the time.
Just in case, here is the code I'm using:
HTML:
<!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">
<link rel="stylesheet" href="styles.css">
<title>Etch N Sketch</title>
</head>
<body>
<div class="container" id="container"></div>
<script src="script.js"></script>
</body>
</html>
Javascript:
const board = document.getElementById("container");
for (x=0; x <= 15; x++) {
const cell = document.createElement('div');
cell.className = "cells";
cell.setAttribute("style", "height: 200px; width: 200px; color: black;");
cell.style.backgroundColor = "blue";
cell.style.border = "solid 2px";
cell.style.borderColor = "black";
board.style.columnGap = "0px";
board.style.display ="grid";
board.style.gridTemplateColumns = "auto auto auto auto";
board.appendChild(cell);
cell.addEventListener("mouseover", change = () =>
cell.style.backgroundColor = "red")
cell.addEventListener("mouseout", reset = () => cell.style.backgroundColor = "blue")
}
The issue is that you set the width and height to be absolute values here
cell.setAttribute("style", "height: 200px; width: 200px; color: black;");
so at a smaller screen size 200px is fine but once the area that the squares need to cover becomes larger than 200px your limiting them by having these values tied to them.
Related
I have in my HTML an image (id=”stone”) which I hide. From this image I make later several copies (id=”stone_xxx) in JS with cloneNode, put them in the DOM and remove the hidden-class. Everything works all right. I need the width initially at program start (before I make the first copy) so I take it from the hidden image (id=”stone”). But I always get the naturalHeight (90px) and not the actual height (45px).
I even tried it in the console to exclude that perhaps CSS is executed after JS but this didn`t change anything, so I had to use window.onload like in Get image width height javascript.
let stone = document.getElementById( "stone" );
let newStone = stone.cloneNode( false );
newStone.classList.remove( 'hidden' );
let i = 1;
newStone.id = "stone_" + i;
let el = document.getElementById( 'position_' + i);
el.prepend(newStone);
console.log(stone.naturalWidth); // => 272
console.log(stone.width); // => 272 Should be : 45
.hidden { display: none;}
.stone { width: 45px;}
<img id="stone" class="stone hidden" src=https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png />
<div id="position_1"></div>
I solved it: The browser doesn’t calculate the new dimensions of stone because of display none so the value of width isn´t recalculated. If I remove the class hidden everything is ok.
So I have 2 possibilities:
• Starting without class hidden and setting it afterwards.
• Get the width of one of the clones stones_xxx:
let newStone = document.getElementById( "stone_xxx" );
let width = newStone.width;
console.log(width); // => 45
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<img id="image" src="http://www.fillmurray.com/200/200" alt="image" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
const width = $('#image').width();
console.log(width); // 200
</script>
</body>
</html>
Hi guys how to make the image rotate via range slider?
I built the function so it can range between 0 and 360 and show the value range, it's working fine, but how to apply this to rotate the image?
The crop image script documentation is here
I updated the code with the crop script, please help to rotate the image and output to a div
<!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, shrink-to-fit=no">
<title>Cropper.js</title>
<!-- <link rel="stylesheet" href="dist/cropper.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.css" />
<style>
.container {
max-width: 640px;
margin: 20px auto;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Cropper with a range of aspect ratio</h1>
<div>
<img id="image" src="https://fengyuanchen.github.io/cropperjs/images/picture.jpg" alt="Picture">
</div>
<button onclick="cropper.getCroppedCanvas()">Save</button>
</div>
<!-- <script src="dist/cropper.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.js"></script>
<script>
window.addEventListener('DOMContentLoaded', function () {
var image = document.querySelector('#image');
var minAspectRatio = 1.0;
var maxAspectRatio = 1.0;
var cropper = new Cropper(image, {
ready: function () {
var cropper = this.cropper;
var containerData = cropper.getContainerData();
var cropBoxData = cropper.getCropBoxData();
var aspectRatio = cropBoxData.width / cropBoxData.height;
var newCropBoxWidth;
if (aspectRatio < minAspectRatio || aspectRatio > maxAspectRatio) {
newCropBoxWidth = cropBoxData.height * ((minAspectRatio + maxAspectRatio) / 2);
cropper.setCropBoxData({
left: (containerData.width - newCropBoxWidth) / 2,
width: newCropBoxWidth
});
}
},
cropmove: function () {
var cropper = this.cropper;
var cropBoxData = cropper.getCropBoxData();
var aspectRatio = cropBoxData.width / cropBoxData.height;
if (aspectRatio < minAspectRatio) {
cropper.setCropBoxData({
width: cropBoxData.height * minAspectRatio
});
} else if (aspectRatio > maxAspectRatio) {
cropper.setCropBoxData({
width: cropBoxData.height * maxAspectRatio
});
}
}
});
});
</script>
<script>
function updateTextInput(val) {
document.getElementById('textInput').value=val;
}
</script>
<input type="range" name="rangeInput" min="0" max="360" onchange="updateTextInput(this.value);">
<input type="text" id="textInput" value="">
<!-- FULL DOCUMENTATION ON https://github.com/fengyuanchen/cropperjs -->
</body>
</html>
You can use some javascript to set the rotation of the image when the slider value changes. Since you have jQuery:
$(function(){
let slider = $('input[type=range]'),
image = $('#image');
slider.on('change mousemove', function(){
image.css('transform', 'rotate(' + $(this).val() + 'deg)');
});
});
Side note: This type of event assignment - finding the element in javascript, rather than adding onchange attributes to the input - is much more flexible and maintainable.
Here's an example: https://codepen.io/benjamin-hull/pen/ewxboE
A couple of things to watch:
I've added the 'mousemove' event listener as well as 'change', so the user gets real-time feedback as they move the slider. This might be a problem, as mousemove can produce 100's of events. You might need to look at 'debouncing' that event to limit it to a sensible value.
In my example, I've set the slider to min -180, max 180 and a default of 0. This allows the user to rotate left and right.
You probably want the rotation to scale the image as well, so it always fills the frame.
I'm trying to position an element relative to another using the jQuery offset() method and I am trying to figure out why the $(window).resize function is not working.
JSBIN:http://jsbin.com/lanako/7/edit?html,js,output
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
div{
display:inline-block;
position:relative;
height:200px;
width:200px;
border:solid black;
}
#somepara{
border: solid blue;
position:relative;
left:20%;
}
</style>
<body>
<div id ="first"> FIRST</div>
<div id = 'somepara'> </div>
</body>
</html>
JavaScript:
var p = $( "#somepara" );
var pf = $('#first');
var offset = p.offset();
p.html( "left: " + offset.left);
function offcss(){
pf.css({'left': offset.left + 6 + "px"});
}
$(document).ready(function(){
offcss();
$(window).resize(function(){
offcss();
});
});
I am essentially grabbing the offset().left of the second element ('#somepara') and trying to set the css of ('#first') right 6 pixels from (#somepara).Note: (#somepara) is has a fluid measurement (%), so the left position changes.
The equation initially works, but I want to upon resizing the browser, for the equation pf.css(), which calculates the css left property of (#first) to execute. Unfortunately the $(window).resize function I have set is not working, and thus the left property of (#first) is unchanged. The end goal I want is regardless the browser size, the elements will be separated by 6 pixels (#first right 6 pixels from #somepara).
Any help would be greatly appreciated!
The position of #somepara changes when you resize, so you need to take the value of p.offset() every time you call the offcss() function (and not only on first load).
function offcss() {
pf.css({'left': p.offset().left + 6 + "px"});
}
Regarding the resize it seems like it does exactly what you want.
Check this example:
http://jsbin.com/dewazuyuqo/1/edit?html,js,output
I'm building a visual interaction using p5.js (p5js.org), including p5.dom.js so that I can do some html stuff within it.
I'm having trouble stopping an html image element increasing the size of the viewport when it moves off of the p5.js canvas (which is also an element.
I have tried adapting a solution suggested here CSS- hide element off the right of the screen involving placing an element within another element which has styling set to overflow:hidden and position:relative to no avail –the image just disappears.
Although commenting/uncommenting the pictureContainer.style("position", "relative"); in the code below does actually hide/show the image, which makes me wonder if it's some kind of conflict between p5js and html styling?!
I have alternatively tried setting up the parent container in the index.html and doing var x = select("parent div #id in index.html"); picture.parent(x); in my p5 script but I get the same result as above.
FYI, I am using createImg() from p5.dom.js and then using .style to position the image etc. as the project is running in a phonegap shell and I have had issues with the p5.js method loadImage() on iOS.
Here's my problem code:
//time keeping
var timeKeeper;
//picture container
var pictureContainer;
//picture
var pictureLoaded;
var picture;
//display picture bool
var pictureDisplay;
//p5 canvas
var canvas;
function setup() {
//create the p5 canvas element
canvas = createCanvas(windowWidth, windowHeight);
// canvas.style("zIndex", "-1") //changing this doesn't seem to help
//container to hold picture and supposedly prevent it affecting the viewport
pictureContainer = createDiv("test");
pictureContainer.style("overflow", "hidden");
pictureContainer.style("position", "relative");
// pictureContainer.position(0,0); //this doesn't do anything differently to the line above except move the container to top left of window
pictureContainer.style("width", "0");
pictureContainer.style("zIndex", "999");
//create image
picture = createImg("http://images.clipartpanda.com/foam-clipart-1334260620683400173foam_finger.svg", "fingerTransparent")
//make picture the child of pictureContainer
picture.parent(pictureContainer); //comment this and you'll see the picture appear, resizing the viewport every time it does.
//position(x,y) sets the image position styling to position:absolute, left:x, top:y -- as such:http://p5js.org/reference/#/p5.Element/position
picture.position(windowWidth/2,windowHeight/2);
//for displaying/hiding the picture
pictureDisplay = false;
timeKeeper = 0;
}
function draw() {
canvas.background(100, 100, 100);
//display/show picture
if(millis()>timeKeeper+1000){
timeKeeper=millis();
if(pictureDisplay){
picture.style("display","initial");
pictureDisplay=false;
}
else{
picture.style("display","none");
pictureDisplay=true;
}
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/addons/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src="exampleCode.js" ></script>
</head>
<body>
</body>
</html>
You can use a div as a container for your canvas and the picture element.
Set the styles for this container to style="position: relative; overflow: hidden;"
In the setup function parent the canvas and the created image to this container.
Example:
//time keeping
var timeKeeper;
//picture container
var pictureContainer;
//picture
var pictureLoaded;
var picture;
//display picture bool
var pictureDisplay;
//p5 canvas
var canvas;
function setup() {
//create the p5 canvas element
canvas = createCanvas(windowWidth, windowHeight);
//parent the canvas to the div container defined in the html
canvas.parent("sketch-holder");
//create image
picture = createImg("http://images.clipartpanda.com/foam-clipart-1334260620683400173foam_finger.svg", "fingerTransparent")
//parent the picture to the same container
picture.parent("sketch-holder");
//position(x,y) sets the image position styling to position:absolute, left:x, top:y -- as such:http://p5js.org/reference/#/p5.Element/position
picture.position(windowWidth/2,windowHeight/2);
//for displaying/hiding the picture
pictureDisplay = false;
timeKeeper = 0;
}
function draw() {
canvas.background(100, 100, 100);
//display/show picture
if(millis()>timeKeeper+1000){
timeKeeper=millis();
if(pictureDisplay){
picture.style("display","initial");
pictureDisplay=false;
}
else{
picture.style("display","none");
pictureDisplay=true;
}
}
}
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>Tester</title>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/p5.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.0/addons/p5.dom.js"></script>
<script src="sketch.js" type="text/javascript"></script>
<style>
body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
</style>
</head>
<body>
<div id="sketch-holder" style="position: relative; overflow: hidden;"></div>
</body>
</html>
in specification of FFOS GP PEAK is written, that it's got qHD display (it is 960*540), but when I run JavaScript code:
console.log(screen.width)
console.log(screen.height)
I get 640*360. Is it JavaScript bug? Or anything else?
Thank you.
I believe the Peak has a device pixel ratio of 1.5, which would be 640x360 logical pixels.
You may want to have a look at css - what exactly is device pixel ratio
and Bug 838505
If I use the following HTML and JS this draws a square around the entire screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--<meta name = "viewport" content="user-scalable = no"> -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="css/background.css">
<title>Test</title>
<script type="text/javascript" src="js/loop.js"></script>
<style type="text/css">
*
{
border: 0px;
margin: 0px;
padding: 0px;
}
</style>
</head>
<body><canvas id="myCanvas"></canvas></body>
</html>
loop.js
//Main file for game logic
window.onload = init;
//Setup function to reset start location
function setup() {
canvas = document.getElementById('myCanvas');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
context = canvas.getContext('2d');
context.beginPath();
context.lineWidth="6";
context.strokeStyle="red";
context.rect(0,0,canvas.width,canvas.height);
context.stroke();
}
//Initialize game and event handlers
function init() {
setup();
}