I would like to overlay a div(1) with a background image over the top of another div(2) which contains JavaScript (in this case Google maps API v3). Is this possible?
I've tried messing with z-index no luck, and I cannot use absolute positioning as i rely on the div(1) to position other div's.
A brief example can be found here - _
Trying to get the _ speech bubble to overlay the Google map.
Firstly, a code example would be a good idea, because there are a lot of details we need to know. (for example. what other divs rely on div(1)'s position?)
You cannot overlay divs in the box-model or inline(model).
You can try using negative margin to move the div(1) over div(2), but this is not the elegant solution.
You should reconsider using absolute positioning, as it's clearly the preferable solution.
I would suggest placing the div(1) with the background image below a semi-transparent Google maps container, because then you could still have access to the Google Maps Controls. This could be accomplished by using the opacity and z-index CSS properties on both containers.
Here is a JS fiddle with a live demo using the Google Maps API: jsfiddle.net/Xk87Y/
Related
On this link is a very much draft map with photo popups at the orange dots.
https://www.victoriasforestryheritage.org.au/maps/forestlocations/locationtest3/index.html#7/-36.719/146.133
The map is produced from QGIS and with the qgis2web plug in using the Leaflet option.
https://www.qgis.org/en/site/
https://qgis2web-docstests.readthedocs.io/en/testing/
https://leafletjs.com/
The popup should work on hover, which it does. But on first hover the bounding box, if that is the right term, does not expand to surround the photo. With a mouse click it does surround the picture.
Obviously I would like this to come together at hover rather than the process requiring a mouse click after hover.
I have been trying to solve this on the basis that it may be a z-index issue in the leaflet.css file but to no effect. I also thought it may be a maxWidth maxHeight issue but no joy there either.
I obviously need some assistance because my coding knowledge is limited with css and almost non-existent with javascript.
The coding package for the map is available here:
https://drive.google.com/drive/folders/1teRbeTRYjBJzaxNeGoi-90wfiFhO-B8e?usp=sharing
and the leaflet.css file with z-index etc is included.
Any advice that points me in the right direction would be appreciated.
Richard
From what I can see the div below sort of eats into the image above as you scroll down creating what I think is a nice visual.
My only problem is I don't know what the terminology is to search for a tutorial on the process itself.
Does anybody know what search term I would use to find a good tutorial? I have literally tried everything I thought it might be called.
Example on a site where it is used: http://www.anakin.co/en
The term is called parallax scrolling.
The following link is a good tutorial, and explains how to achieve this in just CSS.
http://keithclark.co.uk/articles/pure-css-parallax-websites/.
Regarding the cutout effect I believe that is called clip masking.
The main content is on an overlay. If you look at the code though, in the css you'll see the "clip" property. It's since been deprecated, but it's been replaced by "clip-path". Showing parts of an image is called clipping/Masking and I believe you can find what you're looking for here:
https://css-tricks.com/clipping-masking-css/
EDIT: The background image is using parallax, which gives the background image "motion" when you scroll. But the actual effect of having that background show through is the clipping/masking in the article.
It's called Parallax scrolling http://en.wikipedia.org/wiki/Parallax_scrolling
I am trying to build an example to highlight multiple image map areas on an html page for the iPad. The idea is similar to the magnifier feature that you notice when you tap and hold the mobile safari address bar. You can pan the magnifier around to go to a particular character. I am trying to leverage the same user experience to highlight image map "poly" areas. When I pan the magnifying glass, I want to scroll through the areas by highlighting them and making them active.
I am thinking of using the Jquery Maphighlight plugin alongwith a CSS/JS magnifier sample
http://persistent.info/files/20040508.magnifier/
http://davidlynch.org/projects/maphilight/docs/
The place I'm stuck is the actual scrolling between the areas and highlighting them automatically.
I was wondering if anyone has done something similar to what I'm trying to achieve.
Cheers!
Sameer
I couldn't quite conceptualise what you were wanting, but this may help in any case.
use the pseudo class :active in your css and in the tag add
In this demo I've simply used CSS transform to simulate the zooming, but it could be replaced with whatever you want. I think you will find a pure css option faster then any javascript.
http://jsfiddle.net/thurstanh/QEudm/5/
<body ontouchstart="">
css
img:active {
-webkit-transform:scale(2,2);
}
Okay, so I'm working on a project using JavaScript and the basic UI we want to be a very large background image, and when you select the navigation menu items it propels you to a section on that large image.
I've tried finding documentation on Viewports and trying to figure out how Map applications function but have had very very minimal success.
It would basically be a Google map without the user being able to slide it. How in the world would I begin to approach this?
You can set the background-image property in CSS and use javascript to change the background-position.
The effect I'm looking for is that I have a div that is floating right with a Google map inside it and when the user scrolls down, I want it to be fixed at top:0px. This is basically what Yelp has for the map on their search page. There's been a few questions that are similar that ask about using JQuery to change the class of a div to fixed once the user scrollsdown but with Google Maps, I can't seem to get the effect to work.
The main reason is that Google Maps is using some sort of javascript that is loading after my own javascript that override the position to absolute and I can't change it through Jquery's css method or anything. So I've added a wrapper that is floating but adds a fixed class upon scrolldown. It fixes to the top of 0px fine but because it was floating, once the position become's fixed it jumps to the left and clobbers my other content.
I found a tutorial online, but it might be deprecated now? It wasn't working.
I had the same problem. All you have to do is create a DIV inside another.
Like this:
<div id="outDIV" style="position:fixed; top:0">
<div id="inDIV" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
I know this is way old, but maybe someone else coming along can get some info out of this one.
Yes, you can add another element encasing the map element, but if you want to get around that you can set a listener for a tilesloaded event and then undo what google's done.
In api v3, you can do it like so:
google.maps.event.addListener(myMap, 'tilesloaded', function(){
document.getElementById('map-id').style.position = 'absolute'/'fixed'/'potato'/'whatever';
});
I'm sure there are issues that go with setting a position to a map beyond what google likes, but if you want to keep the number of elements in your document to a minimum (you should really want to), this would be the way to do it.
(edit: adding quotes)
You just needed to pick apart the specifics of what Yelp was doing a little more, I think... their column is floated as well (examine their markup... it's #searchLayoutMapResults), but then inside that, the div #searchLayoutMapResults is the one that gets position: fixed added to it (via the className fixed), so it doesn't change the position of the floated column. So you probably just want an additional wrapper on the map, and add the fixed positioning to that instead of your floated container.
(the markup I found was based on this page)