CODEWITHSUNDEEP
javascriptjqueryhtmlcssjson
Jake123
Jake123

Reputation: 181

Displaying images from a json file onto HTML file but styling isnt working on them

EDIT - just to clarify the images are displaying on my webpage with code exampled the styling (css) just isn't taking effect on any of the images in any way. If I give it a class, if I give it direct styling in the HTML (with style="") or if I use jQuerys .addClass or .css the styling just doesn't work.

So here is my html where the images are getting displayed into.

<div class="Hats2">

</div>

and now here is my jquery I am using to display the images

$(function() {

    var products = []

    $.getJSON('test.json', function(data) {
        $.each(data.products, function(i, f) {
            var tblRow = '<div class="Hats"><img src=' + f.imUrl + '></div>'
            $(tblRow).appendTo(".Hats2");
        })
    })
})

And now I just have three line of CSS that changes the size of them under the class 'Hats'. Which I have given the image by trying it with the img element itself and the div is it in (like it is now)

.Hats {
    width: 200px;
    height: 200px;
}

But for some reason the css isnt taking affect at all Ive tried all different styling like border-radius, etc. No styling works at all. Is it because I have given the class via jquery? Im just really confused. Here is my json file aswell just incase its needed.

{ "products": [
{
  "title": "Hat",
  "imUrl": "http://ecx.images-amazon.com/images/I/41pRaO7fFSL._SX395_.jpg"
},
{
  "title": "Hat2",
  "imUrl": "http://ecx.images-amazon.com/images/I/41z9Fhv41lL._SY300_.jpg"
},
{
  "title": "Hat3",
  "imUrl": "http://ecx.images-amazon.com/images/I/41y-UNn0QLL._SX342_.jpg"
}
]
}

Upvotes: 1

Views: 385

Answers (3)

user3310334
user3310334

Reputation:

The problem is that even though the .Hats divs are correctly styled, that is, they are 200x200px as you say in the CSS, the image elements you're putting inside of them are larger.

enter image description here

Even though the images are children of the .Hats divs, they extend past the boundaries of their parents.

Just add this css rule:

.Hats > img {
  max-width: 100%;
  max-height: 100%;
}

To fit the images inside of their parent div.

var data = {
  "products": [
    {
      "title": "Hat",
      "imUrl": "http://ecx.images-amazon.com/images/I/41pRaO7fFSL._SX395_.jpg"
    },
    {
      "title": "Hat2",
      "imUrl": "http://ecx.images-amazon.com/images/I/41z9Fhv41lL._SY300_.jpg"
    },
    {
      "title": "Hat3",
      "imUrl": "http://ecx.images-amazon.com/images/I/41y-UNn0QLL._SX342_.jpg"
    }
  ]
};

$(document).ready(function() {
  $.each(data.products, function(i, f) {
    var tblRow = '<div class="Hats"><img src="' + f.imUrl + '"></div>';
    $(tblRow).appendTo(".Hats2");
  });
});
.Hats {
    width: 200px;
    height: 200px;
}

.Hats > img {
  max-width: 100%;
  max-height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="Hats2">

</div>

Upvotes: 1

user2603796
user2603796

Reputation:

You should assign the Hats class to img instead, like this:

$(function() {

var products = []

$.getJSON('test.json', function(data) {
    $.each(data.products, function(i, f) {
        var tblRow = '<div><img class="Hats" src=' + f.imUrl + '></div>'
        $(tblRow).appendTo(".Hats2");
    })
    $(".Hats").css({width: "200px", height: "200px"});
});

})

Upvotes: 0

Praveen Alluri
Praveen Alluri

Reputation: 307

This would not work.

$(tblRow).appendTo(".Hats2");

You are supposed to put 

$(tblRow).appendTo($(".Hats2"));

Upvotes: 0

Related Questions