jQuery - Recalculate variable on window resize and re-run function

Question

I wrote a function that hides and toggle a top bar div:

jQuery(document).ready(function($) {

        $.fn.myTopBar = function() {

                var sipPosTop = 0;
                var topDivHeight = $("#top").outerHeight();

                $('#top').css('top' , -topDivHeight+10).show().animate({top: '+=0'}, 2000);


                $("#top-toggle").click(function(e) {
                    e.preventDefault();
                    $("#top").animate({ top: sipPosTop }, 200, 'linear', function() {
                        if(sipPosTop == 0) { sipPosTop = -topDivHeight+10; }
                        else { sipPosTop = 0; }
                    });
                });
        };
});

Works nice on page load, but on window resize the #top div height changes and it breaks the layout. How can I recalculate it and re-run the function on window resize? I tried the following:

jQuery(document).ready(function($){
    $.fn.myTopBar();
});

jQuery(window).resize(function($){
    $.fn.myTopBar();
});

But does not work. Thanks for any help

JSess · Accepted Answer · 2012-12-13T15:22:16.823

2

Edit -- Based upon your comments, I've written this plugin that (hopefully) will have the functionality that you are seeking. If anything, you may be able to extract some information on how to go about doing it.

Call the plugin with this --

$(function () {
    $('.someFlyoutContainerClass').flyout({
        flyButton : $('.someButtonClass'), // button that toggles the flyout
        topOffset : 50, // (px) offset from the top of the window
        fade : { // (fade speeds/durations) -- remove object if not needed
            inSpeed : 350,
            easingIn : 'swing', // by removing easing, it will default to linear
            outSpeed: 250,
            easingOut : 'swing'            
        },
        slide : { // (slide speeds/durations) -- remove object if not needed
            inSpeed : 350,
            easingIn : 'swing',
            outSpeed : 250,
            easingOut : 'swing'      
        },
        closeButton : $('.close-flyout'), // you may remove if not needed
        clickOffClose: true // click anywhere but modal/flyout to close it
    });
});

Here is a working version of the script -- (updated 12/13) http://jsfiddle.net/jmsessink/fC8ht/5/

I hope this helps and let me know if you have any questions.

edited Dec 13 '12 at 15:22

answered Dec 12 '12 at 16:31

JSess

638
4
13

Sorry I wrote twice the same code in the last part, I've edited it now. I already tried it in many ways. Does not work I don't know why. – djwd Dec 12 '12 at 16:40
Try it like this - jQuery(window).resize($.fn.myTopBar); – JSess Dec 12 '12 at 16:49
I tried but doesn't work either. The top bar has some strange behaviour, it jumps up and down while I resize the window and when I stop the toggle doesn't work at all anymore. – djwd Dec 12 '12 at 16:58
Well, logically that's what it is set up to do; for every pixel of movement on the window resize, the function will fire and toggle the top positioning of the element -- and so the toggling back and forth causes the "strange behavior." In that case, what exactly are you trying to accomplish, because that may help me figure out how to adjust the script. – JSess Dec 12 '12 at 18:13
Ok. I'm building a responsive website that has a top sticky toolbar that slides down when you click on a little button (kinda like iOs notification center.) Everything works fine on page load, on mobiles and desktops. The problem comes up when I resize the browser window, the content of this toolbar obviously changes its height, so the toolbar is no longer totally hidden. So I need the negative value of my fixed div to grow with the div. It's like 10 hours I'm struggling apparently stupid thing. Thanks for your help btw. – djwd Dec 12 '12 at 18:33
Alright, I shall update my answer with what I assume you are trying to do. What I wrote will work with your responsive design. – JSess Dec 12 '12 at 21:37
Hope this helps? are you kidding me?? I'm speechless...almost crying...thank you mate, it works GREAT. You actually wrote an entire plug-in for that I can't believe it, so it wasn't that easy like I thought eventually. I hope you didn't do it only for me, you should write an article or something on this. I'm studying your code now, it's so damn complete. Thank you again, I owe you one JSess. – djwd Dec 13 '12 at 09:57
1

There is only one little problem I just noticed, for some reason the toggle won't open if I scroll down the page, and then click the top-toggle button to open it. – djwd Dec 13 '12 at 10:35
I'll edit the code sometime today on a local testing page with scrolling. I'm just an idiot and forgot to add the scrollTop value to the animation. Anyway, it's not a problem - I'd rather someone learn something from my code than to just fix problems that people run into to post up here. This place was built around the idea that it is a learning experience for users, right? :) -- I will comment and edit my post when I get around to this today. – JSess Dec 13 '12 at 13:37
Alright, I've updated the script. It wasn't the scrollTop like I originally thought, but something else stupid :-P I've also added a parameter (clickOffClose: boolean) which allows the user to just click anywhere off the modal to close it. Let me know if you run into further issues, or would like something to be added as a feature. – JSess Dec 13 '12 at 15:20
Now works just fine. Also the clickOffClose is a very nice addition, althought it doesn't work on touch devices (iOs at least), if you enable it you can't close the toggle anymore. It's just a minor issue though I'll keep it disabled for the moment. Thanks again – djwd Dec 14 '12 at 12:42

jQuery - Recalculate variable on window resize and re-run function

1 Answers1