CODEWITHSUNDEEP
jqueryhtmlcss
Mr_Bober
Mr_Bober

Reputation: 153

Script changes div size, ignoring css

A couple of days ago, I was helped by this same community to make a script to show random images from an array into 4 divs. Each image would change on refresh and/or with a timer.
It worked just fine, until I decided to use it associated to a css layout I've been working on.

HTML:

<section>
    <div id="square_1" class='box'>
    </div>

    <div id="square_2" class='box'>
    </div>

    <div id="square_3" class='box'>
    </div>

    <div id="square_4" class='box'>
    </div>
</section>

CSS:

body{
  width: 100%;
  height: 100%;
  background-color: #404040;    
}
.box{
  position: relative;
  width: 20%;   /* desired width */
  background-color: #ffb3b3;
  border: 10px solid #fff;
}
.box:before{
  content: "";
  display: block;
  padding-top: 100%;  /* initial ratio of 1:1*/
}
.box img{
    width: 100%;
}
/* Positions */
#square_1{
    position: absolute;
    margin-top: 2%;
    margin-left: 42%;
    z-index: 90;
}
#square_2{
    position: absolute;
    margin-top: 22%;
    margin-left: 2%;
    z-index: 100;
}
#square_3{
    position: absolute;
    margin-top: 48%;
    margin-left: 27%;
    z-index: 100;
}
#square_4{
    position: absolute;
    margin-top: 34%;
    margin-left: 73%;
    z-index: 100;
}

Here's a demo of how the layout is supposed to be: http://codepen.io/anon/pen/ZWYywx

JQuery

/* generate the array of images you want to choose from */
var srcarray = [
  "https://s-media-cache-ak0.pinimg.com/736x/7e/1d/4a/7e1d4a1566976f139a2ba58b108e2bce.jpg",
  "http://rs832.pbsrc.com/albums/zz248/Paria53/Edited/Random.jpg~c200",
  "http://images.freeimages.com/images/premium/large-thumbs/5187/51875120-random-numbers-forming-a-sphere.jpg",
 "http://www.islandstone.com/mediafiles/product_records/56_Random_lines_thumb.jpg"
];

function randomizeImages() {
  arr = [];
  /* select unique images from the array and display them into relevant divs (any number divs allowed, should be less than available images)*/
  while(arr.length < $("section div").length){
    var randomnumber= srcarray[Math.floor(Math.random()*srcarray.length)];
    var found=false;
    for(var i=0;i<arr.length;i++){
       if(arr[i]==randomnumber){found=true;break}
    }
    if(!found)arr[arr.length]=randomnumber;
    $( "section div:nth-child("+(i+1)+")" ).html( '<img src="'+randomnumber+'">' );
  };
}

//randomize images when page is reloaded
$(function() {
 randomizeImages();
});

//randomize images every 5 seconds (change interval as you wish)
window.setInterval(function(){
  randomizeImages(); 
}, 5000);

And here's what happens when I associate it with said script: http://codepen.io/anon/pen/RaNgvN

I did try setting top, margin, and padding to zero for <img>, but it didn't seem to work. Does anyone have an idea about what's causing it or how to prevent it?

Upvotes: 4

Views: 71

Answers (1)

Alex McMillan
Alex McMillan

Reputation: 17952

Try adding display: flex; to your .box class. Flexbox is an awesome solution to all your css position problems :)

Upvotes: 3

Related Questions