3
Contributors
5
Replies
23
Views
4 Years
Discussion Span
Last Post by navp
0

Do you have any code that we can look at so we can fix the problem, rather than us just throwing out random solutions?

0
 <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.

0
 <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.

0
<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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.