Add-on On and Off Style Switch

[DRE]

You can make the theme go light or dark by hitting a light switch. From AHH. community.allhiphop.com/

To view this content we will need your consent to set third party cookies.
For more detailed information, see our cookies page.

Accept third party cookies

 

[MagnusB]

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:

    $("#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.

 

[Digital Doctor]

You can make the theme go light or dark by hitting a light switch. From AHH.

Do you have to be logged in ?

Figured it out.
My bad.
I was clicking on the big red light.
/facepalm.

 

[MagnusB]

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]

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:

    $("#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]

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:

And when I click:

 

[DRE]

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:
View attachment 37474
And when I click:
View attachment 37475

I'm using Waterfox 13.0 - Basically a 64-bit version of Firefox.

I confirmed that it works in Chrome though

 

[MagnusB]

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]

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/

This works!

 

[MagnusB]

That toggle was the easy part, the hard part is doing all the CSS stuff....

 

[DRE]

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.

 

[DRE]

Still want!