I'm working with Google Maps API v3 and MarkerClustererPlus library. I would prefer not using the raster icons but rendering the bubbles using styles and ClusterClass properties of MarkerClusterer object. This is my style object in JS code:
var myClusterStyle = [{
url: './icons/placeholder.png', //1x1 transparent png
height: 40,
width: 40,
textColor: '#636363',
textSize: 12
}];
And the CSS class:
.cluster {
background-color: #EAE6DE;
border-radius: 50%;
border: 3px solid #ACCCFD;
position: absolute;
}
So, these are the grey bubbles with blue border.
My question is:
I would like to change some properties of an individual bubble on mouseover, let's say change the color or add the shadow. Could I change the CSS class of the bubble? I've spent a lot of time trying to figure this out and now I'm stuck. I have this event:
google.maps.event.addListener(mc,'mouseover',function(c){
c.clusterIcon_.setValues({className_:'clusterHover'});
});
and it really changes the CSS class option of the bubble but the display doesn't change... following mc.repaint(), c.clusterIcon_.draw() don't help.
I have seen this thread:
Marker Clusterer Plus change icon on hover
but this is for changing the icon, not the style properties. Is this really possible without modifying the library? Any help would be appreciated.
You may set the class of the div directly:
c.clusterIcon_.div_.className='clusterHover'
But it would be much easier when you use the :hover-pseudo-class
.cluster:hover {
/* some styles */
}
Related
I'm using leaflet maps in conjunction with Svelte and have the problem that setting the className property of an Icon (L.Icon) that is used for a Marker (L.marker) doesn't have any effect. My code works fine without Svelte, so I assume that the source of the problem is the dynamic generation of a css class. My (abbreviated) code looks like this:
var myIcon = L.icon({
iconUrl: "./svg/My-Icon.svg",
iconSize: [48, 48],
iconAnchor: [24, 32],
className: "svgShadow",
});
...
marker = L.marker(
geoJsonPoint.geometry.coordinates.reverse(),
{
icon: myIcon ,
name: "Here is some text"
}).addTo(map);
<!-- Styles go at the bottom of the file with Svelte -->
<style type="text/css">
.svgShadow {
filter: drop-shadow(5px 5px 5px rgb(0 0 0 / 0.5));
}
</style>
Inspecting the element in the browser even shows that the class name is set for the img element contained in the marker, but it doesn't have any effect. Again, this works without Svelte in a static HTML page. With Svelte I can only find a dynamically generated css class containing the style definition for .svgShadow that isn't applied, but how can I make this work with leaflet and Svelte? Unfortunately I also can't set styles directly with the leaflet icon as only className is exposed.
Styles are scoped by default. If the elements are not created directly as part of the markup, they will not have the necessary classes that are added to the styles.
You can e.g. use :global(.svgShadow) { ... to circumvent this.
(Note that this of course will apply the the styles everywhere, even outside the current component.)
When using dcc.Loading() in a Dash App one can set the type i.e. 'cube', or 'dots' as well as the color - documentation
dcc.Loading(
children=[html.Div(id='test-div')],
type='dot',
color='hotpink'
)
What I would like to know is how to set these in the CSS rather than with inline styling to avoid having to change every loading component in all apps if I want to change the spinner or colour scheme.
So far, with help from this post and this post, I have been able to access the dash-spinner class in the CSS. But whilst I can change the background-color and size I can't work out how to fix the type or the foreground colour.
.dash-spinner {
background-color: black;
color: hotpink;
type: cube;
}
.dash-spinner * {
display: none !important;
}
This CSS seems to act on the background colour but not the spinner or the colour of the spinner.
Thank you
I got react-toastify installed, and my toasts are working, but I want to add them some custom styling depending on a theme, and none of the solutions I saw are working in my case.
I don't want to overcomplicate it, I just want to change background color, maybe borders, font color, etc.
I tried class overriding which documentation is saying about - it's not working.
.Toastify__toast-theme--colored.Toastify__toast--error {
color: white;
background-color: red;
}
I tried my own className and pass it to certein toast - it's not working.
toast.error('here some error', {
className: 'toast-error'
});
.toast-error {
color: white;
background-color: red;
}
And these themed classes are not even added to the toast.success() or toast.error()
I tried to override values in the core css file that im importing, and it's not working.
And if I set background-color: red to the actual class that is added, then I get red background on toast.success() as well.
Here is documentation.
How to deal with this?
using classnames should be the solution to your problem
className={classnames("Toastify__toast-theme--colored", {
"toast-error": // here the condition by which toast-error class should pop up
})}
In my page,I use tooltip which class name is .tooltipcell to the grid cell,and also use tooltip which class name is .tooltipbtn to the button.Now I want to change the background color of the tooltip in grid,but I do not want to affect the background color of the button tooltip.How to do that?I use to codes below,it affects the two tooltip.
method1:both effect
.k-widget.k-tooltip{
background-color:red; //set the desired color
}
method2:both effect
div .k-widget.k-tooltip{
background-color:red; //set the desired color
}
JS
show: function (e) {
e.sender.popup.element.addClass('red-tooltip');
},
and CSS
.red-tooltip {
background-color: #f00 !important;
}
You can do this:
.tooltipcell{background-color:green;}
.tooltipbtn{background-color:green;}
Just incase your div .k-widget.k-tooltip might overwrite the style you may have to target it deeper like this:
div .k-widget.tooltipcell{background-color:green;}
div .k-widget.tooltipbtn{background-color:green;}
The is an amendment to MarioD Answer.
I didn't test it but given that it works, a better practice would be to concatenate these classes. It saves size in the css and improves loading time. Do this:
div .k-widget.tooltipcell, div .k-widget.tooltipbtn {
background-color:green;
}
I had the same problem where I was using kendo tooltip. I wanted to change the CSS of the tooltips only in one place leaving the rest of the tooltips intact.
Using css the normal way to do this would be to use target .widget and .k-tooltip CSS classes.
Although this would change all the tooltips within a page.
So, since I wanted to change only one tooltip (same problem as this post) I had to do a JS approach.
So, I had to use the show function of kendo's tooltip.
Example:
$('.target')..kendoTooltip({
position: 'bottom',
showAfter: 1000,
content: 'test',
function(e) {
e.sender.popup.element.addClass('customClass');
}
}).data('kendoTooltip');
I will try to post here a jsfiddle in few moments.
André
I am trying to change the body background color when the user changes the theme of the page using the jQuery UI Themeselector.
I have tried this
function updateBodyBackground() {
$("body").css('background-color', $('.ui-widget-header:first").css("background-color") + ' !important;');
}
Then I call it on document ready (to set initial theme background) and I set it to the onClose event for the ThemeSelector like this;
$function() {
updateBodyBackground();
$('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });
}
Doesn't do anything in Firefox, seems to be behind one on change in Chrome and the selector doesn't seem to work at all in IE8.
Any suggestions on how to change the background to better match the selected jQuery UI Theme?
Thanks!
A better way is not to use a timer, just use one of the jQueryUI CSS classes with the background colour your looking for, in my case I like the background colour chosen by: ui-state-hover :
<div id= "main_background" class= "ui-state-hover">
// Your Content
</div>
Since the id over-rides all class settings, use your id to remove or change any undesirable settings that ui-state-hover uses, such as the background-image :
#main_background {
position: relative;
top: 0px;
left: 0px;
width: 800px;
height: 742px;
margin: 0px;
border: 0px;
padding: 5px;
background-image:none; // kills the background url (image) that ui-state-hover sets
}
Buggy fix using timeout...
find function updateCSS() inside themeswitchertool.js
After
$("head").append(cssLink);
Add the below line increase timeout if it still doesn't work...
Insert
setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 2000);
You had an error in your js (used a " instead of ' ):
$('.ui-widget-header:first")
Should be:
$('.ui-widget-header:first')
But I found that this works. No need to put into Themeswitchertool.js, dropped the setTimeout to 500 so it changes more quickly.
function updateBodyBackground() {setTimeout("$('body').css('background-color', $('.ui-widget-header:first').css('background-color'))", 500);
}
$('#switcher').themeswitcher({ expires: 365, path: '/', loadTheme: "sunny", onClose: updateBodyBackground });