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. :)
Jump to PostDo you have any code that we can look at so we can fix the problem, rather than us just throwing out random solutions?
Jump to PostWell, you haven't closed the style tag for a start, so thats a start.
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.