Change jQuery mobile icon background color dynamically

Question

Is there a way to dynamically change the icon's background color ? I know how to change it permanently:

ui-icon-location:after{background-color: red;}

The thing is that I would like to change the background to red only when I'm a certain distance from a location using Cordova's watchPosition. By defaul the icon's background would be

.ui-icon-location:after{background-color: #3399FF;}

Everything works just fine, the icon is the only thing I would love to get working. I would appreciate any ideas.

Thanks!

Answer 1

you can apply your test about the distance inside this function and change the color by using if or switch statement :

JavaScript

    setInterval(function(){

    function resetStyle(elemClass) {

        switch(expression) {
            case Position:
                elem = document.getElementByClass(elemClass);
                elem.style.background = 'red';
                break;
            case Position2: 
                elem = document.getElementByClass(elemClass);
                elem.style.background = 'black';
                break;
            default:
                elem = document.getElementByClass(elemClass);
                elem.style.background = 'defaultColor'; 
        }


    }

}, 100);

you can also use setInterval to keep tracking for changes and catch the position , here is a fuction who can helps you find the position of an element in the window it can be useful for your tests :

// get position fuction

 function getPos(el) {
    // yay readability
    for (var lx=0, ly=0;
         el != null;
         lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
    return {x: lx,y: ly};
}

Answer 2

You can use jquery to change css dynamically.

("div").hover(function(){
$("#yourElementId").css("ui-icon-location:after{background-color: #3399FF;}");
});

But it will be better to use addClass and removeClass function.

//css

.ui-icon-location:after{background-color: #3399FF;}

//Jquery

("div").hover(function(){
$("#yourElementId").addClass("ui-icon-location");
});

This will call the css class and do exactly what you have defined in your css class. Similar you can use removeClass to remove the css class.