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. :)

Recommended Answers

Do 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 Post

Well, you haven't closed the style tag for a start, so thats a start.

Jump to Post

All 5 Replies

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 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.