I´m working with a MapBox map and I have the following problem:
On mobile the map doesn´t fill all the page because I need to show other things after it.
I´m using map.dragging.disable(); and this prevents dragging the map as expected, but also scroll it. So, how can I disable that dragging event without blocking the normal scroll behavior? I need to be able to scroll as is the map were an image, but I don´t want to do this.
I have also seen this but it didn't help me.
I don't know if this will help but covering mapbox manually with overlay does work.
<!-- Wrapper -->
<div style="position: relative;">
<!-- Mapbox object -->
<div id="mapbox"></div>
<!-- Overlay -->
<div style="height: 200px; position: absolute; top: 0; width: 100%;"></div>
</div>
Additionally you toggle the overlay display from block to none in order to make the maps draggable again.
I'm experiencing this issue as well. Out of curiousity, what version of mapbox were you using? I don't remember this being an issue in past versions. I'm on v2.2.1.
I'm using Modernizr on my site and the solution that I implemented was to apply a z-index: -1 property to the map container when the .touchevents class is present. This way you don't need to add uneccesary markup to your page.
HTML
<div id="map"></div>
CSS
.touchevents #map {
position: relative;
z-index: -1;
}
If you're not using Modernizr I would encourage you to but if you can't for whatever reason you could just apply the z-index on smaller browser widths with media queries. Less desirable but better than nothing.
Related
Alright, I have no idea what I'm doing. I thought that there would be a library for this, but apparently there isn't.
Problem Explanation
I have a complicated React Application.
There exists
Main Page Element
A content container
A display container
The element I want to scroll to
I am trying to find a solution that will scroll to an element on a page and force all parent scrollbars to scroll to the appropriate location in order to view the element on screen.
Example
<html>
<head />
<body>
<div style="background:red; display: block; height: 1000px; overflow-y: auto">
Root Parent
<div>
<div style="background:green; display: block; height: 1000px;overflow-y: auto">
Another Parent
<div>
<div style="background:blue; display: block; height: 1000px; overflow-y: auto"></div>
<div style="background:purple; display: block; height: 1000px; overflow-y: auto">
<div id="targetElement">Scroll here</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
JS Fiddle Here
https://jsfiddle.net/10f83ush/
Solutions I've tried
I found zen scroll
But in their How to Use Section - 1.4 they explicitly state it isn't supported
https://zengabor.github.io/zenscroll/#howtouse
I found this this thread here
Scroll all nested scrollbars to bring an HTML element into view
And I thought that would work but it doesn't.
If I do element.scrollIntoView that doesn't work either because it's got two sets of scrollable parent/grandparent that both need to scroll to.
Request
How the heck do I get all the parents of the target I want to scroll towards to all scroll towards the correct location to show the element on the page?
I feel like I'm going crazy. It's 2020 and I can't simply scroll to an element that's nested inside other scrollable elements?!
EDIT
To clarify, I'm not trying to do a million scroll bars at a time (Yes this is bad UI/UX), but the solution I'm searching for should support as many as possible. There are multiple solutions I've found where the answer has been solved, but only for one or two scroll bars and then ignored more than two. I would love for guidance or help on how to handle any amount of parent scroll bars when trying to scroll a nested element into view.
Without creating a more complicated solution I opted to use a library called scroll-into-view.
https://github.com/KoryNunn/scroll-into-view
https://www.npmjs.com/package/scroll-into-view
This library is AMAZING - and it does EXACTLY what I wanted which is scrolling elements into view.
Additionally it supports arbitrarily offsetting the scroll location, the ability to filter scrollable areas so that it doesn't change focus from the entire page, and a ton of other amazing features.
This was so good I decided to contribute to the patreon for it!
If you're looking for a solution I would suggest trying this library out!
I have a large image of a map with points of interest on it.
What I want is to have a button on a page of text, when the button is clicked it opens the map image in a different window. What I then need is for the image to only display the relevant portion of the map showing the point of interest mentioned on the original page with the button.
I've found ways to show a certain section of the map using and coordinates, or using the map as a sprite sheet, or using CSS background-postion, but I can't find a way to implement this on clicking the button.
Ideally I'd like to achieve this with just CSS because there are going to be quite a few pages linking to this image.
Here is a small guide of what I'm tring to achieve.
Image showing how this works
<style>
.map-one {
background: url('map.jpg');
background-position: center bottom;
height: 300px;
width: 300px;
}
</style>
<button><a class="map-one" href="map.jpg">Click</a></button>
This is an exmaple of some code I've tried, which is obviously wrong, but I don't know how to apply the css style to the image when clicking on the link.
Well it doesn't work with just pure css, you have to pass some parameters to your new window.
So i will assume that you pass an X and Y coordinate to the new window and you have that available on your new page.
First you need to wrap the "Map" to give it a viewport. If nothing else is on the page you can theoretically use body:
<div id="mapviewport">
<div id="map">
</div>
</div>
So if you want the user to be able to explore the map you can use overflow: auto on the viewport, otherwise use overflow: hidden.
The map container gets the width/height of the map. The map is provided via background-image on the map-container.
Now to scroll to the right position, use .scrollTop and .scrollLeft on the mapViewport to scroll the map to the right spot.
You will need to calibrate the values until you have achieved the exact area you want, but the code will be pretty much like this:
Main page
<a href="map.html" target="_blank"><button> <!-- Map page path -->
CLICK ME!
</button></a>
Map page
<style>
div.map {
background-image: url('map.png'); /* image file path */
background-position: 70px 90px; /* image position */
width: 200px; /* image size */
height: 200px;
}
</style>
<div class="map"></div>
On my website's homepage there's a big picture which take 100% of the width and 60% of the height (it's a div with a css background-picture not an tag).
Over this picture, there's is a black transparent div (mainFormContainer) with some form input.
Two of those inputs are address field which are bind to Google Place autocomplete.
Here is the HTML code
<div id="titleContainer" class="splash-container" style="position: relative;" >
<div id="mapContainer" style="width: 100%; position: absolute;top: 0;"></div>
<div id="mainFormContainer" class="splash-bottom">
<form></form>
</div>
</div>
Basically what I did is that when an address is filled by clicking on an autocomplete suggestion (event place_changed in javascript) I initialize & display the google map with a marker on the location.
It works fine and looks great but the problem is that the mainFormContainer is over the Google logo of the google Maps (bottom left corner) and over the map's data (bottom right corner).
Since the div is transparent background-color: rgba(0, 0, 0, 0.6); the bottom data is not hidden and I used this solution (Responding to links under an overlay div) to make the below link clickable.
However, because my div is not transparent, this data is less visible and I'm not sure if it'll be a problem.
I would like to know if there is a solution to add some padding to the google logo & the bottom right data of the map ?
I've seen that you can do it on ios (https://developers.google.com/maps/documentation/ios/map#map_padding) but I didn't found anything equivalent for the javascript API
The only solution I could find was to add some invisible div as map controls to add padding but it doesn't work on the bottom data.
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(createDummyDiv('100%', '20%'));
But since it add a div in the google maps, I tried the following code :
map.controls[google.maps.ControlPosition.BOTTOM_CENTER].push(cloneSearchBar());
function cloneSearchBar()
{
var clone = $('#mainFormContainer').clone(true);
clone.css('width', '100%');
clone.css('height', $('#mainFormContainer').height());
console.log(clone[0]);
return clone[0];
}
This trick gave me numerous new problem :
The Google Place autocomplete doesn't work (Autocomplete suggestion doesn't show at all)
The design for the font are herited from the maps and not my CSS
I have a field input with a datepicker that doesn't work as expected. The datepicker appear but when I click on a date, it doesn't fill the input.
So I gave up on this solution.
These elements have a common property, they are placed via CSS at: bottom: 0px;
You may use this to create a selector:
#mapContainer div[style*="bottom: 0px"]
to apply the padding you may use a transparent border at the bottom:
#mapContainer div[style*="bottom: 0px"]{
border-bottom:50px solid rgba(0,0,0,0);
}
Demo: http://jsfiddle.net/doktormolle/m2rumozm/
But I'm not sure if it's a good approach(the API may change), you better try your final attempt(use the form as map-control). The issues #1 + #3 probably may be fixed when you add the original #mainFormContainer instead of a clone(at least an autocomplete works without problems as a control, I've added an autocomplete to the fiddle to demonstrate it). Issue #2 should be solvable via CSS.
I have a set of data being displayed as a tree by the help of jstree plugin and jquery.
The data shows up perfectly in the tree structure. On expanding the last node in the tree the scrollbar appears on the right side of the div block.
Problem:
However if I navigate within the tree with the mouse over the scrollbar, the scrollbar keeps on scrolling down and does not go up.
I am at wits end what could the reason be. I am using a Mozilla Firefox browser.
Please help.
Sample Code below:
css:
.myScrollableBlock {
display: block;
height: 170px;
overflow: auto;
}
.jsp:
<div id="myTreeDiv" class="myScrollableBlock">
</div>
.js:
$('div#myTreeDiv').jstree({
// jsTree plugins
...
...
...
});
How to Solve
You just have to create another div, before the div where you instantiate the jstree, and add the class="myScrollableBlock" at the outer div. Like this:
<div class="myScrollableBlock">
<div id="myTreeDiv"></div>
</div>
Explanation
When you dinamically create the jstree, calling the jquery function
$('div#myTreeDiv').jstree({...});
It overlaps any the static css style specified before (class="myScrollableBlock" in your case).
You can make a quick check this way:
<div style="padding: 20px 20px; overflow: auto; height:170px;">
<div id="myTreeDiv"></div>
</div>
Why CSS is overlapped by JS?
When loading an HTML file, the browser executes the JS scripts after the DOM and the CSS files are built. Overlapping anything that has been done before.
Image source: https://www.sitepoint.com/optimizing-critical-rendering-path/
I am trying to make a DHTML window on my website and I can actually get it to popup for me. The problem I am having with it is when it pops up it moves the text around on the page. I have seen examples of DHTML popups where this doesn't occur for instance here: http://dhtmlpopups.webarticles.org/basics.php or here: http://www.php-development.ru/javascripts/popup-window.php
I cant figure out what I am doing wrong the div tag for my popup looks like this
<div id="loginPopup" style="position: relative; display:none; z-index: 500;"><div class="closeButton" onClick="javascript:document.getElementById('loginPopup').style.display = 'none';"></div></div>
My site also use a template and css that I got off the net, could that be the problem? I am at a loss for what to do to correct this, any help would be awesome.
Thanks!
You want to position the div as 'absolute' not 'relative.' I would then use the 'top' and 'left' attributes to position the window.
div.loginPopup {
position:aboslute;
top:50px;
left: 50px;
}
use absolute positioning if you don't want it to move your other elements.