1. 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

Discussion in 'Resource and Add-on Requests' started by DRE, Nov 29, 2012.

  1. DRE

    DRE Well-Known Member

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

     
    0xym0r0n likes this.
  2. MagnusB

    MagnusB Well-Known Member

    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.
     
  3. Digital Doctor

    Digital Doctor Well-Known Member

    Do you have to be logged in ?

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

    MagnusB Well-Known Member

    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.
     
  5. DRE

    DRE Well-Known Member

    *scratches head*

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

    MagnusB Well-Known Member

    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
     
  7. DRE

    DRE Well-Known Member

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

    I confirmed that it works in Chrome though
     
  8. MagnusB

    MagnusB Well-Known Member

    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/
     
  9. DRE

    DRE Well-Known Member

    This works!
     
  10. MagnusB

    MagnusB Well-Known Member

    That toggle was the easy part, the hard part is doing all the CSS stuff....
     
    8thos likes this.
  11. DRE

    DRE Well-Known Member

    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.
     
  12. DRE

    DRE Well-Known Member

    Still want!
     

Share This Page