I created a toggle switch in jQuery. If you click on a marker, a sidebar is sliding inside the screen, and when you click the same marker, it slides back. But, I have multiple markers on my screen, and if you click another marker, the animation continues to slide inside, so the sidebar is getting bigger. What I want is that when you click any marker, that the sidebar is staying the same size, but I cannot achieve it with what I tried myself. The code:
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
if(windowOpen)
{
sidebar.animate({
width: "-=300px"
}, 500, function()
{
console.log('complete');
});
windowOpen = false;
}
else
{
sidebar.animate({
width: "+=300px"
}, 500, function()
{
});
windowOpen = true;
}
});
Can anyone point me in the right direction?
Many thanks!
Looks like you haven't defined windowOpen outside of the eventHandler. Thus, on every click windowOpen is undefined leading to your else code being executed. Try this:
var windowOpen = false;
google.maps.event.addListener(marker, 'click', function() {
// your code
}
Related
In JS I need to make Infowindow on marker close when I make mouse out of it, but infowindow shouldnt dissapear when mouse is over infowindow. Because If there is a scroll in infowindow, user could scroll it (I want to be that).
google.maps.event.addListener(marker, 'mouseover', (function (marker, content, infowindow) {
return function () {
if (content != null && content != "")
{
infowindow.setContent(content);
infowindow.open(map, marker);
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
} else { marker.setAnimation(google.maps.Animation.BOUNCE);
console.log(content);
}
}
};
})(marker, content, infowindow));
google.maps.event.addListener(marker, 'mouseout', (function (marker, infowindow) {
return function () {
infowindow.close(map, marker);
if (marker.getAnimation() !== null) {
marker.setAnimation(null);
}
};
})(marker, infowindow));
Here is a JSBin with a working example. I explain my implementation below.
Move Mouse From Marker to Info Window
Problem: the info window closes immediately when the mouse leaves the marker. This makes it impossible for the user to move the mouse from the marker to the the info window if they want to scroll through any content on the info window.
Solution: create a small delay before closing the info window. This gives the user time to move their mouse from the marker to the info window.
marker.addListener('mouseout', function() {
timeoutID = setTimeout(function() {
if (!mouseOverInfoWindow) {
closeInfoWindow();
}
}, 400);
});
After that delay, if the mouse is not hovering over the the info window, close it. If it is hovering over the info window, don't do anything.
Close Info Window On Mouse Out
If you look at the Events section of the InfoWindow class reference, you'll see that info windows do not have a mouseout event like markers.
So, in order to close the info window when the user's mouse moves away from it, you need to get a reference to the info window element on the DOM and add a mouseout event listener to it.
var infoWindowElement = document.querySelector('.gm-style .gm-style-iw');
infoWindowElement.addEventListener('mouseout', function() {
closeInfoWindow();
mouseOverInfoWindow = false;
});
Keep in mind, you can only add event listeners to the info window DOM element after you have opened it because opening it adds it to the DOM. This is shown by the following code:
function openInfoWindow(marker) {
infoWindow.open(map, marker);
addOpenInfoWindowListeners();
}
I first open the info window (which adds it to the DOM) and then I add the listeners.
Update: Handle multiple markers
Here is an updated JSBin with a map that displays several markers whose info windows have the desired functionality. All I had to do was loop over the data, and for each item, create a marker and event listeners.
markerData.forEach(function(item) {
var marker = new google.maps.Marker({
position: item.position,
map: map
});
addMarkerListeners(marker, item.infoWindowContent);
})
I also updated the addOpenInfoWindowListeners method to:
function addOpenInfoWindowListeners() {
var infoWindowElement = document.querySelector('.gm-style .gm-style-iw').parentNode;
infoWindowElement.addEventListener('mouseleave', function() {
closeInfoWindow();
mouseOverInfoWindow = false;
});
infoWindowElement.addEventListener('mouseenter', function() {
mouseOverInfoWindow = true;
});
}
I now target the parentNode of the .gm-style .gm-style-iw and listen for the mouseleave and mouseenter events (as opposed to mouseout and mouseover). This enables the hovering functionality to work for info windows that don't have content that can be scrolled.
Using jquery plugin with mouse hide and show I am trying to create tool tip.I am facing two problem
Whether my code is correct for mouseout and mouseleave
When I am creating lot of tooltip it was not positioning correctly it was coming down actually it has to come to right side.
I have found so many from stack Overflow but nothing is working out.
Here is the jquery code
$(document).ready(function() {
$(".tooltip").hide();
$("#help").on({
mouseenter: function () {
$("#showtooltip").show();
},
mouseleave: function () {
$("#showtooltip").hide();
}
});
$("#help1").on({
mouseenter: function () {
$("#showtooltip1").show();
},
mouseleave: function () {
$("#showtooltip1").hide();
}
});
$("#help2").on({
mouseenter: function () {
$("#showtooltip2").show();
},
mouseleave: function () {
$("#showtooltip2").hide();
}
});
});
Third mouse over was not working. I am trying to creating I think missed something.
Here is the jsbin Link
Kindly help me
Thanks & Regards
Mahadevan
Just add this css rules to your .tooltip class:
position: absolute;
top: 40px; /* define how much space from tooltip to the top
and this javascript:
$(document).ready(function() {
$(".tooltip").hide();
$("#help").on({
mouseenter: function (e) {
$("#showtooltip").show();
$("#showtooltip").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip").hide();
}
});
$("#help1").on({
mouseenter: function (e) {
$("#showtooltip1").show();
$("#showtooltip1").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip1").hide();
}
});
$("#help2").on({
mouseenter: function (e) {
$("#showtooltip2").show();
$("#showtooltip2").css('left', e.pageX); // added
},
mouseleave: function () {
$("#showtooltip2").hide();
}
});
});
I added only this line in javascript mouseenter function:
$("#showtooltip").css('left', e.pageX);
It sets the tooltip left coordinate, in case you have many items, the tooltip will show exactly beneath the hovered item.
Customization
If you want the tooltip right of the hovered item, you will need to add this css:
var rightMargin = 20; // or whatever fits your needs
$("#showtooltip").css('left', e.pageX + rightMargin);
and change your css top property above.
Update
Since this code of yours is very coupled and you asked for a better solution, here it is jQuery code:
$(document).ready(function() {
$(".tooltip").hide();
$(".help").on({
mouseenter: function (e) {
var tooltip = $(this).next(); tooltip.show();
tooltip.css('left', e.pageX + 20);
},
mouseleave: function () {
$(this).next().hide();
}
});
});
to work this, you gonna have to remove your coupled ids and instead add to every anchor tag class help.
the code simply checks if the user is hovering a link, and if so, then just show the next element after it, which happens to be the tooltip.
Here is a FIDDLE
Cheers
i am currently working with leaflet.
and i am trying to create a popup with with clickable content.
now i found how i can bind popups on click event with content:
marker.on('click', function(e){
marker.bindPopup("<div />").openPopup();
}
and i found out how to create the popup on hover:
marker.on('mouseover', function(e){
e.target.bindPopup("<div />").openPopup();
}});
marker.on('mouseout', function(e){
e.target.closePopup();
}});
now what i cant seem to do is make the popup stay open in order for the user to click on links inside the popup.
i would appreciate any help.
one approach is this http://jsfiddle.net/cxZRM/98/
basically it's adding a timer to your setup and you only close the popup after an arbitrarily long time has passed so as to give the user some time to interact on your div.
marker.on('mouseover', function(e){
e.target.bindPopup("dsdsdsdsd").openPopup();
start = new Date().getTime();
});
marker.on('mouseout', function(e){
var end = new Date().getTime();
var time = end - start;
console.log('Execution time: ' + time);
if(time > 700){
e.target.closePopup();
}
});
a better approach would be to use http://jsfiddle.net/AMsK9/
to determine your mouse position and keep the popup open while the mouse is still within an area around the popup.
I had the same issue, I wanted a different pop up for mouseover and another one for click, and the problem was that when I hovered out the click pop up closed, so what I did was adding a flag:
var modal = true;
function onEachFeature(feature, Polygon)
{
if (feature.properties && feature.properties.popupContent && feature.properties.modal)
{
Polygon.on('mouseover', function (e) {
Polygon.bindPopup(feature.properties.popupContent);
this.openPopup();
modal = false;
});
Polygon.on('mouseout', function (e) {
if(!modal)
this.closePopup();
});
Polygon.on('click', function (e) {
modal = true;
Polygon.bindPopup(feature.properties.modal).openPopup();
});
}
}
I've an area which I'd like to add an CSS animation to when it's clicked, and then bring it back with another animation when it's loading.
I'm using Twitter's Bootstrap's tabs and turned on the "fade" transition between the tabs, but want to specifically animate something inside of those tabs while they're switching. I don't want to mess with the root J.S. code there so I'll just settle with a work around.
Heres my code:
$(".tabit").click(function (){
//Drop Center Icon on click
if ($('.centericon').hasClass('fadeInDown')) {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function(next){
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}
else{
$(".centericon").addClass("fadeOutDown").delay(100).queue(function(next){
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}
});
The .centericon class is repeated, so after 1 click, multiple instances will have the "fadeInDown" class. Works fine when I click one time, but if I click twice, then the .centericon only gets class .fadeOutDown.
$(".tabit").click(function (){
//Scroll to top when navigating through tabs
//Drop Center Icon on click
if ($('.centericon').hasClass('fadeInDown')) {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown");
$(".centericon").delay(100).queue(function() {
$(this).removeClass('fadeOutDown');
$(this).dequeue();
});
$(".centericon").delay(100).removeClass('fadeOutDown').addClass("fadeInDown");
}
else{
$(".centericon").addClass("fadeOutDown");
$(".centericon").delay(100).queue(function() {
$(this).removeClass('fadeOutDown').addClass("fadeInDown");
$(this).dequeue();
});
}
});
Change click to toggle
$(".tabit").toggle(function () {
$(".centericon").removeClass('fadeInDown').addClass("fadeOutDown").delay(100).queue(function (next) {
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
}, function () {
$(".centericon").addClass("fadeOutDown").delay(100).queue(function (next) {
$(this).removeClass("fadeOutDown").addClass("fadeInDown");
});
});
I'm new to Prototype JS (and javascript in general), and I'm trying to make an overlay appear after the user has hovered over an element on the page for half a second. Currently, I'm accomplishing this with:
$$("a.tag").invoke('observe', 'mouseover', function() {
//my code here
});
This code makes the overlay appear when the trigger element is moused over, but how do I add the half second pause?
Do this:
var timerId;
$$("a.tag").invoke('observe', 'mouseover', function() {
timerId = setTimeout(function() {
// code here
}, 500);
});
$$("a.tag").invoke('observe', 'mouseout', function() {
if (timerId) {
cancelTimeout(timerId)
timerId = null;
}
});
I Think you could add a class waitingEndDelay to your element.
Then code your "show function" in order to be executed only if element has no waitingEndDelay class. At the end of the delay remove waitingEndDelay.