jQuery Issues | Need To Fire Event Twice In Order to Work Properly

Question

I am using two jQuery plugins for a responsive and categorized feed. The plugins are like a lot of grid layout plugins where it uses position absolute after finding out the window size to position all the grid elements. My issue is that my grid element have dropdown options which originally has a height of 0px and onclick it's height goes to 300px for example. So sense it loads the gird items in with the dropdown as a height of 0 when the dropdown expands the items below its parent doesnt move down to adjust because it is already set with a position absolute in that area of the screen. When ever there is a window resize it recalculates everything and re organizes the grid. I need to find a way to run that function that resizes everything with a onclick event so that everything will rearrange properly. Right Now I can get it only to work if I click on the element twice rather than one, do you know why this would be happening.

Here Is what I have right now for trying to trigger the resize

function reply_dropdown_clicked() {
    $( ".replies_feed" ).animate( {"height" : "300px"} );
    window.dispatchEvent(new Event('resize'));
    console.log("resize");
}

$( ".meta__price ul li:nth-child(3)" ).click(function() {
    reply_dropdown_clicked();
});

Here is The event Listener for the resze

// window resize / recalculate sizes for both flickity and isotope/masonry layouts
    window.addEventListener('resize', throttle(function(ev) {
        recalcFlickities()
        iso.layout();
    }, 50));

Possible duplicate of [How to trigger the window resize event in JavaScript?](http://stackoverflow.com/questions/1818474/how-to-trigger-the-window-resize-event-in-javascript) — davcs86, Oct 07 '15 at 16:55
I just gave it a try but nothing yet, i thought that would work too. — Brady Edgar, Oct 07 '15 at 17:01
just updated the question, I can now get it to work only if I click on it twice which is weird. I have also updated and changed my code for it — Brady Edgar, Oct 07 '15 at 17:16

score 1 · Answer 1 · answered Oct 07 '15 at 16:52

1

Would $(window).trigger('resize'); be what you're looking for?

answered Oct 07 '15 at 16:52

Adam Mazzarella

763
1
7
14

I tried using that, but it didnt seem to really do anything for me – Brady Edgar Oct 07 '15 at 16:55
just updated the question, I can now get it to work only if I click on it twice which is weird. I have also updated and changed my code for it – Brady Edgar Oct 07 '15 at 17:16

jQuery Issues | Need To Fire Event Twice In Order to Work Properly

1 Answers1