• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Add-on On and Off Style Switch

MagnusB

Well-known member
#2
I replied to you in the other thread, but I already wrote a simple jQuery function that does this, you can test it out here: http://jsfiddle.net/ubAAt/

It needs a bit tweaking for working with xF, but everything is controlled by id's:
Code:
    $("#toggleLights").click(function () {
      //#toggleLights is the id of the button you click
      event.preventDefault();
      $("#changeClass").toggleClass("lightsOff");
      // #changeClass is the id of the div container you want to change class of
      $(this).text($(this).text() == 'Lights on' ? 'Lights off' : 'Lights on');
      // A simple text replacement, if it is Lights on change to Lights off, else change to Lights on
    });
This will add the class of the div you select to lightsOff (or remove lightsOff class), which means you can add some extra css for .whatever.lightsOff to change colors.
 

MagnusB

Well-known member
#4
Come to think of it, you can change #changeClass to .changeClass, then you only need to add in changeClass to all the classes you want to change colors for. That way the function will append lightsOff class to all the elements with the class changeClass.

The function it self is very easy, the hard part, and what takes a while is to do the CSS for everything. You basically have to have 2 different styles with 1 template set. You can simplify this by having child containers inherit the background color from a parent, that way you can greatly reduce the amount of CSS needed when turning off or on the lights.

EDIT:
As I am more or less just counting minutes until I can head home from the office, I updated it with the class version here: http://jsfiddle.net/ubAAt/2/

Also added in different colors and tags so it is easier to see what it does and how you can control it.
 

DRE

Well-known member
#5
I replied to you in the other thread, but I already wrote a simple jQuery function that does this, you can test it out here: http://jsfiddle.net/ubAAt/

It needs a bit tweaking for working with xF, but everything is controlled by id's:
Code:
    $("#toggleLights").click(function () {
      //#toggleLights is the id of the button you click
      event.preventDefault();
      $("#changeClass").toggleClass("lightsOff");
      // #changeClass is the id of the div container you want to change class of
      $(this).text($(this).text() == 'Lights on' ? 'Lights off' : 'Lights on');
      // A simple text replacement, if it is Lights on change to Lights off, else change to Lights on
    });
This will add the class of the div you select to lightsOff (or remove lightsOff class), which means you can add some extra css for .whatever.lightsOff to change colors.
*scratches head*

I clicked the link. Is something supposed to happen when I click Lights off? Cause nothing happened.
 

MagnusB

Well-known member
#6
What browser are you using? On Chrome (latest) it works, have not tested in on any other browser.

This is what happens on my screen:
Capture.PNG
And when I click:
Capture2.PNG
 

MagnusB

Well-known member
#8
It should work on Firefox as well, I had a buddy of mine confirm it. Whether or not it is 64bit, shouldn't matter, they are using the same javascript engine. Do you know if they had made any changes except compiling it for 64bit?

EDIT:
Try this version, seems like preventDefault was causing some issues with IE9 as well: http://jsfiddle.net/ubAAt/4/
 

DRE

Well-known member
#11
That toggle was the easy part, the hard part is doing all the CSS stuff....
Thanks for trying! Was hoping it would just be an addon where you select the id of the styles you want switched.

If I have to do it this way I will but I have to wait a month or so. Busy right now.