Jump to content

TheBnl

Members
  • Posts

    56
  • Joined

  • Last visited

Contact Methods

  • Website URL
    http://bram-de-leeuw.nl/
  • ICQ
    0

TheBnl's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Hi! I am making a little game for iOS using apache's Cordova.I use Zepto.js as a light css3 jQuery replacement for animations etc. Players have to create letters as Wim Crouwel did in his New Alphabet, they have to do it in a short amount of time, thus far the project is going fine for the limited skills i have but now i am encountering a problem and i dont know where it could come from. What happens is that when i validate if a letter hase been constructed correctly and it is in fact correct it adds 2 "levels" instead of just 1, what i discovered is that the script actually runs twice. It even reacts tot the amounts of clicks i made on the page, lets say i click 4 "clickable" element's on the page it ads 4 levels. This is what i get in the console: 2 clicks = 2 levels up?validating...correct! go from level 0 to..1validating...correct! go from level 0 to..2 here is a live demo:http://bram-de-leeuw...welGame/(you'll probably have to resize your browser to make it work, the first thing you'll see is a iPhone5 version that isn't styled correctly. When you'll make your browser smaller it will show a iPhone 4 version.) This is the validation code: // Validate Letter A$("#verder").click(function () {//if (Level = 0){ // LETTER = A // CORRECT console.log("validating..."); if ( // LETTER A $(".CenterBottom").hasClass("black") === true && $(".CenterRight").hasClass("black") === true && // NOT LETTER A $(".CenterLeft").hasClass("black") === false && $(".CenterTop").hasClass("black") === false && // ETC.. ){ // IF ITS CORRECT console.log("correct! go from level 0 to..") Level++; $("#alert-fact").animate("Alert", {duration:2000, easing: 'ease'}); $(".CenterBottom").animate("Correct", {duration:2000, easing: 'ease'}); $(".CenterRight").animate("Correct", {duration:2000, easing: 'ease'}); console.log(Level); // SOMETHING IS MISSING } else if ( $(".CenterBottom").hasClass("black") === true && $(".CenterRight").hasClass("black") === false || $(".CenterRight").hasClass("black") === true && $(".CenterBottom").hasClass("black") === false ) { $("#alert-missing").animate("Alert", {duration:2000, easing: 'ease'}); if ($(".CenterBottom").hasClass("black") === true) { $(".CenterBottom").animate("Correct", {duration:2000, easing: 'ease'}); }; if ($(".CenterRight").hasClass("black") === true) { $(".CenterRight").animate("Correct", {duration:2000, easing: 'ease'}); }; // WRONG } else { $("#alert-wrong").animate("Alert", {duration:2000, easing: 'ease'}); };//};//if (Level = 1){ // LETTER = B//};});
  2. I have a function witch triggers an series of animations, it uses CSS3 keyframe animations to render them. The weird problem i'm encountering is with my FadeOut animation, it doesn't happen. I have a animation called FadeIn that does the same (but in reverse) but doesn't have any problems running at all. The rotten apple: $"#id").animate("FadeOut", {duration:800, easing: 'ease-out'}).hide(); The working example: $("#id").animate("FadeIn", {duration:800, easing: 'ease-in'}).show(); The CSS3 animations: @-webkit-keyframes FadeOut { 0% { opacity:1;} 100% { opacity:0; }}@-webkit-keyframes FadeIn { 0% { opacity:0; } 50% { opacity:0; } 100% { opacity:1; }} I'm using Zepto.js as a jquery replacement, zepto uses css3 animations. At the end of the animation i'm hiding the content with .hide() this causes the element to change the display to none. display is not animatable so before the display goes to none i use opacity to create the fade out effect. I think it hade something to do with te display but i cant figure out what because the FadeIn doesn't have any problems at all. Look at the demo Thank you!
  3. Ahhh Thanks! i needed that other pair of eyes!I fixed it by putting the <ul> in a <div> simple as that! Many thanks!
  4. I use a responsive lay-out (Foundation: http://foundation.zurb.com/) and i think that is the problem.On Github there are some fixes but non of them seem to work,any ideas on how to solve this problem?
  5. this is the script: $(document).ready(function() { // get the action filter option item on page load var $filterType = $('#filterOptions li.active a').attr('class'); // get and assign the ourHolder element to the// $holder varible for use later var $holder = $('ul.content'); // clone all items within the pre-assigned $holder element var $data = $holder.clone(); // attempt to call Quicksand when a filter option// item is clicked$('#filterOptions li a').click(function(e) { // reset the active class on all the buttons $('#filterOptions li').removeClass('active'); // assign the class of the clicked filter option // element to our $filterType variable var $filterType = $(this).attr('class'); $(this).parent().addClass('active'); if ($filterType == 'all') { // assign all li items to the $filteredData var when // the 'All' filter option is clicked var $filteredData = $data.find('li'); } else { // find all li elements that have our required $filterType // values for the data-type element var $filteredData = $data.find('li[data-type=' + $filterType + ']'); } // call quicksand and assign transition parameters $holder.quicksand($filteredData, { duration: 800, easing: 'easeInOutQuad' }); return false;});}); Related HTML: <ul id="content" class="content seven column push-five"> <li data-type="ontwerpen" data-id="id-1" class="twelve"> <a href="single.html"><img src="afbeeldingen/800x500.png" width="800" height="500"></a> </li> <li data-type="interactief" data-id="id-2" class="twelve"> <a href="single.html"><img src="afbeeldingen/800x500.png" width="800" height="500"></a> </li> <!-- ETC.... --></ul>
  6. Hey, I got some problems and i cant figure out whats wrong,i have a menu where you can filter the content displayed on the right.It works but it uses some weird animations and i can't figure out what's wrong.I use Quicksand for the filtering and the jQuery Easing Plugin for the animations. The link:http://bram-de-leeuw.nl/test/portfolio/index.html Thanks in advance!
  7. It works great! it is so logical to, onClick and onChange Thanks!
  8. I'm working on a site and i want to use icons to select travel modes,i have an working function but it only works with a selection input.Is there a way to modify it to be used with buttons? Thanks in advance! Function: function calcRoute() { var selectedMode = document.getElementById("mode").value; var request = { origin: thuis, destination: kabk, // Note that Javascript allows us to access the constant // using square brackets and a string value as its // "property." travelMode: google.maps.TravelMode[selectedMode] }; directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); HTML - Select input <select id="mode" onchange="calcRoute();"> <option value="DRIVING">Driving</option> <option value="WALKING">Walking</option></select> HTML - Button input (?) <form id="mode"> <input type="button" onchange="calcRoute();" value="DRIVING"> <input type="button" onchange="calcRoute();" value="WALKING"></form>
  9. I solved it by wrapping the animation in a .ready function: $(document).ready(function(){$('#soundlogo').delay(1900).fadeOut(400);});
  10. Hey! I'm working on an custom map, i have the map from google and altert the style it all works.But i would like to show a HTML5 movie in an overlapping div and then fade it out afer it is finished.This is what i got so far: Jquery: <script type="text/javascript">$('#soundlogo').delay(400).fadeOut(400);</script> CSS: #soundlogo { height:100%;width:100%;display:block; background-color:#FFF;position:fixed;z-index:100;} body: <body onload="initialize()"> <div id="soundlogo"> <video width="100%" autoplay> <source src="video/soundlogo-web.mp4" type="video/mp4" /> Your browser does not support the video tag.</video> </div><div id="nav"><strong>Mode of Travel: </strong><select id="mode" onchange="calcRoute();"> <option value="DRIVING">Driving</option> <option value="WALKING">Walking</option> <option value="BICYCLING">Bicycling</option></select></div> <div id="map_canvas" style="width:100%; height:100%"></div> </body> Problem is that the fade never occurs,thanks in advance!
×
×
  • Create New...