Basically, I have two Plotly Dash dropdowns. I loaded custom CSS upon page load like this. Each child of my select keywords dropdown selected has a designated color in my custom CSS. Now, I have another dropdown that I want to color dependent on the colors of the first dropdown. For example:
11797656 asset has the Agedwip keyword. So, I would like it to be red like the keyword Agedwip element. This is hard to achieve because the CSS I have been using is from a static file which is loaded only upon page load. So even if I know the color 11797656 should be, I cannot actually alter the CSS and make it that color as far as I know, since it would not read the file and update the CSS in the browser.
I figured using custom javascript would make this possible, if I could directly alter the browser's CSS as opposed to just the static file that I loaded as a stylesheet. The way I am thinking about this now is...create a javascript function that will alter the color of a specific element, find a library with a javascript interpreter that has Python bindings, call the javascript function from within Python and pass it the necessary values which should update my browser's CSS.
Example:
javascript function( child_index_num, color )
alter asset css with child_index_num to give it color I want
Here is the code I currently use, to define the keyword static CSS upon page load. There are many more elements, this is just the first 3 for sake of understanding how I do this:
#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(1) {
background-color: rgb(228,26,28);
border-color: "grey";
color: #fff;
}
#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(2) {
background-color: rgb(55,126,184);
border-color: "grey";
color: #fff;
}
#keyword-selection .Select--multi .Select-control .Select-multi-value-wrapper .Select-value:nth-child(3) {
background-color: rgb(77,175,74);
border-color: "grey";
color: #fff;
}
Essentially just a color for each spot that could possibly exist. Can someone validate my idea for coloring select assets prior to me trying it, or provide a better alternative? Or is this just not possible to do/would it slow down my website drastically to implement? I am a novice with Javascript, so this solution was a bit out of my comfort zone. Feedback would be appreciated, thank you!
Related
I was going to change this scss variable from a root variable like this
:root {
--primary-custom : yellow;
--primary-hover-custom : blue;
}
$primary: var(--primary-custom);
$primary-hover: var(--primary-hover-custom);
but it returns this error:
Argument `$color` of `darken($color, $amount)` must be a color
What is the best approach to do this, I want to use this --primary-custom so I could change it dynamically with javascript like this:
const root = document.documentElement;
root.style.setProperty("--primary-custom", lightColor);
You can’t. Information doesn’t flow in that direction.
SASS is compiled to CSS (usually at build time) and then the resulting CSS is sent to the browser.
You can’t pass CSS variables back to SASS because it is too late and probably on the wrong computer.
——-
I’d probably approach this problem by using classes instead of CSS variables and having the colour schemes predefined in the SASS.
#each could help by looping over the colour schemes.
I can't understand where is darken() function in your example but here is example how manipulate color on a page:
You can use default color for your css variable.
$primary: yellow;
.text-primary {
color: var(--primary, $primary)
}
So now browser try to find css variable named --primary and if it doesn't exist the default color will be used.
Then if you want to change default --primary color — just create pseudo-class :root with that variable and append it to any page with javascript.
:root {
--primary: green;
}
I have a page that I've designed which uses two commercial widgets both of which require the jquery-ui.css. When both widgets are on the page, one shows the .ui-slider .ui-slider-range correctly while the other one is absent. One widget uses the jquery-ui without modification while the other widget makes specific changes to the styling of .ui-slider .ui-slider-range. I assume I need to make one a separate class/id/element. How do I do that when it is based on a specific library/template? I tried using !important but that just created other issues.
You are on the right track, you can use the console to try your styles.
What im guessing is that you made changes in a class used by other widgets like .ui-widget, try to not mess with classes like .left, .container, or anything that looks like a generic name.
What you can do to specify the element you want to change is add a container with a different class, and then use it to access the widget classes:
<div class="myFirstContainer">
// Here comes widget 1
</div>
<div class="mySecondContainer">
// Here comes widget 2
</div>
Styles:
.myFirstContainer .ui-slider{
background: red !important;
}
.mySecondContainer .ui-slider{
background: blue !important;
}
I have a button that can have a focus css class associated with it and I instantiate this at runtime within Javascript.
This is all provided by a bespoke Javascript framework so can not be changed.
Normally I would provided 2 additional CSS class for this button,
e.g.
btn { background-image: url(/btn.png);}
btn.focus { background-image: url(/btn-focus.png);}
This will give me 2 different images based on whether the button is 'focused' or not.
The problem I have now is that the image urls are dynamically loaded at runtime, and there is no way of specifying them with a static CSS file.
I'm thinking one possible solution is to 'somehow' generate a new style element with the btn and btn.focus classes in it (with the dynamic URLs) and either append it to the head or embedded it in the markup prior to instantation of the Button itself. This solutions doesn't seem ideal.
Can anyone suggest anything else?
Thanks in advance.
If your case is specifically about images that represent different states of a single object (e.g. focused or non-focused state of a button) then it's a good idea to use sprites.
That is creating a single image with all button states and loading it (dynamically if you want).
Then you can write a universal rule in your CSS:
btn {background-position: 0 0;}
btn.focus {background-position: 0 -20px;} /* 20px is the height of your button*/
Are you saying this doesn't work because their css styles "inline" ones are overriding your ones? If so then do this instead
btn { background-image: url(/btn.png) !important;}
btn.focus { background-image: url(/btn-focus.png) !important;}
My target is to have a list of file names, and near every item a picture of that file extension will appear next to it.
there is a nice way to do that:
p[icon^=".gif"]
{
background: url(images/gif.png) no-repeat center left)
}
this checks if the icon attribute of the 'p' element ends with .gif. if it does,
it applies the given style to that element.
but instead of define every file type, i want it to be generic since i have a folder with icons in this format: {file-extansion}.png
in case there is no matching file with the given extansion or there is no file extansion, there will be a default path of "default.png".
There is an option to do that or part of that? if no, what way you advise me doing that?
By the way I am not a css/javascript expert so please given enough details so I can understand your answers.
You can use jQuery library for this:
HTML
<p data-ext=".gif">Text</p>
<p data-ext=".png">Text</p>
<p data-ext=".jpg">Text</p>
CSS
p {
background-repeat: no-repeat;
background-position: 0 50%;
}
JavaScript
$("p[data-ext]").each(function() {
var ext = $(this).data("ext").substring(1);
$(this).css("background-image", "url(images/" + ext + ".png)");
});
It works so that you add data-ext attribute to each p (or whatever) tag. jQuery selects all p tags which have data-ext attribute, then gets attribute value, and changes background-image of each element.
DEMO: http://jsfiddle.net/AEsx4/
Using pure CSS, you can't dynamically reference attributes in the URL, but you can make them content. Here are some lame workarounds using pure CSS and finally a wishful thinking approach :(
Use a class
<div class="jpg">
</div>
/* css */
.jpg {
background: url("/img/jpg.jpg");
}
This works great, but you need one class per extension.
Use an attribute selector
<div data-ext="jpg"></div>
div[data-ext=jpg] {
background: url(/img/jpg.jpg);
}
For more on this approach see:
http://css-tricks.com/attribute-selectors/
I used data-ext, because in HTML you're not really supposed to add random tags, so the HTML creators gave us data-* which is valid HTML5 and we can do whatever want with it. Either way, you need to create a new CSS selector for every extension. Not good.
Closest you can get with pure css
<div data-ext="jpg"></div>
div:after {
content: attr(data-ext);
}
You will see the name of the extension next to the div. This almost works, but it's not quite good enough.
More about CSS Functions: http://www.suburban-glory.com/blog?page=130
What you actually want
<div data-ext="jpg"></div>
div:after {
content: url("/img/jpg." attr(data-ext));
}
Sadly this doesn't appear to work at the moment, but boy would it be awesome.
I'm trying to find a way to change stylesheets based on what season it is with jquery because at this point it is unknown if I can use php or ruby at all on this site. Thanks for your responses!
The simplest is to scope your CSS styles and add a class at a high level. I usually do this at the body element. The CSS looks like:
body.summer ul { background-color: green; }
body.fall ul { background-color: orange; }
body.winter ul { background-color: white; }
body.spring ul { background-color: pink; }
Then, use JS to set the body class:
...</body>
<script ...>
var season = (new Date()).getMonth...;
$('body').addClass(season);
</script>
</html>
As you can see, I placed this immediately after closing the body tag. I think this is the first place you can put it and get it to work, but you'll have to check. The reason to put it here is to prevent the flash of unstyled content-- if you have lots going on on the page, you'll want to execute this Javascript before the on ready callback. That being said, I actually haven't had much problem just putting most of my code in the ready callback.
You can also load different stylesheets easily-- probably at the same place. Just create a style node and insert it into the head as the last node. You'd do this if you have major differences between your styles. Pretty tricky to maintain.
$("head").append("<style type=\"text/css\" src=\"" + season + ".css\"">");
I would suggest you narrow down the items that you want to change on the page, since the CSS file would already be loaded and jQuery would just be applying the css after the static css is loaded. You could leave these specific style declarations out of the css or keep them as default. For example, if the background image changes, you could set it to white in the default css declaration. This way, on load, it looks normal and you're only using JavaScript to load necessary items.
You could then use the JavaScript month function to get the current month
var month = new Date();
month = month.getMonth();
Then, you could use jQuery to apply those styles to the head with the jQuery ready function. You could have a simple switch of if/else statement to select one of four statements depending on the month number. For example, if you want to change the background
$("head").append("<style type=\"text/css\">body {background-color: #FFF !important;}</style>");
Just a quick example, but it would make it more efficient than loading a whole sheet I think.
put all your declarations in one css at the form of
.someStyle{ color:blue;}
.summer .someStyle{color:yellow;}
.winter .someStyle{color:purple;}
...
all classes under .summer will override the default style for summer
then on the server/client when the page is ready - add this class to the body
the only problem with doing it at the client is that the default style will render first and then switch to the new one (just pick the season most common to your site's users - if it was Israel i would choose summer ;-)