I have a vue component that uses the tsparticles library, and I would like to set is as background as it is overlapping over all my other components, can anyone help as to how I can do that?
If you want it to be running but not displayed expect when booleanToShow is true:
<div v-show="booleanToShow"></div>
If you want to remove it from the DOM (and stop it from running)
<div v-if="booleanToToggle"></div>
You can set tsparticles to be in background using the backgroundMode property.
You can see a working sample here: https://codesandbox.io/s/xenodochial-colden-uvs85?file=/src/App.vue
The property backgroundMode sets the tsparticles canvas to full screen, it's an object with two properties: enable and zIndex.
enable (boolean): (obviously) enables the full screen mode
zIndex (number): sets the canvas element z-index property to whatever you want
A sample of backgroundMode:
{
/* root object */
backgroundMode: {
enable: true,
zIndex: -1
}
/* root object */
}
You can set the background property too, it's a shorthand to the CSS background property.
You can use that property to change the canvas background color, for example:
{
/* root object */
background: {
color: "#000"
}
/* root object */
}
If you set a negative zIndex you need to use detectsOn: "window" in interactivity object to keep mouse events working.
Related
I use wix react-native-navigation. Navigation.showModal open fullscreen size. Is it possible to open the custom size? where do I find all the properties list about navigation layouts? Documentation is too meager...
Modal is always full screen. You can control your view's dimensions in jsx.
Instead of flex: 1 - use a predefined width and height according to your needs.
render() {
return (
<View style={{width: '80%', height: 150}}>
{ /* render Modal content */ }
</View.
);
}
Alternatively, if you need to interact with the UI behind the Modal you should use a Navigation.showOverlay
Navigation.showOverlay({
component: {
name: 'example.Overlay',
options: {
overlay: {
interceptTouchOutside: false // this make touch events pass through the invisible parts of the overlay
}
}
}
});
For more examples on Overlay used you can see code examples in the playground app
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.
We have this square <div> element which has a specific class applied for style. Inside there's a vertically/horizontally aligned <span> element which has sprite class applied to show an image.
The square has a black background and the image is a flat yellow icon. The idea is to switch the colors when the user is touching the whole square (including the background and the image). For this we need to switch 2 classes, on for the outer <div> (to show a yellow background) and another for the inner <span> to display a black image from the sprite.
The problem is, how to achieve this with AngularJS and touch down and up events. We are using angular-touch but that simply overrides ngClick for a better implementation for mobile/touch devices and adds ngSwipeLeft and ngSwipeRight directives. Neither doesn't seem to really help with our issue.
What would be the best way to achieve this effect with AngularJS?
I would use a scope boolean value to indicate when the div is touched, based on javascript events touchstart and touchend, then have ng-class show the correct class based on that boolean. Example:
<style>
.color-white {
color : white;
}
.background-green {
background : green;
}
</style>
<button my-touch="myIndicator"
ng-class="{
'color-white' : myIndicator,
'background-green' : myIndicator
}">Touch this</button>
.directive('myTouch',function() {
return {
link: function ($scope, $elem, $attrs) {
var _t = $attrs.myTouch;
$elem.on('touchstart touchend',function(e) {
$scope[_t] = (e.type === 'touchstart');
$scope.$apply();
});
}
}
});
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
in enyo I can't find any documentation that tells tyou how to chnage the Properties.
For example in the documentation it has disabled as one of the properties. What would the java script code be to set that property, so I could make the button go on and off?
Let's say you have something like:
/* Enyo controls code */
{name: "detailButton", disabled:true, caption: "Details"},
/* More Enyo code */
To change that property, just use Enyo's property system:
myFunction: function() {
this.$.detailButton.setDisabled(false);
}
You can define your own properties using:
published:{
myProperty: ""
}
You will then have a setMyProperty() function and a myPropertyChanged() to observe changes in your property
I take an example of a text area of enyo, whose property u want to set..
consider we declared something like this:
{kind: "enyo.TextArea", name: "keymouse", placeholder: "Mouse events.", style : "width:150px ;height:400px ; position: fixed; top : 30px; left:650px"}
To change the contents of the text area you can do something like this:
this.$.keymouse.setValue("Mousedrag"+ " ");
So, all you need to do is call set*propertyname* for your particular element..
And also incase u also want to change or add some stylings then do something like this:
this.$.<element_name>.applyStyle("background-color", "red");