Move a canvas up and down - html5 / css3 - javascript

I have created a canvas element by taking user inputs for the size and the colour.
I want to make the canvas move up and down the page continuously. How can I achieve this?
Below is the html file:
<!DOCTYPE html>
<html>
<body>
<script src="pol.js" >
</script>
</body>
</html>
The following is the javascript file "pol.js" :
var h=prompt("Provide length of square");
var col=prompt("Provide the color");
document.write('<div id="float" ><canvas id="myCanvas" width="'+h+'" height="'+h+'" style="border:1px solid #c3c3c3;"> </canvas> </div>');
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle=col;
ctx.fillRect(0,0,h,h);

The following CSS should smoothly move the canvas element between the top of the page and 500px down from it:
<style type="text/css">
#keyframes moveabout {
from { top: 0px; }
to { top: 500px; }
}
#float {
position: absolute;
animation: moveabout 5s ease-in-out infinite alternate;
}
</style>
For more information:
http://www.w3schools.com/css/css3_animations.asp
If you want to move the element from the top to the bottom of the page you could use document.windowHeight to get the window's viewport height.

Related

How to scale a div while keeping top in same place

I have created an iframe (lets call it a div to simplify things), that has a transform: scale property that I'm calling with javascript.This scales the div, but however, it also shifts the div upwards. I would like the top to stay in the same place.
Background info (from answers suggestions): I want to create something that looks like google docs. I have created an iframe that will transform when an input box value is change (like google docs). I want the top to remain in the same place (like google docs).
1) I have tried in javascript to implement document.getElementById("textareathingy").style.transform = "translateY(1000px)"; document.getElementById("textareathingy").style.transform = "scale(" + percentage + ")"; I tried to put the translate both before and after the scale, but both methods do not work, and the div continues to go upwards when I put translate first, and the div does not zoom in when I put scale first.
2) I have tried to put position: absolute; to counteract it going up, but that doesn't help either, and it gets rid of my scrolling feature on the div. So in answers please don't use position: absolute.
3) I have tried using the zoom feature, but that doesn't zoom in on the contents of the div, so that also doesn't work.
For some reason, there is no error messages in any of my attempts.
Here is also my css for the div:
#textareathingy{
width: 820px;
margin: 20px auto;
height: 1000px;
border: none;
display: block;
padding: 75px;
background-color: white;
box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
Here are two pictures from google docs that represents what I want.
Notice how they both have the same "top" position, but it is zoomed in.
Use the transform-origin CSS property to set the point in the element that the transform should originate from. Set this to top so that the scale extends downward from the top point.
img { border:1px solid black;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Transforms</title>
<style>
img {
/* Single Transformations: */
transform-origin: top;
}
/* Triggering a transformation: */
img:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<img class="car" src="data:image/png;base64,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">
</body>
</html>
To trigger this from JavaScript, just access the transformOrigin property as you would any other:
let img = document.querySelector("img");
img.style.transformOrigin = "top"; // Set the origin
img.addEventListener("mouseover", function(){
this.classList.add("scale");
});
img.addEventListener("mouseover", function(){
this.classList.remove("scale");
});
.scale {
transform:scale(1.5,1.5);
}
img { border:1px solid black; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Transforms</title>
<style>
img {
/* Single Transformations: */
transform-origin: center;
}
/* Triggering a transformation: */
img:hover {
transform: scale(1.5, 1.5);
}
</style>
</head>
<body>
<img class="car" src="data:image/png;base64,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">
</body>
</html>

Code to disable page contents while loading and show a gif image

Can anyone help me how to keep the whole page inactive while loading and showing an image? I have the following code to show the image but while page is loading all the contents are active.Here's the code below :
<body onLoad="init()">
<div id="loading" style="position:absolute; width:100%; text-align:center;top:300px;">
<img src="https://bancore.com/images/vv/loading_smaller.gif" border=0 />
</div>
<script>
var ld = (document.all);
var ns4 = document.layers;
var ns6 = document.getElementById && !document.all;
var ie4 = document.all;
if (ns4)
ld = document.loading;
else if (ns6)
ld = document.getElementById("loading").style;
else if (ie4)
ld = document.all.loading.style;
function init() {
if (ns4) {
ld.visibility = "hidden";
} else if (ns6 || ie4) ld.display = "none";
}
</script>
</body>
Here is the sample website : http://www.bancore.com/
See while loading the page is inactive.
On your #loading div you should use height: 100% instead of top: 300px because top only moves the element 300 pixels from the top, making the top 300 pixels of the page clickable.
If you need to move the image down 300px, you still need to keep the #loading div fixed to the top but you can set the top margin to the image to 300px. Like this:
<div id="loading" style="position:absolute; width:100%; height: 100%; text-align:center;">
<img src="https://bancore.com/images/vv/loading_smaller.gif" border=0 style="margin-top:300px;">
</div>
You should also avoid using inline styles, but simply set the CSS rules in your CSS file:
#loading {
position:absolute;
width:100%;
height: 100%;
text-align:center;
}
#loading img {
margin-top: 300px;
}
the idea in this case is create a 'mask' over your website, then remove it when document is ready.
create CSS :
.loading {
position: fixed; // position fixed with height, width = 100% will take over your window
width:100%;
height: 100%;
top : 0;
left : 0;
text-align : center;
background : #ccc;
opacity : 0.5; // fade your page.
}
.loading img {
// I'm not good at CSS, so you can find some attribute to center it
//check my fiddle for style
}
add to HTML :
<div id="loading" class="loading">
<img src="https://bancore.com/images/vv/loading_smaller.gif" border=0>
</div>
and Javascript jQuery document ready :
$(document).ready(function() {
$('#loading').removeClass('loading'); // the `class` loading will be remove
})
Fiddle here

