How to insert a div in between flexbox rows and keep everything responsive?


Tags: javascript,jquery,html,css3,flexbox

Problem :

I tried using flexbox, as sweet as flexbox is for keeping it responsive, I quickly found out that it wasn't possible to selectively place a div in between rows when wrapping.

Tried doing it via inline-block rather than using flexbox, and it works fine if I ignore keeping the page responsive. But that's the crux of the matter; I need for it to stay responsive.

Regardless of how many items are in the row, it should display the bio row below the row of where the row of the selected (clicked) picture is. If a picture is selected in a different row, the original bio row is closed, and reopened in the row below the row of the newly selected picture.

This is the closest I've managed for flexbox:

    .container {
        max-width: 1220px;
        border: 5px solid black;
        display: flex;
        margin: 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }
    
    .item {
        border-width: 1px;
        border-style: solid;
        border-color: black;
        width: 200px;
        height: 300px;
    }
    
    .one {
        background: #B5AC01;
    }
    .two {
        background: #ECBA09;
    }
    .three {
        background: #E86E1C;
    }
    .four {
        background: #D41E45;
    }
    .five {
        background: #D41EFF;
    }
    .six {
        background: #D4FF45;
    }

    body {
        margin: 0px;
        padding: 0px;
    }
<div class="container">
  <div class="item one"></div>
  <div class="item two"></div>
  <div class="item three"></div>
  <div class="item four"></div>
  <div class="item five"></div>
  <div class="item six"></div>
  <div class="item four"></div>
  <div class="item five"></div>
  <div class="item six"></div>
  <div class="item one"></div>
  <div class="item two"></div>
  <div class="item three"></div>
</div>

That didn't work out, as it's apparently a toughie to be able to find a row and insert a div in between those rows. So I switched tacks and tried inline-block, only to find that while it's less complicated, it's still complicated.

.container {
  max-width: 1220px;
  border: 5px solid black;
  margin: 0 auto;
  font-size: 0; 
}
    
.item {
  display: inline-block;
  width: 200px;
  height: 300px;
  margin: 0px;
  padding: 0px;
  border: 1px solid black;
  font-size: 14pt;
  color: white;
  text-align: center;
  line-height: 300px;
}

.bio {
  height: 500px;
  width: 100%;
  background: #333;
  color: white;
  font-size: 24pt;
  text-align: center;
  line-height: 500px;
}

.selected {
  box-shadow: inset 0 0 10px #000000;
  font-weight: 800;
}

.row {
  display: inline-block;
  font-size: 0; 
}

.subrow {
  display: inline-block;
  font-size: 0; 
}
    
.one {
  background: #B5AC01;
}

.two {
  background: #ECBA09;
}

.three {
  background: #E86E1C;
}

.four {
  background: #D41E45;
}

.five {
  background: #D41EFF;
}

.six {
  background: #D4FF45;
}

body {
  margin: 0px;
  padding: 0px;
}
<div class="container">
    <div class="row">
        <div class="subrow">
            <div class="item one">Pic</div>
            <div class="item two">Pic</div>
            <div class="item three selected">Clicked Pic</div>
        </div>
        <div class="subrow">
            <div class="item four">Pic</div>
            <div class="item five">Pic</div>
            <div class="item six">Pic</div>
        </div>
    </div>
    <div class="bio">
        Bio goes here with pic
    </div>
    <div class="row">
        <div class="subrow">
            <div class="item four">Pic</div>
            <div class="item five">Pic</div>
            <div class="item six">Pic</div>
        </div>
        <div class="subrow">
            <div class="item one">Pic</div>
            <div class="item two">Pic</div>
            <div class="item three">Pic</div>
        </div>
    </div>
</div>

Haven't had much luck. Would love a CSS/HTML only solution, but I'm open to Javascript/jQuery if that's necessary to pull it off. Ideas? Thanks in advance for your time.

Edit: someone posted a solution below suggesting using offsetTop to track wrappage to determine where to insert the bio row. While it's not a CSS/HTML only solution, it's not a bad solution. I'll experiment with the JS code some more tomorrow morning when I've had more sleep in me.



Solution :

