jQuery on re-sizeing back

Question

I have this code which allows me to change the style sheet when the browser is re-sized:

            $(window).resize(function () {
            var width = $(window).width();
            var height = $(window).height();

            if ((width <= 1280) && (height <= 800)) {
                $("link[rel=stylesheet]:not(:first)").attr({ href: "Styles/Home-1024.css" });
            }
            else if ((width > 1280) && (height > 800)) {
                $("link[rel=stylesheet]:not(:first)").attr({ href: "Styles/Home.css" });
            }
        });

and it works fine but i am trying to change the style sheet again when the browser returns to its original size.

I don't quite understand the problem. If your code works, won't it fire both when the browser is resized the first time, *and* when the browser is size back to its original size? — lowerkey, Aug 10 '11 at 11:17
@Joshua Moore - that's what i thought but it only works on the first resize and never on the second one — Wahtever, Aug 10 '11 at 11:19
@Joshua Moore - [here](http://jsfiddle.net/QpnxC/2/) is an example its different that this since i cant add style sheets on jsfiddle — Wahtever, Aug 10 '11 at 23:52
You should remove the solution from your question and add it as an answer (and accept it if it actually solved your problem). — murgatroid99, Sep 19 '11 at 02:07

score 0 · Answer 1 · answered Aug 10 '11 at 11:53

0

You can try:

$(window).live("resize", function(){

});

answered Aug 10 '11 at 11:53

silverstrike

522
2
7

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

I think part of the problem is that the script fires at each moment of each drag.

You might consider adding a delay so that the event is not repeated so many times.

See this: JavaScript/JQuery: $(window).resize how to fire AFTER the resize is completed?

edited May 23 '17 at 12:04

Community

1
1

answered Aug 10 '11 at 11:57

Jason Gennaro

34,535
8
65
86

tried it and it activates with a delay but again it only fires on the first resize but not after that – Wahtever Aug 10 '11 at 23:45
One issue I see with this approach: If the delay is too long, the page might change (depending on the difference in stylesheets, drastically) and look jerky. – lowerkey Aug 11 '11 at 01:23
would you recommend a different approach – Wahtever Aug 11 '11 at 13:53

score 0 · Accepted Answer · answered Sep 20 '11 at 11:47

0

i was missing a double greater than so instead of this :

else if ((width > 1280) && (height > 800)) {

i used this and it worked:

else if ((width >> 1280) && (height >> 800)) {

answered Sep 20 '11 at 11:47

Wahtever

3,597
10
44
79

jQuery on re-sizeing back

3 Answers3