Randomly creating and positioning elements exceeds browser window - javascript

Using JQuery I am creating elements and adding them to the body (I've also tried using a DIV and get the same results), the new DIVs that JQuery is creating are being positioned well beyond the window (randomized limits).
I pretty much have a blank HTML page, that pulls in JQuery and the script.js for the page.
My screen resolution is 1920x1080, so in my JQuery I used those limits to randomize the top and left values to position the blocks; I also use a rotation which I'm not haveing any issues with. But when it places all the blocks, the X-axis blocks are WAY off my screen (almost double my screen width) and the Y-axis blocks have a handful that exceed the bottom of the screen too (I expect to have those on the edge cut off, but not all the way off the view; in fact I have -20 at the end of the calculations to create cutt offs on the top and left sides)
Here's the HTML page (very empty (but I put some CSS in here):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<title>Tickets</title>
<style>
.ticket{
position: relative !important;
background: #F90;
float: left;
padding: 7px 3px;
margin: 0 5px 5px 0;
}
</style>
</head>
<body>
</body>
</html>
Then in JQuery I have this code that creates the blocks:
// JavaScript Document
$(function(){
var ticket="<div class='ticket'><p>Random<br />Box</p></div>";
var numTickets=100;
for(var x=1;x<=numTickets;x++){
$(ticket).appendTo("body");
}
$(".ticket").each(function(i){
var posx = Math.round(Math.random() * 1920)-20;
var posy = Math.round(Math.random() * 1080)-20;
var rotationNum=Math.round((Math.random()*360)+1);
var rotation="rotate("+rotationNum+"deg)";
$(this).css("top", posy + "px").css("left", posx + "px").css("transform",rotation).css("-ms-transform",rotation).css("-webkit-transform",rotation);
});
});

Why are you setting position to relative?
Here is one I did.
http://jsfiddle.net/29M54/
.ticket{
position: absolute;
background: #F90;
padding: 7px 3px;
}
$(document).ready(function(){
var ticket="<div class='ticket'><p>Random<br />Box</p></div>";
var numTickets=100;
for(var x=1;x<=numTickets;x++){
$(ticket).appendTo("body");
}
// get window dimentions
var ww = $(window).width();
var wh = $(window).height();
$(".ticket").each(function(i){
var rotationNum=Math.round((Math.random()*360)+1);
var rotation="rotate("+rotationNum+"deg)";
var posx = Math.round(Math.random() * ww)-20;
var posy = Math.round(Math.random() * wh)-20;
$(this).css("top", posy + "px").css("left", posx + "px").css("transform",rotation).css("-ms-transform",rotation).css("-webkit-transform",rotation);
});
});

I use this css style for the same problem:
$(this).css({
"position":"absolute",
"left":"'+posx +'px",
"top":"'+posy +'px",
"padding":"5px",
"transform":"'+ rotation +'",
"-ms-transform":"'+ rotation +'",
"-webkit-transform":"'+ rotation +'"
});
Also, you coul use something like this:
$(function(){
var numTickets=100;
for(var x=1;x<=numTickets;x++){
var posx = Math.round(Math.random() * 1920)-20;
var posy = Math.round(Math.random() * 1080)-20;
var ticket="<div class='ticket' style='position:absolute;left:'+posy+';top:'+posx+';'><p>Random<br />Box</p></div>";
$(ticket).appendTo("body");
}
});

Related

Rotate image via Range Slider

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.

Why are my generated images not setting their position based on my mouse cursor?

I am fairly new to web development and I wanted to practice the HTML, CSS, and Javascript that I learned over the weekend. I am having trouble positioning my images correctly based on my mouse cursor. I can see that my images are being appended in the "inspect" section of google chrome but their positioning is not matching up with how the style indicates. Is there a problem with my HTML, CSS, or Javascript or all three? I want it to work similarly to http://howlooongcanthisgoon.com/
1[]2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Jaws that Bite My Claws That Catch</title>
<style>
*{
padding: 0;
margin: 0;
}
#witchwood{
background: url("witchwood.jpg");
height: 100vh;
background-position: 75% 20%;
overflow: hidden;
}
.shudder{
position: absolute;
}
</style>
</head>
<body>
<div id="witchwood" onclick="wok(event)"></div>
</body>
<script type="text/javascript">
//document.getElementById('witchwood').addEventListener("click", wok);
var z = 0;
function wok(e){
//finds position of mouse
var x= e.clientX;
var y= e.clientY;
//creates the img element
var img = document.createElement("img");
img.src = "shudderwock.png";
img.class = "shudder";
img.style.top = y + "px";
img.style.left = x + "px";
//appends the img into the div class="witchwood"
document.getElementById('witchwood').appendChild(img);
}
</script>
</html>
Here is a link to the jsfiddle.
Your .shudder class is not being applied. The appropriate DOM property is called className. You don't set an HTMLElement attribute with img.class.
Change
img.class = "shudder";
To
img.className = "shudder";
Alternatively, you could use;
img.setAttribute('class', 'shudder');

