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>
-
5  2882  Rabbit 12,516
Recognized Expert Moderator MVP
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 )))
Rabbit 12,516
Recognized Expert Moderator MVP
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
Rabbit 12,516
Recognized Expert Moderator MVP 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 StringTokenizer to
implement my own format is a good idea... plez help me out, thanks a lot!
|
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:
https://fshn3152.foods.uiuc.edu/~fgasper/erf.html
what I'm immediately trying to do is vertically position the text and
checkboxes in all four "Statement Date" sub-cells (created with <span>
elements).
|
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 same problem when when I changed packaege from Library to
|
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 actually
the name of a form element on the parent window.
On the new page, I have this javascript:
----
var var2 = location.search.substring(9);
document.write(var2)
| | |
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 installing .net framework
service pack 1, my code breaks.
Below are trivial example files that demonstrate the problem:
XSD FILE aaa.xsd
----------------------
<?xml version="1.0" encoding="UTF-8"?>
|
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 number, and that
is it. Two tables - one for the issue, one for the people (one issue
can have more than one responsible person). No code - whole thing
slapped together in 15 minutes.
The report is set up to print the tracking number, issue,...
|
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 changes in text;
- All pages are aligned > center:
margin-left:auto;
margin-right:auto;
position:relative;
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it.
First, let's disable language synchronization. With a Microsoft account, language settings sync across devices. To prevent any complications,...
| | |
by: Hystou |
last post by:
Overview:
Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
|
by: agi2029 |
last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own....
Now, this would greatly impact the work of software developers. The idea...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules.
He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms.
Adolph will...
|
by: conductexam |
last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one.
At the time of converting from word file to html my equations which are in the word document file was convert into image.
Globals.ThisAddIn.Application.ActiveDocument.Select();...
|
by: TSSRALBI |
last post by:
Hello
I'm a network technician in training and I need your help.
I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs.
The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols.
I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...
|
by: adsilva |
last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
| | |
by: 6302768590 |
last post by:
Hai team
i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
|
by: muto222 |
last post by:
How can i add a mobile payment intergratation into php mysql website.
| | |
