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.
Related
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>
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.
I'm using Google Maps info window which gets populated with the text from 3 input fields. First input field is TITLE, second ADDRESS (uses standard Google autocomplete) and third DESCRIPTION. So everything looks user friendly I added <br/> between them so each input is shown separated in info window. This is how i did it:
return (name || "") + "<br/>" +
(addressOrCoordinates || "") + "<br/>" +
(additionalDetails || "");
But when address is just little bit longer vertical scroll appears, which is weird because if you write 300 characters in description field, info window doesn't show vertical scroll, it nicely adapts infowindow size...
So i tried removing <br/> and everything works without vertical scroll even if address is miles long. So I thought that <br/> is messing with address, so i tested litlle bit more and it seems address is affected with <br/> if its infront of adress but not if its after...
So it seems if infowindow contains normal text it dosent show verticall scroll even if there is alot of text and even if this text is separated with <br/> but why does verticall scroll apperas when using <br/> infront of the adress? Is there any other way i can make adress input go to new line in infowindow without this verticall scroll appearing?
BTW CSS overflow doesn't work and I'm using API v3
This appears to be one of the craziest bugs I've seen for a long time.
I can't tell you why this happens, but for me it works when I remove the bold marked part(font-family) of the followingCSS:
#mapE { text-align:center; font-family:Arial, Helvetica, sans-serif; color:#333; font-size:14px; overflow:hidden; }
It's not a problem of the width of the font(there e.g. is no problem when I use Verdana, which is much wider than Arial).The API must calculate the size of the infoWindow before it opens, it seems that this is the point where something went wrong when using Arial.
So I would suggest to use another basic windows-font than Arial(Tahoma should be fine, no issue there for me)
So I was in a similar situation as you were. I wanted the content inside my infoWindow to scroll (just Y scroll not X scroll) but I wanted to disable the automatic google API infoWindow scroll because it was covering up my content. Like many people I wrapped my infowindow content in a div and gave it an id #info_window. Then I wanted to make sure that the content had a maxheight and was arranged so that its scroll bar didn't cover the content (and I needed the scroll bar to only scroll vertically, another consideration). Finally, I used one of the answers found here to ensure that only MY scroll bar was showing up not the automatic google one. So my CSS ended up looking like this:
#info_window{
width: 350px;
}
.gm-style .gm-style-iw, .gm-style .gm-style-iw a, .gm-style .gm-style-iw span, .gm-style .gm-style-iw label, .gm-style .gm-style-iw div {
max-height: 280px;
padding: 0px 10px 5px 5px;
overflow-y: scroll;
overflow-x: visible;
}
.gm-style-iw div {
overflow:visible !important;
}
this also works if you add it to your CSS:
.gm-style-iw div {overflow:visible !important;}
depending on the content of your infowindow, it removes the ugly vertical scroll bars completely. It overwrites the computed style provided by the google api.
I have found that adding white-space: nowrap; to the content of the infowindow also seems to solve problems with the scrollbars. Whether this is a viable option of course depends on the actual content, but it might be an option.
The form I am creating for a mobile website shows new fields based on previous selections. i.e. - a user selects and option from a dropdown menu (a date) and then a series of times shows up based on the day selected. The times are not showing until the day is selected.
I have a spinning loading div while the times are loaded in the background via ajax. The problem I am having is that the loading div sits at the top of the page when the 'action' is taking place about three-quarters of the way down. This 'action' part is in the viewport (it's a mobile website) and the loading div is at the top of the page - which is far above the users viewport.
How can I bring the loading div down so that it's always in the current viewport? How can I make the loading div follow the place in the form where the user currently is taking into account scrollbars?
I have been trying to use the vertically centred html/CSS model as described here:
http://www.jakpsatweb.cz/css/css-vertical-center-solution.html
But it is not working and the centre of the page doesn't seem to update at each event when a form element is clicked. I think I need to use the focus or blur event for the form field to update this and reassess, but I don't seem to be able to get it working.
Does anyone have any tips on how to move the loading div to the centre of the current viewport area each time the page increases in length?
If your loading div is designed to be inside the document flow - e.g. a new content block inside the form - it's best to use jQuery to insert the loading div inside the content itself. It will be very difficult to position it pixel-perfect otherwise.
If the loading div is to appear as an overlay to the document then you can use fixed CSS positioning with a high z-index. To center it on all screen resolutions use jQuery and the formula (window.height() - div.height())/2 as the top pixel position. The code will be similar to this answer.
Hope that helps
If you do something like this, and put the div inside your <body> tag, it will stay in the middle of the visible area.
div.loading {
position: fixed;
top: 47%;
left: 47%;
height: 6%;
width: 6%;
z-index: 1000;
}
Another solution is to put it at the end of the container content will be loading into. Just make sure to load the content before it. If you give it a margin:auto; it'll stay right in the middle and keep pushing down.
EDIT: It's also worth noting the answer here. This will prevent covering up something important in a way the user can't fix.
Set your loading div's position to fixed, this will of course cause it to escape from its parent in the DOM structure, you will then need to position it where you want it. Fixed positioning is relative to the visible area of the viewport.
<html>
<head>
<style type="text/css">
#loader {
height: 30px;
position: fixed;
top: 50%;
left: 50%;
background: #ccc;
}
</style>
</head>
<body>
<div id="loader">Loading...</div>
</body>
</html>
This will result in the loader div always being centered on the screen, no matter where the user has scrolled, left/right up/down.
Go to this beta of my new website (link redacted). If you hover over one of the colored squares, a popup box à la Panic's Coda pops up, except there are two problems:
a) The text inside the popup does not show up. It is programmatically set to :) using the following code:
http://grab.by/syM http://grab.by/syM
$('td.middle', this).text(':)');
td.middle is the class of the middle cell
this is a reference to $('.info').each()
Use may want to use an inspector tool like Firebug for Firefox or the one included one in Safari or Google Chrome.
b) The sides are clipped off:
http://grab.by/syE http://grab.by/syE
I think it is due to this:
http://grab.by/syW http://grab.by/syW
For some reason, the sides have computed widths of 1px, as opposed to
.bubbleInfo .popup td.corner {
position: inherit;
height: 15px;
width: 19px;
}
19px as defined in (link redacted)
You can grab a ZIP archive of all the files here (link redacted).
Thanks so much. I know this is a lot to ask.
The width of the container div for the :) table is clipping the sides of the :) table popup. If you edit the width of the .info class up from 32 to something bigger (I did width:80px) you see the whole popup. Alternately, you can change the width (or min-width) of .popup to about 50px, which fixes them without distorting the size of the colored boxes.
As for the :) being missing, I was able to make it appear by setting text-indent:0 in the .middle class. This had no ill effects on FireFox and fixed it in Chrome.