Annoying white space around a full screen canvas in HTML

I've searched for a ton of solutions on this issue but I haven't had any luck when it comes to implementation.
Everything is working fine, but there is this annoying white border around the canvas. What am I doing wrong?
Here is my code:
var canvas = document.getElementById("canvas");
var x = window.innerWidth - 20;
var y = window.innerHeight - 20;
function resizeCanvas() {
canvas.style.width = x.toString() + 'px';
canvas.style.height = y.toString() + 'px';
}
var granimInstance = new Granim({
element: '#canvas',
name: 'radial-gradient',
direction: 'radial',
opacity: [1, 1],
isPausedWhenNotInView: true,
states : {
"default-state": {
gradients: [
['#ffb347', '#ffcc33'],
['#83a4d4', '#b6fbff'],
['#9D50BB', '#6E48AA']
]
}
}
});
window.onresize = resizeCanvas;
resizeCanvas();
.canvas {
position: absolute;
display: block;
}
html, body {
margin: 0;
padding: 0;
overflow: hidden
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/granim/1.0.6/granim.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Announcements</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/club_meetingv2.css">
</head>
<body>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="assets/js/club_meetingv2.js"></script>
</body>
</html>
You've said there's an annoying white border, do you mean in the far right and bottom of the gradient?
If so it's due to the first few lines of code:
var x = window.innerWidth - 20;
var y = window.innerHeight - 20;
You're taking 20px of width and height out of it from the right and bottom. Removing this as in the codepen below will achieve what I think you want?
https://codepen.io/Robhern135/pen/NwxoMR
It seems that I've found a solution.
body {margin: 0}

Positioning element relative to another not working

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

How to set div width based on a set of dynamic images?

I have a set of 15 images that are stacked horizontally. They are completely dynamic in size based on the viewport size.
To extend the page past 100% I'm using a DIV which needs to have it's width updated periodically with the widths of the 15 images + a fixed amount.
I'm fairly new to javascript but I looked around and was able to peice together a simple script and made a test page.
Update, here's the full code of the test page which I can't get to work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<script type="text/javascript">
window.onresize = function(event) {
var img = document.getElementById('1');
var w1 = parseInt(img.clientWidth);
var img = document.getElementById('2');
var w2 = parseInt(img.clientWidth);
d.style.width= w1 + w2 + 400;
}
</script>
<style type="text/css">
html,body{
margin:0;
padding:0;
border:none;
overflow-y:hidden;
}
.gal{
vertical-align:middle;
}
</style>
</head>
<body style="color: #1b1b1d">
<div style="position:absolute; width:18500px; height:100%; margin:0px; padding:0px; left:0px; right:0px;z-index:1;background-color:#1b1b1d">
<img id="1" class="gal" height="100%" src="image1.jpg" />
<img id="2" class="gal" height="100%" style="max-height:652px;max-width:1024px" src="image1.jpg" />
</div>
</body>
</html>
It fails to work both with and without + "px" at the end of the script.
For whatever reason it's not working at all. Can anyone help guide me here? I'm new to this. I have jquery installed with another copy and pasted script if that helps.
Try this:
var img = document.getElementById('#1');
var w1 = img.clientWidth;
var img = document.getElementById('#2');
var w2 = img.clientWidth;
d.style.width = (w1 + w2 + 400) + "px";
I think the last line in your script:
d.style.width="w1 + w2 + 400";
Needs to not be in quotes ie:
d.style.width= w1 + w2 + 400;
With regards to updating the width dynamically - you would really need to attach this script to the resize event of the browser to handle it. ie:
window.onresize = function(event) {
//your code here
}
Try this:
var img = document.getElementById('1');
var w1 = parseInt(img.clientWidth);
var img = document.getElementById('2');
var w2 = parseInt(img.clientWidth);
d.style.width= (w1 + w2 + 400) + "px";

Categories