Solved

how to increase height of a parent div

Posted on 2011-03-01
3
792 Views
Last Modified: 2012-05-11
Hello Experts,

I have 2 html files:

Parent:
            <div id="mainframe" style="height:120px; width:500px">                
                <iframe class="login" src="login.html" scrolling="no" frameborder="0" width="100%" height="100%" >
                </iframe>
             </div>  

Child: (login.html)

I call this script in the the <body onload>:

function resizeFrame()
{
      if ($('#mainframe',window.parent.document).length > 0)
      {      
            $('#mainframe',window.parent.document).attr("style","height:220px; width:500px");
      }      
}

The purpose of this script is to resize the div that wraps the iframe (as I need to float the iframe at the top of the screen).  For some reason my jquery isn't resizing the mainframe.  What am I doing wrong?

Thanks
0
Comment
Question by:jagku
  • 2
3 Comments
 
LVL 9

Expert Comment

by:rawinnlnx9
ID: 35009575
Try calling resizeFrame after the document fully loads. Of course then you'll need to cause the page to refresh with the changes. More jQuery can do that for you.

http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

Read the above. It might solve your problem. It may introduce a new one though that the page needs to redraw. jQuery easily solves this so just Google jQuery and page refresh.
0
 

Accepted Solution

by:
jagku earned 0 total points
ID: 35009651
Hi,
I already call this when the page loads:

i.e. (login.html)
<body onLoad="resizeFrame();">

I have also tried putting the jquery wrapper
i.e.

$(function() {
      if ($('#mainframe',window.parent.document).length > 0)
      {      
            $('#mainframe',window.parent.document).attr("style","height:320px; width:500px");
      }      
});

However, the only thing that happens (when either are used) is the parent div closes - which leads me to believe that the way I am trying to adjust the height is wrong and maybe removing the height/width due to this.

Any other ideas?
0
 

Author Closing Comment

by:jagku
ID: 35045608
Actually, the way I was adjusting the height was incorrect. It should have been

eg
$('#mainframe',window.parent.document).height(320);
0

Featured Post

Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now