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.

JavaScript

New to jQuery/JS and can't figure out what's wrong

I'm using the skeleton grid, and trying to use jQuery to change a four column layout to a six column layout so that my three image wide row will switch to a two image wide row on smaller screens.

Related question: skeleton uses class="four columns" for example, but in the CSS it is marked as four.columns. I thought "four columns" would make two properties "four" & "columns." Why can they put a space between them?

EDIT: I left off the codepen, like an idiot.

http://codepen.io/pandathorax/pen/oXEqRg

Thanks!

4 Answers

Sara Hardy
Sara Hardy
8,650 Points

.four.columns means that it affects containers with both the "four" and "columns" classes on them.

Placing a space between the two in the css selector would affect containers with the class "columns" that are children of containers with the class "four" - not what you want in this case.

You can access either class separately as well by only specifying one as the selector.

.four.columns {
    /* containers with both classes */
}
.four .columns {
    /* "columns" container inside "four" (not what you want) */
}
.four {
     /* containers with the class "four" */
}
.columns {
     /* containers with the class "columns" */
}

Thanks Sara. The lynda.com tutorial actually uses "four columns". I was just copying it.

Also, I'm not sure which element to specific when using .getElementsByClassName.

Sara Hardy
Sara Hardy
8,650 Points

I can add that placing a space between the classes in the actual HTML markup as you showed in your original post means that the container has both of those classes. In your example, the container has both the four and columns classes on it.

I'm not sure I completely understand your other question(s).

Thanks again, Sara, and sorry for the confusion.

I'm making a portfolio with a 12-column grid. At max width there are three images per row. As the width of the screen shrinks, I want the images to change from three images per row to two images per row. And finally, as the screen gets to mobile size, it needs to change to one image per row.

At max width each image divs is four columns wide, taking up all 12 columns. At medium size, as in my question, I want the divs to take up six columns, so that they fill up the 12 columns and force other images to the next line. My instructor said I could jQuery or Javascript to achieve that, instead of using normal @media queries.

So, my goal is to change the "four" class to a "six" class in the image divs. It's very likely that I'm going about this the wrong way.

Sara Hardy
Sara Hardy
8,650 Points

If you really want to do this with jQuery instead of media queries you have a couple options.

1) On window resize, you check to see how wide the window is and add and remove the classes if necessary. This requires you to also have a way to go back if they make the browser wider again.

$(window).resize(function() {
  var width = $(this).width();
  if (width > 550 && width <= 801) {
    $('.portfolio').removeClass('four').addClass('six');    
  }
  // do another check here for larger and one for smaller and set those classes 
});

2) You could check on doc ready for a size and set it there. This means that once it's set, it will not change when the user resizes their browser.

$(document).ready(function() {
  var width = $(window).width();
  if (width > 550 && width <= 801) {
    $('.portfolio').removeClass('four').addClass('six');    
  }
});

With the grid set up like you have it, this is going to act strangely because there are three per row now and once you set the class to display two, the third goes under the first two on its own line. The way your page is set up it would make more sense to start with four and go to two if necessary so each row always has the same number of photos.

Thanks very much, Sara. I'll fiddle around with this and fix that row div issue, which makes total sense.