How to put img in front of svg tag

I'm using snap.svg
I have index.html
<!Doctype>
<html>
<head>
<title>MAP_TEST</title>
<meta charset="utf-8">
<script type = "text/javascript" src = "JS/jquery.js"></script>
<script type = "text/javascript" src = "JS/init.js"></script>
<script type = "text/javascript" src = "JS/snap.svg.js"></script>
</head>
<body>
<div class="comm_cont">
<div id = "svgborder">
<svg id = 'svgmain'></svg>
</div>
</div>
</body>
</html>
And init.js
$( document ).ready(function() {
var s = Snap("#svgmain");
var g = s.group();
Snap.load("SVGFILES/3k1e-test.svg",function(lf)
{
g.append(lf);
//trying to load picture... Scale button in future
$('<img />', {
src: 'PNG/plus.png',
width: '30px',
height: '30px',
id: 'buttoninrk'
}).appendTo($('.comm_cont'));
//this button must be on picture
//but in front of the picture svg element
//And i can't click the button
});
});
I played with z-indexes of #svgborder and #buttoninkr but it didn't help me.
How to put button in front of svg element?
#buttoninkr, #svgborder
{
position: absolute;
}
#svgborder
{
border:5px solid black;
z-index: 0;
margin-left:auto;
border-radius: 5px;
display: inline-block;
}
#buttoninkr
{
z-index: 1;
}
Added css code with z-indexes.
There is a reason why i'm not using svg buttons instead jquery image button.
Ok, as you can see #svgmain in front of plus.png
http://jsfiddle.net/3wcq9aad/1/
Any ideas?
Solved
#svgborders
{
position: absolute;
background-color: #535364;
border:5px solid black;
z-index: 0;
margin-left:auto;
border-radius: 5px;
display: inline-block;
}
#buttoninrk, #buttondekr, #home_btn
{
position: inherit;
top:0;
margin:10px;
z-index: 1;
}
#buttoninrk
{
right:0px;
}
#buttondekr
{
right:60px
}
EDIT: It wasn't the position of the div that made the difference, but simply adding a width and height. So the original HTML works fine as long as you add a width and height to svgborder in the CSS:
http://jsfiddle.net/3wcq9aad/4/
(Note that sometimes, the position of an element within a document can make a difference to how z-index works.)
If you put the svgborder div before the svg, then z-index will work, but you'll need to know the width and height of your SVG and set it on the svgborder div.
<body>
<div class="comm_cont">
<div id="svgborder"></div>
<svg id='svgmain'></svg>
</div>
</body>
#svgborder
{
z-index: 2;
width:330px;
height:150px;
...
}
Fiddle: http://jsfiddle.net/3wcq9aad/3/
svg does not support z-index
Use element position instead:
$('element').css('position', 'absolute');
Is there a way in jQuery to bring a div to front?

