I have an openlayers map and I have positioned a div to sit inside/over the map component.
This works fine, however when dragging the map, if the mouse moves through/over the div the drag action is terminated.
How can I avoid the drag action from terminating?
thanks, p.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
</head>
<body>
<div id="map" style="margin:0px; width:300px; height:200px;"></div>
<div id="overlay" style="position:absolute; width:100px; height:75px; border:1px solid red; background-color:white; z-index:5000; text-align:center;">I want to drag through this</div>
<script type="text/javascript">
// create map
var map = new OpenLayers.Map("map", {"maxResolution":0.703125});
map.addLayers([new OpenLayers.Layer.WMS("World Map", "http://labs.metacarta.com/wms-c/Basic.py?", {layers:"basic", format:"image/png"})]);
map.zoomToMaxExtent();
// put div over map
Position.clone($("map"), $("overlay"), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
</script>
</body>
</html>
EDIT: solution using accepted answer:
<div class="mapDragThrough">some content which gets positioned over the map</div>
initialise: function()
{
this.map.events.register("movestart", this, this.applyDragThrough);
this.map.events.register("moveend", this, this.applyDragThrough);
},
applyDragThrough: function(event)
{
var elements = Element.select(document.body, ".mapDragThrough");
var value = this.map.dragging ? "none" : "auto";
elements.invoke("setStyle", {"pointerEvents":value});
},
You can set pointer-events css attributes of the overlay DIV to none.
This causes the element not to receive mouse events at all, allowing the map dragging to continue uninterrupted.
Here's a working example:
<html>
<head>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js"></script>
</head>
<body>
<div id="map" style="margin:0px; width:300px; height:200px;"></div>
<div id="overlay" style="position:absolute; width:100px; height:75px; border:1px solid red; background-color:white; z-index:5000; text-align:center;">I want to drag through this</div>
<script type="text/javascript">
// create map
var map = new OpenLayers.Map("map", {"maxResolution":0.703125});
map.addLayers([new OpenLayers.Layer.WMS("World Map", "http://labs.metacarta.com/wms-c/Basic.py?", {layers:"basic", format:"image/png"})]);
map.zoomToMaxExtent();
// put div over map
Position.clone($("map"), $("overlay").setStyle({'pointerEvents': 'none'}), {offsetLeft:100, offsetTop:62.5, setWidth:false, setHeight:false});
</script>
</body>
</html>
A possible solution could be to listen to hover event with jQuery and activate/deactivate Navigation control(or you probably are using MouseDefaults which you shouldn't) accordingly. The code should look something like this:
var nav = map.getControlsByClass("OpenLayers.Control.Navigation")[0];
$("#your-overlay-div").hover(function(){
nav.deactivate();
},function(){
nav.activate();
});
Related
I have two following div elements:
<div class='staticMap'></div>
<div class='geolocation-common-map'></div>
The div called 'geolocation-common-map' is removed using jQuery when the page is loaded. I would like to know how can I load this div again after the div 'staticMap' is clicked. So far I have following jQuery, but I need to replace .show() function.
$('.geolocation-common-map').remove();
$('.staticMap').on("click", function(event) {
$('.geolocation-common-map').show();
$('.staticMap').remove();
event.preventDefault();
});
Any ideas how to do this?
Thank you in advance.
According to detach documentation:
The .detach() method is the same as .remove(), except that .detach() keeps all jQuery data associated with the removed elements. This method is useful when removed elements are to be reinserted into the DOM at a later time.
You can use it as follow:
var dv_geolocation_common_map = $( ".geolocation-common-map" ).detach();
var dv_staticMap = $('.staticMap');
$('.staticMap').on("click", function(event) {
dv_geolocation_common_map.insertAfter(dv_staticMap)
dv_staticMap.detach();
event.preventDefault();
});
.staticMap{
width:100px;
height:100px;
background-color:green;
}
.geolocation-common-map{
width:100px;
height:100px;
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='staticMap'></div>
<div class='geolocation-common-map'></div>
Instead of remove(), try toggle():
<div class='staticMap'></div>
<div class='geolocation-common-map'></div>
<script>
$(document).ready(function() {
$('.geolocation-common-map').hide();
$('.staticMap').on("click", function (event) {
$('.geolocation-common-map').toggle();
});
});
</script>
<!DOCTYPE html>
<html>
<head>
<title>Try jQuery Online</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#geolocation').hide();
$("#staticMap").click(function(){
$('#geolocation').show();
});
});
</script>
<style>
.selected {
color:red;
}
.highlight {
background:yellow;
}
</style>
</head>
<body>
<div id="staticMap" class='staticMap selected'>Static Map</div>
<div id="geolocation" class='geolocation-common-map highlight'>Geolocation Map</div>
</body>
</html>
Adding id to your your static div or changing the id to class in jquery will do your work.you are using staticMap as id but it is not defined in div.
When I click on first time flip, it shows panel, then I click on panel, it will shows the sub-panel.
But when I click multiple times on flip, and then click single time on panel, then it works wrongly as the sub-panel shows and hides multiple times for single click.
What's the problem?
My code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#flip").click(function(){
$('#panel').slideToggle("slow",function(){
$('#panel').click(function(){
$('#subpanel').slideToggle("slow");
});
});
});
});
</script>
<style>
#panel,#flip,#subpanel
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel,#subpanel
{
padding:50px;
display:none;
}
</style>
<style>
</style>
</head>
<body>
<div id="flip">Click to slide the panel down or up</div>
<div id="panel">Hello world!</div>
<div id="subpanel" style="display:none;">hello </div>
</body>
</html>
Try Moving the .click on #panel out of the click handler for #flip. Everytime you click flip you're readding the click handler for panel.
I am new to Tweenmax animation and i am trying to animate an id selector and unfortunately nothing is happening. both selector and content do nothing. Some one help me out, here is the code.
<!DOCTYPE html>
<html>
<head>
<title>my first tween</title>
<style>
body {
background-color:silver;
}
#sample {
width: 402px;
height: 60px;
background-color:teal;
padding: 8px;
}
</style>
<script type="text/javascript" src="jquery.gsap.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.6/TweenMax.min.js">/script>
</head>
<body>
<div id="sample">
<!-- Some content -->
</div>
</body>
</html>
And here is the js
var drew = document.getElementById("sample"); //or use jQuery's $("#sample")
TweenLite.to(sample, 1.5, {width:100});
<script>
$(function(){
TweenLite.to($("#sample"), 1.5, {width:100});
});
</script>
use
var drew = document.getElementById("sample"); //or use jQuery's $("#sample")
TweenLite.to(drew , 1.5, {width:100});
you put sample instead of drew.
Hello I am trying to create sliding out tabs on this website: http://imaginationmuzic.com/
I am referring to the red 'Contact Us' and blue 'Twitter' tabs at the left and right of the site.
Currently the Contact Us tab opens up in a top to down motion; I would like it to open up from left to right like a sliding out tab.
Here is the code I used in the header:
$(document).ready(function(){
$(".btn-slide2").click(function(){
$("#panel2").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
I also would like the opposite to be done for the Twitter tab (have it open left to right).
Any help would be appreciated.
Some crude js code I made to demonstrate.
<!DOCTYPE HTML>
<html>
<head>
<!--Add style sheet-->
<link rel="stylesheet" type="text/css" href="soc.css">
<!--Add jquery-->
<script src="jquery-1.10.2.js">
</script>
<!--Add script for this page-->
<script src="soj.js">
</script>
</head>
<body>
<div id="container">
<div id="panel"> </div>
<div id="contact"> </div>
</div>
</body>
<html>
-------------css----------
#panel{
height:500px;
width:200px;
background-color:#EE4488;
}
#contact{
position:relative;
top:-500px;
left:200px;
width:10px;
height:50px;
background-color:#22EEFF;
}
#container{
position:relative;
left:-200px;
}
------------JS---------
$(document).ready(function(){
var pos='in';
$("#contact").click(function(){
if(pos=='in'){
$("#container").animate({left:'0px'
});
pos='out';
}
else
{
$("#container").animate({left:'-200px'
});
pos='in';
}
});
});
I have a problem with flip effect on jquery plugin.When the image rotates it does not rotate correctly.I dont know why but i spent hours and no solution please help.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="Flip-jQuery/jquery-1.9.1.js"></script>
<script src="Flip-jQuery/jquery-ui-1.7.2.custom.min.js"></script>
<script src="Flip-jQuery/jquery.flip.min.js"></script>
<script src="Flip-jQuery/jquery.flip.js"></script>
<title>Untitled Document</title>
<script type="text/javascript">
$(document).ready(function(){
$("#box1").on('mouseover',function(){
$(".flip").flip({
direction:'lr',
content:'hello',
color:'red'
});
})
$('.revert').on('click',function(){
$('.flip').revertFlip();
})
});
</script>
#main{
border:1px solid red;
width:500px;
height:auto;
position:absolute;
}
#box1, #box2{
border:2px solid black;
width:100px;
height:100px;
margin:10px;
cursor:pointer;
}
</style>
<div id='main'>
<div id='box1' class='flip'>
box1
</div>
<div id='box2'>
box2
</div>
<a style=" float:right;" href="#" class="revert">Click to revert</a>
</div>
Here is the whole code.I have tried anything but nothing.
Thanks in advance.
Try this
$(document).ready(function(){
$("#box1").on('mouseover',function(){
$(".side2").flip({
direction:'lr', //in the flip API direction seems to come first in every example
content:'hello',
color:'red'
});
})
});
You also have a syntax error in your HTML:
<div id='main'>
<div id='box1' class='side1'"> <!-- HERE remove that double quote -->
box1
</div>
<div id='box2' class='side2'>
box2
</div>
</div>
You have included the flip.js plugin twice in your HTML header.
Check this thing i get what the problem was. Basically you are triggering twice the mouse over event JavaScript/jQuery: event fired twice