How can I use jQuery Mobile to show a gif on touch? - javascript

On a desktop, my code works. I need to adapt it for mobile and am not having any luck. I tried jQuery mobile tap and taphold without any luck.
I would like the user to be able to tap anywhere on the screen and show a hidden image. I actually have about 20 divs,each containing an image, but I want to only show one at a time. For desktop, I am using keyup/keydown and it works perfectly.
JSFiddle
<div class="photo" data-key="1">
<img class="item" data-id="image">
</div>
$(window).on('keydown', function(e) {
$(data-key=" ' + e.which + ' ").show();

SOLVED! I'm new to programming, so I don't know if this is the smartest way to go about it and would love feedback for a smarter solution. Thanks, #Sushil for suggesting touchstart. And thanks, #ezanker. Your code worked perfectly in the fiddle. I was certainly implementing something wrong on my end. Here's what I did:
var tapStart = function() {
var randomGfy = Math.floor(Math.random() * $('.gfy').length);
$('.gfy').hide().eq(randomGfy).show();
}
var tapEnd = function() {
$(randomGfy).hide();
}
var init = function() {
$(window).bind('touchstart',tapStart).bind('touchend',tapEnd);
}
init();

Related

HTML buttons work fine on desktop do not work on mobile

I have made a website and while the desktop version is finished i am still fighting with the mobile one. So anyways, every single button that uses js to do its thing doesnt work, while normal buttons with links work just fine. The issue also does not appear on chrome using the 'toggle device toolbar' option, which should technically simulate touch events.
This is how a sample button looks like:
<a class="button" id="upload-media-button">Upload</a>
And this is the js that uses it:
$(document).ready(function() {
$('#upload-media-button').on('click touchstart', function(){
dropperForm = document.getElementById("upload-form");
dropperForm.className = '';
isUploadFormVisible = 1;
$("body").addClass("modal-open");
});
}
Can't say exactly why this is happening.
But this may be case. We should disable the default behavior of browser.
As it is an anchor tag, browser have its own handling.
Like modify your code like this
$(document).ready(function() {
$('#upload-media-button').on('click touchstart', function(event){
event.preventDefault();
dropperForm = document.getElementById("upload-form");
dropperForm.className = '';
isUploadFormVisible = 1;
$("body").addClass("modal-open");
});
}
Hope this helps.
try replacing touchstart with tap like this
$(document).ready(function() {
$('#upload-media-button').on('click tap', function(event){
event.preventDefault();
dropperForm = document.getElementById("upload-form");
dropperForm.className = '';
isUploadFormVisible = 1;
$("body").addClass("modal-open");
});
});
this is assuming that you have included jQuery Mobile in your project. (which I highly recommend you do).

Javascript - Clicks and key events don't work in Cobalt

I'm quite nooby in using Cobalt. I try to create a simple app (just couple of pages) using HTML, CSS and JS. Static content looks fine in Cobalt. But mouse clicks and events from keyboard aren't handled. I mean code like
document.addEventListener("keydown", e => { do something });
//or
var links = document.getElementsByClassName("link");
for (var i = 0; i < links.length; i++) {
links[i].addEventListener("click", function() {
document.location.href = URL_PAGE;
});
}
works in Chrome, but doesn't work in Cobalt. When I click something or press buttons on a keyboard - just nothing happens. For now I haven't found how to handle user events to make them work in Cobalt.
Any help would be very appreciated.
Thank in advance,
Evgeniy
Appears that I just had errors in my script. I fixed them and now everything work fine. Sorry for a false alarm.

jQuery Event slideDown to Slide right

I'm using a simple jQuery Event Calendar script. Because I'm no good with jQuery. However when you click on a day with an Event the Event information drops down. I believe I've located the correct piece of code for this function.
function displayEvent() {
$('tbody.event-calendar td').on('click', function(e) {
$('.day-event').slideUp('fast');
var monthEvent = $(this).attr('date-month');
var dayEvent = $(this).text();
$('.day-event[date-month="' + monthEvent + '"][date-day="' + dayEvent + '"]').slideDown('fast');
});
};
/**
* Close day-event
*/
$('.close').on('click', function(e) {
$(this).parent().slideUp('fast');
});
So my question is. How can I make this slide right instead of down? Because of the layout of my Website I'd rather the Event information came out to the right.
Thank you in advance!!
EDIT;
Plugin Link: http://jquery-plugins.net/jquery-simple-event-calendar
Github Link: https://github.com/philipehsing/jQuery.Simple-Event-Calendar
Demo: http://www.jqueryscript.net/demo/Creating-A-Pretty-Event-Calendar-with-jQuery/#
PS: I couldn't get it to show in JsFiddle, not sure why. But you can see with the Demo how it works! I hope this is enough information.

Touch settings for Xcode writing in HTML as I have phonegap involved

I'm trying to allow an image to be swiped away in four directions (UP, DOWN, LEFT and RIGHT). My code is correct, however I'm unable to even press down and move an image, so I can't even incorporate a simple drag and drop feature which works perfectly in the browser. I'm wondering if I need to enable something or do something with a config file?
Clicking works fine, but I can't drag or interact with any elements in the simulator. I'm making reference to the CSS like below. So I believe everything to be correct in the code. Seems to be a settings issue to allow my java script drag and down functions to work.
#drag1 { -webkit-user-drag: element; }
Please help.
This script worked great.
<script>
var nodeList = document.getElementsByClassName('contents');
for(var i=0;i<nodeList.length;i++) {
var obj = nodeList[i];
obj.addEventListener('touchmove', function(event) {
var touch = event.targetTouches[0];
// Place element where the finger is
event.target.style.left = touch.pageX + 'px';
event.target.style.top = touch.pageY + 'px';
event.preventDefault();
});
}
</script>

Converting existing jQuery from click function to auto display with delay

Currently, homepage text is only displayed via a click function which initiates a slide out.
What I would like to do, is to change this so that it doesn't require a click to display. I'm wanting the text to display (fade in) after about 3 seconds of the page loading.
This is what I have at present:-
$('.introbox span').replaceWith(function(){
return '\
<div class="slideOutTip '+$(this).attr('class')+'" style="'+$(this).attr('style')+'">\
\
<div class="tipVisible">\
<div class="tipIcon"><div class="plusIcon"></div></div>\
<span class="tipTitle">'+$(this).attr('title')+'</span>\
</div>\
\
<div class="slideOutContent">\
<p>'+$(this).html()+'</p>\
</div>\
</div>';
});
It is when the 'plusIcon' is clicked, that the text slides out and is visible.
The listen out for the click function is...
$('.tipVisible').bind('click',function(){
var tip = $(this).parent();
So I'm presuming this is where I need to convert the necessary to use autoload with perhaps a setDelay and FadeIn although I'm not 100%.
Please could someone advise how this can be altered to not use a click but auto display after delay? Thanks in advance.
Attempted to add code in jsfiddle if it is easier to see what I'm trying to do - thanks.
Pretty simple: make a function with what you do at .tipVisible.click and then set a window.setTimeout(yourFunction, 3000);
#Comment: Your JS is already pretty complex, I probably would reorganize and recode everything so I can just give you a hint how it could be implemented (didn't work right away when I added it in your fiddle, but I'm a bit too lazy to find the problem there).
var animate = function(obj) {
var tip = obj ? $(obj).parent() : $(".tipVisible").parent();
/* If a open/close animation is in progress, exit the function */
if (tip.is(':animated')) return false;
if (tip.find('.slideOutContent').css('display') == 'none') {
tip.trigger('slideOut');
}
else tip.trigger('slideIn');
}
window.setTimeout( animate, 3000);
$('.tipVisible').bind('click', function() {
animate(this);
});
EDIT: Well this is doing something at least, now you have to figure out what needs to be done when and how ;)
PS: You used jQuery but loaded Mootools framework... Mootools doesn't know $(document).ready()

Categories