Flipping a div just not working inside rails app

Hello I am a newbie javascript/jquery programmer. I have a page with a div and on click I need the div to flip in one direction and its just not happening. I am doing all of this within a rails app. Please help. It works perfectly on fiddle as posted by someone else : [http://jsfiddle.net/nicooprat/GDdtS/][1] All i am doing is adapting this into my rails app but with no results.

Here is my code so far

In the view : template.html.erb

    <div class="flip"> 
          <div class="card"> 
              <div class="face front"> 
                  Front
                  <!-- I have an elaborate div here in this block -->
              </div> 
              <div class="face back"> 
                  Back
                    <!-- I have a 1-1 mirror mapping of front div here in this block -->
              </div> 
          </div> 
      </div>
 <hr>   

Here's the associated css of the view. In fact all of this work on fiddle. Just not within my rails app.

template.css.scss

.flip {
  -webkit-perspective: 800;
   width: 400px;
   height: 200px;
    position: relative;
    margin: 50px auto;
}
.flip .card.flipped {
  -webkit-transform: rotatex(-180deg);
}
.flip .card {
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: 0.5s;
}
.flip .card .face {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-backface-visibility: hidden ;
  z-index: 2;
    font-family: Georgia;
    font-size: 3em;
    text-align: center;
    line-height: 200px;
}
.flip .card .front {
  position: absolute;
  z-index: 1;
    background: black;
    color: white;
    cursor: pointer;
}
.flip .card .back {
  -webkit-transform: rotatex(-180deg);
    background: blue;
    background: white;
    color: black;
    cursor: pointer;
}

Finally Here is the Javascript : template.js

$('.flip').click(function(){
       alert("hello"); <-- never called. 
       $(this).find('.card').addClass('flipped').mouseleave(function(){
           $(this).removeClass('flipped');
       });
       return false;
   });

Answers


Try to wrap your code into $(document).ready block. Like this:

$(document).ready(function(){
  $('.flip').click(function(){
       alert("hello"); <-- never called. 
       $(this).find('.card').addClass('flipped').mouseleave(function(){
           $(this).removeClass('flipped');
       });
       return false;
     });
})

Need Your Help

Monitoring GDI calls

windows monitoring gdi

Is there a tool that allows one to monitor GDI calls?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.