Map Informations with fadeIn and fadeOut - javascript

I have a map with some pinpoints that, if you click on them show some information. The plan was, that I can click a Icon and it shows a div, if I now click the same icon the div will disapear.
As long as i got show() it works but if I put in fadeIn() it reapears on the second click.
Here my script so far
<script type="text/javascript">
jQuery(document).ready(function() {
$(".icon-location").on('click', function(event){
$('[id^="ort-box-"]').fadeOut('slow');
});
var mouseX;
var mouseY;
$(document).ready(function(e) {
mouseX = e.pageX;
mouseY = e.pageY;
});
$(".icon-location").on('click', function(event){
var currentId = $(this).attr('id');
$("#ort-box-"+currentId).show().css({position:"absolute", top:event.pageY, left: event.pageX, "z-index":"998"});
});
});
</script>
EDIT:
Thanks to Max I got something startet but there is some logic mistake I must have made.
$(".icon-location").on('click', function(event){
$('[id^="ort-box-"]').fadeOut('slow');
if(!$(this).hasClass('ortActive')){
var currentId = $(this).attr('id');
$("#ort-box-"+currentId).fadeIn('slow').css({position:"absolute", top:event.pageY, left: event.pageX, "z-index":"998"});
$(this).addClass('ortActive');
}else {
$(this).removeClass('ortActive');
}
});

You're attaching 2 eventhandlers on the same DOM element.
So if you click on it, both handlers will fire the event and both functions will be called.
Maybe use something like
$(this).addClass('active');
if you trigger the event for the first time, check when you press again with
if($(this).hasClass('active')){ ...
$(this).removeClass('active');
}
This way you can be sure, that you can trigger only the wanted parts of the event handlers.

Related

How to show toolbar ( and hide current ) when click on the next item?

how to show toolbar (and hide current) when i click on next similar element? in my code, when i click on next similar element, toolbar doesn't disappear, he disappears only if i firsly click on body and then on element, how to remove toolbar without clicking to body to show next toolbar? thx!
http://jsfiddle.net/wwL8fgr1/1/
$(".element").on('mouseup', function(e){
$('[el-button]').click(function(e){
e.preventDefault();
});
var toolbar = $('<div class="dm-popover"></div>');
if ( !$('.dm-popover').hasClass('in') ) {
setTimeout(function(){
toolbar.addClass('in');
},100);
$('body').prepend(toolbar);
}
toolbar.addClass('dm-link-frontend-control-top');
toolbar.css({
left: $(this).offset().left,
top: $(this).offset().top - toolbar.height() - 10
});
setTimeout(function(){
$('body').on('mouseup', function(e){
if($(e.target).closest(toolbar).length == 0){
$('body').unbind('click', arguments.callee);
toolbar.removeClass('in');
toolbar.remove();
}
});
}, 100);
e.stopPropagation();
});
You can try this
$(".element").on('mouseup', function(e){
$('[el-button]').click(function(e){
e.preventDefault();
});
if ( !$('.dm-popover').hasClass('in') )
{
var toolbar = $('<div class="dm-popover"></div>');
setTimeout(function(){
toolbar.addClass('in');
},100);
$('body').prepend(toolbar);
}
else
{
var toolbar = $('.dm-popover');
}
toolbar.addClass('dm-link-frontend-control-top');
toolbar.css({
left: $(this).offset().left,
top: $(this).offset().top - toolbar.height() - 10
});
setTimeout(function(){
$('body').on('mouseup', function(e){
if($(e.target).closest(toolbar).length == 0){
$('body').unbind('click', arguments.callee);
toolbar.removeClass('in');
toolbar.remove();
}
});
}, 100);
e.stopPropagation();
});
See the JSFiddle http://jsfiddle.net/wwL8fgr1/3/
The code responsible for removing the toolbar is here:
$('body').on('mouseup', function(e){
if($(e.target).closest(toolbar).length == 0){
$('body').unbind('click', arguments.callee);
toolbar.removeClass('in');
toolbar.remove();
}
});
Note this registers a mouseup handler on body. That's why you need to click on body to remove the toolbar. You can attach this handler to the second element, if that's what you expect.
EDIT
My guess is that you wanted to achieve something like in this fiddle. Note that is is suitable for 2 elements only, if you need more similar elements, you'd probably need to make a function to generate id's for you instead of storing them in data- attributes.
My opinion:
Your code seems overly complex - you're using timeouts, swapping css, mouseup instead of click, creating div elements on each click, preventing handler's propagation... Try to make it simpler by removing unnecessary stuff.

Cannot bind event to a dom element

