locked
Toggle Button

    Question

  • I am trying to manually create a toggle button, so I add a regular <button> control and then I toggle the background color when it is clicked...  For some reason, the background color does not change.  When I use the DOM Explorer, I can see that the button has the new background color associated with it but it doesn't change.  It stays the standard gray...  Any ideas?

            $(".groupedButtons").click(function () {
                var isDown = $(this).hasClass("down");
                $(".groupedButtons").removeClass("down");
                if(isDown)
                    $(this).removeClass("down");
                else
                    $(this).addClass("down");
            });

    The down css class is defined like this:

    .down {
        background-color: #ffd800;
    }


    www.emadibrahim.com

    Tuesday, May 22, 2012 1:10 AM

All replies

  • Hi,

    It seems the issue cannot be reproduced at my side. But any chance if you put the groupedButtons class below the down class, please change the order.

    For example, this will not work. The button will always show red, because groupedButtons overrides down.

    .down {
    background-color: #0094ff;
    }

    .groupedButtons {
    background-color: #f00;
    }

    This will work. If down is not associated with the button, red (as defined in groupedButtons) is displayed. If down is associated, it overrides groupedButtons, and thus the button is blue.

    .groupedButtons {
    background-color: #f00;
    }

    .down {
    background-color: #00f;
    }

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Tuesday, May 22, 2012 7:31 AM
    Moderator
  • Take a look at this image, you will see that I apply the style fine but it gets overriden by this ::-ms-browse thing...  what is that and how do I prevent it from overriding my style...


    www.emadibrahim.com

    Tuesday, May 22, 2012 9:46 PM
  • weird...  If change my css class to use

    background-image: -ms-linear-gradient(bottom, #ffc939 0%, #fed54e 100%);

    instead of 

    background-color: #ffd800;

    It works...  This sounds like a bug!!!!


    www.emadibrahim.com

    Tuesday, May 22, 2012 9:56 PM
  • Hi,

      >> This sounds like a bug!!!!

    Since the issue cannot be reproduced on my side, it would be better if you can share your demo project on SkyDrive, then we will find the issue more conveniently and provide further suggestions for you.

    Best Regards,

    Ming Xu.


    Please mark the replies as answers if they help or unmark if not.
    If you have any feedback about my replies, please contact msdnmg@microsoft.com.
    Microsoft One Code Framework

    Wednesday, May 23, 2012 7:35 AM
    Moderator