I am creating a website in some kind of parallax design and for some sections I need map as background. I want the map to be insensitive to mouse wheel scrolling, but I want to keep the +- buttons zoom control. But my solution still does not work - once I scroll to the map and click on it I am not able to scroll away from it anymore. Here is the fiddle with my current setup:
https://jsfiddle.net/Drozi/x7jg4we6/47/
If you try to scroll down to the map, click on the map, you cant scroll back after that.
I tried to build a fiddle from scratch and after that it worked. Unfortunately the same setup (I am definitely missing something here) does not work within the entire webpage (and also in the shared fiddle).
I use Bootstrap4.
I am able to see your problem in the jsfiddle. Adding pointer-events: none to the leaflet map container seemed to fix it for me. Even after clicking on the map, the page still scrolls with your parallax effect, and the zoom control still works:
#leafletmap-places {
height: 100%;
width: 100%;
opacity: 0.4;
z-index: 0;
pointer-events: none; // <--- works for me
}
Here's your fiddle forked with the change, Let me know if that works for you.
(I'm not sure if this was your intention, but your map was not responding to drag events - this continues to be true with my change. However my change also disables double-click events. If you map needs more interactivity, there is probably more tweaking that needs to be done.)
Related
Help me. I need to make a button that does not move along with scrolling the page
It can be a button fixed on the page and
It can be a sticky button
it can be a popup button
are you using position: sticky and are you giving it a top or bottom value? Without top or bottom it won't just work.
Have you checked if you browser does support position: sticky? That could be the cause as well. If your browser doesn't support it you might need to implement some javascript fallback
I have put together very recently an article on medium that you can check here if you want to know the insights of it and some examples that might figure out what's wrong
I'm using Google Maps JavaScript API (v3) to display two maps on my website. When viewing the this page on mobile (Asus Zenfone 2 with Chrome), I see a blank page that is caused by an unwanted huge horizontal scroll - and it's the map's fault. When I remove the map from the code, there is no horizontal scroll. When I use overflow: hidden on the map's container, or even the <body> - the scroll is still there. Even when I use display: none on the map's container, I still have this annoying scroll.
Any suggestions on how I keep this map in mobile view, and get rid of this scroll?
Place the map inside of a div that sizes itself responsively, then call google.maps.event.trigger(map, 'resize')
You can also prevent this from happening my making sure that the div is built before the map is rendered, for example by adding a 'show map' button or an event listener after the user scrolls past a certain point.
Turns out the map generates a span at the end of the <body>. The fix was simple:
body > span {
display: none;
}
Okay, I decided to finally just port everything into jsfiddle because I am at the point where I cannot get this to work.
Here is the link: https://jsfiddle.net/d6wwbo4f/3/
Move around a bit, and you should be able to go under and around those tiles and move freely around the World Map.
The problem is, when the user clicks on a tile strip (or close to it), the .GameWorld's event listener gets the target name of the tile you clicked on and uses its offset. This is bad. I am trying to make it so the .GameWorld e.target is always the .GameWorld's target... Irregardless of what you click on inside the .GameWorld class. If that make sense.
I'm trying to get those tiles to have a background image effect (that cannot happen because my maps are over 3000x3000 in size and I would have some huge images for users to download.. :P
Edit: At line 19 in the Javascript Window on jsfiddle is where I detect the issue, but just not sure on a solution..
Edit2: I forgot to add some things for Firefox and EI. Only working in Chrome atm.
If you do not need to support IE <= 10, the easiest solution will be just to add:
.GameScreen img {
pointer-events: none;
}
to your CSS.
Working with angular and using animate.css to handle some animations that get applied to views as they enter and leave. I've come into a problem that has eluded my attempts to solve it thus far.
What I'm after: Getting various elements to slide in/out as if you're panning across
The problem: While the actual animations work just fine, the view change renders them with an offset so that they don't appear to be sliding. After a second the correct styles get applied, but I can't tell why. I've looked at the docs for ng-animate, tried deactivating modules, and isolating the problem in other ways but can't seem to figure it out.
Misc.:
I'm using animate.css to handle the transitions, but that doesn't seem to be the culprit as the transitions work 'normally'/as they should in some cases (on refresh, on direct URL load)
this appears to be a reflow, which happens sometimes on href nav but not on refresh. Tried tracking this down in the ng-animate docs but I can't make out why/how it only seems to happen on href nav from links and not on a refresh (something to do with template cacheing?)
doesn't seem to be browser-specific
haven't seen any questions anywhere on SO or elsewhere talking about this, so resources work as in addition to answers
I can include more code once someone has an idea of what area might be causing the problem. Don't want to include the entire project at first :)
Using:
everything 1.2.21
angular
ngAnimate
ngMocks
resource
sanitize
Here's what happens:
(note: the second command I give is a refresh, where the animation happens normally)
Some initial code:
I use this mixin to handle the .ng-enter and similar classes
#import "../bower_components/animate.css/animate.sass";
#mixin panInner($direction, $LeftOrRight) {
#extend .animated;
#extend .slide#{$direction}#{$LeftOrRight};
}
#mixin pan{
.ng-enter, .ng-enter-active {
#include panInner(In, Right);
}
.ng-leave, .ng-leave.ng-leave-active {
#include panInner(Out, Left);
}
.ng-enter-active, .ng-leave-active {
animation-duration: 2s;
}
}
#include pan;
This is for a project I've been really close-up to for a long while now, so it's always possible that I've missed something dumb, but I hope not.
It appears you are animating the pages in Position: relative rather than Position: absolute.
So what this means is that as the first section animates out, the second section still thinks it's there "above" it and is offset downwards accordingly until the first section has completed its animation and is removed from the DOM.
With Position: absolute the page element being animated in won't care about the previous sibling element being animated out. Just keep in mind that both should be inside of the same wrapper element with a relative or absolute position so that they don't jump up when switching to Position: absolute.
What I'm trying to do is have a block(let's call it .top) that is fixed and another block(let's call this one .content), that, when scrolling, goes over .top, this all while retaining everything that .top contains clickable.
Now there are some obvious setups
this
http://jsbin.com/rucifuzu/1/edit?html,css,output
or this
http://jsbin.com/hufomaxu/1/edit?html,css,output
problem with both is a) you have to account for scrollbar width b) scrolling/swiping on .top won't do anything with the element with overflow: auto underneath it
I have thought about a couple of solutions.
First would be pointer-events: none on .top, which would make it "transparent" for mouse events, thus triggering scroll on whavever is under it, the problem with is that click events won't work either, and since I plan on having clickable and selectable thing inside .top, it's a problem. I could reset pointer-events back to auto just for those click/selectable thing, but considering one of those clickable things is gonna be big ass headline, I'm gonna have a problem with scroll not working with mouse position on it again.
Second was what I call scroll delegation, using JS I would catch mousewheel events and change scrollTop on the overflow: auto element. This would work fine, except that it might result in different scroll "feel" while this delegation is happening and while native scroll on .content kicks in. It's also pain in the arse to get this behaving correctly on touch devices.
So neither is ideal. Have I missed any genious and simple solution to this problem?
TL;DR Goal is to have the .top element BOTH clickable and "scroll-thru-able"
this way .top is clickable, but element under it won't scroll - http://jsbin.com/hufomaxu/1/edit?output
this way element under it will scroll, but .top is not clickable - http://jsbin.com/tuluwili/1/edit?output
Not sure I understand 100% - you want to visually cover up a fixed element while scrolling but still be able to click on it?
One simple solution might be using 3 layers instead of 2.
Bottom layer contains your links and is fixed.
Middle layer is the one that will scroll over it and cover it up.
Top layer is fixed and is identical to Bottom layer except clear all the background colors and set opacity to 0.
When you scroll it would look like the bottom is being covered up but you could still click on the top invisible layer.
Might not work if you need to do things like drag to copy text or interact in other ways with the middle layer.