Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Chris Beyer
425 PointsHow to add class status.hover to index?
Hello Team:
How is everyone?
I am not new to CSS but I am of course to ROR.
For a while I have not been able to reproduce the hover effect in edit and delete.
Looking at this from CSS standpoint there is of course no status.hover class in "my" index. From video I understand that this is added with coffeescript :$ -> $('.status').hover (event) -> $(this).toggleClass("hover")
I am not sure why but this is not creating the effect. I know that there was a status.hover added in the video in the inspector(using Mac). Understanding this is for effect only however it is demonstrating that the class has to be there. Beyond that I can only think that the page is not pulling in Coffescript. That is through script source/ <script src="/assets/statuses.js?body=1"></script>
Any help on this would be greatly appreciated. Here is most of my code: http://rubycode2.tumblr.com/
Chris
Chris Beyer
425 PointsI see in the localhost:3000/statuses the status.js loads but I don't see statuses.js.coffee. Coffee is where it is at. Unless that actually does load it. I am not sure. I will make a screenshot later if necessary.
That is looking in the web inspector. I just don't know how to troubleshoot this. As an css/html person I just know what is in CSS receives a class or id in an index page or whatever. So the coffee script takes the place of a class in jndex? May sound naive but I really need to know correct fix.
Thanks, Chris
Andrew Shook
31,709 PointsCoffee script is just higher level version of javascript, so it works exactly the same except with a friendlier syntax. In fact, coffee script get interpreted into javascript before it's actually executed. In fact, I looked over the RoR project here on treehouse, Programming >Build a Simple Ruby on Rails Application > Frontend > Development > Adding Interactivity, where Jim talks about that particular code and he puts it in statuses.js.coffee, but at time 6:04 into the video when he is in the console you can see that the file being executed by the browser is statuses.js. So if statuses.js is loading into your browser then the coffee script file is being translated into java and everything is as it should be, at least when it comes to the coffee to java part.
As far as trouble shooting, the easiest way to trouble shoot javascript is by using console.log() like Jim does, or by using an alert(). I prefer an the alert method because alert will stop the javascript execution until you click the ok button. So that way you can put a few alerts in you file and use them like break points.
Like I said earlier, coffee script is just a language that get turned into javascript before the web page is requested from the server, so it works just like javascript. Also, jQuery used inside of a coffee file works exactly that same too. So css selectors and ids are used by javascript/jQuery to attach animation or some other kind of behavior.
1 Answer
Nick Pettit
Treehouse TeacherHi Chris Beyer,
Just checking in, were you able to figure this out or do you still need help?
Chris Beyer
425 PointsNick, I have been away a few days. I appreciate the reply for this. My code is accessed at link above still. The problem was I could not get text to appear. In fact you can see a png image of output. If you get a chance would you be able to look it over. That would be great. http://rubycode2.tumbllr.com.
Thanks,
Chris
Nick Pettit
Treehouse TeacherIn your CSS, it looks like you have the div containing the .admin class set to display: none, like this:
.status .admin {
display: none;
}
This would cause the class to disappear. Instead, try setting it to display: inline or display: block - That should make them show up. :)
Chris Beyer
425 PointsSorry for the delay Nick. I have never been so stumped on a tutorial. What I put in to code was what was in the tutorial.
It showed:
.status .admin { display: none; }
.status.hover .admin { display: inline; } The tutorial stated status.hover took precedence and displayed inline. At this point I will do anything to move on. However this information came from interactivity section. I would be gladly wrong about this.
Thanks for your help. Please reply when you get a chance.
Chris B.
Nick Pettit
Treehouse TeacherHi Chris,
Sorry for the delay on my end as well! There's potentially a couple things going on here.
First, the selector .status.hover won't work. It needs to be .status:hover (with a colon) in order to use the :hover pseudo-class.
Second, the :hover pseudo-class won't work unless the element is visible without it, meaning that .status .admin cannot be set to display:none.
Can you link to the Treehouse code challenge or video that this is coming from? That would help out a lot. :)
Chris Beyer
425 PointsNick, thanks. A few days ago I got a reply on this. Put it in and problem solved. Now I am onto commits and pushing to Git. I will contact if I may .
Chris B
Andrew Shook
31,709 PointsAndrew Shook
31,709 PointsYour code looks fine. Have you looked in you web inspector to see if the javascript is loading? Another thing you could try is adding alert("the hover script is working"); to the .hover().