Is it possible to make img hover overlay with macyjs? - javascript

Im building my first website and currently struggle with making img overlay on hover in my gallery.
I've made masonry layout using macyjs and can't get my css right to make an overlay.
This is also my first post here so If I did screw something up with the code snippet, sorry in advance :)
const msnry = new Macy({
container: '.image-grid',
mobileFirst: true,
columns: 1,
breakAt: {
400: 2,
700: 3,
1100: 4,
},
margin: {
x: 20,
y: 20,
},
});

Related

Cytoscape - graph entire screen

i need to render graphs and i want to use cytoscape (plotly dash cytoscape).
Because with the plotly dash wrapper it is possible to write everything in python and i don't need to split my (small) application into a backend and a frontend part.
I want that the graph uses the entire screen and orders the nodes in a good and readable way.
Unfortunately i don't find a description of all possible parameters in the api documentation.
Instead of the rendering in picture i would like to have it in way.
Do you have any idea how to solve this?
The graph has the entire space available, i can move it with my mouse everwhere i want.
These are my current properties:
cyto.Cytoscape(
id='knowledge-graph',
layout={
'name': 'cose',
'idealEdgeLength': 1000,
'nodeOverlap': 500,
'refresh': 20,
'fit': True,
'padding': 30,
'randomize': False,
'componentSpacing': 1000,
'nodeRepulsion': 400000,
'nestingFactor': 5,
'gravity': 800,
'numIter': 1000,
'initialTemp': 200,
'coolingFactor': 0.95,
'minTemp': 1.0
},
style={
"width": "100%",
"height": "calc(100vh - 150px)",
},
stylesheet=[
{'selector': 'edge', 'style': {'label': 'data(label)', 'curve-style': 'haystack',
'haystack-radius': 0,
'width': 5,
'opacity': 0.5,
'line-color': '#a8eae5'}, 'text-wrap': 'wrap'},
{'selector': 'node', 'style': {'label': 'data(label)', 'background-color': '#30c9bc'}, 'text-wrap': 'wrap'},
]
)
Thank you!
You can try using cytoscape-spread layout which first applies a force-directed layout for initial positions and then uses voronoi-based method to spread the nodes in the remaining space. You can check its demos here and here.

Trail mode of hovering events doesnt work in tsParticles(similar to particlejs)

