I'm using fancybox 2 and have an issue with background overlay [ with transparency ].
My overlay helper looks like:
overlay : {
css : {
'background' : 'rgba(42, 42, 42, 0.95)'
}
}
And as I've red rgba is not compatible with IE<-8
----- SOLUTION ----------
I've found this solution:
overlay : {
css : {
'background':'transparent',
'filter':'progid:DXImageTransform.Microsoft.gradient
(startColorstr=#F22a2a2a,endColorstr=#F22a2a2a)',
'zoom': '1',
'background' : 'rgba(42, 42, 42, 0.95)'
}
}
Related
I'm building an app with angular and nativescript , and i want a fab button like this one fab menu vuejs
Does anyone have example or snippet for angular ?
I am not very good with css and i don't know how to something like on angular.
Note: I'm also very new to Nativescript/Angular. I might miss some details, feel free to edit this answer to correct me.
I used this so I would not have to make the FAB myself: https://market.nativescript.org/plugins/nativescript-floatingactionbutton. You can add it to your project by running tns plugin add nativescript-floatingactionbutton.
I don't feel like the documentation is very clear.. I went through those links to come up with something:
https://github.com/nstudio/nativescript-floatingactionbutton/issues/95 (your question basically)
https://github.com/jlooper/nativescript-snacks/blob/master/_posts/2016-06-05-fab-nav-angular.markdown (linked in the last answer of the previous link.. outdated.. removed from the doc)
https://docs.nativescript.org/angular/ui/animation
First, the layout of my page is a GridLayout. I feel like it won't work otherwise. I was testing with a StackLayout first.. no luck.
Inside this GridLayout, I have other stuff (in my case a ListView) and I added at the end another GridLayout.
<GridLayout rows="auto, *">
...
<GridLayout row="1", rows="auto, *">
<Fab row="1" #btna icon="res://first_option_icon" rippleColor="#f1f1f1" class="fab-button btna"></Fab>
<Fab row="1" #btnb icon="res://second_option_icon" rippleColor="#f1f1f1" class="fab-button btnb"></Fab>
<Fab row="1" #fab (tap)="displayOptions()" icon="res://add_icon" rippleColor="#f1f1f1" class="fab-button"></Fab>
</GridLayout>
</GridLayout>
In the exemple from github, buttons are used instead of fab for the "children". The only reason I replaced it with a fab here is because I download my icons from https://material.io/resources/icons and buttons don't accept icons (when downloading an icon from material.io, you can choose "android" (or iOS) in the download options, it gives different sizes of the icon).
Using fab instead of buttons, the css becomes a little easier as well (unless you want to make them smaller).
.fab-button {
height: 70;
/*width: 70; -- Needed for iOS only*/
margin: 15;
background-color: orangered;
horizontal-align: right;
vertical-align: bottom;
}
.btna {
background-color: #493DF8;
}
.btnb {
background-color: #1598F6;
}
And then all that's left is the javascript.
// Necessary imports
import { ..., ViewChild, ElementRef } from "#angular/core";
import { registerElement } from "#nativescript/angular/element-registry";
import { Fab } from "nativescript-floatingactionbutton";
import { View } from "tns-core-modules";
registerElement("Fab", () => Fab);
#Component(...)
export class YourComponent {
...
// Reference those fabs
public _isFabOpen: Boolean;
#ViewChild("btna") btna: ElementRef;
#ViewChild("btnb") btnb: ElementRef;
#ViewChild("fab") fab: ElementRef;
...
displayOptions() {
if (this._isFabOpen) {
// Rotate main fab
const fab = <View>this.fab.nativeElement;
fab.animate({rotate: 0, duration: 280, delay: 0});
// Show option 1
const btna = <View>this.btna.nativeElement;
btna.animate({translate: { x: 0, y: 0 }, opacity: 0, duration: 280, delay: 0});
// Show option 2
const btnb = <View>this.btnb.nativeElement;
btnb.animate({translate: { x: 0, y: 0 }, opacity: 0, duration: 280, delay: 0});
this._isFabOpen = false;
} else {
// Rotate main fab
const view = <View>this.fab.nativeElement;
view.animate({rotate: 45, duration: 280, delay: 0});
// Show option 1
const btna = <View>this.btna.nativeElement;
btna.animate({translate: { x: 0, y: -80 }, opacity: 1, duration: 280, delay: 0});
// Show option 2
const btnb = <View>this.btnb.nativeElement;
btnb.animate({translate: { x: 0, y: -145 }, opacity: 1, duration: 280, delay: 0});
this._isFabOpen = true;
}
}
}
Tada!
I'm trying to achieve a spinning circle with artwork as a mask.
From what I've seen there is no way to use a moving watermark or an automatic rotation of an image. Is it possible with transloadit?
The result should be a "vinyl" spinning.
This question is quite complex to answer, but it's very much do-able with Transloadit. I'll be using python to answer it primarily for OpenCV, but of course you can use a language that you prefer - I'll try and make it as language agnostic as possible.
I used 4 different templates to get the result we want, as well as some local python magic to tie everything together - here goes.
First we need to resize the image so it fits nicely onto the vinyl record.
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"resize": {
"use": ":original",
"robot": "/image/resize",
"format": "png",
"resize_strategy": "fillcrop",
"width": 350,
"height": 350,
"imagemagick_stack": "v2.0.7"
}
}
}
Now, we want to mask this image using OpenCV and NumPy like so:
# Mask the image
# Reads the input image
img = cv2.imread(img_path)
# Creates a mask with the same size as the image
mask = np.zeros(img.shape, dtype=np.uint8)
# Creates a white circle in the centre
mask = cv2.circle(mask, (175, 175), 175, (255, 255, 255), -1)
# Makes a small whole in the centre of the mask
mask = cv2.circle(mask, (175, 175), 20, (0, 0, 0), -1)
result = cv2.bitwise_and(img, mask)
This will take an image, and create a mask for it that should look like a donut.
Then, using a bitwise and operation between the image and the mask you end up with a cookie cutter of the original image
Yet we still need to remove the black background - which is what we use this template for:
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"trimmed": {
"use": ":original",
"robot": "/image/resize",
"alpha": "Activate",
"type": "TrueColor",
"transparent": "0,0,0",
"imagemagick_stack": "v2.0.7"
}
}
}
This will just make all black pixels transparent.
We can now use Transloadit's watermark feature to overlay this image onto our vinyl record
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"watermark": {
"use": ":original",
"robot": "/image/resize",
"watermark_size": "33%",
"watermark_position": "center",
"imagemagick_stack": "v2.0.7"
}
}
}
Now, all that is left is to make it spin. What we can do is create say 60 frames, and have the image rotate, then using the /video/merge robot - to stitch it all together into a seamless GIF.
{
"steps": {
":original": {
"robot": "/upload/handle"
},
"rotate_image": {
"use": ":original",
"robot": "/image/resize",
"rotation": "${file.basename}",
"resize_strategy": "crop",
"imagemagick_stack": "v2.0.7"
},
"animated": {
"robot": "/video/merge",
"use": {
"steps": [
{
"name": "rotate_image",
"as": "image"
}
],
"bundle_steps": true
},
"result": true,
"ffmpeg_stack": "v4.3.1",
"ffmpeg": {
"f": "gif",
"pix_fmt": "rgb24"
}
}
}
}
Here I use the image's name to determine how many degrees to rotate it by - so when I'm uploading the files to the robot I will name the image based on its index in an array using this python code:
# Now we make a list of images that represent each frame
no_of_frames = 60
assembly = tl.new_assembly({'template_id': [SPINNING_VINYL_TEMPLATE_ID]})
directory = 'Assets/Frames/{image}'.format(image=img_name)
# Length of our animation in seconds
length = 2
for i in range(no_of_frames):
if not os.path.exists(directory):
os.mkdir(directory)
# Creates an image based on the index in the animation
# We pass this to the robot so it knows how many degrees to rotate the image by
location = '{directory}/{index}.png'.format(directory=directory, index=round(i*360/no_of_frames))
cv2.imwrite(location, finished_vinyl)
assembly.add_file(open(location, 'rb'))
This is my end result
Using QtQuick, I have a row of 5 images in a repeater. I'd like to implement an animation on hover that's similar to the MacOS dock animation. Here's a picture for reference:
To further break it down, here's what I'm trying to accomplish. These images, on hover, should act as follows:
Hovered images expand
Neighboring images expand, but slightly less
Images don't overlap on expansion
Here is the code I have so far
Row {
spacing: 2
anchors.bottom: parent.bottom
anchors.bottomMargin: 30
anchors.horizontalCenter: parent.horizontalCenter
Repeater {
id: iconRepeater
model: iconColors()
Image {
source: "icons/" + modelData + ".png"
scale: mouseArea.containsMouse ? 1.5 : 1.0
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onClicked: endTimer()
}
Behavior on scale {
PropertyAnimation {
duration: 75
}
}
}
}
}
This expands the image you hover over, but I cannot seem to also effect the neighbors. Any advice is appreciated!
I'd suggest a little more robust solution, where you have control over the zoom factor and the spread and decay of influence:
Column {
Slider {
id: foff
from: 1
to: 5
stepSize: 1
value: 2
snapMode: Slider.SnapAlways
}
Slider {
id: sf
from: 0.5
to: 2.5
stepSize: 0.5
value: 0.5
snapMode: Slider.SnapAlways
}
Slider {
id: dmp
from: 1
to: 5
stepSize: 1
value: 1
snapMode: Slider.SnapAlways
}
}
Row {
id: row
anchors.bottom: parent.bottom
anchors.bottomMargin: 30
anchors.horizontalCenter: parent.horizontalCenter
property int falloff: foff.value // how many adjacent elements are affected
property int current: -1
property real scaleFactor: sf.value // that's how much extra it scales
property real damp: dmp.value // decay of influence
Repeater {
id: iconRepeater
model: 10
Rectangle {
width: 50 * pseudoScale
height: width
anchors.bottom: parent.bottom
color: "red"
border.color: "black"
property real pseudoScale: {
if (row.current == -1) return 1
else {
var diff = Math.abs(index - row.current)
diff = Math.max(0, row.falloff - diff)
var damp = row.falloff - Math.max(1, diff)
var sc = row.scaleFactor
if (damp) sc /= damp * row.damp
diff = diff / row.falloff * sc + 1
return diff
}
}
MouseArea {
id: mouseArea
anchors.fill: parent
hoverEnabled: true
onContainsMouseChanged: row.current = containsMouse ? index : -1
}
Behavior on pseudoScale {
PropertyAnimation {
duration: 150
}
}
}
}
}
It could be something along the lines of this:
Row {
anchors {
bottom: parent.bottom
left: parent.left
right: parent.right
}
Repeater {
id: rep
model: ['red', 'yellow', 'pink', 'green', 'teal', 'orchid', 'blue', 'orange']
property int currentIndex: -10
delegate: Rectangle {
anchors.bottom: parent.bottom
// Calculate the width depending on the currently hovered element
width: (rep.currentIndex === index ? 100 : ((rep.currentIndex - index) === 1 || (rep.currentIndex - index) === -1 ? 80 : 50))
height: width
radius: width / 2
color: modelData
MouseArea {
anchors.fill: parent
hoverEnabled: true
// onEntered/Exited did not react. This will work.
onContainsMouseChanged: {
if (containsMouse) rep.currentIndex = index
else rep.currentIndex = -10 // -10 is safe
}
}
// Makes the movement smooth
Behavior on width {
NumberAnimation {}
}
}
}
}
I tried to put in the necessary explainations as comment in the code.
The only thing that would need some tweeking is, that the dots will be initially shifted when the first resizing happens. Putting it on a flickable and some manual labour for the right position handeling could deal with that. Basically you need to shift the flickable by half the width change (in my case ~ 55 or so) to the left, when the mouse enters, and to the right when it leaves again.
You could also do so with a ListView, most likely, but due to the ever changing estimated size of the background, it might be more challanging to get the positioning right.
I've got a component, a custom keyboard, that takes about 1 second to show/build in React Native.
Is it possible to prebuild this component, say on start up, and have it appear instantly when I need to show it?
The only way to do that is to render it ahead of time. You can easily do this by rendering with zero opacity or translateX out of screen, and make it visible by changing those properties.
Example:
const styles = StyleSheet.create({
invisible: {
opacity: 0,
transform: [
{translateX: -3000}
]
}
})
const MyHeavyComponent = ({isVisible, ...props}) => {
const visiblityStyle = isVisible ? null : styles.invisible;
return (
<View style={visiblityStyle}>
...
</View>
)
}
I am using sass palettes and I would like know how can I make this function works for more than 1 palettes.
right now I can just use 1 palette with this function, how can make this function works for more than 1 palette?
#function palette($palette, $shade: 'base') {
#return map-get(map-get($color-palettes, $palette), $shade);
}
$primary-palette: (
grey: (
xx-light : lighten($grey, 43%),
x-light : lighten($grey, 35%),
light : lighten($grey, 6%),
base : $grey,
dark : darken($grey, 8%),
x-dark : darken($grey, 16%)
),
);
// will be my secondary paletter
$secondary-palette: (
black: (
light : lighten($grey, 6%),
base : $grey,
dark : darken($grey, 8%),
x-dark : darken($grey, 16%)
),
);
applied in the css
body {
background-color: palette(grey,dark);
}
Someone can help? Thanks
I've not done anything like this before, but it looks really powerful. I did some searching and this article seems to suggest you'd put the black palette within $primary-palette as well, only having one master set of palettes.
From the post:
$colors: (
blue: (
0: hsl(198, 74%, 49%),
1: hsl(200, 72%, 61%),
2: hsl(200, 71%, 73%),
[...]
),
red: (
0: hsl(3, 72%, 62%),
1: hsl(4, 85%, 66%),
2: hsl(4, 84%, 78%),
[...]
)
)
#function get-color($color, $value: 0) {
#return map-get(map-get($colors, $color), $value);
}
.button--blue{
color: get-color(blue, 0);
background: get-color(blue, 4);
&:hover{
background: get-color(blue, 3);
}
}