Breaking Div tag Display None in Java Script

I am serving a required banner ad for a free "to the user" service. If they put the banner in a <div style="display:none;visibility:hidden"> tag, then they have effectively removed the banner they are required to display. Using HTML, I can change the parent DIV back to display inline, rendering the ad visible (see code).

===============

The test
<div style="display: none; visibility: invisible;">
This is a div tag I am hiding and trying to bust.
<div id="myid"><img src="http://www.somesite.com/images/banner.jpg" border="0" onload="javascript:document.getElementById('myid').parentNode.style.display = 'inline';"></div>
</div>


It works great! it breaks the div, shows the data, everything is lovely. But now let's say I want to use javascript to display the ad (so I can pull a paying banner from an ad server.) Here is the code:


<div style="display:none;visibility:hidden">
<SCRIPT LANGUAGE="javascript">
var A = 5;
var s_prot=(window.location.protocol.toLowerCase().indexOf('https')>=0);
document.write('<sc'+'ript type="text/javascript" src="http'+ (s_prot?'s':'') +'://www.somedomain.com/myjsfile.php?A=5" /></sc'+'ript>');
</SCRIPT>
</div>

Here is what I return from the javascript:

document.write('<div class="myid"><a style="text-decoration: none;" href="http://www.somesite.com/signup.php"><img src="http://www.somesite.com/images/banner.jpg" border="0" onload="javascript:document.getElementById(\'myid\').parentNode.style.display = \'inline\';"></a></div>');

But the problem is, it does not render the parent DIV viewable as in the first example... anyone have any ideas how I can break the parent div display issue when returning data from the javascript?

All comments welcome!

 

You could do it like this:

<div style="display:none;visibility:hidden">
  <div id="myid">
    <script type="text/javascript">
      document.getElementById('myid').parentNode.style.display = 'inline';
      document.getElementById('myid').parentNode.style.visibility = 'visible';
      var A = 5;
      var s_prot=(window.location.protocol.toLowerCase().indexOf('https')>=0);
      document.write('<sc'+'ript type="text/javascript" src="http'+ (s_prot?'s':'') +'://www.somedomain.com/myjsfile.php?A=5" /></sc'+'ript>');
    </script>
  </div>
</div>

Code (markup):

And return something like the following from the javascript:

<a style="text-decoration: none;" href="http://www.somesite.com/signup.php"><img src="http://www.somesite.com/images/banner.jpg" border="0"></a>

Code (markup):

That should work pretty good for your example...

There's a problem though - the code won't do much good if the user is clever enough to wrap the banner inside multiple hidden divs.

<div style="display: none; visibility: invisible;">
  <div style="display: none; visibility: invisible;">
    <div id="myid">
      <img src="http://www.somesite.com/images/banner.jpg" border="0">
    </div>
  </div>
</div>

Code (markup):

To circumvent this you should loop through all the parentNode elements and make them all visible.

 

Thank you for the suggestion... interesting thing I didn't mention, is that the user has complete control of the div tag elements on the page. So the redundant nested tags can be removed. They simply wouldn't put the <div id="myid"> tag or any of the div breaking javascript on their page.

The solution I am looking for must be returned from the javascript they post to:
<script type="text/javascript">
var A = 5;
var s_prot=(window.location.protocol.toLowerCase().indexOf('https')>=0);
document.write('<sc'+'ript type="text/javascript" src="http'+ (s_prot?'s':'') +'://www.somedomain.com/myjsfile.php?A=5" /></sc'+'ript>');
</script>

That they WILL keep on their site. So somehow I have to be able to return the DOM Tree DIV tag busting technology (can that term be copyrighted?) when the javascript returns the bannerad.

I really appreciate the post, but I think this is going to be quite the brain teaser for even the best developers. I am uncertain if it can even be accomplished, but I like posting to see what amazing things people can come up with.

 

I guess, it's back to the drawing board then

That sounds like a challenge

 

You can still use this method without problems:

<div style="display:none;visibility:hidden">
  <script type="text/javascript"> 
    var A = 5;
    var s_prot=(window.location.protocol.toLowerCase().indexOf('https')>=0); 
    document.write('<sc'+'ript type="text/javascript" src="http'+ (s_prot?'s':'') +'://www.somedomain.com/myjsfile.php?A=5" /></sc'+'ript>'); 
  </script>
</div>

Code (markup):

And return the following from the javascript:

document.write('<div [B]id[/B]="myid"><a style="text-decoration: none;" href="http://www.somesite.com/signup.php"><img src="http://www.somesite.com/images/banner.jpg" border="0"></a></div>');
document.getElementById('myid').parentNode.style.display = 'inline';
document.getElementById('myid').parentNode.style.visibility = 'visible';

Code (markup):

That will effectively unhide the parent div, while still keeping all the code in the PHP file that returns the javascript.

As i mentioned earlier, it's still possible to bypass this by wrapping the javascript inside multiple divs or specifying an absolute position for the wrapper div so that it won't show on the page, i.e. style="top:-9999px;".

Hopefully this is what you wanted

 

Forgot to mention that the unhide javascript code works equally well if embedded in the onload function as in your examples.

document.write('<div id="myid"><a style="text-decoration: none;" href="http://www.somesite.com/signup.php"><img src="http://www.somesite.com/images/banner.jpg" border="0" onload="javascript:document.getElementById('myid').parentNode.style.display = 'inline';document.getElementById('myid').parentNode.style.visibility = 'visible';"></a></div>');

Code (markup):

I just preffer the method in my previous post, as I think it looks cleaner

Actually when looking at your original code, I noticed that there are only two differences with what i posted:
1. <div id="myid"> instead of <div class="myid">
2. Change also the visibility attribute to visible in the onload: document.getElementById('myid').parentNode.style.visibility = 'visible'

 

It worked! I was forgeting to make the parent div visible! Way to go Macbert... now for the next trick on the chopping block... the tree ascending... I am working on some more code to ascend the tree in the case they nest it inside multiple divs (as you also mentioned in a previous post).

Once I have a chance to work on some code, I will post it here. It must needs be compact enough to fit in the onload of the image becuase it must be returned from the JS in the same fashion.

Kudos again Macbert!

 

Ok... here we go.

Here is the final solution to make sure the DOM tree (all the way up to the body) is not set as display:none; ... it will continue to parse the parent until it encounters the body. Thus ensuring the returned banner will be displayed.

document.write('<div id="myid"><a style="text-decoration: none;" href="http://www.somesite.com/signup.php"><img src="http://www.somesite.com/images/banner.jpg" border="0" onload="javascript:showP(document.getElementById(\'myid\').parentNode);function showP(THISNODE){if (THISNODE.nodeName != \'BODY\'){if(THISNODE.style.display == 'none'){THISNODE.style.display = \'inline\';THISNODE.style.visibility = \'visible\';}showP(THISNODE.parentNode);}}"></a></div>');

Code (markup):

Thanks Macbert for your input.