For standard browsers you can use something like this to change the coloring of selected text:
div.txtArea::selection {
background: transparent;
}
div.txtArea::-moz-selection {
background: transparent;
}
div.txtArea::-webkit-selection {
background: transparent;
}
But I need to do this with JavaScript instead.
My users can select text and then change the color. While they are selecting another color it updates the color constantly. Since the text is selected they can't see what the color looks like. I need to change the selection style of my targeted element to be transparent only during mouseover of the color changer.
I have tried a few things including:
$('div.txtArea').css({
'selection': 'transparent',
'-moz-selection': 'transparent',
'-webkit-selection': 'transparent'
});
Is there a way to do this with javascript?
There's no DOM interface for manipulating pseudo-classes. The only thing you can do is add the rules to a stylesheet. For instance:
// Get the first stylesheet
var ss = document.styleSheets[0]
// Use insertRule() for standards, addRule() for IE
if ("insertRule" in ss) {
ss.insertRule('div.txtArea::-moz-selection { background: transparent; }', 0);
ss.insertRule('div.txtArea::selection { background: transparent; }', 0);
ss.insertRule('div.txtArea::-webkit-selection { background: transparent; }', 0);
}
You can access and change rules using stylesheet.cssRules[index].style, stylesheet.rules[index].style for IE, which is where it gets a little more complicated.
I didn't include an IE6-8 example using addRule() because those versions of IE don't support ::selection.
Related
In https://using-remark.gatsbyjs.org/hello-world-kitchen-sink/ (see source code https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark), the links don't have an underline, while in my blog https://yiksanchan.com (see source code https://github.com/YikSanChan/yiksanchan.com), all links come with an underline.
Why? And how can I get rid of the underlines? I have found a related StackOverflow question Links have an additional underline in gatsby but what I try to understand is, how does the using-remark example solve the underline problem without overriding the box-shadow props.
Following Ferran's solution, in my typography.js, I changed
Wordpress2016.overrideThemeStyles = () => {
return {
"a.gatsby-resp-image-link": {
boxShadow: `none`,
},
}
}
into
Wordpress2016.overrideThemeStyles = () => {
return {
"a.gatsby-resp-image-link": {
boxShadow: `none`,
},
"a": {
boxShadow: `none`,
},
}
}
to remove the underlink.
Your typography.js file is adding a box-shadow to all <a> elements:
a {
box-shadow: 0 1px 0 0 currentColor;
color: #007acc;
text-decoration: none;
}
If you want to get rid of that styling, just remove the rule of box-shadow property (if it's not a module). If it's a package, just override the styling with another style file (SCSS, CSS, or JS).
Yeah for some reason the default Link styling is a background-image (no idea) and box-shadow (also no idea), set them both to none and you should be right as rain.
the (newest) FullCalendar docu outlines, that "You can use any of the CSS color formats such #f00, #ff0000, rgb(255,0,0), or red." as event background color (https://fullcalendar.io/docs/eventBackgroundColor).
Now I need to split the colors of the event into e.g. green and red, making green for the first 80% and red for the remaining 20% of the event duration. I found a linear-gradient solution, which works fine thanks to another SO topics and that would be a nice solution.
However while "red" and "green" as single values work fine for the "backgroundColor" attribute, the linear-gradient does not change the event color like in this event below:
{
title: 'Long Event',
start: '2020-09-07',
end: '2020-09-10',
backgroundColor : 'linear-gradient(90deg, pink 80%, cyan 0%)'
}
At https://codepen.io/fendrikat/pen/mdPqjJq you have an example - the second event, "Long event" should be with two colors.
To use a class would not make sense, as the actual percentage and colors will differ for every event (one may be 30% yellow and 70% green, another 20% green and 80% red, another 27% and 73%, ...and so on), so I need to control this in the javascript code.
Anyone any thoughts how the linear-gradient can work for a FullCalendar event in backgroundColor ?
Thanks a lot,
Frank
The backgroundColor cannot accept a gradient. This is equivalent to the background-color property in CSS. Background color values can only be name, rgb, hsl, hex or any other standardized color value format. If you want to set a gradient for the background, you will need to apply it to the background property of the element. This is not a supported property in FullCalandar. You will need to set the style property after the event is rendered to the calandar.
You can use eventDidMount in version 5 of FullCalendar. This is a replacement for eventRender that was removed prior to version 5's release. This was the suggested solution in the following issue on Gitlab.
/**
* FullCalandar v5+
*
* Where `background` is a non-standard event property,
* supplied by the event.
*/
eventDidMount: function (info) {
if (info.event.extendedProps.background) {
info.el.style.background = info.event.extendedProps.background;
}
}
Demo
document.addEventListener("DOMContentLoaded", function () {
const calendarEl = document.getElementById("calendar");
const calendar = new FullCalendar.Calendar(calendarEl, {
initialView: "dayGridMonth",
initialDate: "2020-09-12",
events: [
{
title: "All Day Event",
start: "2020-09-01"
}, {
title: "Long Event",
start: "2020-09-07",
end: "2020-09-10",
// Non-standard property below
background: "linear-gradient(90deg, pink 80%, cyan 0%)"
}
],
eventDidMount: function (info) {
if (info.event.extendedProps.background) {
info.el.style.background = info.event.extendedProps.background;
}
}
});
calendar.render();
});
html, body {
margin: 0;
padding: 0;
font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
font-size: 14px;
}
#calendar {
max-width: 1100px;
margin: 40px auto;
}
<link href="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.1/main.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.3.1/main.min.js"></script>
<div id='calendar'></div>
I wonder how to change the font color of drillUpButton text. I tried css to extract the element like: g.highcharts-button highcharts-drillup-button highcharts-button-normal text{color: blue;} However it doesn't work.
Button Picture
The drillUpButton API only provide how to change the theme of the button itself but has nothing to do with the text.
drillUpButton: {
relativeTo: 'spacingBox',
position: {
y: 10,
x: 0
},
theme: {
color: "#5ab7f5",
fill: 'white',
'stroke-width': 2,
stroke: '#5ab7f5',
r: 5,
states: {
hover: {
color: 'white',
fill: '#5ab7f5'
},
select: {
fill: '#5ab7f5'
}
}
}
},
Here is the link for reference
If someone wants to avoid using CSS selectors, you can add CSS style to text button using style property.
theme: {
style: { color: "red" },
...
}
Use this selector:
.highcharts-button-box+text {
fill: red !important;
}
Example:
http://jsfiddle.net/vwdfceLz/
You didn't quite go far enough to tspan and you're using color instead of fill. You were also missing a couple "." when selecting the class.
Creating this rule seems to work
g.highcharts-button.highcharts-drillup-button text tspan{
fill: blue;
}
If you don't want to type all of that out .highcharts-drillup-button text tspan should work as well.
DEMO
You can change the color of the text by using the highchart drillup button css styling class to apply the color to the text. The reason why simple color:red property on it wont work because it is a svg created on the run and svg also sets the fill property for the text as well which overwrites the color. On top of that you need to force your custom class colors by using the !important keyword for each property set. So just add the following class in your custom css and you drillup button text will change.
.highcharts-drillup-button text{
color: red !important;
fill: red !important;
}
Hope this helps.
In the image below, I want Exp. Year (the disabled option) to be grey on page load like a placeholder, and when an option is clicked (2016), I want it to turn to black. It is possible to do this without js?
JSFiddle
What is currently does:
What I want it to do: (Exp. Month is grey on page load, then 2016 is black on select)
.select-box {
border: 1px solid $ghBlack;
height: 36px;
background: transparent;
margin: 10px 0 14px 0;
color: #000;
}
option:disabled {
color: #a9a9a9;
}
option:not(:checked) {
color: #a9a9a9;
}
One way to do this is as follows:
// binding an anonymous function as the change-event handler:
$('select').change(function () {
// adjusting the 'color' property of the select element:
$(this).css('color', function () {
// caching the 'this' variable for efficiency (give repeated use):
var self = this,
// finding the options of the select element:
opts = self.options;
// getting the currently-selected option, and then checking if
// it's the default-selected option (returns a Boolean); if it is
// we set the colour to '#aaa', if not we set the colour to '#000':
return opts[self.selectedIndex].defaultSelected ? '#aaa' : '#000';
});
// triggering the change-event so that this runs on page-load:
}).change();
JS Fiddle demo.
Reference:
change().
css().
When you explained more what you try to do, then the answer is no, you can't do it without javascript, because the color of the main option is just one....its defined by this css selector
.select-box {
color: grey;
}
You can only change colors of the options (when the select is opened) - fiddle: http://jsfiddle.net/san6q621/
I want to change a less variable on client side.
Say I have a less file
#color1: #123456;
#color2: #color1 + #111111;
.title { color: #color1; }
.text { color: #color2; }
I want that user yo pick a color and change the value of #color1 and recompile css without reloading the page.
Basically I'm looking for a js function, something like this
less_again({color1: '#ff0000'})
Marvin,
I wrote a function that does exactly what you're looking for, last night.
I have created a fork on Github;
https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc
Take a look at it. Since this is a recent addition, I'd like to hear your comments on the addition. This solution fits my needs perfectly and I think it will do the same for you.
Here is a basic sample;
Sample LESS:
#bgColor: black;
#textColor: yellow;
body {background: #bgColor; color: #textColor;}
From JS:
less.modifyVars({
'#bgColor': 'blue',
'#textColor': 'red'
});
The creator of less.js added some features that should allow you to do something like this. Read the comments and the answers here: Load less.js rules dynamically
This less:
#color1: #123456;
#color2: #color1 + #111111;
.title { color: #color1; }
.text { color: #color2; }
compiles to this CSS and this is all the browser knows about:
.title { color: #123456; }
.text { color: #234567; }
So, now you're effectively saying you want to change dynamically to this:
.title { color: #ff0000; }
You can do that by reaching into the existing stylesheet with JS and changing the rule for .title. Or, you can define an alternate rule in your original CSS:
.alternate.title { color: #ff0000; }
And, find all the objects with .title and add .alternate to them. In jQuery, this would be as simple as:
$(".title").addClass(".alternate");
In plain JS, you'd need to use a shim to provide getElementsByClassName in a cross browser fashion and then use:
var list = document.getElementsByClassName("title");
for (var i = 0, len = list.length; i < len; i++) {
list[i].className += " alternate";
}