CODEWITHSUNDEEP
htmlcsscanvashtml5-canvas
ptCoder
ptCoder

Reputation: 2247

Menu bar in a fixed position overlaps the canvas

I have a problem with menu bars in my website. I need to put the menu bars fixed for working in canvas. I have set position: fixed.

The problem is that I have others menus that sometimes I need to put visible and overlaps the canvas.

I make a small example here: http://jsfiddle.net/ptCoder/NgHTN/1/

<div id="menus">
    <div id="hbar">Menu Bar</div>
    <div id="hbar1" style="display:none;">Menu Bar 1</div>
    <div id="hbar2" style="display:none;">Menu Bar 2</div>
</div>
<div class="container">
    <canvas id="c" width="500px" height="800px">CANVAS</canvas>
</div>

Please click in "New Menu Bars". What is need is that when I click in "New Menu Bars" the canvas moves to bottom and when I click in "Only 1 menu", only display 1 menu and moves canvas to top, like initial... I don't know exactly the height of all menu bars.

Is there any trick to show, hide not setting the margin size?

Please help me solve this problem.

Thank You.

Upvotes: 2

Views: 1233

Answers (1)

Nikita240
Nikita240

Reputation: 1427

Ok, you will need a javascript solution;

Working jsFiddle http://jsfiddle.net/NgHTN/4/

Basically, we will set the top css parameter after we display each block to the height of the #menus div.

First, set canvas to position : relative.

Then add handlers.

$("#btnNewMenu").click(function(){
    $("#hbar1").css("display","block");
    $("#hbar2").css("display","block");
    $(".container").css("top", $("#menus").height());
});

$("#btnShow").click(function(){
    $("#menus").show();
    $(".container").css("top", $("#menus").height());
});

$("#btnHide").click(function(){
    $("#menus").hide();
    $(".container").css("top", 0);
});

$("#btnOnly1").click(function(){
    $("#hbar").css("display","block");
    $("#hbar1").css("display","none");
    $("#hbar2").css("display","none");
    $(".container").css("top", $("#menus").height());
});

Alternatively, if you don't want to set canvas to position : relative, you could do the same thing by setting "margin-top" instead of "top", but you stated that you wanted an alternative method to margins for some reason.

Upvotes: 2

Related Questions