Hejsan...
Jag har ett litet problem med UpdatePanels/javascript...
Har i en tabell fixat till css problemet "ellipsis" som inte fungerar i FF.
Hittade lösningen här: CSS fix FF.
Detta har jag applicerat på min sida, och det fungerar faktiskt riktigt tillfredsställande, men problemet är att jag har 900 rader just nu som behöver hämtas från en databas, så jag har gjort en sidindelning och lagt tabellen i en UpdatePanel... när man byter sida, så slutar CSS fixen att fungera (det fungerar från början, när sidan precis laddats!)... jag vet ej om detta är ett .Net problem eller Javascript problem...
Nedan finns Javascriptet och html koden (som ligger i updatepanel), någon som har en aning om vart jag ska börja...!?? Varför förstör UpdatePanel mitt Javascript?!
JAVASCRIPT:
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/utilities/utilities.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.2/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script>
var EllipsisText = (function(){
if( document.getBoxObjectFor && window.openDialog){
//return XUL label
var $D = YAHOO.util.Dom;
var d = document.createElement('div');
var sNS = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
var xml = document.createElementNS(sNS , 'window');
var label = document.createElementNS(sNS, 'description');
label.setAttribute('crop','end');
xml.appendChild(label);
var fn = function(el){
var xml2 = xml.cloneNode(true);
xml2.firstChild.setAttribute('value',el.textContent);
el.innerHTML = '';
el.appendChild(xml2);
};
var a = YAHOO.util.Dom.getElementsByClassName('ellipsis','div');
for(var i=0;el=a[i];i++){
fn(el);
};
}else{
return function(){};
};
return fn;
})();
</script>
HTML:
<table cellspacing="0" cellpadding="0" border="0" width="100%" style="table-layout:fixed;">
<tr>
<td align='center' width='80'><p>#1</p></td>
<td width='100'><p>2008-08-08 08:08</p></td>
<td width='49'>Testrubrik</td>
<td><div class='ellipsis'>Test text, lång testtext, testing, testar</div></td>
<td width='115'>test1</p></td>
<td width='90'><p>Test2</p></td>
<td width='130'><p>Test3</p></td>
</tr>
</table>
CSS:
.ellipsis{
white-space:nowrap;
width:100%;
overflow:hidden;
-o-text-overflow:ellipsis; /*Opera 9*/
text-overflow:ellipsis;
}
.ellipsis window{
width:100%;
-moz-user-focus:normal;
-moz-user-select:text;
}
.ellipsis description{
-moz-user-focus:normal;
-moz-user-select:text;
}