Adding stuff - INDEX.HTML

Get help using Construct 2

Post » Sun Jan 08, 2012 9:41 am

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?

~Sol
Tired of crappy file hosts that are crappy? Get DROPBOX - https://db.tt/uwjysXJF
Moderator
B
45
S
17
G
37
Posts: 2,853
Reputation: 25,966

Post » Sun Jan 08, 2012 9:49 am

Im guessing
<code>
<body>
    <div>
        <div>
        </div>
    </div>
</body>
</code>

Unless thats what you did.
Image Image
B
161
S
48
G
91
Posts: 7,357
Reputation: 67,269

Post » Sun Jan 08, 2012 9:52 am

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.

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

~SolSoldjahBoy2012-01-08 09:53:59
Tired of crappy file hosts that are crappy? Get DROPBOX - https://db.tt/uwjysXJF
Moderator
B
45
S
17
G
37
Posts: 2,853
Reputation: 25,966

Post » Sun Jan 08, 2012 10:27 am

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.

Example
(Seems like the puu.sh 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) ;)Morhaus2012-01-08 10:32:30
B
7
S
3
G
3
Posts: 26
Reputation: 1,652

Post » Sun Jan 08, 2012 10:40 am

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

~Sol
Tired of crappy file hosts that are crappy? Get DROPBOX - https://db.tt/uwjysXJF
Moderator
B
45
S
17
G
37
Posts: 2,853
Reputation: 25,966

Post » Sun Jan 08, 2012 11:16 am

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 :

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 <div id="allmytext">MYTEXT</div>, all I have to do is to replace canvas.height = h; by canvas.height = h - jQuery("#allmytext").height(); !
I would also set the canvas position to relative.

Here is an ExampleMorhaus2012-01-08 11:26:44
B
7
S
3
G
3
Posts: 26
Reputation: 1,652

Post » Sun Jan 08, 2012 12:50 pm

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="http://google.com/" 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;
</script>


~Sol
Tired of crappy file hosts that are crappy? Get DROPBOX - https://db.tt/uwjysXJF
Moderator
B
45
S
17
G
37
Posts: 2,853
Reputation: 25,966


Return to How do I....?

Who is online

Users browsing this forum: PixelatedTrip, Yahoo [Bot] and 0 guests