I'm using Mapbox with wordpress.
I see that the popup by default has anchor position which generates css.
I can't manage to center the popup on click : for example, some of the popup are truncated when i open it because the map does'nt center on it.
I tried all the solutions i found here, none of them work. I'm not using Json but wordpress loop to display markers and put content in popups. I find no solutions for anything else than json .
So i just want to know if it's possible to entirely disable the position of the popup so that i can put it always on the map corner, whatever the marker I click..
EDIT
Finally I just changed some css to make the popup stick to the left of the map: I disabled the anchor default position with transform:none, I place it in the corner of the map container with top and left..And then I disabled the arrow around the popup.
.mapboxgl-popup{
transform:none !important;
top: 15%;
left: 10px;
}
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-center .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-tip,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-tip{
display:none !important;
}
use this example from officail map box example :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Display a popup</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.52.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v9',
center: [-96, 37.8],
zoom: 3
});
var popup = new mapboxgl.Popup({closeOnClick: false})
.setLngLat([-96, 37.8])
.setHTML('<h1>Hello World!</h1>')
.addTo(map);
</script>
</body>
</html>
and you can see the example result on the below link :
https://www.mapbox.com/mapbox-gl-js/example/popup/
Related
I have a problem in pickadate calender. I found an issue in pickadate at end of the page please go through the attachment . I have to open the pickadate calendar top of the input field while the input field at the end of the browser.
I have tried below code:
$('#description_award').pickadate({
format: 'yyyy-mm-dd',
formatSubmit: 'mm/dd/yyyy',
min: scriptDate,
max: maxDate,
drops: "up"
});
Specify the root for the picker by using the container-option i.e.: container: '#my-root'. You can put that root element anywhere. And then you can target the picker with css. for example #my-root .picker__holder { bottom:0; } would make it appear above the root (because it's absolutely positioned)
jQuery(document).ready(function(){
jQuery('.datepicker').pickadate({container:"#my-root"});
});
html { padding-top: 150px; /* just for stack-overflow */ }
#my-root { outline: 1px solid red; /* just a visual clue */ }
#my-root .picker__holder { bottom: 0; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/picker.date.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/classic.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/pickadate.js/3.5.6/compressed/themes/classic.date.css" rel="stylesheet"/>
<div id="my-root">
<!-- datepicker will appear where this element is -->
</div>
<input class="datepicker" placeholder="clickme">
I have an accordion menu that I have tweaked to suit my needs. My last stumbling block is that I have an image (see attached image) of a FedEx Courier that I need to lay on top of the menu and yet still allow users to click through it to activate (access) the accordion menu. The image is a separate image that is set to the desired alpha as created in Photoshop. The file is merely a snapshot of how it would look if it was the way I wanted it.
If this is even possible, what code would I use and exactly where would I place it? If in the CSS file, where does it go and between which lines?
Original full size Image file
You can apply the css:
pointer-events: none;
to the image above the links.
See fiddle https://jsfiddle.net/4zgcrkyz/
pointer-events: none; is a suitable solution if you do not need to care about IE < 11. More info on compatibility here.
Alternatively you can use elementFromPoint() which has compatibility IE > 5.5
The following trick allow you to select under your cover image without using pointer-events: none;
https://jsbin.com/tuhotagize/edit?html,output
Explanation:
At click on cover image.
Hide cover image temporary.
Get mouse coordinates.
Get HTML element under that mouse coordinates (so you know what under the cover).
Trigger click event on that HTML element.
Show cover image again.
Another alternative solution to your problem, which does not include any JS is:
Trim your image in PhotoShop as should appear inside the menu. Use CSS background-image property on it
Use the courier FedEx image only as CSS background-image the body of your page.
You can achieve the same visual effect using only CSS.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<style>
img {
position: absolute;
top: 0;
left: 0;
opacity: 0.4;
}
a {
display: block;
width: 300px;
height: 20px;
background-color: greenyellow;
}
a:hover {
background-color: #FF0000;
}
</style>
<script>
window.app = {
show: function () {
document.getElementById('cover').style.display = '';
},
hide: function () {
document.getElementById('cover').style.display = 'none';
},
event: null,
start: function () {
document.getElementById('cover').addEventListener('click', function (event) {
this.hide();
this.event = event;
var target = document.elementFromPoint(event.pageX, event.pageY);
this.show();
target.click();
}.bind(this));
var links = document.querySelectorAll('a');
for (var i = 0, len = links.length; i < len; i++) {
links[i].addEventListener('click', function (event) {
alert('click on ' + event.target.id);
}.bind(this));
}
}
};
</script>
</head>
<body onload="window.app.start();">
<img id="cover" src="http://placehold.it/200x200" />
<a id="a1">link</a>
<a id="a2">link</a>
<a id="a3">link</a>
<a id="a4">link</a>
<a id="a4">link</a>
<a id="a6">link</a>
</body>
</html>
First of all many thanks for this page, it has been helping me a lot! But at this point I have a question where I cannot find an answer that fits what I want (maybe it cannot be achieved the way I am doing it).
I want to have a link with a static image, and when the user moves the cursor over the link I want an animated gif to play (the anim gif is set to not loop, so it only plays once). And when the user moves out go back to the static image and if the user goes in again, the gif should play again from the beginning.
I am using html5 combined with CSS to create my web (which I am using to learn at the same time). I did programing in the past with C++ and similar, but never on a web context.
So far this is what I tried:
CSS:
.img-acu
{
float: left;
width: 450px;
height: 264px;
background:transparent url("acu.gif") center top no-repeat;
}
.img-acu:hover
{
background-image: url("acusel.gif");
}
HTML:
But nothing at all appears :(
The weird thing is, I used this same example with two static images (png format) and it worked fine, but for some reason with the animated gif it doesn't want to work.
The I tried this:
CSS:
#test
{
width: 450px;
height: 264px;
background-image: url("acu.gif");
background-repeat: no-repeat;
background-position: left;
margin-left: 75px;
}
#test:hover
{
background-image: url("acusel.gif");
}
HTML:
<div id="test"></div>
And that works perfectly, it is just the link doesn't work and when the animated gif reaches the last frame, it never resets (unless I reload the page).
Do you know if there is any way to achieve this properly in HTML5 + CSS? should I use javascript or php?
I would really appreciate any help!
Thanks a lot!!
That can be achieved by use a static image and your gif image(Hey, that how 9gag do it!)
A basic script could be somthing like that:
<img id="myImg" src="staticImg.png" />
<script>
$(function() {
$("#myImg").hover(
function() {
$(this).attr("src", "animatedImg.gif");
},
function() {
$(this).attr("src", "staticImg.jpg");
}
);
});
</script>
Hopefully this simple way can help someone:
<img class="static" src="https://lh4.googleusercontent.com/-gZiu96oTuu4/Uag5oWLQHfI/AAAAAAAABSE/pl1W8n91hH0/w140-h165-no/Homer-Static.png"><img class="active" src="https://lh4.googleusercontent.com/i1RprwcvxhbN2TAMunNxS4RiNVT0DvlD9FNQCvPFuJ0=w140-h165-no">
Then add the following CSS:
.static {
position: absolute;
background: white;
}
.static:hover {
opacity: 0;
}
This should hopefully help some people. I got the code from a codepen and decided some stack overflow users may find it helpful. If you would like to view the original codepen, visit here: CodePen
The approach you took did not work because CSS will not change the background on < a >. Solving this can be done entirely with vanilla JS + HTML. The trick is to place:
<div class="img-acu">
inside of:
(insert here)
All that's left is to have CSS target the div. That way, you can set the static background, which then changes on :hover
Here's a fiddle showing this in action (or you can fiddle with this: https://jsfiddle.net/lyfthis/yfmhd1xL/):
.img-acu
{
float: left;
width: 250px;
height: 132px;
background:transparent url("https://i.imgur.com/7r91PY3.jpeg") center top no-repeat;
background-size: 125%;
}
.img-acu:hover
{
background-image: url("https://media.giphy.com/media/QMkPpxPDYY0fu/giphy.gif");
}
<!-- Don't do this:
-->
<div>
<div>Click on image below to go to link:</div>
<a href="https://www.google.com" title="ACU Project link">
<div class="img-acu"></div>
</a>
</div>
Try this if you are OK to use canvas:
<!DOCTYPE html>
<html>
<head>
<style>
.wrapper {position:absolute; z-index:2;width:400px;height:328px;background-color: transparent;}
.canvas {position:absolute;z-index:1;}
.gif {position:absolute;z-index:0;}
.hide {display:none;}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script>
window.onload = function() {
var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
var img = document.getElementById("gif");
ctx.drawImage(img, 0, 0);
}
$(document).ready(function() {
$("#wrapper").bind("mouseenter mouseleave", function(e) {
$("#canvas").toggleClass("hide");
});
});
</script>
</head>
<body>
<div>
<img id="gif" class="gif" src="https://www.macobserver.com/imgs/tips/20131206_Pooh_GIF.gif">
<canvas id="canvas" class="canvas" width="400px" height="328px">
Your browser does not support the HTML5 canvas tag.
</canvas>
<div id="wrapper" class="wrapper"></div>
</div>
</body>
</html>
I'm starting to learn the OpenStreetMap / OpenLayers API to put maps in my web app. While I've got to grips with the mapping itself, I've found that the div which contains the map won't stay where I put it. Here's my code so far:
maptest.htm
<html>
<head>
<title>OpenStreetMap Test</title>
<script language="JavaScript" src="/resources/OpenLayers-2.13.1/OpenLayers.js"></script>
<script language="JavaScript" src="/resources/proj4js/lib/proj4js-combined.js"></script>
<script language="JavaScript" src="maptest.js"></script>
</head>
<body onload="init()">
<h2>OpenStreetMap Test</h2>
<div id="map" style="border: 1px solid black; margin-left: auto; margin-right: auto; margin-top: 10%; height: 300px; width:300px;"></div>
</body>
</html>
maptest.js
function init() {
Proj4js.defs["EPSG:27700"] = "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs ";
var EPSG27700 = new OpenLayers.Projection("EPSG:27700");
var EPSG900913 = new OpenLayers.Projection("EPSG:900913");
var map = new OpenLayers.Map("map",{
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher({'ascending':false}),
new OpenLayers.Control.ScaleLine(),
new OpenLayers.Control.KeyboardDefaults()
]});
var OSM = new OpenLayers.Layer.OSM("OpenStreetMap");
var OSMcycle = new OpenLayers.Layer.OSM("OSM Cycle", ['http://a.tile.thunderforest.com/cycle/${z}/${x}/${y}.png',
'http://b.tile.thunderforest.com/cycle/${z}/${x}/${y}.png',
'http://c.tile.thunderforest.com/cycle/${z}/${x}/${y}.png']);
map.addLayers([OSMcycle,OSM]);
var position = new OpenLayers.LonLat(321550,507250).transform(EPSG27700,EPSG900913);
var markers = new OpenLayers.Layer.Markers("Markers");
map.addLayer(markers);
markers.addMarker(new OpenLayers.Marker(position));
var zoom = 13;
map.setCenter(position,zoom);
}
Without the onload="init()" the div is in the centre of the page, horizontally, and a short way down from the top. However, with init() called, the div snaps back to the left-hand side, just below the title. It still has the correct size and the border, so the CSS styling isn't being ignored completely, but I don't understand why it's not staying in position? I've tried putting the CSS into a stylesheet instead of inline, and the same thing happens.
OpenLayers comes with a default stylesheet that contains the following CSS
div.olMap {
margin: 0 !important;
}
This is overriding your inline css margin-right: auto, margin-left: auto, and margin-top: 10%.
You can fix this by applying your preferred styles to the #map selector in an external style sheet (or internal).
#map {
margin-left: auto !important;
margin-right: auto !important;
margin-top: 10% !important;
}
This works because your reference to an ID'ed selector, #map, has a higher priority than the class'ed selector, .olMap.
Here's a jsfiddle of a working solution.
I'm working on a site and wanted to vertically center this rollover image on the Welcome screen. The image is 100% horizontally but vertically its too short, so I was hoping to get equal space on both sides. Can anyone help me? heres a link to the welcome screen:
http://www.gimmicinc.com
Thanks in advance.
yea sorry about that, probably dont need the preload code but here it is just in case:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GiMMiC</title>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
<style type="text/css">
body {
overflow-y:hidden;
}
</style>
</head>
<center>
<body onload="MM_preloadImages('http://i1055.photobucket.com/albums/s519/deepsoulvision/gimmic2000rollover_zps9d73f3a5.jpg')"><img src="http://i1055.photobucket.com/albums/s519/deepsoulvision/gimmic2000main_zpse8da217b.jpg" style="vertical-align:middle" alt="ENTER" name="Image1" width="100%" height="100%" border="0" id="Image1" />
</body>
If you don't need perfect support in IE8, then this would be easy to accomplish by setting the image as a background in CSS and use the background-size property to scale it. For example:
#bg {
display: block;
height: 1000px;
height: 100vh;
width: 100%;
background: url('http://i1055...1.jpg') center center / cover no-repeat;
}
#bg:hover {
background-image: url('http://i1055...rollover.jpg');
}
Then your markup would look something like this:
<a id='bg' href='/home.html'></a>
And if you only need to preload that one image, that can be done easily with a single line of JS:
<script>var img = new Image(); img.src='http://i1055...rollover.jpg';</script>
Or possibly use a grayscale filter in place of the rollover image (http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html)