I am trying to create an E-commerce Store and I'm a beginner in React.JS. What I want is for 5 images to come together on top of eachother when the user scrolls. (so they should move TranslateX on scroll). Previously, on Vanilla Javascript I would have added a window.addEventListener('scroll') and then set a value like value = window.scrollY and then I would have selected the image I wanted to move and simply translateX or Y based on that value.
However, I'm not sure how to do this in React. Where can I set the window event listener? Is there a state needed, or useEffect?
I'm attaching an image so you can clearly see what I am trying to do:
What I have in react is the "Scroll" component which contains 2 divs
-1 div on the left 2/3 flex size containing all the images that should come together
-1 div on the right 1/3 flex size containing the text and the button
inside the left div I have 5 images, and in CSS i've used position absolute to position them on top of eachother (they are all PNGs so they have transparent background).
How would I go about implementing this on my website?
HUGE thanks in advance!
You can save the scrollY in a useState, which you then use to transofrm your images. The window listeners can be loaded inside a useEffect.
It (could) look like this:
const [scrollY, setScrollY] = useState(0);
useEffect(() => {
const handleScroll = () => {
setScrollY(window.scrollY);
};
handleScroll();
window.addEventListener("scroll", handleScroll);
return () => {
window.removeEventListener("scroll", handleScroll);
};
}, []);
(You may have to add some ESLint rules if you use it)
I have created a map with clusters created like so:
//create clustering markers
var markers = L.markerClusterGroup({
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
singleMarkerMode: true, //makes sure that single incidents looks the same as clusters (but are still treated as single markers)
iconCreateFunction: defineClusterIcon
});
var layer_group = L.geoJSON(geoJson);
markers.addLayer(layer_group);
map.addLayer(markers);
map.fitBounds(markers.getBounds());
In the defineClusterIcon function, I create a SVG which then is converted to HTML and defines the icon:
return L.divIcon({
iconSize: new L.Point(40, 45),
html: html,
classname: 'leaflet-div-icon'
});
I now want to be able to change the style of the cluster (or marker, which also is styled as a cluster), when pressing it - and I want it to return to the original styling when pressed again.
Instead of changing the style of the actual svg elements, I am thinking that it might be easier to just change the style of the class:
.leaflet-div-icon {
background: rgba(0,0,0,0);
border: none;
}
Where I then want to have a border when the cluster/marker has been pressed. I do not know, whether it is possible to change the class within the on clusterclick or click functions, or if it can be done in another way.
My code, as it is now can be found here - where the wanted effect also can be seen on the controls on the right side: http://bl.ocks.org/skov94/f006cd45d2daa2bc67e4f514774fdd0d
Instead of switching the outline property of the leaflet-interactive div, i would toggle a class as you did with the controls on the right side (say a outlined class).
This class toggling has to be done in a "onclick" event handler. Leaflet clustering provide its own cluster click events (clusterclick).
The possible targets of the clusterclick event seem to be either the text, circle, or svg nodes of the cluster. We want to get the enclosing div with class leaflet-interactive to add or remove the outlined class on it. This will be made easily possible with Element.closest:
Javascript file
markers
[...]
.on('clusterclick',function(c) {
console.log("pressed");
map.closePopup();
c.originalEvent.target.closest(".leaflet-interactive")
.classList.toggle("outlined");
});
Then, simply change the style of its circle descendants with css:
CSS file
.leaflet-interactive.outlined circle {
stroke-width: 2px;
stroke: blue;
}
Edit: If you're not familiar with css, the selector means: circle nodes that are descendants of nodes with classes leaflet-interactive AND outlined.
Is it a possible to keep grid's horizontal scrollbar (not a window scroll) called by
autowidth: true,
shrinkToFit: false,
After column resized
cmTemplate: { compact: true, autoResizable: true },
Here is jsfiddle.
Steps:
Move left border of result window to right to get grid's scrool (see pix1), then
double click the column border line - scroll bar become a lost.
My real table is too wide, so I need to save grid's scrollbar.
Has found an answer by using the following option
autoResizing: { adjustGridWidth: false},
Currently elements(divs) are placed as on the left side of an image.
Is there a way for them to be ordered without spare space between them (as in right side of an image)?
Here's my ui-sortable settings:
vm.sortableOptions = {
'ui-floating': 'auto',
connectWith: '.connected-columns',
placeholder: 'board-issue-placeholder'
}
I'm having a few issues when attempting to make the switch from extjs 4.0.7 to 4.1.1.
The first issue is as follow:
I have two treepanels which are within a column layout. One right next to the other. My app loads a bunch of nodes into the left panel, and then you can optionally move some of them to the other panel. However, the panel with all the nodes is not showing a scrollbar, and thus I can't see about 1/3 of the nodes all of a sudden. I had a semi-similar issue in 4.0.7 where I couldnt see the last node moved if the panel was full until I moved another node. I fixed that with the following lines:
treePanel1.invalidateScroller();
treePanel2.invalidateScroller();
These lines are deprecated in 4.1.1, and the problem seems to have become worse. Has anyone had a similar issue, and how do I get my scroll bar back.
A second major issue related to my UI:
I have two grids right next to each other elsewhere, layed out similarly to the treepanels. I've set up drag and drop between the two grids. Again all the nodes start in the left grid, with the option to drag some into the right grid. However, the right grid is now not showing at full size, it is defaulting to a sliver. So, the DD functionality is still there, if you know to drag the node to that little sliver. Afterwards, the sliver expands enough to hold the single node and so on. So, how do I get it back to defaulting full size. Why had extjs 4.1.1 caused these issues? I'd have to fat finger in any code, but can if absolutely neccessary. However, if anyone is familiar with this type of issue based on my description, that would be great.
Edit: Also, I have a combobox in the right-most column of the grids. When I click to change one of the comboboxes, a mini scrollbar thing pops up that sort of blocks the dropdown button. What have they done to this version?
Here is the layout definition where I have the first problem where the scrollbar doesn't show up on the panel when it needs to:
{
xtype: 'panel',
title: 'Select fields',
defaults: {
border: false,
height: '100%'
},
layout: 'column',
items: [
{
xtype: 'treepanel',
itemID: 'choicesTreePanel',
title: 'Choose from below fields',
height: '100%',
multiSelect: true,
store: choicesTree,
rootVisible: false,
columnWidth: .44},
{
xtype: 'panel',
columnWidth: .06,
layout: {
type: 'vbox',
align: 'center'
},
defaults: {
margins: "15 0 0 0"
},
items: [
{
xtype: 'button',
text: '==>'},
{
xtype: 'button',
text: '<=='},
{
xtype: 'button',
text: 'RST'}
]},
{
xtype: 'treepanel',
itemId: 'chosenTreePanel',
title: 'Fields',
border: true,
store: chosenFields,
rootVisible: false,
columnWidth: .44,
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop,
dragText:'
dragginggggg '
},
ddGroup: '
fieldsDD '
}
},
{xtype:'
panel ',
columnWidth:.06,
layout:{
type:'
vbox ',
align:'
center '
},
items: [
{
xtype: '
button ',
text: '
UP '},
{
xtype: '
button ',
text: '
DOWN '}
]
}
]
}
Edit: on the left panel, if I make height a set value, and autoscroll true, I have a scrollbar. If I set height '100%' and autoscroll true, there is no scroll bar. So a solution might be to find out how to have the panel fit the height of the parent, while maintaining the scrollbar
Although you are looking for a percentage based height solution, you can also use a constant value height. In many cases this will avoid your problem. For example, set the panels to 600 height, that should fix the scroller issue.
This does not solve your issue in percentage based layouts. Hopefully someone else can provide help with that.
(maybe it is best to split your question into multiple separate questions)
Concerning your first question about the panel height and scrollbar:
In your example I would ask myself the question "I want the treepanel to have a 100% height related to what?".
A column layout is typically used when you don't care about the height of the child elements related to their parent: the sum of the height of the child elements define the height of the column as you can see here: http://docs.sencha.com/ext-js/4-1/extjs-build/examples/layout/column.html.
You did not define any height on the columns, so it uses the height of the child elements (which have no height in your example). I don't know what Ext does in this case, but based on this, it cannot do anything smart.
If you want the treepanel to use the whole height of the containing panel, you would use a hbox layout with the align property set to stretch.
That might fix the scrollbar too since height calculation can be done properly.
Don't forget to remove the "height: 100%" and "autoscroll" properties since they mix things up.
Finally, changing the layout of the treepanel to 'fit' might give you the result you are looking for.
Your code might become something like:
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'treepanel',
layout: 'fit',
flex: 44,
...
}, {
flex: 6,
...
},{
flex: 44,
...
}]
}
I did not test this answer on your code. Please provide a full working code sample (with a dummy store) and I'll test it.