Just started using Bonsai JS and can't find anything in the docs so I thought I ask here. How can I set an elements class attribute so I can define some styles in CSS? Most of the styles are supported directly in Bonsai but I would also need to change the cursor type on hover over an element.
BonsaiJS doesn't let you set a "class" attribute. Instead you add a listener when the curser hovers over a DisplayObject.
new Rect(150, 150, 150, 150).attr({
fillColor: "red"
}).addTo(stage).on("mouseover mouseout", function(e) {
this.attr({
cursor: e.type == "mouseover" ? "pointer" : "inherit"
});
});
Open in Orbit: http://orbit.bonsaijs.org/#new%20Rect(150%2C%20150%2C%20150%2C%20150).attr(%7B%0A%20%20fillColor%3A%20%22red%22%0A%7D).addTo(stage).on(%22mouseover%20mouseout%22%2C%20function(e)%20%7B%0A%20%20this.attr(%7B%0A%20%20%20%20cursor%3A%20e.type%20%3D%3D%20%22mouseover%22%20%3F%20%22pointer%22%20%3A%20%22inherit%22%0A%20%20%7D)%3B%0A%7D)%3B%0A%20
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.)
My addon was originally built in XUL and I am trying to redesign it using the addons SDK, and am having troubles getting icons to change/highlight when I hover the mouse over them.
I know how to apply a css stylesheet to an Addon SDK toolbar and its elements (and how to fetch the right #id to use). This allows me to change the background-color on a button, but I can't seem to make :hover work to change the button image.
It works if I assign a javascript listener for a mouseover event to the button, but if I have lots of buttons or menu items then this is way overkill compared to css.
One problem is that the button image is set on the sdk button element and it is an attribute of the button.
Now, I have tried using a transparent image for the button element's attribute and then using css to supply the image. Using XUL I would apply the image for the button or menu item with list-style-image.
So, my question is: How do I get :hover working in my css for an SDK toolbar button?
Here is the toolbarbutton-icon XUL binding:
<binding id="toolbarbutton-image"
extends="chrome://global/content/bindings/toolbarbutton.xml#toolbarbutton">
<content>
<xul:image class="toolbarbutton-icon" xbl:inherits="src=image"/>
</content>
</binding>
xbl:inherits="src=image" means that the image inherits its src attribute from the image attribute of the <toolbarbutton> thus list-style-image CSS is ignored.
The image property is set when you create the button with SDK APIs. While it is true that you cannot create an SDK button without an image, you can cheat the system either by removing the image attribute afterwards or by using a transparent image and then styling it with background-image just like in the normal web:
const { browserWindows: windows } = require("sdk/windows");
const { viewFor } = require("sdk/view/core");
const { attachTo } = require("sdk/content/mod");
const { Style } = require("sdk/stylesheet/style");
const { ActionButton } = require("sdk/ui/button/action");
var myButton = ActionButton({
id: "my-button",
label: "My Button",
icon: { "24": "./transparent24.png" },
});
let self = require("sdk/self");
let path = self.data.url(); // alternatively use chrome.manifest to register resource or chrome path
let widgetId = "action-button--toolkitrequire-my-button"; // get this from the Browser Toolbox
let css = `
#${widgetId} .toolbarbutton-icon {
background-image: url(${path}/icon24.png);
max-width: 24px;
}
#${widgetId}:hover .toolbarbutton-icon {
background-image: url(${path}/icon24-hover.png);
}`;
let style = Style({ source: css }); // or { uri: `${path}/style.css` }
for (let w of windows)
attachTo(style, viewFor(w));
Keep in mind that other styling may apply to the image so you better use Browser Toolbox to inspect the DOM. I am overriding max-width in this example.
I have the following problem. I have a element and want to blur just a part of it. An example is given below, where the main background is a element
In short, I want to blur the content underneath the <div> that has the blur filter.
I have checked and found how to do this for images (http://jsfiddle.net/ezaLot4d/), using the CSS :before selector. However, it is not valuable in my case, as my element is a video, so that the bluring should happen continuosly and not only when the page is rendered.
Any ideas?
Thanks
Check out BlurJS, a JavaScript Library that blurs whatever is underneath something.
http://blurjs.com/
You can use it like so:
$('.target').blurjs(options);
I've included the default options here:
{
source: 'body', //Background to blur
radius: 5, //Blur Radius
overlay: '', //Overlay Color, follow CSS3's rgba() syntax
offset: { //Pixel offset of background-position
x: 0,
y: 0
},
optClass: '', //Class to add to all affected elements
cache: false, //If set to true, blurred image will be cached and used in the future. If image is in cache already, it will be used.
cacheKeyPrefix: 'blurjs-', //Prefix to the keyname in the localStorage object
draggable: false //Only used if jQuery UI is present. Will change background-position to fixed
}
You can now do this with backdrop-filter:
backdrop-filter: blur(10px);
src: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter
Is there an equivalent for the jQuery $.css function in dart?
I can read the (computed) style of an element, but as far as I can see there is no way of setting a style.
Using Element.style isnt enough ?
myDiv.style.backgroundColor = 'red';
myDiv.style.setProperty('-webkit-cssexperimental','value');
It's also working with a multi elements selector:
querySelectorAll('div').style.backgroundColor = 'green'; //color every div
jQuery UI themes are nice they apply to the entire document, however I have some cases where the style of the dialog such as the title bar colour must be changed.
In my jQuery UI css, the titlebar is coded:
.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; }
Here's my javascript:
var $AlertDialog = $('<div"></div>')
.dialog({
autoOpen: false,
title: 'Alert Message',
buttons: {Ok: function() {$( this ).dialog( "close" );}}
});
function Alerter(cTxt)
{
$AlertDialog.html(cTxt);
$AlertDialog.css('ui-dialog-titlebar','color: red');
$AlertDialog.dialog('open');
};
Alerter() is then called as a substitute for alert().
Accessing and altering the color property of 'ui-dialog-titlebar' has no effect.
Lots of reading preceded this question. Seems others have had similar issues, but not specific to jQuery UI.
How can this be done?
Update:
Thanks to a good hint, I did this:
$AlertDialog.dialog('open');
$("#.ui-dialog .ui-dialog-title").css('color','red');
$("#.ui-dialog .ui-dialog-title").css('background-color','orange');
Works. But acceptable practice?
My suggestion would be to not use the .ui-dialog selector as there may be more than one dialog on a page. You can traverse to the title bar.
...
$AlertDialog.html(cTxt);
// might as well use the theme since its part of jquery ui
$AlertDialog.prev().addClass("ui-state-error");
$AlertDialog.dialog('open');
Firstly,
According to documentation .css() takes property as param.
It seems you are trying changing ui-dialog-titlebar. Instead try this:
...
function Alerter(cTxt)
{
$AlertDialog.html(cTxt);
$AlertDialog.dialog('open');
$(".ui-dialog .ui-dialog-title").css('color','red');
$(".ui-dialog .ui-dialog-title").css('background-color','orange');
//Assuming you want to change header color only
//see the theming structure at http://jqueryui.com/demos/dialog/#theming
};