Hello I have this interactive canvas as a background of my web, it is on 100% width and high, but when I add content that continues longer than canvas and you have to scroll down, canvas is not repeating down y axis.
Also can anyone tell how can i center align absolute positioned <div>.
I added white box that is longer than canvas, if you scroll down you start to see black background, how can I make canvas repeat down y-axis and how do i center that white box (which is absolute positioned div)
Here is code: -
<!DOCTYPE html>
-
<html lang="en">
-
<head>
-
<meta charset=utf-8 />
-
<title>Canvas by Ilya</title>
-
<style>
-
body {
-
background: #000;
-
margin-left: 0px;
-
margin-top: 0px;
-
margin-right: 0px;
-
}
-
canvas {
-
position: absolute;
-
top: 0;
-
left: 0;
-
height: 100%;
-
width: 100%;
-
-
}
-
body,td,th {
-
color: #000;
-
}
-
-
-
#repeattest {
-
background-color: #FFF;
-
position: absolute;
-
height: 2552px;
-
width: 88px;
-
left: 62px;
-
top: 1px;
-
}
-
</style>
-
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
</head>
-
<body>
-
<canvas height="600" width="600"></canvas>
-
<script>
-
var canvas = document.getElementsByTagName('canvas')[0],
-
ctx = null,
-
grad = null,
-
body = document.getElementsByTagName('body')[0],
-
color = 255;
-
-
if (canvas.getContext('2d')) {
-
ctx = canvas.getContext('2d');
-
ctx.clearRect(0, 0, 600, 600);
-
ctx.save();
-
// Create radial gradient
-
grad = ctx.createRadialGradient(0,0,0,0,0,600);
-
grad.addColorStop(0, '#000');
-
grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
-
-
// assign gradients to fill
-
ctx.fillStyle = grad;
-
-
// draw 600x600 fill
-
ctx.fillRect(0,0,600,600);
-
ctx.save();
-
-
body.onmousemove = function (event) {
-
var width = window.innerWidth,
-
height = window.innerHeight,
-
x = event.clientX,
-
y = event.clientY,
-
rx = 600 * x / width,
-
ry = 600 * y / width;
-
-
var xc = ~~(256 * x / width);
-
var yc = ~~(256 * y / height);
-
-
grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 0.01);
-
grad.addColorStop(0, '#000');
-
grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
-
// ctx.restore();
-
ctx.fillStyle = grad;
-
ctx.fillRect(0,0,600,600);
-
// ctx.save();
-
};
-
}
-
</script>
-
<div id="repeattest">
-
<p>Scroll</p>
-
<p> Down<br>
-
</p>
-
</div>
-
-
-
</body>
-
</html>
-
Change the canvas from absolute to fixed. I'm not sure what you mean by center the div. Are you talking about centering what's inside the div? Or centering the div on the page?
5  2869 
Change the canvas from absolute to fixed. I'm not sure what you mean by center the div. Are you talking about centering what's inside the div? Or centering the div on the page?
changing it to fixed position helped thanks, i mean centering a div on a page.
Thanks for help with canvas again )))
Have one master div that's absolutely positioned at 0,0 with 100% width and height. That will be the wrapper for the rest of the content. You can now treat everything within that div as if it's the <body> of the document. You would center anything within it the same way you would center it if you didn't have a canvas for a background or a div as a wrapper.
Thank you again ))) you are awesome!!! ;D
Sign in to post your reply or Sign up for a free account.
Similar topics
by: Chen Yang |
last post by:
suppose there're three String a, b and c, the length are not fixed.
how can i make the format a b c so that three arrays align to the
left?
ok, i know it's stupid.. but i don't think using...
|
by: Marcel |
last post by:
I'm running MySQL version 4.1.7-nt.
When I submit the following query:
SELECT DISTINCT pet from pets;
I get:
dog
cat
lama
|
by: Felipe Gasper |
last post by:
I'm trying to make some "sub-cells" in an HTML table and to control
their positioning and content presentation via CSS. In the table at
the following URL:
...
|
by: Sanjay |
last post by:
Hi,
I am calling COM + dll from VB.net class.
When two clients invoke same method of com+ dll concurrently both
client requests fail.
COM + dll is insatlled in Library package.
I got...
|
by: Rob |
last post by:
I have a form - when you click the submit button, it appends a
variable to the URL (e.g. xyz.cgi?inputID=some_dynamic_variable)
It also opens a new page. Now, that some_dynamic_variable is...
|
by: Ceri Williams |
last post by:
I followed the excellent MSDN article "Code Generation in the .NET Framework
Using XML Schema" to build a substitute for the limited xsd.exe. My code
works fine under .NET framework 1.1, but after...
|
by: a.theil |
last post by:
Hello!
First, I´m greenhorn to vb.net.
I do -
proIDKernel = Shell(txtKommandozeile, vbMinimizedFocus)
AppActivate(proIDKernel)
SendKeys.SendWait(strK)
SendKeys.SendWait("{ENTER}")
|
by: Tom |
last post by:
Hi:
I'm having a problem with a simple report in a simple database.
Basically it's an issue tracking database - what is the issue, what is
the proposed solution, who is responsible, a tracking...
|
by: mrbadboy |
last post by:
Hi,
I tried to set aling DIV to center using text-align:cener. It works in IE but not in Mozilla. Whats the alternate solution for Mozilla ?.
Thanks.
|
by: bogfart |
last post by:
Hi all,
In brief, this is what's happening (very annoying):
- I made 5 HTML/CSS pages coding them by hand;
- First I made one page and I used that page for making other pages, just with small...
|
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
| | |
