CODEWITHSUNDEEP
javascriptjqueryjquery-masonry
user1167650
user1167650

Reputation: 3207

JQuery Masonry -- expand div's over other div's

I'm making something similar to an iphone layout (a bunch of tiles with pictures/numbers that you can click on to get more information). After the layout has been set, I'd like a click-event to expand one of the tiles to be full screen. Right now, it moves the tiles so that the layout is re-adjusted. Is it possible to get masonry to stop rendering so that one tile get's enlarged over the other tiles?

The following is what I've tried (but unsuccessfully). Note: It uses d3.js to generate the div's for masonry to use.

function drawGrid(divname,orders)
{   
var mydiv = d3.select(divname);
$(divname).masonry({
    itemSelector: '.g1',
    isAnimated: true,
    //isResizable: true
});

var myd = mydiv.selectAll("div");
var mygs = myd.data(orders,function(d){ return d.orderid;})
    .enter().append("div")  
    .attr("class","g1")
    .append("g");

var x1 = mygs.append("div")
        .attr("class","tickerdiv")
        .text(function(d){ return d.ticker; }); 


var ActiveOrder = "1";
$(divname+' .g1').click(function() {  
    //$(this).show('maximised');
    console.log("clicked")

    $(this).animate({"display":"none","position": "absolute",
        "top": "0",
        "left": "0",
        "width": "100%",
        "height": "100%",
        "z-index": 1000 }, 1000);
});
var x = [];
x.redraw = function(o)
{           
    x1.text(function(d){ return d.ticker; });
}
return x;
}

and from the css file:

.g1 { min-height:80px; width: 100px; margin: 15px; float: left; background-color: RGB(223,224,224); border-radius: 10px; vertical-align: middle; text-align: center; padding-top: 20px;}

Upvotes: 1

Views: 2105

Answers (2)

DDT
DDT

Reputation: 414

You can add a :hover to the element in css and change the z-index. You could easily change this on click with a class as well...

.item {
    z-index:1
}

.item:hover{
    z-index:2500;
}

Upvotes: 0

Systembolaget
Systembolaget

Reputation: 2514

EDIT Ok, my first answer was not useful here - absolute positioning won't work in case of masonry's/Isotope's relatively positioned container with absolute positioned elemens contained therein; the solution is rather to take the content of a masonry/Isotope element out of the DOM on click and append it temporarily to the body. You can see the basic idea in my dirty swedish sandbox

<!-- masonry/Isotope item large -->

<div class="item large">
    <div class="header">
        <p>Click here</p>
    </div>
    <div class="minimised">
        <p>Preview</p>
    </div>
    <div class="maximised">
        <p>Content</p>
        <button id="screen-overlay-on">Screen overlay on</button>
        <div id="screen-overlay-background"></div>
        <div id="screen-overlay-content">
            <p>Content</p>
            <button id="screen-overlay-off">Screen overlay off</button>
        </div>​
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){

    $('#screen-overlay-on').click(function(){

        var sob = $('#screen-overlay-background').detach();
        var soc = $('#screen-overlay-content').detach();

        sob.appendTo('body');
        soc.appendTo('body');

        $('#screen-overlay-background').toggleClass("active");
        $('#screen-overlay-content').toggleClass("active");
    });

    $('#screen-overlay-background, #screen-overlay-off').click(function(){
        $('#screen-overlay-background').toggleClass("active");
        $('#screen-overlay-content').toggleClass("active");
    });

});
</script>

With CSS like

#screen-overlay-background {
display: none;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #333;
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
z-index: 1000;
}

#screen-overlay-content {
display: none;
position: absolute;
top: 50%;
left: 50%;
height: 240px;
width: 320px;
margin: -120px 0 0 -160px;
background-color: #FFF;
z-index: 1000;
}

#screen-overlay-background.active, #screen-overlay-content.active {
display: block;
}

Upvotes: 1

Related Questions