Manipulating height of a div inside a popup window with ajax content

Posted on 2011-05-02
Last Modified: 2012-05-11
Hello experts.
I'm using the jqmodal plugin for my popup windows.
I need help to manipulate the height of my div:jqmContent in my load_popup_articel.cfm?articel_id=10 page in the code below.
I have a working solution that is manipulating the height of a div on pageload inside the main page here( but this is different.

Any help?
<script type="text/javascript" language="javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jqmodal/jqmodal.js"></script>
<script type="text/javascript" language="javascript" src="js/jqmodal/jqDnR.js"></script>
$().ready(function() {
    ajax: 'load_popup_articel.cfm?articel_id=10', 
    overlay: 50,
    onShow: function(h) {
       /* callback executed when a trigger click. Show notice */
    onHide: function(h) {
      /* callback executed on window hide. Hide notice, overlay. */
    h.w.slideUp("slow",function() { if(h.o) h.o.remove();})
<style type="text/css">
/* jqModal base Styling courtesy of;
	Brice Burgess <> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
	the Window's z-index value will be set to 3000 by default (via jqModal.js). */
.jqmWindow {
    display: none;
    position: fixed;
    top: 12%;
    left: 47%;
    margin-left: -300px;
    width: 734px;
    color: #333;
    padding: 12px;
.jqmOverlay { background-color: #000; }

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
	width: expression(this.parentNode.offsetWidth+'px');
	height: expression(this.parentNode.offsetHeight+'px');

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
     position: absolute;
     top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');

<img src="style/widget/right_tree.gif" width="180" height="318" border="0" usemap="#Map" class="treeright">

<map name="Map">
<area alt="" title="" class="rightpart10" shape="poly" coords="127,269" href="#">

<div class="jqmWindow" id="righttree10">
Please wait ... <img alt="loading" src="style/images/busy.gif">

The load_popup_articel.cfm?articel_id=10 page:

<style type="text/css">
.jqmContent {padding-left:4px; padding-right:4px;overflow:scroll;}

<div class="jqmContent">
    <img src="js/jqmodal/images/close_icon.png" class="jqmClose" style="float:right; padding-top:10px;">
       <div align="center">
         <h2 style="color:#933">Title....
       <div align="center">
    <img src="js/jqmodal/images/close_icon.png" class="jqmClose" style="float:right; padding-top:10px; padding-bottom:10px;">

Open in new window

Question by:Panos
    LVL 9

    Expert Comment

    Sorry, problem is not clear without a sight of executed pages and what went wrong.
    But if you need to fit a div's height to it's contianer use clear:both or overflow:hidden
    or better take a look at page below.

    btw i think this kind of css issues must not be js deal. Can be fixed in boundaries of css.
    LVL 2

    Author Comment

    Hi erdincgc.
    I want to manipulate the height in relation with the screen height (depens on the resolution of the clients screen).Look at the solution i posted.
    LVL 9

    Accepted Solution

    As i've said before unfortunately i can't figure out what you want exactly.

    Maybe that is because of my absence of experience on jqmodal plugin.

    But as i can see ; You are adding an iframe into the jqmWindow division with jqmodal.

    And you wish the outer div stretch according to the page loaded in the iframe page, are these right?

    If so ;  We need to do some tricks for both learning the loaded pages real full height,resizing the outer div to that height and also preserve browser compatibly.

    for creating the exact code  i don't have time but i can give you some code pieces to en light you.

    1 - Learning the loaded pages full height ;
    Even if this seems to be a piece of cake, it's not :( ..

    The best code for this i can find is ;

    function getDocumentHeight()
    var $temp = $("<div>")
    var h = $temp.height();
    return h;
    return $("body").height();

    Open in new window

    you need to place a wrapper div in the page to be loaded into iframe
    further explanation is here ;

    - Resizing outer division
    This can be done with both css and jquery i guess.
    With jquery something like this would work


    or maybe just not setting any height to that div and clearing height with either bt using an overflow hidden or clear:both

    After trying above ideas please share your experiences or any problems upon them with us.
    Best Regards...
    LVL 2

    Author Closing Comment

    Hi thank you for help.Unfortunately i tried to use the code from the link you posted but my knowledge in js and jquery is very poor. I m accepting  your answer and  would be very nice if you will find some time later to look back.
    LVL 9

    Expert Comment

    Thanks my friend if you can attach the full sample pages i can work on and supply a working code soon.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    IT, Stop Being Called Into Every Meeting

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
    How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
    The viewer will learn how to dynamically set the form action using jQuery.
    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)

    759 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

    10 Experts available now in Live!

    Get 1:1 Help Now