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

b5991988c1e4153b2f9d363fb86ea210

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.