I tried to remove the links from the Instagram-Feed at https://staightgang.com/gang by styling the wpmi-item-class (because I didn't manage to adress the "a href") as follows:
.wpmi-item {
cursor: default;
pointer-events: none;
}
Nothing happens, the pictures remain clickable.
Any ideas?
From the MDN Docs:
Note that preventing an element from being the target of pointer events by using pointer-events does not necessarily mean that pointer event listeners on that element cannot or will not be triggered. If one of the element's children has pointer-events explicitly set to allow that child to be the target of pointer events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. Of course any pointer activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath).
What you want to do is either remove the anchor tags from your template, or use JavaScript to disable them. See this question
Related
I am working with Vue SFC and Composition API and my goal is to have a shiny-on-hover effect that follows the mouse when it hovers a specific div on the page.
I added a #mousemove directive on this div. Events are triggered when the mouse hovers the div (which is the expected behaviour) but my issue is that events continue to be triggered even after the mouse left the div
Here is the Vue SFC playground where I reproduced the issue and added more details.
Oh, that's a fun one: You are drawing the blue dot in a CSS :after of the container, and put it right under the cursor. However, it does still belong to the container. So basically a part of the container gets stuck to the cursor, so it is still hovering a child of the container, even outside it, and the mousemove event keeps firing.
When I move the mouse fast enough, I can escape the blue dot and the events stop. Similarly, I can pick it up again.
An easy fix (as suggested by #tao in the comments), is to stop the :after element from receiving pointer events:
.ctn:after{
pointer-events: none;
...
}
I'm using the component in semantic to create a top menu + breadcrumb header. For some reason, the scroll bar "jumps" when trying to scroll from the topmost position
Sandbox https://codesandbox.io/s/y7k3zn5qn1
I haven't provided the context prop to the sticky component. In the examples they have always provided the React DOM reference of the enclosing div as the context prop to the Sticky component. The documentation is not clear as to the purpose of the context prop. (It says "Context which sticky element should stick to")
Do I need to provide a context prop to the sticky component to stop the "jump" scrolling? If so, how do I decide which enclosing div ref to provide as the context prop?
While scrolling, position:fixed; is added to the parent of <div class="ui inverted menu">. This moves out the element from the dom structure thus removing the space which it occupied. Therefore, the sibling jumps up occupying the free space.
You may manually add margin-top to the sibling while the position is set as fixed, as a workaround.
I used a Rails component to wrap the Sticky component and applied padding/margin offset to the sibling.
The rail makes the sticky act like overlay and not part of the parent div. Just need to add custom css to the rail to override the default behaviour.
Context ref allows the sticky to be stuck through out the context of that element.
Made some changes to the code sandbox Sticky Menu Example
I kind of solved it for myself. Tried adding rail as in above solution but didn't work.
I realized the problem for me was the pre-render library I was using. Rather than getting rid of pre-render library, I added an active attribute to Sticky, with it being false by default (stored in state). Then, after 3-second delay, I turned it on (set active attribute in the state to active). I chose 3 seconds because I believe that's how long my pre-render took to compose each page (I'm not exactly informed on the details of how it does this).
Like:
componentDidMount() {
...
//Enable sticky functionality after delay
setTimeout(function() { //Start the timer
this.setState({
controls: {
...this.state.controls,
isStickyActive: true,
}
}) //After 3 seconds, set isStickyActive to true
}.bind(this), 3000);
...
}
Code:
<TableHeaderColumn dataField="test" isKey dataSort>Column</TableHeaderColumn>
With this the whole area of the column is clickable, I just want the text and the chevron to be clickable, how can I achieve that.
This image show that the whole area is clickable
Please help, i am stuck on this
This is the output HTML generated
You can use css to disabling clicking on some elements using pointer-events
property:
pointer-events: none;
This is definition of none value of property:
none: The element is never the target of mouse events; however, mouse events may target its descendant elements if those descendants have pointer-events set to some other value. In these circumstances, mouse events will trigger event listeners on this parent element as appropriate on their way to/from the descendant during the event capture/bubble phases.
It seems TableHeaderColumn generate some html with specific class, something like this:
<th class="sort-column">
your can write css:
.sort-column{
pointer-events:none;
}
to disable clicking on whole column, but as this will also disable clicking on text you need to reset pointer events property off child element(text)
.sort-column-child{
pointer-events:auto;
}
This is how you will use it:
<TableHeaderColumn dataField="test" isKey dataSort><span class="sort-column-child">Column</span></TableHeaderColumn>
When a parent node becomes invisible a child becomes invisible too without modifying child visible property. So how can the visibility of a child node be observed without observing all parent nodes and the hierarchy? Is there a proper event fired?
I don't think there is a direct way to achieve what you want. There is no property to observe and no event is fired when the parent visibility changes.
You can take a look at the internal implementation of Node.parentPropertyImpl(), which basically does what you want to avoid: it adds an InvalidationListener to the parent's impl_treeVisibleProperty (internal API and deprecated).
JSFiddle (The *:focus rule is to illustrate which element is marked as having focus.)
What I'm wondering is why, when I click a menu item, it gets the focus... but clicking a menu item does not give it focus.
What's wrong with the CSS to make it behave this way?
focus is generally only for elements that can receive keyboard or other input, so by this heuristic lis don't qualify. This question has more about it..
In the specs, CSS doesn't explicitly define what elements can be in those states, so it's hard to come up with a set rule for what can and can't be set to focus.
What might work for your purposes is active, which you can view here.
There is a small trick - if you want an item which not have focus anabled by default you should make it tabbable by seting its tabindex="N" - N is a number. As simple as that. if you add tabindex to your clickable items they will get focus when you click. If a tag can be tabbed it have to be able to get focus. Adding tabindex attribute to all nodes of the menu is very simple if you have jQuery loaded:
$(function() {
$('#navbar *').attr('tabindex', '1');
});
end everithing comes in place. You can do it using pure JavaScript of course.