A következő címkéjű bejegyzések mutatása: HTML. Összes bejegyzés megjelenítése
A következő címkéjű bejegyzések mutatása: HTML. Összes bejegyzés megjelenítése

2008. december 9., kedd

Legutolsóként lefutó JS függvény

Nemrég szükségem volt rá, hogy egy bizonyos javascriptet úgy futtassak le egy usercontrolokat bőven tartalmazó MS-AJAXos ASPX oldalon, hogy MINDENKÉPPEN ő legyen a legutolsó.
Teljesen függetlenül attól, hogy esetleg itt-ott RegisterStartupScript metódusok vagy bármi egyéb megoldások az oldal részeiben most vagy később garázdálkodnak-e, én azt szeretném, ha nem borítanák meg a rendet.
Hosszas guglizás és kísérletezés után találtam egy többé-kevésbé kielégítő megoldást.
Azért csak többé-kevésbé, mert IE és FF esetében az elvárt módon működik, de sajnos opera alatt nem (mást meg sem mertem próbálni :)).


A kulcs az alábbi függvény:


function AddOnload(myfunc)
{
    if (window.addEventListener)
        window.addEventListener('load', myfunc, false);
    else if (window.attachEvent)
        window.attachEvent('onload', myfunc);
}


Ami ugye (kompatibilitási okokból kétféleképpen) feliratkozik az oldal onload eseményére.
Ezt próbáltam különböző módokon meghívni, hogy a kívánt eredményt kapjam.


Az első változat így nézett ki:



<html>
<head>
    <script type="text/javascript">
        function mymessage()
        {
            alert("onload event");
        }
 
        ...
        ...
 
        alert('inline');
        AddOnload(function() { alert('TheLastOne'); });
    </script>
</head>
<body onload="mymessage()">
    ... ...
</body>
</html>



IE-re már jó is volt. Először megjelent az inline kód, utána az online attribútumban megadott végül pedig az ominózus utolsó. FF esetében már sajnos nem ez volt a sorrend. Ott gyakorlatilag inline
függvényhívásként működött a dolog, szerintem helytelenül. Azután eltoltam a feliratkozást az oldal végére, ez a FireFoxot is rávezette arra, hogy mit is akarok tulajdonképpen. Mint említettem Operában továbbra sem jó ez a megoldás, de több időt nem szántam rá.
Őszintén szólva az IE és a FF a 99.9%-át lefedi felhasználóknak, tehát ennyiben hagytam a dolgot.



    1 <html>
    2 <head>
    3     <script type="text/javascript">
    4         function mymessage()
    5         {
    6             alert("onload event");
    7         }
    8 
    9         function AddOnload(myfunc)
   10         {
   11             if (window.addEventListener)
   12                 window.addEventListener('load', myfunc, false);
   13             else if (window.attachEvent)
   14                 window.attachEvent('onload', myfunc);
   15         }
   16     </script>
   17 
   18 </head>
   19 <body onload="mymessage()">
   20     ...
   21     ...
   22 </body>
   23 
   24 <script>
   25     alert('inline');
   26     AddOnload(function() { alert('TheLastOne'); });
   27 </script>
   28 </html>


Elég érdekes, hogy melyik böngésző hogyan értelmezte az utasítást.
A fenti kód lett a végső változat, amely FF és IE esetében egyformán utolsónak hívja a kívánt scriptet.

2008. november 29., szombat

A TabContainer és a rejtélyes tábla esete

Jelenleg épp egy olyan ASP.NET alkalmazáson dolgozom, ami használja az AJAX Control Toolkit TabContainer kontrolját.

Tudni kell, hogy az adott alkalmazás esetében eléggé sarkalatos kérdés performancia. Magyarul lassú mint a csiga az akácerdőbe'. Ez részben annak köszönhető, hogy meglehetősen összetett és az összes létező technológiát használja, sőt néhány nem létezőt is :) Ennek megfelelően folyamatosan mérve van és a legkisebb további lassulás is eléggé mély ráncokat vés a homlokokra.

