I'm new with Javascript, and I'm developing a webapp. I'm using quojs, a library for tactil gestures, but my problem, I think, comes from my inexperience with Javascript. The app y basically, an images gallery that generates dinamically, and lets you interact with each image. On taphold, an interactive menu merges inside the image. On singleTap it should make 2 different actions depending if we are already in "taphold state" or not. If case is we ARE IN TAPHOLD, it showld ONLY desapear the interactive menu inside the image. Then, on the next singleTap (now WITHOUT TAPHOLD STATE), it showld go inside the image. For this, i'm actually using AJAX. The taphold function is working fine, but the problem is that the tap action, keeps firing no matter what I try to put inside the code to administrate when it must trigger or not.
I know it's a bit difficult to explain and understand, but I couldnt find the solution yet... Here are the files I'm using.
/////////////////////////////////////// TAP.JS ///////////////////////////////////////////////
$(document).ready(function(){
var quojs = $$(document);
isHold = false;
var all_spans = $$('#mainwrapper', 'div.showhide').hide(),
tapToShowImg = false;
var mobileMenu = $$('.footer-container', '#links-fix').hide();
var mainwrapper = $$('#mainwrapper');
var homeimgscont = $$('.homeimgscont');
var environment = $$.environment();
pinchedIn = true;
pinchedOut = false;
bottomMenu = false;
fullScrn = false;
if ($$.isMobile()) {
mobile = false;
if (environment.screen.width < 500) {
$$('.homeimgscont img.image').addClass('mobile');
mobile = true;
}
}else{
mobile = false;
}
/* SINGLE TAP */
$$('.homeimgscont div').on('singleTap', function(f) {
f.cancelBubble = true;
var allimgs =$$('.image');
console.log(f);
switch(isHold){
case true:
f.cancelBubble = true;
switch(fullScrn){
case true:
$$('.imgcont').show();
allimgs.removeClass('hiddenimgs');
break;
}
$$('.image').removeClass('blur').removeClass('blurmobile');
$$('.imgcont').removeClass('fullscrn');
$$('.homeimgscont .image').removeClass('tappedimg');
mobileMenu.hide();
bottomMenu = false;
all_spans.hide();
isHold = false;
break;
case false:
var singleImg = $$(this).children('.image');
var currentImgId = singleImg.attr('id');
$$('.homeimgscont .image').removeClass('tappedimg');
$$(this).children('.image').addClass('tappedimg');
tapToShowImg = true;
f.cancelBubble = true;
if (f.stopPropagation) f.stopPropagation();
$.ajax ({
type: 'POST',
data: {imgid: currentImgId, insingleimg: 'true', user: usr, usrid: usrid},
url: 'http://agus/home/imgtap.php',
success: function(data) {
$('#main').html(data);
}
});
break;
}
});
/* HOLD */
quojs.on('hold', '.homeimgscont .image', function(e) {
var allimgs =$$('.image');
var currentimg = $$(this);
var thisSpan = currentimg.parent().find('.insideimgmenu.showhide');
var showImgMenu = currentimg.parent().find('.imgmenu.showhide');
all_spans.hide();
switch(mobile){
case true:
if (homeimgscont.hasClass('pinchedin')) {
$$('.imgcont').hide();
currentimg.parent('.imgcont').addClass('fullscrn').show();
fullScrn = true;
}
allimgs.removeClass('blurmobile').removeClass('tappedimg');
currentimg.addClass('blurmobile');
isShowing = thisSpan.show(), showImgMenu.show();
break;
case false:
if (environment.screen.width < 500) {
$$('.imgcont').hide();
currentimg.parent('.imgcont').addClass('fullscrn').show();
fullScrn = true;
allimgs.removeClass('blur').removeClass('tappedimg').addClass('hiddenimgs');
currentimg.removeClass('hiddenimgs').addClass('blur');
isShowing = thisSpan.show(), showImgMenu.show();
}else{
allimgs.removeClass('blur').removeClass('tappedimg').addClass('hiddenimgs');
currentimg.removeClass('hiddenimgs').addClass('blur');
isShowing = thisSpan.show(), showImgMenu.show();
}
break;
}
isHold = true;
e.cancelBubble = true;
e.preventDefault();
e.stopPropagation();
});
});
////////////////////////// GALLERY.PHP //////////////////////////////////////////////////
<div id="mainwrapper" class="main wrapper clearfix">
<div id="flat" class="homeimgscont pinchedin">
<div class="imgcont one">
<img src="IMAGE">
<div class="imgmenu showhide animated fadeInWithOpacity" style="display: none;"></div>
<div class="insideimgmenu showhide animated fadeInUp" style="display: none;">
<span class="titleofpublic">Here goes the title of public.</span>
<div class="icons">
<a href="#myModalEgg1" data-toggle="modal" class="eggicon">
<img src="img/egg.png" alt="egg">
</a>
<a href="#myModalOTP1" data-toggle="modal" class="hearticon">
<img src="img/otp.png" alt="otp">
</a>
<a class="fingersicon" onclick="$(this).click(function(){ $(this).children('img').attr('src','img/hand-green.png'); });">
<img src="img/like.png" alt="like">
</a>
<a href="#myModalMsg1" data-toggle="modal" class="plainicon">
<img src="img/paperplane.png" alt="comment">
</a>
</div><!-- .icons -->
<div class="addedby">
<span class="addedby-span-text">Added By</span>
<span class="addedby-span-name">Rama</span>
<div class="addedby-div-img egg" style="background: url('http://imagizer.imageshack.com/100x100f/539/7p8ZeS.jpg') center no-repeat; background-size: cover;"></div>
</div>
</div><!--.insideimgmenu.showhide-->
</div><!--.imgcont-->
<div class="imgcont two">
<img src="IMAGE">
<div class="imgmenu showhide animated fadeInWithOpacity" style="display: none;"></div>
<div class="insideimgmenu showhide animated fadeInUp" style="display: none;">
<span class="titleofpublic">Here goes the title of public.</span>
<div class="icons">
<a href="#myModalEgg2" data-toggle="modal" class="eggicon">
<img src="img/egg.png" alt="egg">
</a>
<a href="#myModalOTP2" data-toggle="modal" class="hearticon">
<img src="img/otp.png" alt="otp">
</a>
<a class="fingersicon" onclick="$(this).click(function(){ $(this).children('img').attr('src','img/hand-green.png'); });">
<img src="img/like.png" alt="like">
</a>
<a href="#myModalMsg2" data-toggle="modal" class="plainicon">
<img src="img/paperplane.png" alt="comment">
</a>
</div><!-- .icons -->
<div class="addedby">
<span class="addedby-span-text">Added By</span>
<span class="addedby-span-name">Rama</span>
<div class="addedby-div-img egg" style="background: url('http://imagizer.imageshack.com/100x100f/539/7p8ZeS.jpg') center no-repeat; background-size: cover;"></div>
</div>
</div><!--.insideimgmenu.showhide-->
</div><!--.imgcont-->
</div><!--#flat.homeimgscont.pinchedin-->
</div><!-- #mainwrapper .main.wrapper.clearfix -->
As I said, the gallery im using is quojs, thats why im using $$ before some functions. For sure i'm making some basic mistakes with the javascript. Thanks every help since now!!!
