Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Ruby

CoffeeScript and hover effect with status class not working

In the 'Adding Interactivity' part of the Build a Simple Ruby on Rails Application video (7:00) I'm unable to get hover effect with status class or the console log feature to work with CoffeeScript. Here's my snippet of code http://snipt.org/Ajjjc1. Thoughts?

4 Answers

Thank you very much for your help, Andrew. I checked another post and found the solution: I was not using a pseudo-class in my CSS file. I had typed:

.status.hover .admin {
display: inline;
}

When the correct form was:

.status:hover .admin {
display: inline;
}

I changed the period for a colon and it worked. Thank you very much!

Andrew Merrick
Andrew Merrick
20,151 Points

Giovanni - I've been having the same problem and I believe, assuming you're using Sublime Text 2, that this text editor does not natively support CoffeeScript. If you look at the video where Jim is editing the statuses.js.coffescript file in the very lower right-hand corner you see CoffeScript. This is not available with Sublime Text and needs to be added. I've found a Github site: https://github.com/Xavura/CoffeeScript-Sublime-Plugin that offers a plugin but I'm getting an error with the install.

I could be wrong, but I think that's the issue.

I already downloaded the CoffeScript plugin for Sublime Text 2, but I can't get the "hover" class working. I get this error in Chrome's console:

Uncaught TypeError: Cannot call method 'create' of undefined 

I've repeated the video and compared my lines of code with the ones in it and I can't get what I'm doing wrong. My index.html.erb is this:

<% @statuses.each do |status| %>
<div class="status hover">
  <strong><%= status.name %></strong>
  <p><%= status.content %></p>
  <div class="meta">
    <%= link_to time_ago_in_words(status.created_at) + " ago", status %>
    <span class="admin hover">
      | <%= link_to "Edit", edit_status_path(status) %> |
      <%= link_to "Delete", status, method: :delete, data: { confirm: "Are you sure you want to delete this status?"} %>
    </span>
  </div>
</div>
<% end %>

And my statuses.js.cofee is this:

$ ->
$('.status').hover (event) -> 
    $(this).toggleClass("hover")

Exactly like in the video (well, I think, as I can see) that is identical to the one shown in the video. I hope Giovanni could solve his issue also.

Andrew Merrick
Andrew Merrick
20,151 Points

Alan, your code works for me. I found a different Github page to install the Textmate CoffeeScript package for Sublime Text and after I followed the directions I was able to install the package and run the CoffeeScript code in Sublime Text and it worked!

https://gist.github.com/zeke/1953735

See if you have any luck with that.