Adding stuff - INDEX.HTML

0 favourites
  • 7 posts
  • I want to add some standard HTML stuff at the BOTTOM of my "app". If I edit the index.html file, I can easily add text or tables, etc to the TOP of the page by placing the required code inside the <DIV> tag and above the <canvas> tag. If I put anything after the </canvas> tag, it seems to ignore it... unless there is some other factor I am missing.

    Anyone have any idea how to add "stuff" at the BOTTOM of the page, underneath the canvas?


  • Im guessing









    Unless thats what you did.

  • I tried adding it in between the div tags, and it appears at the top... so unless I need to add more div tags to pull the canvas up into the middle... I just don't understand why it adds text etc ABOVE the canvas, but seemingly ignores anything added below?

    Frustrating for something that, on the surface, seems like it should be simple.


    I also set overflow to SCROLL instead of HIDDEN, which also didn't help :/


  • If your canvas position is set to absolute, any text below the canvas will ignore canvas' height and position and will move behind the canvas.


    (Seems like the minifier is blocked by the forum so I can't embed the image in my post :/)

    Could you please host your index.html so that we could take a look?

    Anyway, for any HTML debugging I'd recommend you the excellent firefox plug-in called Firebug (which is included by default in Chrome) ;)

  • Morhaus

    The index.html is now currently the default exported index.html you get with any C2 project.

    The canvas position is set to "fixed", though I have tried all other options.

    I am using "stretch to fit browser" though, which is rather important since the site has to fit on a single page with no scrolling. Not sure if this is causing a problem?

    I tried making a new HTML page from scratch, and used an iframe to house the HTML5 component leaving a gap at the bottom for the standard component I wanted to add. This worked grest up until the time I wanted to resize the window. It seems the "stretch to fit" feature only works if it's in the main browser window, and not loaded inside of an iframe.

    I can still post the index file if you want to, but it's probably not going to be useful since it's currently unmodified.


  • The "scale" mode will resize the canvas depending on the entire window size, so I guess it will always fill all the space of the window.

    Here is the function that will be called each time the window is resized :

    <font face="Courier New, Courier, mono">function cr_sizeCanvas()


    var canvas = document.getElementById("c2canvas");

    var w = Math.min(jQuery(document).width(), jQuery(window).width());

    var h = Math.min(jQuery(document).height(), jQuery(window).height());


    if (canvas.c2runtime)


    canvas.c2runtime.setSize(w, h);



    canvas.width = w;

    canvas.height = h;


    What you can do is making a div with a special id below the canvas, and substract its height to the canvas height.

    For example, if I have a <font face="Courier New, Courier, mono"><div id="allmytext">MYTEXT</div></font>, all I have to do is to replace <font face="Courier New, Courier, mono">canvas.height = h;</font> by <font face="Courier New, Courier, mono">canvas.height = h - jQuery("#allmytext").height();</font> !

    I would also set the canvas position to relative.

    Here is an Example

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Thanks for your help guys, again. This problem kind of flopped cross two threads lol.

    I ended up finding this which worked for what I wanted, though it ended up being the wrong thing for me to be doing anyway.

    Someone else may find it useful though.

    I made an iframe on a new HTML document and used this script to put the HTML5 page inside of it, AND fill the page leaving a dedicated "margin" at the bottom:

    <iframe id="frame" src="" width="100%" frameborder="0" marginheight="0" marginwidth="0"></iframe>

    <script type="text/javascript">

    function resizeIframe() {

        var height = document.documentElement.clientHeight;

        height -= document.getElementById('frame').offsetTop;


        // not sure how to get this dynamically

        height -= 20; /* whatever you set your body bottom margin/padding to be */


        document.getElementById('frame').style.height = height +"px";



    document.getElementById('frame').onload = resizeIframe;

    window.onresize = resizeIframe;



Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)