JavaScript to hide DIV Class in iframe

[kucster]

Thank you in-advance for your help.
I'm having an issue trying to hide a div class that is being loading in an iframe. I'm trying to hide the DIV Class ss-footer and I think the code below should do it but it is not. The ss-footer is not in the code because it is being generated through the iframe.
I would greatly appreciate any help.

<div id="content">
<!-- box-container -->
<div class="box-container">
<div class="holder">
<div class="frame">
<iframe width="760" height="1231" frameborder="0" marginwidth="0" marginheight="0" src="https://*********">Loading...
</iframe> 
<script language="javascript"> 
var ele = document.getElementsByClassName('ss-footer');
ele.style.display = "block";
</script>
</div>
</div>
</div>
</div>

[xelawho]

getElementsByClassName returns a collection (even if there is only one item in that collection) which needs to be accessed by array methods.

So you would be better off trying something like this, I think:

var ele = document.getElementsByClassName('ss-footer')[0];
ele.style.display = "block";

[kucster]

Thank you very much for the quick reply, I've tried as you suggested and it is still not working, any other suggestions?

<div id="content">
<!-- box-container -->
<div class="box-container">
<div class="holder">
<div class="frame">
<iframe width="760" height="1231" frameborder="0" src="https://****" marginheight="0" marginwidth="0">Loading...</iframe>
<script language="javascript"> 
var ele = document.getElementsByClassName('ss-footer')[0];
ele.style.display = "block";
</script>
</div>
</div>
</div>
</div>

[xelawho]

it's quite likely that your div is getting loaded after the javascript has run, which will render it meaningless. An iframe has an onload event which you could use to fire a function that would hide it once it exists.

or you could try using css just to hide it from the outset.

<style>
.ss-footer{display:none}
</style>

which reminds me, why if you are trying to hide it are you doing:

ele.style.display = "block";

?

[kucster]

Thank you very much for your continued help.
I am very sorry, I am very much a noob when it comes to JavaScript. I got mixed up, I thought block meant to block the text.

I tried the CSS solution, but I couldn't get it to work. I think this might be because the iFrame is getting it's own CSS. (Just an hunch, I'm completly open for correction)

I tried creating an on load event but it doesn't seem to be working either. I hate to keep bothering you but I would appreciate any thoughts on why it still isn't working. Thank you!

<div id="content">
<!-- box-container -->
<div class="box-container">
<div class="holder">
<div class="frame">
<iframe width="760" height="1231" frameborder="0" src="https://*****" marginheight="0" marginwidth="0" onload="load()">Loading... </iframe>
<script language="javascript"> 
function load()
{
var ele = document.getElementsByClassName('ss-footer')[0];
ele.style.display = "none";
}
</script>
</div>
</div>
</div>
</div>

[xelawho]

ooops, sorry I forgot that it was an iframe - if it is not your page inside the iframe there is little you can do. If the footer is at the bottom (as its name would imply) you could try the clip property...
https://developer.mozilla.org/en-US/docs/CSS/clip

[Old Pedant]

Clearly there is *NOTHING* you can do if the contents of the <iframe> are not coming from the *SAME SITE* and the *SAME SECURITY LEVEL* as the main page.

I see that the URL for the <iframe> starts with "https://".

Let's pretend the full URL is something like "https://www.sitex.com/page32.php"

That means that, in order for you to be able to use JavaScript to affect it *AT ALL*, the URL of the main page (the one containing the <iframe> *MUST* be
"https://www.sitex.com/...and only this part can differ..."

Sorry, but those are the rules. It is called "cross site scripting" and is disallowed by all browsers.

[Old Pedant]

Originally Posted by xelawho

ooops, sorry I forgot that it was an iframe - if it is not your page inside the iframe there is little you can do. If the footer is at the bottom (as its name would imply) you could try the clip property...

Ummm...Xelawho, I point you to this statement in his first post:

The ss-footer is not in the code because it is being generated through the iframe.

[kucster]

Thank you very much for your help, I wasn't aware cross site scripting extended to iFrames.
I will just have to live with the footer coming from the iFrame.

Again thank you very much for your help!