CODEWITHSUNDEEP
javascripthtmlcss
Robin Timman
Robin Timman

Reputation: 519

Html/css/js divs splitting to under block jsfiddle

How do I get the middle block (the block where it says: "hallo") like the image:

How it is: enter image description here How I want it: enter image description here

jsfiddle + script: http://jsfiddle.net/mWmsU/

html:

<div id="container">
<div class="overlay"></div>
    <div class="btnbar">
        <div class="btn" id="it1"><div class="btnp" id="txt"></div><h2>Knopje 1</h2></div>
        <div class="btn" id="it2"><div class="btnp"></div><h2>Knopje 2</h2></div>
        <div class="btn" id="it3"><div class="btnp"></div><h2>Knopje 3</h2></div>
        <div class="btn" id="it4"><div class="btnp"></div><h2>Knopje 4</h2></div>
        <div class="btn" id="it5"><div class="btnp"></div><h2>Knopje 5</h2></div>
        <div class="btn" id="it6"><div class="btnp"></div><h2>Knopje 6</h2></div>
        <div class="btn" id="it7"><div class="btnp"></div><h2>Knopje 7</h2></div>
    </div>
    <div class="largebar">
        <div class="pointer"></div>
        <div class="largebarcontent">
            <h1 id="title">Hallo</h1>
        </div>
    </div>
</div>

It should like a littlebit like ios home screen

Upvotes: 0

Views: 255

Answers (1)

MG_Bautista
MG_Bautista

Reputation: 2653

Use this... and see the HTML and CSS of the demo...

$(function(){
    var currentItem;
    var plusLeft;
    $(window).bind("resize", resizeWindow);
    resizeWindow();
//              $(".overlay.largeOpen").css("height", $("body").height());

    $(".btn").click(openItem);
    $(".overlay").click(function(){
        $(currentItem).css("z-index", 9);
        $(".row").css("padding-bottom", 0);
        $("#"+currentItem.id + " h2").css("visibility", "visible");
        $("#container, .overlay").toggleClass("largeOpen");
        $(".btn").click(openItem);
    });
    $("#txt").text(window.innerWidth);

    function openItem(){
        currentItem = this;
        $('html,body').animate({
            scrollTop: $(this).position().top
        }, 700);
        $("#container").toggleClass("largeOpen");
        $(this).parent().css("padding-bottom", 100);
        $(".pointer").css("left", $(this).position().left+plusLeft);
        $(".largebar").css("top", $(this).position().top+117);
        $(this).css("padding-button", "117px");
        $(this).css("z-index", 101);
        $("#"+currentItem.id + " h2").css("visibility", "hidden");
//                  console.log($(this).css('z-index') == 10);
        $(".btn").unbind('click');
    }

    function resizeWindow(e) {
        if(currentItem){
            $(".pointer").css("left", $("#"+currentItem.id).position().left+plusLeft);
            $(".largebar").css("top", $("#"+currentItem.id).position().top+117);
        }
        $(".overlay.largeOpen").css("height", $("body").height());
        if(window.innerWidth <= 320) plusLeft = 9;
        if(window.innerWidth > 320) plusLeft = 20;
    }
});

And see this DEMO

Upvotes: 1

Related Questions