How to execute jquery when a variable with a CSS property changes

Question

I need to set the scrollleft back to 0 on my wrapper when a specific css property changes. I'm a bit new to jquery and have never used variables, but I'm assuming that I'll need to declare the somewhat complex variable before the function, and then execute the function when the variable changes. Am I correct? It needs to continually respond like this to resize queries. This will be an epic solution for me if it works!

var changer = $(".dummy").css("float"); //whatever the float property is

$(document).ready(){
    $(window).resize(function(){
        if ($(".dummy").css("float") != changer ){
        $(".wrapper").scrollLeft(0);
        }
});

I have about an hour before I can test this. Is that all? Is code all good and expected to work? I always screw up syntax when writing this stuff! — user3424554
– user3424554, Commented Oct 22, 2014 at 4:26
That's all I can suggest from the code you've posted. When float has changed, you need to update the value of changer so next time it changes your if executes again. — artm
– artm, Commented Oct 22, 2014 at 4:36

user1980781 · Accepted Answer · 2014-10-22 05:46:42Z

2

here is my suggestion: Use an ID for "dummy", if you have more than one "dummy" in your dom-tree you get an array with html elements from jquery.

$(document).ready(function() {
    // First init for "dummy"
    var $dummy = $("#dummy"),
        dummyFloat = $dummy.css("float");

    $(window).resize(function () {
        var dynamicDummyFloat = $dummy.css("float");

        if (dynamicDummyFloat != dummyFloat) {
            $(".wrapper").scrollLeft(0);
            dummyFloat = dynamicDummyFloat;
        }
    });
});

answered Oct 22, 2014 at 5:46

user1980781

Sign up to request clarification or add additional context in comments.

3 Comments

user3424554 Over a year ago

I'm struggling to make this code work, or the code I supplied. I have 3 different CSS files that are automatically toggled between depending on browser size, and something isn't working right yet. Thanks for the advice though. I'll be needing to dedicate more time to this one I guess yet!

user3424554 Over a year ago

Hey this worked! Thanks a lot!!! Cheers to you friend! Now onto the next hurdle..lol!

user3424554 Over a year ago

Ok after updating this code to be affected by css "color" instead of "float" and combining it into the rest of my code, I'm actually still unable to get scrollLeft to work. Here is my super streamlined code in a jsfiddle. What am I doing wrong? My goal is to have the wrapper snapped back to 0 whenever the color property changes for DUMMY. If you can help I will be so grateful! jsfiddle.net/oLqpqxkz

M J · Accepted Answer · 2014-10-22 05:40:37Z

0

The code that you have written will work fine.

answered Oct 22, 2014 at 5:40

M J

814 bronze badges

Collectives™ on Stack Overflow

How to execute jquery when a variable with a CSS property changes

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related