I have got two queries, I am implementing tsParticles in my React application.
First one:.
<Particles
id="tsparticles"
options={{
background: {
color: {
value: "black",
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "window",
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "trail",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color:{
animation:{
enable:true,
speed:50,
},
value:"#f00"
},
links: {
shadow:{
blur:true,
color:"#00ff00"
},
triangles:{
frequency: 1
},
color: "random",
distance: 150,
enable: true,
frequency:1,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
angle:{
offset: 45,
value: 90
},
attract:{
rotate:{
x:3000,
y:3000
}
},
gravity:{
acceleration: 9.81,
enable:false,
maxSpeed:1
},
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
value_area: 1000,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
}}
/>
There is a section of onHover and key value of mode in it. There are like 8 different modes to it, can be viewed in https://particles.matteobruni.it/ .
All other modes work fine but the trail mode when I use this code, am I missing some other properties to the Particles component?
Second one:
Also,
I have got two divs, one for the particle and the other for the text to display on top of it. I have achieved this using z-index and positions.
I need the canvas height to be dynamic that is occupy 100% height of its parent whatever the screen size is. I have tried doing this by including Particles component inside a div and keeping its height to 100% but the canvas height decreases with the decrease in the screen size.
Kindly help me, thank you :)
Wow, there's a lot to answer here, but I try to do my best.
First point, the config and mouse trail
The mouse trail needs more configuration, in the modes section of interactivity you have to configure the trail section.
You can see a sample here: https://codepen.io/matteobruni/pen/abdpbBY
If you need more documentation checkout the right section in documentation: https://particles.js.org/interfaces/_options_interfaces_interactivity_modes_itrail_.itrail.html
Second point, the canvas size
If you need a dynamic canvas size the best solution is to use the backgroundMode in the options root object
You can see a sample here: https://codepen.io/matteobruni/pen/MWeqxNL
The background mode if enabled sets the canvas style with a fixed position and the desired zIndex
You can see the documentation here: https://particles.js.org/interfaces/_options_interfaces_backgroundmode_ibackgroundmode_.ibackgroundmode.html
If you are using the backgroundMode, the better results are obtained without setting any style to the containing div (the tsParticles target/container)

How to add slideWidth into a breakpoint in Glide.js

I have to set the slide width to a specific size if the viewport is between a range.
breakpoints: {
767: {
perView: 1,
peek: 193,
slideWidth: 277
},
1023: {
perView: 1,
peek: 212,
}
}
The documentation states that you can use slideWidth in the settings, so I'm assuming is in the breakpoints, but there's no example on how to do that and I haven't found an example of it.
The whole interface is responsive, so even if slideWidth is working behind the scenes, the width of the slide changes no matter what.
I also tried with pure CSS but Glide takes charge of course and overwrites when a resize event occurs. Also tried with pure JS and measuring the viewport myself, but again Glide.js takes charge and the interface is being offset, so the slide moves a bit and doesn't match the screen.
Here is a codepen on how to use the breakpoints https://codepen.io/tfoh/pen/zjqzZo
new Glide('#glide1', {
type: 'carousel',
perView: 3,
breakpoints: {
800: {
perView: 1
}
}
}).mount();
I manage that with css, this example make width of slides the same on any resolution, .glide-wrapper you should add manually like a glider parent div
.glide-wrapper {
max-width: 100vw;
overflow: hidden;
}
.glide {
max-width: 320px;
margin-left: auto;
margin-right: auto;
}
.glide__track {
overflow: visible!important;
}
const glide = new Glide('.glide', {
type: 'carousel',
breakpoints: {
1280: {
gap: 16,
focusAt: "center",
perView: 1,
peek: {
before: 16,
after: 16
},
},
}
}).mount({Swipe, Controls, Breakpoints });

How to add number to port in GoJS?

Hi I need to add number to each of ports as you see in the picture below.
Ps. How ever I looking for resolve the problem on this site https://gojs.net/latest/intro/ports.html and I check solution with portId and TextBlock but it doesn't work :/
You are using a Shape for a port, but any GoJS object can be a port, and you really want to use a Panel (Auto Panel) with a Shape and a TextBlock as your port.
I suggest you read: https://gojs.net/latest/intro/buildingObjects.html
Hi thank you for your Answer :) hmm I try to use a Panel but I don't see change :/ What I do wrong?
this.$(go.Panel, 'Horizontal',
new go.Binding('itemArray', 'bottomArray'),
{
row: 2, column: 1,
itemTemplate:
this.$(go.Panel, 'Vertical',
{
_side: 'bottom',
fromSpot: go.Spot.Bottom, toSpot: go.Spot.Bottom, fromMaxLinks: 1,
fromLinkable: true, toLinkable: false, cursor: 'pointer'
},
new go.Binding('portId', 'portId'),
this.$(go.Shape, 'RoundedRectangle',
{
stroke: null, strokeWidth: 0,
desiredSize: portSize,
margin: new go.Margin(2, 1, 0, 1)
},
new go.Binding('fill', 'portColor')),
this.$(go.TextBlock,
new go.Binding('text', 'name'))
)
}
),

jsPlumb Endpoint offset

First of all let me say I'm kind of new to jQuery and I'm definately new to jsPlumb altough I have checked the official documentation I've not been able to get a solution to this problem.
I have 2 draggable div elements that each have an endpoint so I can connect them to each other. The problem is when I make the connection and then drag any of the div elements around the arrow image I'm using isn't properly placed where it should be (I'm using ["RightMiddle", "LeftMiddle"] for the anchors).
Is there a way to make the images stick at the middle-right (or left) side of the div elements and not get out of place?
Here's the jsFiddle link for what I have so far, and here's the code:
$(document).ready(function () {
jsPlumb.draggable($('.table'), {
containment: '#schema'
});
var endpointOptions = {
isSource: true,
isTarget: true,
endpoint: ["Image", {
url: "http://i43.tinypic.com/1z31ac2.gif"
}],
style: {
fillStyle: 'gray'
},
maxConnections: -1,
connector: ["Flowchart", {
curviness: 5
}],
connectorStyle: {
lineWidth: 3,
strokeStyle: 'gray'
},
anchors: ["RightMiddle", "LeftMiddle"],
scope: "gray"
};
var ep01 = jsPlumb.addEndpoint("container0", endpointOptions);
var ep02 = jsPlumb.addEndpoint("container1", endpointOptions);
jsPlumb.connect({
source: ep01,
target: ep02
});
});
To make the images stick at the middle-right (or left) side of the div elements, instead of specifying both RightMiddle and LeftMiddle you can simply specify any one.
anchors: "RightMiddle", // For your image Right position suits the best

Categories