Link to home
Start Free TrialLog in
Avatar of Panos
PanosFlag for Germany

asked on

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

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(https://www.experts-exchange.com/questions/26943020/Manipulate-the-height-of-a-div-using-the-screen-resolution.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>
<script>
$().ready(function() {
  $('#righttree10').jqm({
    ajax: 'load_popup_articel.cfm?articel_id=10', 
    trigger:'area.rightpart10',
    overlay: 50,
    onShow: function(h) {
       /* callback executed when a trigger click. Show notice */
    h.w.css('opacity',1).slideDown(); 
    },
    onHide: function(h) {
      /* callback executed on window hide. Hide notice, overlay. */
    h.w.slideUp("slow",function() { if(h.o) h.o.remove();})
    }
   });
});
</script>
<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;
	height:600px;
	float:left;
	background:transparent;
}
.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');
}
</style>

<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="#">
</map>

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



The load_popup_articel.cfm?articel_id=10 page:

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

<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....
         </h2>
       </div>
       <div align="center">
         <h4>blablabla........
         </h4>
       </div>
    <img src="js/jqmodal/images/close_icon.png" class="jqmClose" style="float:right; padding-top:10px; padding-bottom:10px;">
</div>

Open in new window

Avatar of Erdinç Güngör Çorbacı
Erdinç Güngör Çorbacı
Flag of Türkiye image

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.

http://devilsworkshop.org/clear-parent-element-in-css-using-clearfix/

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

ASKER

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.
ASKER CERTIFIED SOLUTION
Avatar of Erdinç Güngör Çorbacı
Erdinç Güngör Çorbacı
Flag of Türkiye image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Panos

ASKER

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.
regards
panos
Thanks my friend if you can attach the full sample pages i can work on and supply a working code soon.
bb