问题描述:

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;}

网友答案:

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;
}
网友答案:

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;
}
相关阅读:
Top