Admin Panel

Yahoo ID status checker:

danicicovlad.hi5.com

joi, 11 februarie 2010

Blogupdate: Fixed mp3 player redraw on scroll in Google Chrome

Nua, c-am reușit să fixez mp3 playerul în browserul Google Chrome (GC)!

Care era buba, te-ntrebi ?
Am observat ca în GC, atunci când se dă scroll pe pagină, e o problemă cu redesenarea unui obiect flash ce-i pus într-un DIV care are setat position: fixed în css.

Mp3 playerul din blog se află în situația cu pricina. Eu obișnuiesc să las playerul deschis rulând un videoclip (click pe: Dock panel) și să navighez apoi prin pagină.


Totul merge perfect în celelalte browsere [IE8, FF3, Safari (tnx Alex)], mai puțin în GC!

Cum am dat scroll down, playerul nu mai este funcțional pentru că GC-u nu redesenează automat conținutul obiectului flash din div-ul meu cu position: fixed. Rămâne la coordonatele inițiale, drept pentru care, dacă revin  cu scroll up în poziția de la început, funcționează normal. La fel și dacă dau click pe Undock și Dock înapoi sau duc mouse-ul peste admin panelul din stânga, ori peste link-ul Sus. De ce ? Pentru că eu schimb, prin script, niște proprietăți din css ale acelor elemente, drept pentru care GC este nevoit să redeseneze conținutul ferestrei pentru a afișa noutățile.

Deci și prin urmare, pentru a-l face pe GC să redeseneze conținutul obiectului flash (printre multe alte taguri/obiecte redesenate) trebuie modificată o proprietate din css a oricarui element de pe pagină atunci când faci scroll.

Ce am făcut eu ?
Pentru a nu modifica niciun element actual al paginii, mi-am creat un div nou, gol, la care îi modific o proprietate din css atunci când fac scroll în pagină:
...
<head>
...
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" />
<script type="text/javascript">
 $(window).scroll(function () { 
  $("#dummy").animate({ opacity: 0 }, 1 );  
  $("#dummy").animate({ opacity: 1 }, 1 );  
});
</script>
...
</head>
<body>
<div id="dummy" />
...

Astfel, forțez browserul să redeseneze conținutul ferestrei și implicit al player-ului cu pricina.
Acum funcționează cum ar fi trebuit să funcționeze de la început!

Pot fi modificate și alte proprietăți din css însă aceasta este prima varianta care mi-a ieșit după mai multe încercări.

Sunt și alte metode de a rezolva problema asta. Sunt sigur.. dar acum sunt prea obosit.
Noapte bună!

Niciun comentariu:

Trimiteți un comentariu

tutunul dăunează grav sănătății
(tutunul dăunează grav sănătății)