CODEWITHSUNDEEP
javascript
19eggs
19eggs

Reputation: 195

Check if class is present if else add height to a div

What I'm trying to do is check if class exist. If present add height by 'X' px in another class if not add height by 'Y' px

Not using Jquery. And it should be supported in IE8. document.getElementsByClassName is not supported in IE8 so used className.match but then again it started to get longer. My code below does not go past the 3rd

JSBIN

Any one with a short IE8 friendly code?

window.onload = window.onresize = function heightResize () {
var browserHeight = window.innerHeight;
var present=document.getElementsByTagName('p');
alert(present.length);
 for (var i=0; i<present.length; i++) {
  if (present[i].className.match(/\bbuttons-container\b/))
       {
 alert("Yes Present");
 document.getElementsByClassName("boxcontent")[0].style.height = browserHeight -150 + "px";
       } else {
alert("Not Present");
document.getElementsByClassName("boxcontent")[0].style.height = browserHeight -200 + "px";
              }

              }

              };

HTML

 <p>
First Para
 </p>
  <table>
  <tr>
  <td>
    <p>
Second Paragraph
    </p>
    <div  id ="overlay_modal" class="boxcontent">
      Output
    </div>
     </td>
   </tr>
   </table>

  <p>
Third Para
  </p>
   <p class="buttons-container">
Buttons
   </p>

Upvotes: 0

Views: 174

Answers (2)

vassildador
vassildador

Reputation: 36

IE8 does indeed not support document.getElementsByClassName but querySelectorAll is supported, albeit only with IE8's limited css support.

This allows you to get the elements with a given class like

document.querySelectorAll('.classname');

If you really need to select the elements "without" the class (as opposed to giving them a different class) you could select all <p> tags, then select all tags with the class and see which ones match.

Keep in mind that querySelectorAll returns a NodeList, not an Array. It looks like an array (and can be looped over) but it doesn't have the Array methods.

Upvotes: 1

Icepickle
Icepickle

Reputation: 12806

Using your code, i could make this version of it:

function getElementsByTagClassName(tag, className) {
  var ret = [], tags = document.getElementsByTagName(tag), i, len, item;
  for (i = 0, len = tags.length; i < len; i++) {
    item = tags[i];
    if (item.className.match("\\b" + className)) {
      ret.push(item);
    }
  }
  return ret;
}

function heightResize() {
  var browserHeight = parseInt(window.innerHeight || document.documentElement.clientHeight), 
      paragraphs, found = false, boxcontent, i, len, elem;

  paragraphs = getElementsByTagClassName('p', 'buttons-container');
  found = paragraphs && paragraphs.length;
  boxcontent = getElementsByTagClassName('div', 'boxcontent');
  if (boxcontent && boxcontent.length) {
    for (i = 0, len = boxcontent.length; i < len; i++) {
      elem = boxcontent[i];
      if (found) {
          elem.style.height = (browserHeight - 150 > 0 ? browserHeight - 150 : 0) + 'px';
      } else {
          elem.style.height = (browserHeight - 200 > 0 ? browserHeight - 200 : 0) + 'px';
      }
      alert(elem.style.height);
    }
  }
}

window.onload = window.onresize = heightResize;

You could find the jsfiddle here, and an embedded version (to test in IE8 here)

Upvotes: 1

Related Questions