I have made a spelling game for primary school children. I want to make the click events in my game touch events so it can be compatible on tablets. Is there a way I can put them alongside my click events so that one program is compatible to both, or will I have to make a tablet version?
Here I have the code for one of my click events as an example
$('.drag').on('click', function(e) {
e.preventDefault();
if (animation) return;
animation = true;
setTimeout(function() {
animation = false;
}, 700);
$(".minibutton").css('visibility', 'hidden');
$('.next').css('visibility', 'hidden');
var target = $('.drop-box.spellword:not(.occupied):first');
var targetPos = target.position();
var currentPos = $(this).offset();
var b = $(this);
if (target.length) {
target.addClass("occupied");
b.clone().addClass(
b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({
background: "transparent",
position: "absolute",
top: currentPos.top,
left: currentPos.left
}).animate({
top: targetPos.top,
left: targetPos.left
}, "slow", function() {
$(this).css({
top: 0,
left: 0
}).appendTo(target);
var spellWord = $('.drop-box.spellword');
if (!spellWord.filter(':not(.occupied)').length) {
var wordIsCorrect = 0;
spellWord.each(function() {
if ($(this).data("letter") == $(this).find("div").data("letter")) {
wordIsCorrect++;
}
});
if (spellWord.length == wordIsCorrect) {
spellWord.addClass('wordglow2');
$(right).val('Right!');
$(right).show();
success.play();
$(wrong).hide();
score.right++;
score.attempts++;
if (score.right == 3) {
$('.answers').css('visibility', 'visible');
$('.answers').html("Well done! </br> You correctly spelt " + score.right + ". </br> Keep it up.").show();
$('table').fadeOut(3000);
$('.right').hide();
$('.box-style2').hide();
$('.box-style').hide();
$('.picstyle').hide();
$('.play').hide();
$('.minibutton2').hide();
$("#mysoundclip").attr('src', listOfWords[rndWord].audio);
audio.stop();
$("#mypic").attr('src', listOfWords[rndWord].pic);
pic.hide();
}
setTimeout(function() {
jQuery('.minibutton').trigger('click');
}, 1500);
setTimeout(function() {
jQuery(right).hide();
}, 1500);
} else {
//spellWord.addClass("wordglow4").css('color', 'transparent');
$(wrong).val('Wrong!');
$(wrong).show();
failure.play();
$(right).hide();
score.wrong++;
score.attempts++;
if (score.wrong == 3) {
$(".minibutton").css('visibility', 'visible');
$('.next').css('visibility', 'visible');
}
$('.drop-box.spellword').animate({
'opacity': 1
}, 1500, function() {
$(this).removeClass('wordglow4').removeClass('occupied').html('')
});
setTimeout(function() {
jQuery(wrong).hide();
}, 1500);
}
}
});
}
});
Can someone point me in the right direction as I have never done this before.
Here is a fiddle to help (Sound warning!!) http://jsfiddle.net/smilburn/7Y7A5/8/
You could add the tap event and include jQuery Mobile in your mobile version.
$('.drag').on('click tap', function(e) {...}
Related
I made animation on click, and it looks fine on PC. The problem is that animation on Android and iOS is sharp and looks ragged. I searched for solution for a long time, but still haven't find any solution.
This is my JS, you can view all the code on this jsfiddle.
$('.project-image').on('click', function() {
var $this = $(this);
var img = $(this).attr('id');
var minusLeft = $(this)[0].offsetLeft - 8;
var minusTop = $(this)[0].offsetTop - 80;
$('.show-description').fadeOut(600, function () {
$('.hide-description').fadeIn(600);
});
$('.flex-container img').not('#' + img).animate({
opacity: 0,
}, 200, "linear", function() {
$this.css({
top:'-'+minusTop+'px',
left:'-'+minusLeft+'px'
})
setTimeout(function() {
$('.flex-container img').not('#'+img).hide();
$this.css("position", 'static');
$('.flex-container').css('flex-flow', 'column wrap');
$('.'+img+'-text-block').show();
$('.'+img+'-text-block').animate({
opacity:1
}, 100)
}, 600)
});
})
$('.hide-description').on('click', function() {
$('.hide-description').fadeOut("slow", function () {
$('.show-description').fadeIn(1000);
});
$('[class*="-text-block"]').hide()
$('.flex-container').css('flex-flow', 'row wrap')
$('.flex-container img').css({
position: 'relative',
top:0,
left:0
})
$('[class*="-text-block"]').css('opacity', '0');
$('.flex-container img').animate({
opacity: 1,
}, 400)
$('.flex-container img').show()
})
I have a onClick function that works to move boxes on and off the webpage when the screen is clicked. I'm trying to convert this code so that the movement will happen automatically every four seconds. The problem is that the timeout event most likely needs to be happening inside the main function, because of the functions already repetitive nature, and that's where I'm stuck.
This is the working code:
<script>
$('.box').click(function() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
$(this).animate({
left: '-56%'
}, 500);
if ($(this).next().size() > 0) {
$(this).next().animate({
left: '50%'
}, 500);
} else {
$(this).prevAll().last().animate({
left: '50%'
}, 500);
}
});
</script>
And this is what I've tried for the timeout:
<script>
window.onload = function(){
setTimeout(boxMove, 1000);
};
function boxMove() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
});
$(this).animate({
left: '-56%'
}, 500);
if ($(this).next().size() > 0) {
$(this).next().animate({
left: '50%'
}, 500);
} else {
$(this).prevAll().last().animate({
left: '50%'
}, 500);
}
}
</script>
To make sure I am understanding correctly, you no longer want the click to clear this box, but rather want it to clear automatically 4 seconds after the page loads.
Your code is close, it just looks like you missed some closing brackets when converting the code. Try this:
window.onload = function(){
setTimeout(boxMove, 1000);
};
function boxMove() {
$('.box').each( function() {
if ($(this).offset().left < 0) {
$(this).css("left", "150%");
}
$(this).animate({
left: '-56%'
}, 500);
if ($(this).next().size() > 0) {
$(this).next().animate({
left: '50%'
}, 500);
} else {
$(this).prevAll().last().animate({
left: '50%'
}, 500);
}
});
}
Assumptions:
Your DOM manipulation with jQuery was functioning as you expect it
to now prior to converting to a timeout.
You only need to clear these boxes once and they never return. If they do return and you want to clear them every 4 seconds regularly, change setTimeout to setInterval.
Here is my js where i already did a swipeleft and swiperight events in order to show a toolbar on the left. (it is for a smartphone app, with touch events)
I wanted to add the drag event on it, to keep control on the bar (like on menu bar of Facebook, Tinder..
Do you know how i can do it ?
$(function(){
var page = document.getElementById("page");
var sidebar = 0;
Hammer(page).on("swipeleft", function(e) {
if (!sidebar){
return true;
}
$(page).animate({left: "-=300"}, 500);
sidebar = 0;
});
Hammer(page).on("swiperight", function(e) {
if (sidebar){
return true;
}
$(page).animate({left: "+=300"}, 500) ;
sidebar=1;
});
})
I already tried this but it doesn't recognize drag and e.gesture.direction...
Hammer(page).on("drag", function(e) {
if ( e.gesture.direction === "right" && !sidebar){
$(page).animate({left : e.gesture.deltaX + "px"}, 0);
}
});
The event is called pan not drag. See the docs.
Hammer(page).on("panright", function(e) {
if (!sidebar){
$(page).animate({left : e.gesture.deltaX + "px"}, 0);
}
});
Ok, I found it! You were right, #Cristy :)
Here is the working answer:
$(function(){
var page = document.getElementById("page");
var sidebar = 0;
Hammer(page).on("swipeleft", function(e) {
if (!sidebar){
return true;
}
$(page).animate({left: "-=300"}, 500);
sidebar = 0;
});
Hammer(page).on("panleft", function(e) {
if (!sidebar){
$(page).animate({left : e.deltaX + "px"}, 0);
}
});
Hammer(page).on("swiperight", function(e) {
if (sidebar){
return true;
}
$(page).animate({left: "+=300"}, 500) ;
sidebar=1;
});
Hammer(page).on("panright", function(e) {
if (!sidebar){
$(page).animate({left : e.deltaX + "px"}, 0);
}
});
})
I have a navigation bar that repositions after scrolling down. It works with position:fixed, but while scrolling I want it to move up like all the other content that follow on the site . I the user stops scrolling it should reposition on top:
Heres a demo:
http://jsfiddle.net/gvjeyywa/7/
But I want it to be position:absolute (especially for the scrolling on the Ipad)
http://jsfiddle.net/gvjeyywa/5/
How do i let the JS overide my CSS? Here is my JS:
var isInAction = false;
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (!isInAction){
isInAction = true;
$( "#navigation" ).animate({
top: "-" + $("#navigation").innerHeight() + "px"
}).delay(1000).animate({
top: "0px"
}, 800, function() {
isInAction = false;
});
}
}
lastScrollTop = st;
});
In the first look i think it's impossible but after some tries this code was created.
I spent long time to write this code and use several techniques and hope to be helpful.
Maybe there are simpler solutions too !!
var bitFlag = false;
var lastScrollTop = 0;
var timeoutId;
$navigation = $("#navigation");
$(window).scroll(function (event) {
var intWindowTop = $(window).scrollTop();
var intElementBottom = $navigation.offset().top + $navigation.innerHeight();
if (intWindowTop > lastScrollTop) {
if (!bitFlag) {
$navigation.css("position", "absolute").css("top", intWindowTop + "px");
bitFlag = true;
}
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function () {
if (intWindowTop > intElementBottom) {
intDelayTime = setTimeout(function () {
$navigation.animate({
top: intWindowTop + "px"
}, 800);
}, 500);
}
}, 100);
} else {
$navigation.css("position", "fixed").css("top", "0px");
bitFlag = false;
}
lastScrollTop = intWindowTop;
});
The }, 500); section control Delay time in milliseconds and the }, 800); section control the slide down animation speed.
Check JSFiddle Demo
I would like to replicate the same functionality as at ign.com, where the indicator bar fills up over time. I got it working but I got some sync issues after a while. So i'm open to suggestions to do it from scratch (I'm beginner with all this animation stuff).
This is the code.
function GoProgressBar() {
var $lineStatus = $('.featured-articles-line-status');
$lineStatus.css('width', '0px');
$lineStatus.animate({ width: '694px' }, 12000, 'linear', GoProgressBar);
};
function GoOverlay(width, isLast, currentWidth) {
var $overlayLine = $('.status-overlay');
if (isLast) {
$overlayLine.css('width', '0px');
return;
}
if (currentWidth) {
$overlayLine.css('width', currentWidth);
$overlayLine.animate({ width: width }, 700);
} else {
$overlayLine.css('width', '0px');
$overlayLine.animate({ width: width }, 700);
}
};
function ShowNextElement() {
var $elements = $('.element'),
$overlayLine = $('.status-overlay'),
$liElements = $('#elements li'),
width;
if (currentElement === elements[elements.length - 1]) {
currentWidth = $overlayLine.width() + 'px',
width = currentWidth + $($liElements[(elements.length - 1)]).outerWidth() + 'px';
GoOverlay(width, true, currentWidth);
currentElement = elements[0];
$elements.hide();
$(currentElement).fadeIn(1000);
return;
}
i = elements.indexOf(currentElement) + 1;
var currentTab = $liElements[(i - 1)],
currentWidth = $overlayLine.width();
if (currentWidth) {
width = currentWidth + $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, currentWidth);
} else {
width = $(currentTab).outerWidth() + 'px';
GoOverlay(width, false, false);
}
currentElement = elements[i];
$elements.hide();
$(currentElement).fadeIn(1000);
}
Thanks!
http://jqueryui.com/progressbar/
You could try this..
There are more features in addition to this,check it out.
Might come useful :)
There are a wealth of ways in which you could do this.
You should have some kind of controller to manage the show and hide.
var Application = {
show : function() {
jQuery('.application-overlay').stop().animate({ top: 40 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 1000},500);
},
hide : function() {
jQuery('.application-overlay').stop().animate({ top: -1200 }, 500);
jQuery('.cf-ribbon').stop().animate({height: 200},500);
}
};
Then you have your triggers : Application.show();
jQuery(document).ready(function() {
jQuery('.cf-speakers .span2 a').hover(function() {
jQuery('span',this).stop().animate({ opacity: 1.0 },100);
}, function() {
jQuery('span',this).stop().animate({ opacity: 0.0 },100);
});;
jQuery('.apply-now').click(function(e) {
Application.show();
e.stopPropagation();
e.preventDefault();
});
jQuery('body').click(function(e) {
var application = jQuery('.application-overlay');
if( application.has(e.target).length === 0)
Application.hide();
});
jQuery('.gallery a').click(function(e) {
var src = jQuery(this).attr('href');
jQuery('.main-container img').hide().attr('src', src).fadeIn('fast');
jQuery('.gallery a').each(function() {
jQuery(this).removeClass('active');
});
jQuery(this).addClass('active');
e.stopPropagation();
e.preventDefault();
});
});
Your css would of course come into play also but that can be left to you!
This should give you an example of what you need .. But you're already on the right track, sometimes there is merit in reusing other people code too you know! :)