I'm trying to make a draggable div. I wrote some code to intercept the events with this html:
<div class="draggable">
<iframe id="frame" src="http://www.wikipedia.org"></iframe>
</div>
Here's the js:
$(".draggable").bind("mousedown", function(e){
e.preventDefault();
console.log(e);
$(".draggable").bind("mousemove",function(e){
var x = e.pageX;
var y = e.pageY;
$("#draggable").css({top: y, left: x});
});
});
$(".draggable").bind("mouseup", function(e){
e.preventDefault();
$(".draggable").unbind("mousemove");
});
$(".draggable").bind("touchstart touchmove", function(e) {
e.preventDefault();
var orig = e.originalEvent;
var x = orig.changedTouches[0].pageX;
var y = orig.changedTouches[0].pageY;
// Move a div with id "rect"
$(".draggable").css({top: y, left: x});
});
Here's a jsfiddle: http://jsfiddle.net/xbv3opd7/34/
The issue is that the element does not seem to intercept the events. The code works if I bind the event to the document: http://jsfiddle.net/xbv3opd7/35/
Where am I wrong?
Yea, because you'll first need to add jQuery-UI to your page.
You can download it here: http://jqueryui.com/download/
Then you need to make it .draggable(), by doing this:
$(".draggable").draggable();
Let me know how that works for you.

Adding New Element during `mousedown` event prevent triggering `click` event?

I am working with jquery events and I am adding a new element at the time of mousedown at the position of the mouse pointer and after adding the element the binded click event is not triggered.
Any suggestion is appreciable.
Thanks in advance.
Madhu
Code:
<div style="border:1px solid">Click</div>
<span></span>
<div class="vis" style="display:none">Hello</div>
<script>
var visualEle = $('div.vis');
visualEle.css({border:"1px solid"});
$('a').on("click", function (e) { e.preventDefault();});
$('div').on("mousedown", mDown);
$('div').on("mouseup",mUp);
function mDown(e) {
e.preventDefault();
visualEle.css({ left: 100, top: 0, display: "block" });
}
function mUp(e) {
e.preventDefault();
$('span').append('mouse up triggerd<br/>');
return false;
}
$('p').on("click",dClick);
function dClick(e) {
$('span').append('double click triggerd<br/>');
}
</script>
In the above code the click event is not triggered after the mousedown is completed.
according to this document
The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released
in your case mouse point is over when mousedown happen but after that visualDiv moves under and mouse is released on this element.
possible solution I can think of thanks to #ArunPJohny is use $(this).trigger("click");
$('p').on("mousedown", function (e) {
_x = e.pageX;
_y = e.pageY;
visualDiv.css({
left: _x,
top: _y
});
$(this).trigger("click");
});
$('p').on("click", function (e) {
console.log(e.target)
});
Demo: http://jsfiddle.net/c5CRd/

How to trigger the '.click' event more than once?

$('document').ready(function() {
$('.button').click(function() {
$('img').animate({left: "+80px"}, 2000);
});
});
So, I'm a bit of a newbie to jQuery and stuff. All I want to do is make an image move to the right every time I click a button. When I run it, it works the first time, but when I click the button again, it just stays still.
I was wondering how I could trigger the .click event multiple times.
PS: If it's worth knowing, the button I mention here is actually a <div>. I couldn't get it to work with a <button>.
Try +=:
$('img').animate({left: "+=80px"}, 2000);
try the on event:
var doc = $(document);
doc.ready(function() {
doc.on('click', '.button', function() {
var imgElem = $('img');
var imgLeft = parseInt(imgElem.css('left'));
var distance = 80;
var newDistance = imgLeft + distance;
$('img').animate({left: newDistance+'px'}, 2000);
});
});
Edit: I changed the code after "remembering" how animate works
$(document).ready(function() {
$('.button').unbind('click').click(function() {
$('img').animate({left: "+80px"}, 2000);
return false;
});
});
I must works.

.on event keeps getting fired over and over again

I'm trying to setup an event where it fires after my element is opened. So I have a tooltip and I have a click event which shows the tooltip. Then when that happens I setup a document click event that gets fired so if the user clicks anywhere on the stage it removes all tooltips. But what's happening is it gets called before the tooltip even gets a chance to show. So it's firing the document event over and over again.
$('.container img').popover({placement:'top', trigger:'manual', animation:true})
.click(function(evt){
evt.preventDefault();
el = $(this);
if(el.hasClass('active')){
el.popover('hide');
}else{
clearDocumentEvent();
el.popover('show');
$(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(){
hideAllTooltips();
});
}
el.toggleClass('active');
})
var hideAllTooltips = function(){
$('.container img').popover('hide');
$('.container img').removeClass('active');
}
var clearDocumentEvent = function(){
$(document).off('click.tooltip touchstart.tooltip');
};
The problem stems from event bubbling. You can verify this by doing the following test:
$(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(){
//hideAllTooltips();
console.log($(this)); // will return .container, body, html
});
Try using event.stopPropogation():
$(document).on('click.tooltip touchstart.tooltip', ':not(.container img)', function(e){
e.stopPropagation();
hideAllTooltips();
});
DEMO:
http://jsfiddle.net/dirtyd77/uPHk6/8/
Side note:
I recommend removing .tooltip from the on function like
$(document).on('click touchstart', ':not(.container img)', function(){
e.stopPropagation();
hideAllTooltips();
});

Categories

Resources