Hello everyone
I am designing a j-query mobile app and I have set the bacground as a canvas and set it to fixed, which is causing it to display white space when i scrool down. Following is the image of the problem
Any fix for this? Thnaks for the reply. :)
Do you have any code that we can look at so we can fix the problem, rather than us just throwing out random solutions?
<style>
#bgCanvas{
position:fixed;
}
<body style="background:transparent">
<div data-role="page">
<div data-role="header" align="center">
<h1>Home Page</h1>
</div><!--header-->
<canvas id="bgCanvas"> </canvas>
<div data-role="content" align="center">
.....
</div><!--content-->
<div data-role="footer">
....
</div><!-- /footer -->
</div>
This is the code.
<style>
#bgCanvas{
position:fixed;
}
<body style="background:transparent">
<div data-role="page">
<div data-role="header" align="center">
<h1>Home Page</h1>
</div><!--header-->
<canvas id="bgCanvas"> </canvas>
<div data-role="content" align="center">
.....
</div><!--content-->
<div data-role="footer">
....
</div><!-- /footer -->
</div>
</body>
This is the code.
Well, you haven't closed the style tag for a start, so thats a start.
<style>
#bgCanvas{
position:fixed;
}
[data-role=footer]{bottom:0; position:absolute !important; top: auto !important; width:100%; height:auto;}
</style>
<body>
<div data-role="page">
<div data-role="header" align="center">
<h1>Home Page</h1>
</div>
<canvas id="bgCanvas"> </canvas>
<!-- /header -->
<div data-role="content" align="center">
....
</div><!-- /content -->
<div data-role="footer">
....
</div><!-- /footer -->
</div>
<script type="text/javascript">
var bgCanvas = document.getElementById('bgCanvas');
function render() {
bgCanvas.patternizer({
stripes : [
{
color: '#815629',
rotation: 122,
opacity: 100,
mode: 'plaid',
width: 1,
gap: 5,
offset: 0
}
],
bg : '#66431f'
});
}
// resize the canvas to the window size
function onResize() {
// number of pixels of extra canvas drawn
var buffer = 800;
// if extra canvas size is less than the buffer amount
if (bgCanvas.width - window.innerWidth < buffer ||
bgCanvas.height - window.innerHeight < buffer) {
// resize the canvas to window plus double the buffer
bgCanvas.width = window.innerWidth + (buffer * 2);
bgCanvas.height = window.innerHeight + (buffer * 2);
render();
}
}
function init() {
onResize();
// create a listener for resize
// cowboy's throttle plugin keeps this event from running hog wild
window.addEventListener('resize', Cowboy.throttle(200, onResize), false);
}
init();
</script>
</body>
here is the update code.
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.