Az előzmények ismeretében érthető, hogy nem volt túl örömteli, mikor egy dizájn csiszolgatás után, ahol is kis kinézetbeli igazgatások történtek, bekerült egyszer csak valahonnan 4 másodperc (!) extra renderelési idő. Igaz, hogy a cucc nagyon lassú, de azért 4 másodperc még így is mintegy 70-80%-os lassulást jelentett. Azonnal elkezdődött a vad nyomozás, majd végül kiderült, hogy nem más tekeri meg ennyire a böngészőt, mint egyetlen egy darab dekorációs célból odabiggyesztett 1 pixeles vonal, ami ezzel a kóddal lett kivitelezve:

<table class="tab_top_decor">

<tbody>

<tr>

<td class="tab_top_decor_selected">

</td>

<td>

</td>

</tr>

</tbody>

</table>


Rendben, elismerem, nem a legjobb erre a célra táblázatot használni, de mivel az oldal teljes egészében old-school (és nem túl okos) módon táblázatokkal van formázva, így azt gondoltam, nem oszt nem szoroz, ráadásul akkor még nem tudtam erről a trükkről, ami a 6os explorernek is megmondja, hogy márpedig mekkora az akkora.
Érthető módon majd megölt a kíváncsiság és szanaszét teszteltük az oldalt, míg végül kiderült, hogy az adott tábla csak a TabContainer belsejébe helyezve okozza ezt a durva lassulást. Idő híján nem nyomoztunk tovább, de valószínűleg a TabContainer javascriptjei között van valami ordenáré módon lebaltázva, aminek ezt a 4 másodpercet köszönhettük.

Miután a korábban említett trükköt kiderítettem átírtam DIV-re a dekorációs csíkot és így már minden rendben volt. Na meg természetesen eldöntöttük, hogy ha egy mód van rá megszabadulunk a tebkonténertől, mielőtt még egy időzítet bomba az arcunkba robban.

2008. november 28., péntek

IE6 és a DIV méretezése

Jelenleg egy olyan projektben dolgozom, ahol az egyetlen és kizárólagos webkliens az Internet Explorer, annak is az öregecske 6-os verziója. Mint tudjuk az IE mindig is arról volt hírhedt, hogy nagyvonalúan kezeli a szabványokat, de különösen hírhedt ez a verzió a DIV elementek érdekes kezeléséről. Nálam ez most éppen azért okozott fejtörést, mert dekorációs célzattal egy 1px-es vonalat kellett elhelyeznem, ami dinamikusan alakulgat. Lényeg az, hogy a leglogikusabb megoldásnak egy 1px magas DIV tűnt. Volna. Ha az IE hajlandó lett volna 10px-nél kisebb elemet megjeleníteni.
Hosszas guglizás után kisült, hogy ez a csacsi IE nem hajlandó az aktuális fontméretnél alacsonyabb lenni, csak, ha ezt külön megmondjuk neki. Hm. Ez vajon kinek a fejéből pattanhatott ki? Vagy csak mellékhatás? Bizonyíték gyanánt nézd meg ezt a kódot IE6 alól:

<div style="background-color: #FF0000; height: 1px"></div>


Ime:

Ha a fentit tudjuk, akkor már könnyen rá lehet jönni, hogy milyen beállításokkal lehet elérni a kíván 1px magasságot.
Logikusnak tűnik a DIV számára az 1px-es fontméret beállítása.

<div style="background-color: #FF0000; height: 1px; font-size: 1px"></div>





Ez a megoldás majdnem jó, de nem teljesen. Így már tudunk egész kicsi magasságot beállítani, de 1px-et mégsem.
Az igazi okosság az overflow tulajdonság beállítása, ami azt jelenti, hogy lekezeljük a kilógó részeket.

<div style="background-color: #FF0000; height: 1px;overflow: hidden"></div>





Így már tökéletes 1px-es csíkunk van. Fentieket teszteléséhez kiválóan lehet alkalmazni az IETester nevű segédprogramot, ami 5.5-től felfelé bármelyik IE verziót tudja nekünk prezentálni.