Panos
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?art icel_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?
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?art
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>
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.
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
regards
panos
Thanks my friend if you can attach the full sample pages i can work on and supply a working code soon.
bb
bb
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.