how to set object height style by using getElementById

[smansakra]

hello...
i have a div object on my page.
its height is depend on its content.

i want to set like this:

"if its height is lower than the screen height, set its height to screen height value"

HOW TO DO THAT?

i try this below code but nothing work:

if(document.getElementById('my_div_id').style.width < screen.height){

document.getElementById('my_div_id').style.width = screen.height;

}

help, thanks

[jscheuer1]

width or height? screen or window?

[smansakra]

sorry.... for miss code..

here is the code ( height )

if(document.getElementById('my_div_id').style.height < screen.height){

document.getElementById('my_div_id').style.height = screen.height;

}

hi, why do you ask about screen or window?
what i know is just screen!
BTW what is different beetween them?

[smansakra]

pleasee , see this picture.

the popup z-index is higher so it showed on top of all.
but the width of popup not 100% of screen width
the height of popup is not 100% of screen height



my code is below

<style>
#advance_alert{
display:none;
position:absolute;
z-index:14000;
background-image:url('http://smansakra.jwnmedia.com/smansakra.net.tc/inc/js/windowfiles/op40.png');
background-repeat:repeat;
background-color:transparent;
padding-right:100px;
padding-left:100px;
padding-top:100px;
}

#advance_alert2{
width:600px;
padding:10px;
border:1px solid #d0d0d0;
background-color:#ffffff;
}

#advance_alert_footer
{
position:relative;

height:17px;
padding:3px 0px 0px 8px;
font-size:11px;
font-weight:bold;
color:#d0d0d0;
text-align:left;
text-transform:uppercase;
border-top: 1px solid #CCC;
background-image:url('http://smansakra.jwnmedia.com/smansakra.net.tc/templates/imacons/sss10.jpg');
background-repeat:repeat;
background-color:#fff;
}
</style>

<div id="advance_alert">
<div id="advance_alert2">
<div id="advance_alert_header" style="font-size:15px;font-weight:bold;">
<span id="alert_count"></span> new profiles comment for <span id="alert_nickname"></span> <span id="alert_url"></span>

</div><br><br>

<div id="advance_alert_container">
</div>

<div id="advance_alert_footer">
<div style="float:right;padding-right:5px;">
CLOSE <a href="javascript:void(0);" onclick="alert_close();"><img src="http://smansakra.jwnmedia.com/smansakra.net.tc/templates/imacons/im_close.png" border="0"></a>
</div>
</div><br>

</div>
<br><br><br>
</div>


AND BELOW IS THE JS FUNCTION(external file )
function get_by_id(id){
return document.getElementById(id);
}

function alert_checker(){
if(get_by_id('advance_alert') !=undefined){
var url_checker = "processing/alert_page.php";
var url_checker_extra = "mode=check";
//get_by_id('advance_alert_loading').innerHTML="checking...";
ajaxpack.getAjaxRequest(url_checker,url_checker_extra,alert_checker_result,"text");
}
}
function alert_checker_result(){
var alert_checker_ajax = ajaxpack.ajaxobj;
if(alert_checker_ajax.readyState == 4){
if(alert_checker_ajax.status == 200){
if(alert_checker_ajax.responseText.indexOf('no comment')==-1){
get_by_id('alert_count').innerHTML = alert_checker_ajax.responseText.split('||')[0];

get_by_id('alert_nickname').innerHTML = alert_checker_ajax.responseText.split('||')[1];

get_by_id('alert_url').innerHTML ="<a href='" +alert_checker_ajax.responseText.split('||')[2]+"' target=_blank>GO TO PROFILE</a>";
alert_display();

}
}
}
}

function alert_display(){
//--- show and set css
var alert_wrap = get_by_id('advance_alert');
alert_wrap.style.width = document.body.clientWidth +30+"px";
//alert_wrap.style.height = (alert_wrap.style.height < screen.height)?window.innerHeight?window.innerHeight+30:screen.height:alert_wrap.style.height+ "px";
alert_wrap.style.left = getHorizScroll()-30+"px";
alert_wrap.style.top = getVertScroll()-30+"px";
alert_wrap.style.display = "block";

// --- end of show and set css

get_by_id('advance_alert_container').innerHTML = "<img src='http://smansakra.jwnmedia.com/smansakra.net.tc/inc/js/loading.gif'> please wait...";
var url_alert_display ="processing/alert_page.php";
var url_alert_display_extra = "mode=display";
ajaxpack.getAjaxRequest(url_alert_display,url_alert_display_extra,alert_display_result,"txt");
}

function alert_display_result(){
var display_ajax = ajaxpack.ajaxobj;
if(display_ajax.readyState == 4){
if(display_ajax.status==200){
get_by_id('advance_alert_container').innerHTML = display_ajax.responseText;
}
}
}

function alert_close(){
get_by_id('advance_alert').style.display = "none";
}


function getHorizScroll(){
if(navigator.appName == "Microsoft Internet Explorer") return document.documentElement.scrollLeft;
else return window.pageXOffset;
}

function getVertScroll(){
if(navigator.appName == "Microsoft Internet Explorer") return document.documentElement.scrollTop;
else return window.pageYOffset;
}


can you help?

[smansakra]

I THINK THE PROBLEM OF MY CODE IS ON function alert_display:

function alert_display(){
//--- show and set css
var alert_wrap = get_by_id('advance_alert');
alert_wrap.style.width = document.body.clientWidth +30+"px";
//alert_wrap.style.height = (alert_wrap.style.height < screen.height)?window.innerHeight?window.innerHeight+30:screen.height:alert_wrap.style.height+ "px";
alert_wrap.style.left = getHorizScroll()-30+"px";
alert_wrap.style.top = getVertScroll()-30+"px";
alert_wrap.style.display = "block";



may be also this function

function getHorizScroll(){
if(navigator.appName == "Microsoft Internet Explorer") return document.documentElement.scrollLeft;
else return window.pageXOffset;
}

function getVertScroll(){
if(navigator.appName == "Microsoft Internet Explorer") return document.documentElement.scrollTop;
else return window.pageYOffset;
}

[smansakra]

hum, no answer

[smansakra]

hore....! have sloved my problem by my own self.
i know new code "offsetHeight" and "offsetWidth".
by this code, i can solve my prblem easyly