Jump to content

TheBnl

Members
  • Content Count

    56
  • Joined

  • Last visited

Community Reputation

0 Neutral

About TheBnl

  • Rank
    Newbie

Contact Methods

  • Website URL
    http://bram-de-leeuw.nl/
  • ICQ
    0
  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. TheBnl

    weird animations

    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. TheBnl

    weird animations

    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. TheBnl

    weird animations

    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!
  11. TheBnl

    Problem with overflow

    Ahh Thanks! i overlook those guys often!
  12. TheBnl

    Problem with overflow

    I have a problem with the overflow function on my page, somehow when the function is active the elements height gets inactive. It has to be 100% but it renders thin. this is the page: http://bram-de-leeuw.nl/filmlapse/ When you disable the overflow in the chrome console it renders 100%, i dont know how to fix this, i tried setting next to height the top and bottom properties to 0 i hope you know whats the issue!many thanks in advance!
  13. Yes! Dsonesuk, this is exactly what i mean! maybe i was a bit vague in my description, sorry for that!Many Thanks!
  14. I think i need the offsetWidth function, but it has to calculate all the widths of the divs inside the wrapper so they wont just float left and bounded by the browsers width, when the content grows beyond the boundaries of the browser it can scoll with overflow-x:scroll; I have an working example: http://bram-de-leeuw.nl/test/filmleapse/ But what i have done here is that i gave the wrapper a width of 3010px, it works fine but i dont want to adjust that value every time i would upload content.
  15. Hey! I'm making a page that has to scroll sideways,to do this it needs to have an div wrapping the content that has the total width value.I was wondering if there is a way to let javascript calculate this automatically so i dont have to change the width every time i upload new content. many thanks in advance!
×
×
  • Create New...