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}
Related
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 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');
I am creating a google chrome extension which will load my web-app i have a map component on it, i want this map component to be attachable/deattachable (when user drag it from its position it will open itself in new window, or when user close map's window it will attach to my main app)
main.js
chrome.app.runtime.onLaunched.addListener(function() {
// Center window on screen.
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var width = 500;
var height = 300;
chrome.app.window.create('index.html', {
id: "helloWorldID",
outerBounds: {
width: width,
height: height,
left: Math.round((screenWidth-width)/2),
top: Math.round((screenHeight-height)/2)
}
});
chrome.app.window.onClosed.addListener(function(e) {
console.log(e)
});
chrome.app.window.onFullscreened.addListener(function(e) {
console.log(e)
})
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link href="styles/main.css" rel="stylesheet">
<style type="text/css">
.innermenu {
width: 200px;
height: 200px;
background: #f00;
}
</style>
<script type="text/javascript" src="jquery-2.1.3.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h1>Main File</h1>
<div id="menu">
<div class="innermenu">MAP</div>
</div>
</body>
</html>
and app.js
var screenWidth = screen.availWidth;
var screenHeight = screen.availHeight;
var width = 500;
var height = 300;
var id = 1;
$(document).ready(function(){
$("#menu").sortable({
out: function( event, ui ) {
chrome.app.window.create('map.html', {
id: "map" + (id++),
outerBounds: {
width: width,
height: height,
left: Math.round((screenWidth-width)/2),
top: Math.round((screenHeight-height)/2)
}
});
}
});
});
So my question is how to make communication between map.html(which open in seperate window) with index.html(my main app).
I am trying to make it so that when the page is visited or refreshed, the background changes. I am trying to achieve this with JS.
This is the JS I currently have:
<script type="text/javascript">
var imgCount = 3;
var dir = 'img/';
var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
var images = new Array
images[1] = "1.png",
images[2] = "2.png",
images[3] = "3.png",
document.body.style.background = "url(" + dir + images[randomCount] + ")";
</script>
Along with the HTML:
<html>
<head>
<!-- The JS was here but didnt liek to be pasted -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
Rawr
</div>
</body>
</html>
And the CSS:
html, body {
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
#page {
width: 900px;
height: auto;
border: #900 1px solid;
border-radius: 5px;
float: right;
margin-right: 20px;
}
My main problem is that images; firstly - don't appear and secondly - I don't know if the script is working or not because of this.
My file tree is as simple as a root directory and a folder named 'img' for images with 3 images, 1 - 3 that are png's.
Please could someone help me establish why the background doesn't show up, if the code is actually working.
Thanks. Sorry if my posting is inadequate, I'm really not the best at this kind of thing =/
As adeneo said you should put your script after DOM is ready, something like
Update
For not repeat the background you should use this snippet of code.
document.body.style.backgroundRepeat = "no-repeat";
Full Code
<html>
<head>
<!-- The JS was here but didnt liek to be pasted -->
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="page">
Rawr
</div>
<!-- put your script is here after dom is ready -->
<script type="text/javascript">
var imgCount = 3;
var dir = 'img/';
var randomCount = Math.round(Math.random() * (imgCount - 1)) + 1;
var images = new Array
images[1] = "1.png",
images[2] = "2.png",
images[3] = "3.png",
document.body.style.background = "url(" + dir + images[randomCount] + ")";
document.body.style.backgroundRepeat = "no-repeat";
//----^----for not repeat the background
</script>
</body>
</html>
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");
}
});