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!

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

JavaScript

Emil Wallgren
Emil Wallgren
11,737 Points
Posted by Emil Wallgren
Emil Wallgren
11,737 Points

Help with my CodePen :-)

Hi!

Please check out my pen! http://codepen.io/EmilWallgren/pen/vALid The problem I'm having is that when I press the ball, i want it to expand...which it does. But when I press it again I want it to go back. And so on...

Have been searching on JQuery API but can't find what to do...Tried if/else-statements but I couldn't get them to work either...

Got any tips?

Thanks!

/E

5 Answers

Sean T. Unwin
Sean T. Unwin
28,688 Points
Sean T. Unwin
Sean T. Unwin
28,688 Points

I gotta say the identifier for your pen in the URL is great! :-D

While Dave McFarland took a JavaScript/jQuery approach, I wanted to try a more CSS-driven approach.

Here's my fork.

The following is the changes I made:

CSS:

#circle {
 /*existing CSS here */
  text-align: center; /* keep text centered */
  transform: scale3d(1,1,1);
  transition: transform 1s linear;
}

.grow {
  transform: scale3d(1.15,1.15,1) !important;
  transition: transform 1s linear;
}

JQuery:

$("#circle").click(function(){
  $(this).toggleClass("grow");
});

You will notice in the CSS that the transform in .grow has !important added. This is because of specificity -- i.e. id's take precedence over classes. If you did not want to use !important, which I would recommend, then change the id to a class of "circle".

  • edit: I have modified the pen in order to remove the need for !important. This is accomplished by increasing the specificity to include the id -- from .grow { ... } to #circle.grow { ... }.
Dave McFarland
STAFF
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Emil Wallgren

Here's one way to do it:

var $circle = $('#circle');

 $circle.click(function(){
   var $this = $(this); 
   var width;
   var height;

   if ($this.width() < 150 ) {
     width = '150px';
     height = '150px';
   } else {
     width = '130px';
     height = '130px';
   }

   $(this).animate({
    'width': width,
    'height': height,
    }, 1000);
});
Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

That's awesome; can't wait. Seems things are really picking up at Treehouse!

Emil Wallgren
Emil Wallgren
11,737 Points
Emil Wallgren
Emil Wallgren
11,737 Points

Thank you so much Dave for the fast answer! I want you to know that I couldn't code anything when I started this new hobby in December. I'm aiming to be a front-end developer by July! It feels safer to start when you know that you could use this awesome forum if you get stuck :-) People like you make my hard work worth while! :-)

Thanks! :-D

/E

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

You're welcome Emil. Glad I could help.

Dustin Matlock
Dustin Matlock
33,856 Points
Dustin Matlock
Dustin Matlock
33,856 Points

Dave, I didn't know you worked for Treehouse — that's pretty cool! I've been reading your CSS books for some time now.

Dave McFarland
Dave McFarland
Treehouse Teacher
Dave McFarland
Dave McFarland
Treehouse Teacher

Hi Dustin

Just started here at Treehouse. I'll be teaching some JavaScript courses -- look for them soon.