[Webinar] Streamline your web hosting managementRegister Today


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

Posted on 2011-05-02
Medium Priority
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(http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26943020.html) 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 <bhb@iceburg.net> */

/* 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
  • 3
  • 2

Expert Comment

by:Erdinç Güngör Çorbacı
ID: 35509518
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.

Author Comment

ID: 35510385
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.

Accepted Solution

Erdinç Güngör Çorbacı earned 2000 total points
ID: 35703159
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...

Author Closing Comment

ID: 35723985
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.

Expert Comment

by:Erdinç Güngör Çorbacı
ID: 35724541
Thanks my friend if you can attach the full sample pages i can work on and supply a working code soon.

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Question has a verified solution.

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

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…
Suggested Courses

607 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