Forums

Give help. Get help.

  • # October 6, 2017 at 12:32 am

    Thanx, Edo.,)

    # October 6, 2017 at 8:37 am

    @funkaholik

    I guess I don’t understand exactly what the issue is here, when you write in your demo:

    intial font color is switchable but text-fill-color of links isn’t, and I want it to be same color as background and I don’t care about border, and if you’ll add it in css then font-color also changes – it’s not good

    Specially that last part about the font-color changing … for if you do:

    .dark .two {
      -webkit-text-fill-color: #333;
    }
    

    Then just the text-fill-color changes, no? So what is really the issue?

    https://codepen.io/atelierbram/pen/MEQbPZ

    # October 6, 2017 at 9:21 am

    yep, you did it with extra css but
    say i have 1000 of elements&classes and i don’t want to write all that css for all of them
    soooo i think there should a js magic button for that specific style changes .. at least i hope

    # October 6, 2017 at 11:00 am
    1. on web-development: HTML, CSS and javaScript: there is no magic involved
    2. if being lazy, one has to get smart with it, like writing functions and so on ;)

    Soooo maybe try to write a function in javascript that’s swaps every instance of “white” to “black” on button click or something, but I’m not going to go there. Personally I would much rather have the fined grained control with (declarative property-value pairs in) CSS, that is hard to beat IMO.

    # October 6, 2017 at 7:10 pm

    I’ve been trying to put something together but it makes no sense. How could you select individual elements by their background colour when that it is defined by the parent…

    codepen.io/anon/pen/QqQQXB?editors=1010

    # October 7, 2017 at 1:25 am

    i was thinkin’ maybe it’s possible to select not the element properties but just specific color in genereal
    regardless of anything else, you know .. find a color in css and change it by js function or so.
    if not don’t worry .. i’ll stick with last workin’ way.

    # October 7, 2017 at 2:20 am

    Changing the actual CSS file itself is possible but slow and not recommended…

    # October 7, 2017 at 3:19 am

    One thing that could work is using data-attributes on the elements (also very declarative), then move the styling to the javaScript. I could see how in some cases one would prefer it that way, but for this use-case I’m not so sure.

    $(function() {
      $('.theme-switcher').on("click", function(event) {
        if ($('#theme').hasClass('light')) {
          $('#theme').removeClass('light');
          $('#theme').addClass('dark');
          $('#theme').css({
            "color": $('#theme').data("styleswitch-color"),
            "background-color":  $('#theme').data("styleswitch-bgcolor")
          });
          $('.linkline').css({
            "-webkit-text-fill-color": $('.linkline').data("styleswitch-fillcolor") 
          });
        } else {
          $('#theme').addClass('light');
          $('#theme').removeClass('dark');
           $('#theme').css({
            "color": "#333",
            "background-color": "#fff"
          });
          $('.linkline').css({
            "-webkit-text-fill-color": "#fff"
          });
        }
        event.preventDefault();
      });
    });
    

    # October 11, 2017 at 7:21 am

    Actually that idea with selecting classes is the best solution for me.
    The only thing that’s left is how to keep selected theme (dark/bright) in browser memory.
    Because while you’re navigating through wesite everytime you have to reselect the theme
    it’s very unhandy .. is there any ideas?

    # October 11, 2017 at 1:20 pm

    Sounds like you’d be needing localStorage…

    # October 12, 2017 at 2:22 am

    If you post a relevant demo, I can put a few lines together.

    # October 12, 2017 at 5:55 am

    Superb, i’m on it

    # October 15, 2017 at 1:23 am

    i was how i can make a demo on codepen with links?
    link two pens together or something?

    # October 15, 2017 at 6:59 am

    Why not use a regular direct link? Using localStorage should still work that way. Not sure what you’d mean otherwise myself.

    # October 15, 2017 at 8:37 am

    Not sure if i understood correctly
    but working example is here

Viewing 15 posts - 16 through 30 (of 36 total)

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag