CODEWITHSUNDEEP
jquerycsshtmldomcanvas
holyredbeard
holyredbeard

Reputation: 21278

Positioning canvas with jQuery

I'm creating an drawing application with HTML5 canvas but is having problems with positioning.

I have a div where I dynamically put the canvas. The div has a top div and a bottom div and I want to place the canvas in the middle. As it is now the canvas overlaps the top div and therefore I want to move it down. I have tried styling the canvas (position: absolut, top: 40) but nothing happens. How can I accomplish this?

$('<canvas/>', {
  'id': 'paint',
}).appendTo('#box');

var theCanvas = document.getElementById('paint');
theCanvas.width  = 420;
theCanvas.height = 300;

The div looks like this:

-----------------
     top div       
-----------------


    canvas


-----------------
    bottom div
-----------------

Styling for the divs:

#box {
  position: absolute;
  left:50px;
  top: 60px;  
  margin-left: auto;
  margin-right: auto;
}

.topDiv {
  position: absolute;
  top: 0;
  height: 60px;
  overflow: hidden;
}

.bottomDiv {
  position: absolute;
  bottom: 0px;
}

The top div and bottom div is inside #box.

Upvotes: 0

Views: 2751

Answers (4)

PriorityMark
PriorityMark

Reputation: 3247

I've made a couple of assumptions as to exactly what you're trying to accomplish. Based upon what you I think you want to do, which I assume is have a box that contains two div's, and a canvas (and can be anywhere on the screen, potentially), I mocked up the html as:

<div id="box">
    <div class="topDiv">
        this is the top div
    </div>
    <div class="bottomDiv">
        this is the bottom div
    </div>
</div>

And, I'd suggest changing your javascript so you insert your canvas before the bottomDiv.

$('<canvas/>', {
    'id': 'paint',
}).insertBefore('#box .bottomDiv');

And changing your class styling on bottomDiv and topDiv so that they are position: relative. This should accomplish what you're looking for. Basically the #box controls the position of the group, and the top and bottom div's stay fixed in that group of controls.

Here's a jsFiddle with some border colors to show where the boxes are: http://jsfiddle.net/fordlover49/HKtn5/

Upvotes: 2

powerbuoy
powerbuoy

Reputation: 12848

Unless you style your div:s or canvas:es to have absolute positioning or negative margins (or something similar) this HTML with default CSS (div {display: block;}) will do just what you're after:

<div>Top</div>
<canvas></canvas>
<div>Bottom</div>

Since that doesn't seem to be working for you there must be other code that makes them overlap.

Here's an example: http://jsfiddle.net/xRfPq/

Upvotes: 0

Derk Arts
Derk Arts

Reputation: 3460

Whats wrong with:

<style>
#top{Height:40px; }
#bottom{Height:40px;}

</style>

<script>
  var theCanvas = document.getElementById('paint');
  theCanvas.width  = 420;
  theCanvas.height = 300;
</script>

<div id='top'></div>
<div id='paint'></div>
<div id='bottom'><//div>

Upvotes: 0

dgvid
dgvid

Reputation: 26633

You may simply need to apply CSS property position: relative to #box, but without more details, it's difficult to be sure.

Upvotes: 0

Related Questions