CODEWITHSUNDEEP
javascriptjqueryiframe
FlyingCat
FlyingCat

Reputation: 14290

How to change elements attribute from iframe element?

I am trying to get set the height of the div from inside of my iframe.

I have something like

<div id='test' style='height:150px;'>some stuff..</div>

<iframe id="test" src="http://www.myproject.com frameborder="0" scrolling="no">
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
   <title>test project</title>
   <link rel="stylesheet" type="text/css" href="g_reset.css">
   <script type="text/javascript" src="options.js"></script>
   </head>
   bunch of html...
   <a id='click' href='#'>click<a/>
</iframe>

I want to be able to change the 'test' div height when I click 'click' inside my iframe.

in my options.js I have..

$('#click).click(function(){
   alert('pop')
   $('#test').attr('height','500');
})

Alert will pop but it doesn't seem to change the height of the div. Can anyone help me about the issue? thanks a lot!

Upvotes: 0

Views: 1888

Answers (2)

Steven V
Steven V

Reputation: 16595

As a jQuery solution, you can use something like this within your iframe.

$('#test', window.parent.document).css('height', '500px');

or

$(window.parent.document).find('#test').css('height', '500px');

For the first example, the second parameter in the $() is the context to search within. Also notice I used css() instead of attr() since you're trying to modify the styles of element, instead of an attribute.

Upvotes: 1

Nelson Galdeman Graziano
Nelson Galdeman Graziano

Reputation: 562

Try this:D 

<a id='click' href='#' onClick='parent.document.getElementById(\"test\").style.height=\"50px\"'>click<a/>

Upvotes: 0

Related Questions