Solved

how to increase height of a parent div

Posted on 2011-03-01
3
802 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

777 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