JQuery variable received via dropdown not applying css

Question

I understand that it is possible to use a variable as the css property to be applied by jQuery (using .css('property',variable)) but for some reason the variable that is successfully got is not being put into the css.

Here is the JQuery code that I have:

    $('#color-scheme').change(function(){
      var colorScheme = $('#color-scheme').val();
      $('.wppw-title-font-color').css('color','');
      $('.wppw-background-color').css('background-color','');
      $('.wppw-title-font-color').css('color',colorScheme);
      $('.wppw-background-color').css('background-color',colorScheme);
      console.log(colorScheme);
    });

A demo of the project I am currently doing can be found here: http://codepen.io/zephyr/pen/ipsHu

I want the user to be able to change the styles of my fancybox via the menu that I have created. (I'd only want to be using JQuery to do this open to suggestions on changes that I can do on the menu as well to more easily get the desired result.)

Thanks!

Thanks for the replies, turns out I was a dunce and didn't remove the !important on the css properties, my bad!

these lines are not required $('.wppw-title-font-color').css('color',''); $('.wppw-background-color').css('background-color',''); — Kartikeya Khosla, Aug 28 '14 at 10:15

score 1 · Accepted Answer · edited May 23 '17 at 11:52

It is not working because of the !important rules attached to the things you are trying to change. Try this instead:

$('#color-scheme').change(function(){
  var colorScheme = $(this).val();
  $('.wppw-title-font-color').css('cssText', 'color: ' + colorScheme + ' !important;');
  $('.wppw-background-color').css('cssText', 'background-color: ' + colorScheme + ' !important;');
  console.log(colorScheme);
});

There are also other ways to do this, have a look at this question.

EDIT: To make this work for your font selection, you need to remove the semi-colons (;) from the end of the values in the select.

Thanks for the comment! I thought I had removed the importants prior to making this change, but it appears I hadn't! — Zephyr, Aug 28 '14 at 18:56

score 0 · Answer 2 · answered Aug 28 '14 at 10:54

The issue may be in your css you have given color as important.

.wppw-title-font-color:hover {color: #660000 !important;}

try remove !important; .wppw-title-font-color:hover {color: #660000}

OR in you jquery try like this.

$('#color-scheme').change(function(){
  var colorScheme = $('#color-scheme').val() +" !important";
  $('.wppw-title-font-color').css('color','');
  $('.wppw-background-color').css('background-color','');
  $('.wppw-title-font-color').css('color',colorScheme);
  $('.wppw-background-color').css('background-color',colorScheme);
  console.log(colorScheme);
});

Thanks for the comment! I thought I had removed the importants prior to making this change, but it appears I hadn't! — Zephyr, Aug 28 '14 at 18:57

JQuery variable received via dropdown not applying css

2 Answers2