In my spelling game the user clicks on the letters to make them animate in to the slots on the grid to spell the words.
I have designed it so when a word is spelt correctly, a style is applied called "wordglow2" that makes the word disappear and reveal the picture behind - which is the aim of the game.
When the user gets the word wrong the he/she is given a second attempt at the word. When the user gets the word wrong a style called "wordglow4" is applied to the word which makes it glow red. The problem is the style applied to wrong words does not go away to clear the space for another attempt.
How do I make the styles dissapear 2 seconds after the 3rd letter of the word is clicked (attempt is made)?
This code applies the styles depending on whether the word is right or wrong...
if (!$('.drop-box.spellword:not(.occupied)').length) {
var wordIsCorrect = 0;
$('.drop-box.spellword').each(function() {
if ($(this).attr("data-letter") == $(this).find("div").attr("data-letter")) {
wordIsCorrect++;
}
});
console.log(wordIsCorrect);
console.log($('.drop-box.spellword').length);
if ($('.drop-box.spellword').length == wordIsCorrect) {
$('.drop-box.spellword').addClass('wordglow2');
$(right).val('Well Done!');
$(right).show();
audioS.play();
$('.counter').html(completeWords + '/6').show();
$(wrong).hide();
$('.minibutton').prop('disabled', false);
} else {
$('.drop-box.spellword').addClass("wordglow4").css('color', 'transparent');
$(wrong).val('Try Again');
$('.minibutton').prop('disabled');
$(wrong).show();
audioF.play();
$('.counter').html(completeWords + '/6').show();
$(right).hide();
$('.minibutton').prop('disabled', true);
}
}
});
}
var completeLetters = $('.wordglow2').length;
var completeWords = (completeLetters / 3);
$('.counter').html(completeWords + '/6');
if (completeWords == 3) {
$('table').fadeOut(2000);
}
var incompleteWords = $('.spellword').hasClass('.wordglow4').length;
if (incompleteWords == 3) {
$('.minibutton').prop('disabled', false);
}
});
I have tried this...
if $('.drop-box.spellword').hasClass("wordglow4") {
$("wordglow4").fadeOut(2000);
}
Here is a working fiddle... http://jsfiddle.net/smilburn/3qaGK/25/
I don't understand quite what you want to do, but something like this might cut it:
$('.drop-box.spellword')
.animate({ 'opacity': 1 }, 2000, function()
{
$(this)
.removeClass('wordglow4')
.removeClass('occupied')
.html('')
});
http://jsfiddle.net/cTGGA/
User the removeClass method to do that. You can put a duration/animation on the removeClass call itself:
$('.drop-box.spellword').removeClass("wordglow4", "2000");
This removes the class and animates the transition, probably what you are looking for.
Related
I'm trying to implement letter by letter animation on section with two slides. Currently I'm using jQuery code for that, but I'm afraid it's far from the ideal option.
Here's my code example: codepen
$.fn.animation = function () {
//get the welcome msg element
var $message = $(this);
//get a list of letters from the welcome text
var $getList = $(this).text().split("");
//clear the welcome text msg
$(this).text("");
//loop through the letters in the list array
$.each($getList, function(idx, element) {
//create a span for the letter and set opacity to 0
var newElement = $("<span/>").text(element).css({
opacity: 0
});
//append it to the welcome message
newElement.appendTo($message);
//set the delay on the animation for this element
newElement.delay(idx * 90);
//animate the opacity back to full 1
newElement.animate({
opacity: 1
}, 1100);
});
};
$('.introduction').animation();
$('.secondary').animation();
First problem is that I can't do, so the second sentence with class "secondary" runs only after first one is finished. I've tried to use .delay and setTimeout, but that doesn't help.
Also I'm not sure, how to start animation on second slide, when it's loaded.
I know there's plugins for that stuff, but I'd like to do that in vanilla JavaScript, or jQuery, css3.
Would be glad for any help.
And yeah, here's an example how I would like it to look - http://bootstrapart.net/influence/v1.5.3/
Is it possible to make, so the animation starts every time, when slide is changed?
Thanks.
Edited
Click here to see the whole code working.
Changes I made in css: I set the opacity of html text tags (<h1>,<h3> and <h4>) to 0, so they are hidden. Then in the animation function they are made visible again.
Changes I made in script: To start the second text animation with delay I used setTimeout() function:
setTimeout(function(){
$('.secondary').animation();
},2000);
To detect the slide event of carousel, according to Bootstrap Documentation you can use this method:
$('.carousel').on('slid.bs.carousel', function () {
// here is where you start the animation for the second slide
})
Re-Edit
To track on which slide we are I introduced a variable caled: var $wichSlide. Here is the working method to start the animation when slide is changed:
$('.carousel').bind('slid.bs.carousel', function (e) {
if($whichSlide == 1){
//set $whichSlide position for the next slide event
$whichSlide = 2
//start to animate the text
$('.introduction').animation();
setTimeout(function(){
$('.secondary').animation();
},2000);
/*set the text on the second slide to be invisible
* because we don't want it to appear before animation starts
*/
$('.slide2').css("opacity",0);
}else if($whichSlide == 2){
$whichSlide = 1;
$(".carousel").carousel("pause");
$(".slide2").animation();
setTimeout(function(){
$(".carousel").carousel();
},3000);
$('.introduction').css("opacity",0);
$('.secondary').css("opacity",0);
}
});
See the working code
I'm still developing a genius forum for my website. I want to add some fancy javascript effects. I don't want to use jQuery for now.
My problem is the following: I have an element which appears by checking if the value of the function is true or false. With those check my article shows or hides.
My question is: Is it possible to use transitions so that my block drops down like the way transitions do?
The first js function describes the check and the next function hides or show my article when the values are not empty.
function CheckEmptyValues() {
var inputFields = document.getElementsByTagName('input');
var textFields = document.getElementsByTagName('textarea');
var postData = [inputFields, textFields];
for(var i=0; i<postData.length; i++) {
for(var j=0; j<postData[i].length; j++) {
if(postData[i][j].value !== '') {
return false;
}
}
}
return true;
}
function showPreview() {
if (CheckEmptyValues() === false) {
this.prevPost.style.display = "block";
}
else {
this.prevPost.style.display = "none";
}
}
When my emptyvalues are false the article appears and if not, it disappears. But when this happens you see only show or hide, no further effect or something.
I want to make this something like this effect: http://www.w3schools.com/css/tryit.asp?filename=trycss3_transition1
The height value should start with 0 and end with 150 height or something like that.
Does anyone have a solution how to make this look cool?
Thanks in advance.
No, you can't, display is defined as non animatable.
If you want workarounds, see CSS3 Animation and Display None.
No, display doesn't come in transition-property. But, you can try opacity and for the display:block , put it in your div:hover or only div css.
You could use opacity, and set it to 0 or 1:
this.prevPost.style.display = "block";
this.prevPost.style.opacity = 1;
I'm trying to make a jQuery function that spells my name out letter by letter. My name is Jake, so I want it to start out with nothing, then it'll display a J, then Ja, then Jak, then Jake. Let's just say that I'm modifying a paragraph element with class name:
<p class=Name> *name gets 'typed' here* </p>
I've tried using the .delay() function and the setTimeout() function, but I'm new to jQuery so I'm probably using them wrong.
$(document).ready(function()
{
setTimeout(function(){$(".name").text('J');}, 500);
setTimeout(function(){$(".name").text('Ja');}, 500);
setTimeout(function(){$(".name").text('Jak');}, 500);
setTimeout(function(){$(".name").text('Jake');}, 500);
});
Here is a jfiddle of my most recent attempt:
http://jsfiddle.net/pg7Cu/
This just delays for 500 milliseconds then types my name all at once. I'm trying to get it to type one letter every 500 milliseconds. Can someone help me figure out how to do this?
Simply use a recursive function:
var name = "Jake";
function typeName(name, iteration) {
// Prevent our code executing if there are no letters left
if (iteration === name.length)
return;
setTimeout(function() {
// Set the name to the current text + the next character
// whilst incrementing the iteration variable
$('.name').text( $('.name').text() + name[iteration++] );
// Re-trigger our function
typeName(name, iteration);
}, 500);
}
// Call the function to begin the typing process
typeName(name, 0);
JSFiddle demo.
We can extend this slightly to remove the need for initially passing in the iteration variable by adding this as the first line in our typeName function:
var iteration = iteration || 0;
Now you can simply call:
typeName("My name here");
JSFiddle demo.
Actually You can do it also with css only, No need of javascript/jQuery.
HTML
<p class="text">Jack.</p>
CSS
.text
{
width: 30em;
white-space:nowrap;
overflow:hidden;
-webkit-animation: type 5s steps(50, end);
animation: type 5s steps(50, end);
}
#keyframes type{
from { width: 0; }
}
#-webkit-keyframes type{
from { width: 0; }
}
Demo
Here is a simple one:
http://jsfiddle.net/pg7Cu/7/
var text = "Hello what's up?";
function letter() {
var oldt = $(".name").text(); // grab old text
var t = text.charAt(0); // grab first text's letter
text = text.substr(1); // shorten the text
$(".name").text(oldt + t); // show old text + the one letter
// if there's anything left to type, continue.
if(text.length > 0) setTimeout(letter, 100);
}
$(document).ready(function()
{
setTimeout(letter, 100);
});
It sets a timeout for a letter, and when the letter is shown, if there is more, it sets the timeout again. Sort of recursion.
You're close. Start by incrementing the timeouts; as the timer starts running immediately:
setTimeout(function(){$(".name").text('J');}, 500);
setTimeout(function(){$(".name").text('Ja');}, 1000);
// etc
And don't set the differences in time exactly the same (as people don't hit a key every x ms constantly)
Check out a revised version: http://jsfiddle.net/pg7Cu/1/
And you could create more beautiful code etc. etc. but this works.
EDIT
Ok I took the challenge ;) Check out this Fiddle. You can call the function simulateTyping() with your own string, and at random intervals it will append the next character, until the whole string is on the screen. You could even create a plugin from it (by NOT hard-coding the element the text should be appended to).
function simulateTyping(myString, currentChar) {
var delay = Math.floor(Math.random()*(250-50+1)+50); // random between 50 and 250 milliseconds
currentChar = currentChar || 0;
setTimeout(function() {
$('.name').append(myString.charAt(currentChar))
if(++currentChar < myString.length) {
simulateTyping(myString, currentChar);
}
}, delay);
}
You can try with different timeouts:
setTimeout(function(){$(".name").text('J');}, 500);
setTimeout(function(){$(".name").text('Ja');}, 1000);
setTimeout(function(){$(".name").text('Jak');}, 1500);
setTimeout(function(){$(".name").text('Jake');}, 2000);
I decided to improve my JavaScript skills by practicing with some often used modules.
I am creating a fixed feedback button that comes up when you press it and goes down when you press again. Everything works, but I want it to be animated.
I used this code to get it done
function rollUp(item){
if(item.className == "on") {
item.className="off";
document.getElementById("container").style.top = "97%";
} else {
item.className="on";
document.getElementById("container").style.top = "78.5%";
}
}
Now I just don't get those percentages animated, I found many descriptions about animating divs by px, but I don't get this working.
So the div has to be moved from top position 97% to 78.5%
Any help?
Are you using jQuery? If yea, please try this:
function rollUp(item){
if(item.className == "on") {
item.className="off";
$("#container").animate({top: "97%"});
} else {
item.className="on";
$("#container").animate({top: "78.5%"});
}
}
You would need something like a timeout which will change the position in small steps which actually is "animation", here
function rollUp(){
var ph=document.getElementById("container").style.top.toString();
ph.replace("px","");
var phi=parseInt(ph);
if(phi<800){
if(item.className == "on") {
item.className="off";
document.getElementById("container").style.top = (phi+10).toString()+"px";
} else {
item.className="on";
document.getElementById("container").style.top = "600px";
}
Window.setTimeout(roolUp(), 300);
}
}
I have been building my own carasol over the past few days.
My Jquery is based on tutorials on the web and also from help and advice from SO.
I am not a Jquery guru just an enthusiast and think my code is a little sloppy, hence the post.
here is a link to the working code: http://jsfiddle.net/JHqBA/2/ (updated link)
basically what happens is:
if someone hits the page with a # values in the url it will show the appropriate slide and example would be www.hello.com#two, this would slide to slide two
if someone clicks the numbers it will show the appropriate slide
next and prev also slide through the slides.
The question is, is there anything i could have wrote better as i know there is alot of duplicate code.
I understand its a big ask but it would help me learn a little more (i think my code is a little old school)
if anyone has any questions please feel free to ask and ill answer what it does or is supposed to do.
Sluap
--- Edit ----
I have made only one aniamtion function now which has got rid of alot of duplicate code.
I have yet to look into on function but will do soon.
I would like to know more about the create a new function, outside of the jQuery ready block as i cant get this working or quite understand how i can get it to work sorry
any more tips would be great ill carry on working on this project till i am happy with it.
also is there a better way to write:
if ($slideNumber == 1) {
$('#prev').attr("class", "not_active")
$('#next').attr("class", "active")
}
else if ($slideNumber == divSum) {
$('#next').attr("class", "not_active");
$('#prev').attr("class", "active");
}
else {
$('#prev').attr("class", "active")
$('#next').attr("class", "active")
};
Jquery full:
$(document).ready(function () {
//////////////////////////// INITAL SET UP /////////////////////////////////////////////
//Get size of images, how many there are, then determin the size of the image reel.
var divWidth = $(".window").width();
var divSum = $(".slide").size();
var divReelWidth = divWidth * divSum;
//Adjust the image reel to its new size
$(".image_reel").css({ 'width': divReelWidth });
//set the initial not active state
$('#prev').attr("class", "not_active");
//////////////////////////// SLIDER /////////////////////////////////////////////
//Paging + Slider Function
rotate = function () {
var triggerID = $slideNumber - 1; //Get number of times to slide
var image_reelPosition = triggerID * divWidth; //Determines the distance the image reel needs to slide
//sets the active on the next and prev
if ($slideNumber == 1) {
$('#prev').attr("class", "not_active")
$('#next').attr("class", "active")
}
else if ($slideNumber == divSum) {
$('#next').attr("class", "not_active");
$('#prev').attr("class", "active");
}
else {
$('#prev').attr("class", "active")
$('#next').attr("class", "active")
};
//Slider Animation
$(".image_reel").animate({
left: -image_reelPosition
}, 500);
};
//////////////////////////// SLIDER CALLS /////////////////////////////////////////////
//click on numbers
$(".paging a").click(function () {
$active = $(this); //Activate the clicked paging
$slideNumber = $active.attr("rel");
rotate(); //Trigger rotation immediately
return false; //Prevent browser jump to link anchor
});
//click on next button
$('#next').click(function () {
if (!$(".image_reel").is(':animated')) { //prevent clicking if animating
var left_indent = parseInt($('.image_reel').css('left')) - divWidth;
var slideNumberOn = (left_indent / divWidth);
var slideNumber = ((slideNumberOn * -1) + 1);
$slideNumber = slideNumber;
if ($slideNumber <= divSum) { //do not animate if on last slide
rotate(); //Trigger rotation immediately
};
return false; //Prevent browser jump to link anchor
}
});
//click on prev button
$('#prev').click(function () {
if (!$(".image_reel").is(':animated')) { //prevent clicking if animating
var left_indent = parseInt($('.image_reel').css('left')) - divWidth;
var slideNumberOn = (left_indent / divWidth);
var slideNumber = ((slideNumberOn * -1) - 1);
$slideNumber = slideNumber;
if ($slideNumber >= 1) { //do not animate if on first slide
rotate(); //Trigger rotation immediately
};
}
return false; //Prevent browser jump to link anchor
});
//URL eg:www.hello.com#one
var hash = window.location.hash;
var map = {
one: 1,
two: 2,
three: 3,
four: 4
};
var hashValue = map[hash.substring(1)];
//animate if hashValue is not null
if (hashValue != null) {
$slideNumber = hashValue;
rotate(); //Trigger rotation immediately
return false; //Prevent browser jump to link anchor
};
});
Question and answer has been moved over to https://codereview.stackexchange.com/questions/8634/jquery-carasol-build-finished-and-would-like-advice-on-best-practice-neateni/8635#8635
1) Separation of Concerns
Start by refactorring your code in to more granular functions.
You can read more about SoF at http://en.wikipedia.org/wiki/Separation_of_concerns
Update:
E.g. Instead of having your reel resizing code inline, put it in it's own function, like this:
function setImageReelWidth () {
//Get size of images, how many there are, then determin the size of the image reel.
var divWidth = $(".window").width();
var divSum = $(".slide").size();
var divReelWidth = divWidth * divSum;
//Adjust the image reel to its new size
$(".image_reel").css({ 'width': divReelWidth });
}
This achieves 2 things:
a. First, it groups a block of code that is logically cohesive, removing it from the main code which results in a much cleaner code habitat.
b. It effectively gives a label to the code block via the function name that is descriptive of what it does, and therefore makes understanding of the code much simpler.
Later, you can also encapsulate the whole thing in it's own "class" (function) and you can move it into it's own js file.
2) The jQuery "on" function
Use the "on" function to attach your click events, rather than the "click" function.
http://api.jquery.com/on/
This has the added advantage of also binding it to future elements matching your selector, even though they do not exist yet.
3) The ready function
// I like the more succinct:
$(handler)
// Instead of:
$(document).ready(handler)
But you might like the more obvious syntax.
Those are just a few things to start with.
-- Update 1 --
Ok, StackOverflow is not really suited to a refactoring work in progress, but we'll make do. I think you should keep your original code block in your question, so that future readers can see where it started and how it systematically improved.
I would like to know more about the create a new function, outside of
the jQuery ready block as i cant get this working or quite understand
how i can get it to work sorry
I am not familiar with jsfiddle.net, but it looks cool and helpful, but might also be a bit confusing if you don't know what is going on. I am not sure I do :), but I think that script editor window results in a .js file that is automatically referenced by the html file.
So here is an example of a function defined outside of the ready block, but referenced from within.
function testFunction () {
alert ('it works');
}
$(document).ready(function () {
testFunction();
// ... other code
});
This should pop up an alert box that says, "it works" when the page is loaded.
You can try it for yourself.
Then, once you got that working, you can refactor other logically cohesive blocks of code into their own functions. Later you can wrap them all up into their own javascript 'class'. But we'll get to that.