Problema lettura della proprietà offsetWidth da explorer

[Cool81]

Ho la seguente funzione:

 var optionDiv = document.createElement('DIV');
optionDiv.id = 'selectBoxOptions' + selectBoxIds;
optionDiv.className='selectBoxOptionContainer';
optionDiv.style.width = div.offsetWidth-2 + 'px';
div.appendChild(optionDiv);

Su firefox e safari, tutto ok. su explore nn funziona perchè l'istruzione 'div.offsetWidth' dà sempre zero.

Qualcuno conosce un istruzione equivalente che vada bene per explorer?

Un problema simile è stato affrontato in questa discussione, ma è rimasto senza solutione!

[Xinod]

confermo la mia risposta in quella discussione
si puo' vedere il caso specifico?

[Cool81]

Quella che segue è tutta la funzione presa dal relativo file js:

function createEditableSelect(dest)
	{
        
		dest.className='selectBoxInput';
        var div = document.createElement('DIV');
		div.style.styleFloat = 'left';
		div.style.width = dest.offsetWidth + 160 + 'px';
		div.style.position = 'relative';
		div.id = 'selectBox' + selectBoxIds;
		var parent = dest.parentNode;
		parent.insertBefore(div,dest);
		div.appendChild(dest);
		div.className='selectBox';
		div.style.zIndex = 10000 - selectBoxIds;

        var img = document.createElement('IMG');
		img.src = arrowImage;
		img.className = 'selectBoxArrow';

		img.onmouseover = selectBox_switchImageUrl;
		img.onmouseout = selectBox_switchImageUrl;
		img.onclick = selectBox_showOptions;
		img.id = 'arrowSelectBox' + selectBoxIds;

		div.appendChild(img);

        var optionDiv = document.createElement('DIV');
        optionDiv.id = 'selectBoxOptions' + selectBoxIds;
        optionDiv.className='selectBoxOptionContainer';
	optionDiv.style.width = div.offsetWidth-2 + 'px';
       div.appendChild(optionDiv);
		if(navigator.userAgent.indexOf('MSIE')>=0){
            var iframe = document.createElement('<IFRAME src="about:blank" frameborder=0>');
			iframe.style.width = optionDiv.style.width;
			iframe.style.height = optionDiv.offsetHeight + 'px';
			iframe.style.display='none';
			iframe.id = 'selectBoxIframe' + selectBoxIds;
			div.appendChild(iframe);
		}

		if(dest.getAttribute('selectBoxOptions')){
            var options = dest.getAttribute('selectBoxOptions').split(';');
			var optionsTotalHeight = 0;
			var optionArray = new Array();
			for(var no=0;no<options.length;no++){
				var anOption = document.createElement('DIV');
				anOption.innerHTML = options[no];
				anOption.className='selectBoxAnOption';
				anOption.onclick = selectOptionValue;
				anOption.style.width = optionDiv.style.width.replace('px','') - 2 + 'px';
				anOption.onmouseover = highlightSelectBoxOption;
				optionDiv.appendChild(anOption);
				optionsTotalHeight = optionsTotalHeight + anOption.offsetHeight;
				optionArray.push(anOption);
			}
			if(optionsTotalHeight > optionDiv.offsetHeight){
				for(var no=0;no<optionArray.length;no++){
					optionArray[no].style.width = optionDiv.style.width.replace('px','') - 22 + 'px';
				}
			}
			optionDiv.style.display='none';
			optionDiv.style.visibility='visible';
		}

		selectBoxIds = selectBoxIds + 1;
	}

Quindi non esiste un'altra istruzione per Explorer per ottenere la stessa informazione?

Che soluzioni proponi?

[Xinod]

mi metti in condizione di provarlo senza fare troppe supposizioni?
magari lascia un link, o almeno riporta pure l' xhtml
non per niente, un' occhiata si da volentieri, ma il tempo resta tiranno

[fcaldera]

se tu commentassi seconda e terza riga così

 var optionDiv = document.createElement('DIV');

// optionDiv.id = 'selectBoxOptions' + selectBoxIds;
// optionDiv.className='selectBoxOptionContainer';

optionDiv.style.width = div.offsetWidth-2 + 'px';
div.appendChild(optionDiv);

l'offsetWidth sarebbe corretto in IE?

Posta lo stile css associato all'id e alla classe di quell'elemento

[Cool81]

Il CSS di quell'elemento è il seguente:

/*
    Document   : editableselect
    Created on : Feb 15, 2008, 2:57:07 PM
    Author     : giuseppe
    Description:
        Purpose of the stylesheet follows.
*/

/*
   TODO customize this sample style
   Syntax recommendation http://www.w3.org/TR/REC-CSS2/
*/

/*********************************************/
.selectBoxArrow{
		margin-top:1px;
		float:left;
		position:absolute;
		right:1px;

	}
	.selectBoxInput{
		border:0px;
		padding-left:1px;
		height:16px;
		position:absolute;
		top:0px;
		left:0px;
        z-index:0;
        width:160px;

	}

	.selectBox{
		border:1px solid #ccc;
		height:22px;
                /*margin-left:120px*/
	}
	.selectBoxOptionContainer{
		position:absolute;
		border:1px solid #7f9db9;
		height:100px;
		background-color:#FFF;
		left:-1px;
		top:20px;
		visibility:hidden;
		overflow:auto;
		z-index:1000;
                width:160px;
                margin-bottom:0;
                padding-bottom:0

	}
	.selectBoxIframe{
		position:absolute;
		background-color:#FFF;
		border:0px;
		z-index:999;
	}
	.selectBoxAnOption{
		font-family:arial;
		font-size:12px;
		cursor:default;
		margin:1px;
		overflow:hidden;
		white-space:nowrap;
                margin-bottom:0;
                padding-bottom:0;
	}

Ho provato a commentare le righe che mi hai indicato tu, ma nn va lo stesso!

[fcaldera]

scusa, ho letto male il codice: div che variabile è?

[Cool81]

var div = document.createElement('DIV');

Scusa, ma nn comprendo ancora molto bene il javascript!

[fcaldera]

Originariamente inviato da Cool81

var div = document.createElement('DIV');

ah ok, ecco il codice

var div = document.createElement('DIV');
div.style.styleFloat = 'left'; // <--
div.style.width = dest.offsetWidth + 160 + 'px';
div.style.position = 'relative';
div.id = 'selectBox' + selectBoxIds;
...

prova a commentare la seconda riga

[Cool81]

Ho provato e non funziona.
Prima avevo provato a passare staticamente una larghezza e funzionava. Poi ora ho osservato la riga 4

div.style.width = dest.offsetWidth + 160 + 'px';

Potrei risolvere allo stesso modo passandogli anche un numero statico? come potrei capire però quale è il numero più adatto?