Using jquery wookmark plugin while dynamically changing heights of elements

Question

I am using the wookmark plugin and have gotten it to work as they show on their website. In my use case, when I hover over a particular element, it "expands" vertically. This obviously messes up the absolute positioning of the elements below the expanded element in that column. I am trying to modify/augment the wookmark plugin to handle my use case and was wondering whether anyone had some tips on how I can approach this problem.

Thanks.

Answer 1

I am no jQuery expert by any means, but I have a suggestion.

On element mouseover, create a new div that sits on top of the original one. This will obviously need modifying to suit your 'expanding' requirements. I'm not sure what size you were expanding to, or if you were animating it - so I created the new div to be the same size as the original in this example.

Using this method will leave the original box where it is, but will overlay a new box the same size and in the same place, not affecting the rest of the boxes.

<script>
$(document).ready(function(e) {
    $('#theHoverElement').mouseenter(function() {

        // on mouseover, get offset values and sizes
        var offset = $(this).offset();
        var top = offset.top();
        var left = offset.left();
        var height = $(this).height();
        var width = $(this).width();

        // create a new div element with the same values
        $("#mainPageContainer").append("<div style='position:absolute; top:"+top+"; left:"+left+"; width:"+width+"; height:"+height+"; z-index:10000;'>Hello World!</div>")

        // here you could put an expanding function
        $(this).animate({ // some height & width properties }, 600);
    });
});
</script>

As I say, I am no jQuery expert, so this may not work immediately, but could help.