$(function(){

  $('.item').click(function() {
    var $this = $(this);
    
    $('.selected').removeClass('selected');
    $this.addClass('selected');

    moveBio();
  });
  
  function moveBio() {

    var $bio = $(".bio");    
    var itemsPerRow = 0;

    $bio.hide(); // hide so doesn't affect calculations

    var firstItem = $('.item').eq(0);
    var itemTop = firstItem.position().top;
       
    $('.item').each(function(i) { // loop till we hit next row
      if($(this).position().top != itemTop) {
            itemsPerRow = i;
            return false;
        }   
    });
    
    selectedIndex = $(".item").index($('.selected')[0]);
    selectedRowNum = Math.floor(selectedIndex / itemsPerRow) + 1;
    
    $(".bio").insertAfter($(".item").eq((selectedRowNum * itemsPerRow) - 1)).show();    
  }
  
  $(window).resize(function() {
    $(".bio").hide(); // hide Bio so it doesn't interfere with the flex layout during resize
    clearTimeout(window.resizedFinished);
  
    window.resizedFinished = setTimeout(function(){
        moveBio(); // show Bio again now that resize has stabilised
    }, 250);
  });
  
});
.container {
        max-width: 1220px;
        border: 5px solid black;
        display: flex;
        margin: 0 auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .item {
        border-width: 1px;
        border-style: solid;
        border-color: black;
        width: 200px;
        height: 300px;
    }
    
.bio {
  height: 500px;
  width: 100%;
  background: #333;
  color: white;
  font-size: 24pt;
  text-align: center;
  line-height: 500px;
}
    .one {
        background: #B5AC01;
    }
    .two {
        background: #ECBA09;
    }
    .three {
        background: #E86E1C;
    }
    .four {
        background: #D41E45;
    }
    .five {
        background: #D41EFF;
    }
    .six {
        background: #D4FF45;
    }
    .selected {
        box-shadow: inset 0 0 10px #000000;
        font-weight: 800;
    }
    body {
        margin: 0px;
        padding: 0px;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">
  <div class="item one"></div>
  <div class="item two"></div>
  <div class="item three"></div>
  <div class="item four"></div>
  <div class="item five"></div>
  <div class="item six selected"></div>
    <div class="bio">
        Bio goes here with pic
    </div>  
  <div class="item one"></div>
  <div class="item two"></div>
  <div class="item three"></div>
  <div class="item four"></div>
  <div class="item five"></div>
  <div class="item six"></div>
</div>

Added dynamic browser resizing

Here's an easier to resize example: http://jsbin.com/wamisiliza/edit?output


    CSS Howto..

    How can I center this textbox using CSS?

    How to style (increase the height) of select box in CSS?

    How to change the text color of the clicked row of table with css and jquery

    How to make a text flash in html/javascript?

    How can I do html multi elements list with type attribute?

    How can I apply percentage-based positioning to background-image sprites with pure CSS?

    How to temporarily modify the CSS of an element

    How can I use .htaccess to send distant expiry headers on CSS and JS files?

    How can I have a CSS hover affect a different tag?

    In CSS, how to select a particular tag under mutiple ids?

    How to add new fonts in CSS for local testing

    How do I align my navbar so it's permanently in the middle of my white box (without padding etc)?

    How do we change the color and size of dingbat unicode characters in mobile Safari? (html entities)

    How to increase height of footer's div when browser window is resized?

    CSS/Bootstrap: How to stretch containers within cols full-height?

    How to locate and use fonts in Qt for Embedded Linux?

    CSS: How to prevent contents of scrollable div from appearing behind a fixed div

    How to remove background color from reply of html email template in Outlook 2010/2013

    When I print my webpage I lose all the css colouring. Is there an option or script to print a webpage exactly how it looks?

    In CSS, how to toggle the tab color if it was selected (without using javascript)

    How to calculate rotation angle from rectangle points?

    How do I keep a grid-type-arrangement of floating div elements centered in their container at various screen widths? [closed]

    How do you add 'box-sizing: border-box' to Normalize.css file?

    How to hide div on swipe in Angular

    How to add a css class programmatically to a piece of code?

    How to make dynamic content positioning?

    How to create and style dropdown menus using the wordpress menus section? [closed]

    How do I make menu background even with the header in HTML/CSS

    How can I align this?

    How to make my CSS transition smoother/work on different browsers?