Responsive Diamond Grid

Asked

Viewed 41 times

1

I’m trying to make a grid Iamond but they do not catch for some reason, before was an error and now no longer has the error and still does not work

body{
    margin: 0;
    padding: 0;
    background: #000;
}
.diamond-grid{
    width: 70%;
    margin: 150px auto 0;
    
}
.item{
    width: 220px;
    height: 220px;
    transition: 0.5s;
    background: #fff;
}
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" type="text/css" href="css.css">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript" src="jquery.diamonds.js"></script>
  <link rel="stylesheet" type="text/css" href="diamonds.css" />
</head>


<body>
  <div class="diamond-grid"></div>
  <div class="item"><img src="img/calopsita.jpg"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <script>
    $("#diamond-grid").diamonds({
      size: 200, // Size of diamonds in pixels. Both width and height. 
      gap: 5, // Pixels between each square.
      hideIncompleteRow: false, // Hide last row if there are not enough items to fill it completely.
      autoRedraw: true, // Auto redraw diamonds when it detects resizing.
      itemSelector: ".item" // the css selector to use to select diamonds-items.
    });
  </script>
</body>

html css

1 answer

1


Very simple Lincoln, in his code JS you are calling the Diamond grid in an element with id equal diamond-grid but in your HTML you have no element with id but a class diamond-grid, then change this:

$("#diamond-grid").diamonds({...    // aqui está chamando por um id

For this reason:

$(".diamond-grid").diamonds({...    // aqui chamará por classe

For further clarification on how to use each of these selectors you can see these links:

  • Thanks a lot, you know jquery ? I used the code of a guy that the menu is of one color when it is at the top and when the scroll of the page goes down, the menu turns black, but as soon as it turns black I want the img that in the case is the logo, change the src that is "logooficial.png" to "logooficial2.png" has how to help me if I know ? thank you =)

  • Ask another question, you can’t answer this one. If this answer here served you accept it as an answer so that this question can be resolved on the site.

  • 1

    @lincolnferreira If the answer helped you in any way consider mark it as Accept, in this icon below the arrows so the site does not get open questions even having already been solved. And if you have any other questions open up as many questions as you need :)

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.