Using javascript, how do I make CSS variables overwrite stick via onclick?

Question

Using advice from here, I'm able to change CSS variables, via onclick of a nav link. But, the changes are not sticking. They will momentarily switch to the new styles, but then flip back to the originals. This is even without a page refresh--a second after onmouseup.

Thank you.

CSS

body {

    --bg-color-home: rgba(221, 230, 237, .85);
    --bg-image-home: url(../images/bg_peak.jpg);

    --bg-color-about: rgba(223, 238, 243, 1);
    --bg-image-about: url(../images/bg_about.jpg);

    --bg-color: var(--bg-color-home);
    --bg-image: var(--bg-image-home);    
}

HTML

<a href="template.xhtml?page=about" data-value="about" class="nav-link">About</a>

JavaScript

//Change CSS styles, based on 'link' variable
$(document).on('click','a.nav-link',function(){

    //Set link variable from 'data-value' of 'nav-link' option
    var link = $("a:focus").attr('data-value');

    //Set the new styles based on 'nav-link' option
    $(document.body).css('--bg-color', 'var(--bg-color-' + link + ')');
    $(document.body).css('--bg-image', 'var(--bg-image-' +  link + ')');

});

Clicking on the link navigates to the new page, so none of the style changes you make on this page have any effect. — Barmar, Jul 24 '18 at 00:39
Those style don't look like normal CSS styles. What is `--bg-color-home`? — Barmar, Jul 24 '18 at 00:40
Are they not sticking because the page then goes to the about page? Your css looks a bit odd there are easier ways to give your nav buttons an active/current style. Can you use php? — joshmoto, Jul 24 '18 at 00:42
@Barmar, right, the changes are not sticking. I had just assumed setting new values via javascript would overwrite the original and stick until a new onclick changes them. This is what I'm attempting do, and am searching out. Any thoughts are welcome. Thank you. — JohnBoy, Jul 24 '18 at 02:18
When you follow a link the page is totally reloaded, and nothing from the previous page is retained except for cookies, localStorage, and sessionStorage. — Barmar, Jul 24 '18 at 15:33
Ok, I'll research those aspects, as well as the solution provided by dysfunc below. Thank you for the follow up. — JohnBoy, Jul 24 '18 at 22:02

dysfunc · Accepted Answer · 2018-07-24T02:37:28.713

2

You need to assign the global variables to the background-color and background-image CSS props so any future reassignment of global CSS variable value reflects properly.

CSS

body {
  --bg-color-home: rgba(221, 230, 237, .85);
  --bg-image-home: url(../images/bg_peak.jpg);

  --bg-color-about: rgba(223, 238, 243, 1);
  --bg-image-about: url(../images/bg_about.jpg);

  --bg-color: var(--bg-color-home);
  --bg-image: var(--bg-image-home);   

  background-color: var(--bg-color);
  background-image: var(--bg-image);
}

JS

// cache body ref
var body = $(document.body);

$('.nav-link').on('click', function(e){
  // this should be removed if you want the page to change
  e.preventDefault();
  // ref page
  var page = $(this).data('value');
  // update global vars
  body
    .attr('style', '--bg-color: var(--bg-color-' + page + ')')
    .attr('style', '--bg-image: var(--bg-image-' + page + ')');
});

DEMO

edited Jul 24 '18 at 02:37

answered Jul 24 '18 at 00:59

dysfunc

2,008
1
13
15

I had to edit the answer - there was a typo. Answer and demo have been updated. – dysfunc Jul 24 '18 at 01:03
Within the context of your demo, that works--thank you. Maybe I wasn't clear, but I'm wanting these CSS variables to be global; so, as --bg-color and --bg-image are updated via onclick, it will globally effect all instances of the variables, not just body. I can move them to root, if that is best practice for global variables, though I've read that body or root is ok. I thank you for your help and welcome any other thoughts. – JohnBoy Jul 24 '18 at 02:11
updated the demo with a couple options for controlling the global var – dysfunc Jul 24 '18 at 02:24
to confirm, I can get the variables to change via onclick, but not stick upon navigation/refresh. I welcome any thoughts or recommendations. P.S. I posted this prior to seeing your new comment. I'll take a look. Thanks. – JohnBoy Jul 24 '18 at 02:29
I understand what you're trying to do now. I've updated the demo and answer. You you need to ref the global vars in actual properties ` background-color: var(--bg-color);` so when you modify the value everything updates correctly. See changes in the CSS and review the demo – dysfunc Jul 24 '18 at 02:38
Ok, I see that it's working on your demo, but couldn't replicate it locally. I'll play with this and let you know. I appreciate your help. – JohnBoy Jul 24 '18 at 03:20
no problem. let me know if you need help figuring anything out – dysfunc Jul 24 '18 at 03:21
ok, I was finally able to get this work locally. Some of the issues were: 1) I'm using jquery includes for the nav (where the links are), so using the listener (deferred?) from my original code, remedied that; 2) the short-hand used for your setter was not setting both color and image--only either or, depending on which was the last listed and with the closing semi-colon. So, using my original setters remedied that. 3) Also, removing the preventDefault didn't allow for the overwrite to take--so, I've kept that for now. – JohnBoy Jul 25 '18 at 02:05
Now, I need to use session variables, or whatever is best practice, to keep styles accurate for the current page, even upon refresh, as Barmar suggested. I welcome any thoughts you may have, but won't hold you to anything, as you've already contributed plenty. You've been a great help-- thank you. – JohnBoy Jul 25 '18 at 02:07

Using javascript, how do I make CSS variables overwrite stick via onclick?

1 Answers1