CODEWITHSUNDEEP
javascriptjqueryhtmlcss
sol
sol

Reputation: 22939

Can I use CSS to change this HTML structure?

I have a very rigid html structure which is displaying a gallery of images. Images are grouped alphabetically.

Demo: http://codepen.io/sol_b/pen/aBpbxz

HTML for each panel: 

<div class="item">
      <h2>A</h2>
      <div class="image">
          <img src="image.jpg">
      </div>
</div>

What I'd like to do is separate each alphabetical group.

Like this: http://codepen.io/sol_b/pen/LbxVRr

Unfortunately I can't alter the HTML, only CSS (or JavaScript if that's necessary).

I've tried positioning, floats, widths. What makes it more difficult is that each item gets a heading, whether it displays content or not.

Is this even possible with CSS?

One thing I considered was adding a <br> tag before each heading that has content. Example:

var breakTag = document.createElement('br');
var element = document.getElementsByTagName('h2');

if(element.innerHTML == ""){
  element.insertBefore(breakTag);
}

However I would need to target before the item, and not before the h2, which I'm not sure how to do.

Any help much appreciated.

Upvotes: 2

Views: 1194

Answers (3)

dtanders
dtanders

Reputation: 1845

To add a break before each element with the class 'item' that has a non-blank h2 you'd do something like

var sections = document.getElementsByClassName('item');
for (var section of sections) {
    let heading = section.getElementsByTagName('h2')[0];
    if (!heading || !heading.innerHtml) { continue; }
    section.parent.insertBefore(document.createElement('br'), section);
}

If you want to get more complicated, you could get fancier and create a container every time you find an item with a heading and add them to the container:

var sections = document.getElementsByClassName('item');
var currentContainer = null;
for (var section of sections) {
    let heading = section.getElementsByTagName('h2')[0];
    if (heading && heading.innerHtml) { 
        currentContainer = document.createElement('div');
        currentContainer.className = 'generated-section';
        section.parent.insertBefore(currentContainer, section);
    }
    section.parent.remove(section);
    currentContainer.appendChild(section);
}

Those are both untested, so they might require some work. The second also assumes they're in order, which it sounds like they are.

Upvotes: 1

Maxim Kotelnikov
Maxim Kotelnikov

Reputation: 51

var breakTag = document.createElement('br');
var elements = document.getElementsByTagName('h2');

for(var element of elements){
  if(element.innerHTML){
      element.parentNode.parentNode.insertBefore(breakTag.cloneNode(true), element.parentNode);
  }
}

Upvotes: 0

Zoltan Toth
Zoltan Toth

Reputation: 47667

var breakTag = document.createElement('br'),
    elems = document.getElementsByTagName('h2'),
    parentDiv = document.getElementsByClassName('content')[0];

for (var i = 0; i < elems.length; i++) {
  if (elems[i].innerText !== '') {
    parentDiv.insertBefore(breakTag.cloneNode(true), elems[i].parentNode);
  }
}
.wrapper {
  width: 800px;
  margin: 0 auto;
}

h2 {
  font-size: 16px;
  font-family: sans-serif;
}

br {
  display: block;
  content: "";
}

.item {
  display: inline-block;
  width: 33%;
  position: relative;
}

.image {
  width: 240px;
  height: 120px;
  position: relative;
}

.name {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 auto;
  text-align: center;
  background-color: #1a1a1a;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  opacity: 0;
  transition: 0.1s ease-in-out;
  width: 240px;
  height: 120px;
  display: table;
  box-sizing: border-box;
  padding: 20px;
}

.name:hover {
  opacity: 1;
}

.name span {
  display: table-cell;
  vertical-align: middle;
  cursor: default;
  font-family: sans-serif;
  letter-spacing: 3px;
}
<div class="wrapper">
  <div class="content">
    <div class="item">
      <h2>A</h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2></h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2></h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2></h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2>B</h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2></h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2>C</h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2></h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

    <div class="item">
      <h2>D</h2>
      <div class="image">
        <img src="http://placehold.it/240x120">
        <div class="name">
          <span>Title</span>
        </div>
      </div>
    </div>

  </div>
</div>

Upvotes: 2

Related Questions