RedShark62
New Member
I am working on a website to show the information of the Pokemon by using a search bar.I would like to add a function of flipping card instead of my current design.I am trying to make an animation card flip that Front side shows an image and Back Side shows the last of the information. But, I can't figure it out how to apply these in my code since I am bring up the data using jsrender. In case I put the URL here: http://www.juriseodesign.com/pokemon/index.htmlThanks for the further helps!\[code\]<!DOCTYPE html><html> <head> <script type="text/javascript" src="http://stackoverflow.com/questions/13814804/jquery-1.8.3.js"></script> <script type="text/javascript" src="http://stackoverflow.com/questions/13814804/jqui.js"></script> <script type="text/javascript" src="http://stackoverflow.com//raw.github.com/BorisMoore/jsrender/master/jsrender.js"></script> <script id="template" type="text/x-jsrender"> <div id="card"> <div class="{{for type}} {{:#data.toLowerCase()}} {{/for}} "> <img id="img" src='http://stackoverflow.com/questions/13814804/{{:img}}'> <div id ="name">Name: {{:name}}</div> <div id ="type">Type: {{:type[0]}}</div> <div id ="hp">HP: {{:stats.hp}}</div> <div id ="attack">Attack: {{:stats.attack}}</div> <div id ="defense">Defense: {{:stats.defense}}</div> <div id ="speed">Speed: {{:stats.speed}}</div> </div> </div> </script> <script type="text/javascript"> var pokemon; var pokemonNames = []; $(document).ready(function(){ // get the data from the url $.ajax({ url: 'http://blobby.co/protos/pokemon/', dataType: 'json', // get the api success: function(r){ console.log(r); pokemon = r; for(var i = 0; i < pokemon.length; i++){ pokemonNames.push(pokemon.name) // push(add) pokemon.name to empty pokemonNames array } //$("#content").append($('#template').render(r)); } }); // auto complete start $( ".mykeyup" ).autocomplete({ source: pokemonNames, }); $('.ui-autocomplete li a').live('click',function(){ var myText = $(this).text(); // do something with the pokemon name var myPokemon = $.map(pokemon,function(e,i){ if(e.name == myText) return pokemon; }); console.log(myPokemon); $("#content").empty().append($('#template').render(myPokemon)); }); function showOnePokemon(name){ } }); </script> </head><body> <div class="container"> <center> <img id="logo" src="http://stackoverflow.com/questions/13814804/images/logo.png" alt="logo" width="300px" height="" /><br /> <input class="mykeyup" placeholder="Type something" /> <button type="submit" id="search"> <img id="searchicon" src="http://stackoverflow.com/questions/13814804/images/search.png" alt="search" width="" height="" /> </button> </center> <div id="content"> </div> </div></body></html>\[/code\]