asked on

hide div if within iframe

Need to hide just one div on a page if it is displayed within an iframe. Based on other posts, this is what I came up with but it does not work.

This is my iframe:

<iframe id="dash" name="dash" class="dash" src="http://www.mydomain.com" width="950" height="1000">
  <p>Your browser does not support iframes.</p>
</iframe>

Open in new window

and the script, placed just above closing body tag in the parent page:

 <script type="text/javascript">window.frames[dash].document.getElementById("orange").style.display = "none";</script>

Open in new window

"orange" is my div in the child I am trying to hide.

I appreciate your taking a look!

khan_webguru

Hello Bro!

Hope this will solve your problem. Just add "JQuery" JS file in <head></head> section. If you did not use ever JQuery then you can download it from the following location or just browse the link and save as ".js",

http://code.jquery.com/jquery-1.5.1.js

Open in new window

Include above mentioned JAVASCRIPT file in head area and in JAVASCRIPT where you want to hide that div from IFRAME write the following code.

$('#dash').contents().find('#orange').hide();

Open in new window

How to access iframe in jQuery

Assuming you have

<iframe id="iframeID" ...></iframe>

Open in new window

Iframe contains div with id=”someID”:

<div id="someID">Hello world!</div>

Open in new window

Need get div’s text?

var divHTML = $('#iframeID').contents().find('#someID').html();

Open in new window

OR want to hide:

$('#iframeID').contents().find('#someID').hide();

Open in new window

Thats all from my side hope this will help you to solve your problem.

Regards,

Asif Ahmed Khan

khan_webguru

Hello bro!

Found one more thing that might help you

That you can call IFRAME load event also like below:

$(‘#frame2').load( function()
{

});

Open in new window

For more detail you can browse the link below that have DEMO too.

http://www.liveintensely.com/2010/03/jquery-and-frames/

But If you want to DOCUMENT.ONLOAD means client side page load event then you can use the following function:

$(document).ready(function() 
{
  // For Example you want to hide your DIV after complete page load the add your code or call      
     funcation here in this area

     $('#dash').contents().find('#orange').hide();


});

Open in new window

But remember this will require to add JQuery.js file that I mentioned in my previous post.

Regards,

Asif Ahmed Khan

Large_Farva

ASKER

Tried both methods. I already have a jquery.js file in head so I did not download the other.

for the first method, I put this in the parent page just above the closing body tag..is this the right place?

<script type='text/javascript'>$('#dash').contents().find('#orange').hide();</script>

Open in new window

For the second, I put in same place this:

<script type='text/javascript'>
$(‘#dash').load( function()
{
$('#dash').contents().find('#orange').hide();
});
</script>

Open in new window

Maybe I have my locations wrong...does the code go in the parent or child page...and where on the page, just to be clear (i obviously know nothing about jscript)?

ASKER CERTIFIED SOLUTION

khan_webguru

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

Large_Farva

ASKER

Thanks!