How do I put a div below canvas in HTML?

Get help using Construct 2

Post » Tue Mar 21, 2017 7:25 pm

I want to put a div below canvas and canvas should fit empty are of the screen. When I put the div above the canvas, it works perfectly but when put it below, div won't appear.

Is there anybody now how can I achieve this?

Image
B
74
S
36
G
45
Posts: 461
Reputation: 28,368

Post » Tue Mar 21, 2017 7:45 pm

Can you show us the page?
B
66
S
25
G
11
Posts: 672
Reputation: 11,430

Post » Tue Mar 21, 2017 7:51 pm

@Elliott The page is regular Construct 2 HTML5 export index page.

I want to put a div under <div id="c2canvasdiv">.

Code: Select all
<body>
   <div id="fb-root"></div>
   
   <script>
   // Issue a warning if trying to preview an exported project on disk.
   (function(){
      // Check for running exported on file protocol
      if (window.location.protocol.substr(0, 4) === "file")
      {
         alert("Exported games won't work until you upload them. (When running on the file:/// protocol, browsers block many features from working for security reasons.)");
      }
   })();
   </script>
   
   <!-- The canvas must be inside a div called c2canvasdiv -->
   <div id="c2canvasdiv">
   
      <!-- The canvas the project will render to.  If you change its ID, don't forget to change the
      ID the runtime looks for in the jQuery events above (ready() and cr_sizeCanvas()). -->
      <canvas id="c2canvas" width="854" height="480">
         <!-- This text is displayed if the visitor's browser does not support HTML5.
         You can change it, but it is a good idea to link to a description of a browser
         and provide some links to download some popular HTML5-compatible browsers. -->
         <h1>Your browser does not appear to support HTML5.  Try upgrading your browser to the latest version.  <a href="http://www.whatbrowser.org">What is a browser?</a>
         <br/><br/><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx">Microsoft Internet Explorer</a><br/>
         <a href="http://www.mozilla.com/firefox/">Mozilla Firefox</a><br/>
         <a href="http://www.google.com/chrome/">Google Chrome</a><br/>
         <a href="http://www.apple.com/safari/download/">Apple Safari</a></h1>
      </canvas>
      
   </div>
   <div>THE DIV I WANT TO PUT</div>

.
.
.
.

B
74
S
36
G
45
Posts: 461
Reputation: 28,368

Post » Tue Mar 21, 2017 8:11 pm

Yeah that should really work, when you look at the developer tools of the page where is the div being drawn? Is it behind the canvas?

Alternatively is this is some kind of weird source ordering thing, you can use flexbox's flex-order property to make divs display in a different order to how they're written:
https://www.w3schools.com/cssref/css3_pr_order.asp

For example, some CSS like the following:

Code: Select all
#container{
display:flex;
}

#yourDiv {
order:2
}

#c2canvasdiv {
order:1
}


Should do the trick; please note you'll have to wrap them in a parent div.

So the HTML will be roughly:

Code: Select all
<div id="container">
<div id="yourDiv"></div>
<div id="c2canvasdiv"></div>
</div>


If this works, then the following is a shorter rule for the same effect in this exact situation:

Code: Select all
#container{
display:flex;
flex-direction: column-reverse;
}
B
66
S
25
G
11
Posts: 672
Reputation: 11,430

Post » Wed Mar 22, 2017 7:56 pm

@Elliott Thanks for the reply. But still, it won't appear on the screen. The div is in the elements and if I disable overflow: hidden; I can see that it's below the canvas.

I think I should edit the canvas height from runtime.
Last edited by bilgekaan on Wed Mar 22, 2017 10:07 pm, edited 2 times in total.
B
74
S
36
G
45
Posts: 461
Reputation: 28,368

Post » Wed Mar 22, 2017 9:51 pm

What happens if you set the z-index of the container to -1 and the z-index of your div to 999?
B
66
S
25
G
11
Posts: 672
Reputation: 11,430

Post » Wed Mar 22, 2017 10:10 pm

@Elliott I think z-index won't fix it because the div is not covered by the canvas. It's below the canvas because canvas tries to cover whole window. I need something like canvas height = window height - div height (75px) but I couldn't figure out this in c2runtime.js.
B
74
S
36
G
45
Posts: 461
Reputation: 28,368

Post » Wed Mar 22, 2017 10:39 pm

I replaced all 'window.innerHeight' with 'window.innerHeight-75' in c2runtime.js and it worked.
B
74
S
36
G
45
Posts: 461
Reputation: 28,368


Return to How do I....?

Who is online

Users browsing this forum: No registered users and 9 guests