Javascript offsetLeft doesn't work

Here's code where I want to use it:
if(e.keyCode==32)
{
var c=document.createElement("img");
c.src="http://findicons.com/files/icons/1075/scrap/300/aqua_ball_red.png";
c.id="ball";
c.style.top=down+"px";
document.body.appendChild(c);
setTimeout(function move(){
c.style.left=1200+"px";
},200);
setTimeout(function kill(){
c.style.opacity=0;
},700);
}
};
It's actually a moving ball which moves to certain coords after pressing space.I need to map it's coordinates when it's moving.When I use this:
var elem=document.getElementById("ball");
alert(elem.offsetLeft);
It does nothing and additionally it makes whole code in if() block not working.My browser is Chrome.
Here's a whole code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
#rocket
{
width:50px;
height:50px;
position:absolute;
top:0;left:0;
transition:top 0.4s, bottom 0.4s;
}
#ball
{
width:15px;
height:15px;
position:absolute;
transition:left 0.5s;
}
</style>
<script>
var down=0;
var up=0;
document.onkeydown=function(e){
e=e||window.event;
if(e.keyCode==40)
{
down=down+30;
document.getElementById("rocket").style.top=down+"px";
}
if(e.keyCode==38)
{
down=down-30;
document.getElementById("rocket").style.top=down+"px";
}
if(e.keyCode==32)
{
var c=document.createElement("img");
c.src="http://findicons.com/files/icons/1075/scrap/300/aqua_ball_red.png";
c.id="ball";
c.style.top=down+"px";
document.body.appendChild(c);
setTimeout(function move(){
c.style.left=1200+"px";
},200);
setTimeout(function kill(){
c.style.opacity=0;
},700);
}
};
document.onclick=function(e){
var y=e.pageY;
document.getElementById("rocket").style.top=y+"px";
down=y;
};
</script>
<img src="http://0.static.wix.com/media/a8b510_fc007f8eedd9f304c54ac6d374e3ee0b.gif_1024" id="rocket">
</body>
</html>
The left property only affects elements that have position set to relative, absolute or fixed.
For css left Property you have to mention that position
CSS :
#ball
{
position:absolute;
}
Assign your element with style position: relative or position: absolute before you want to get it's left or top property.
Try this with jQuery in the easy way:
alert($('#ball').offset().left);
or
var elem=document.getElementById("ball");
alert(elem.style.left);

On keypress zoom my Image

I have a various images displayed one below the other at the center of the page.
On keyPress I want to display or zoom a particular image in the list at the center of the page.
Something like, the image is not zoomed, but another copy of the image from that position is displayed using transition.
The code I have tried is this:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="Stylesheet" type="text/css" href="channel.change.css" />
<script>
var image = document.getElementById("img1");
image.addEventListener('keydown', doKeyDown, true);
function doKeyDown(e){
//====================
// THE W KEY
//====================
if (e.keyCode == 87) {
image.setAttribute('style', 'width:300px !important;');
}
}
</script>
</head>
<body>
<div>
<img id="img1" src="http://sphotos-c.ak.fbcdn.net/hphotos-ak- snc6/189287_403070459759757_137788631_n.png" alt="" class="zoom_image"/>
</div>
</body>
</html>
my css code is :
.zoom_image
{
display: block;
padding: 10px 10px 10px 10px;
position:relative;
width:100px;
height:80px;
left:0px;
top:0px;
border:1px solid black;
-webkit-transition: width 0.3s ease,height 0.3s ease,left 0.3s ease,top 0.3s ease;
}
.zoom_image:hover
{
width:500px;
height:480px;
left:-25px;
top:-25px;
z-index:9999;
}
I want my css to apply on the image on keyPress
Try
document.addEventListener('keydown', doKeyDown, true); instead
DEMO
W to zoom-in, X to zoom-out
(this will only work in chrome though, for other browsers you'll have to add browser-specific css)

Categories