CODEWITHSUNDEEP
javascripthtmlif-statement
Thomas Sparber
Thomas Sparber

Reputation: 2917

HTML comment if without javascript

I know that I can display/hide content whether the browser is IE or not or even the version of IE. I was wondering if I can use other expressions too such as

<!--[if 1 == 0]-->
This should be hidden
<!--[endif]-->

The reason behind this is that I'm sending auto generated E-Mails and for me it would be easier to insert such comments in the template E-Mail instead of creating multiple templates.

Upvotes: 1

Views: 95

Answers (3)

Garbee
Garbee

Reputation: 10991

Since you are developing for email clients, no this isn't possible. You need to figure out how different clients can be targeted. Then set the display property via CSS to whatever is affected.

Ideally, your emails shouldn't need any kind of crazy logic like this. It is a smell that your email is bad. Not to mention, anything you put in the email itself is viewable, all someone needs to do is turn off HTML rendering or view the source.

Upvotes: 0

Mi-Creativity
Mi-Creativity

Reputation: 9664

I know this would look like a long answer but I just wanted to divide the code into small functions each does its own job -kind of-, first select each element with a class name of hasComment in an array using querySelectorAll then pass this array to updateHTML() function, loop through its element and call returnComment() function for each item in the array.

The returnComment() function first call hasComment() function on the element passed to it, and using .replace() to get the exact string. Function hasComment() loop through the child nodes of the element and if the nodeType of the child node is 8 it then it's a comment, we return the text between the comment <!-- and -->.

This .replace(/\[|\]/ig, ''); omits the brackets to get value of either show or hide which according to it we "hide" or "show" the child .contentDiv div.

JS Fiddle

var commentDivs = document.querySelectorAll('.hasComment');

updateHTML(commentDivs);

function updateHTML(arr) {
  for (var i = 0; i < arr.length; i++) {
    var childDiv = arr[i].querySelector('.contentDiv'),
      showIt = returnComment(arr[i]);
    if (showIt == 'show') {
      childDiv.style.display = 'block';
      console.log('Div-' + (i + 1) + ': shown');
    } else if (showIt == 'hide') {
      childDiv.style.display = 'none';
      console.log('Div-' + (i + 1) + ': hidden');
    }
  }
}

function returnComment(element) {
  var comment = hasComment(element);
  comment = comment.replace(/\[|\]/ig, '');
  return comment;
}

function hasComment(element) {
  for (var i = 0; i < element.childNodes.length; i++) {
    if (element.childNodes[i].nodeType == 8) {
      return element.childNodes[i].data;
    }
  }
}
<div class="hasComment">
  <!--[hide]-->
  <div class="contentDiv">Div -1: This should be hidden</div>
</div>
<hr>
<div class="hasComment">
  <!--[hide]-->
  <div class="contentDiv">Div -2: Again, This should be hidden</div>
</div>
<hr>
<div class="hasComment">
  <!--[show]-->
  <div class="contentDiv">Div -3: But this should be shown</div>
</div>

----------

Notes:

Upvotes: 0

Gavriel
Gavriel

Reputation: 19237

if you have a template system, then make this in your template. Anyway when you render the template you calculate the condition, but instead of printing "0 == 1" or "0 == 0", use the template's ability to print or not to print the following paragraph

Upvotes: 1

Related Questions