Solved

how to increase height of a parent div

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How Close unsubmited attempts 10 42
Timer on div 5 22
Glitching Slide Show 19 26
Difference between Nuget Package and using Bower/Node.Js/Gulp 2 8
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: blockā€¦
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

685 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