NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Různé chování JS v prohlížečích

V předchozím kvízu, Online test znalostí JavaScript, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
Petr Nymsa
Tvůrce
Avatar
Petr Nymsa:10.11.2013 19:10

Ahoj, mám zvláštní problém s jQuery. Na stránce mám následující seznam

<ul class="list-float">
       <li>
       <div class="list-head" id="hDesktop">
             <img src="images/desktop.png" alt="desktop" />
         </div>
         <div class="list-content">
             <h2>Desktop</h2>
             <p>
             Lorem ipsum dolor sit amet...
             </p>
         </div>
       </li>

               <li>
       <div class="list-head" id="hSurface">
             <img src="images/surface.png" alt="surface" />
         </div>
         <div class="list-content">
             <h2>Modern UI</h2>
             <p>
             Lorem ipsum dolor sit amet...
             </p>
         </div>
       </li>

               <li>
       <div class="list-head" id="hPhone">
             <img src="images/phone.png" alt="phone" />
         </div>
         <div class="list-content">
             <h2>Windows Phone</h2>
             <p>
             Lorem ipsum dolor sit amet...jfhasfasghgdasghasghaf  hfgh  nhfg hag fhaghfgashf
             </p>
         </div>
       </li>
   </ul>

ID u div si nevšímejte, slouží pouze pro Debug v JS. Následně CSS

.list-float{
        list-style:none;
        margin:0 auto;
        display:block;

}
.list-float li{
   margin:0 15px;
         float:left;
         max-width:250px;
}

Nevím jak přes CSS zajistit, aby se mi obrázek v list-head vždy vycentroval doprostřed. Proto jsem si napsal jednoduchý skript v JS s jQuery. Vše krásně funguje v IE i FF ale Chrome mi u položek kromě prvních nespočítá šířku obrázku. Takže odsazuje víc než by měl. Navíc a to zcela v náhodným intervalu tu stránku celou rozhodí, opět pouze Chrome. A poslední věc, při prvním zobrazení Chrome zobrazí správně, při refreshi ne.

Kód (mám tam ještě nastavení výšky, což asi lze také udělat v CSS :D)

$(document).ready(function()
{
    //get all list-head
        var heads = $(".list-head");
        var maxHeight=0;

        //get max height
        for(var i=0;i<heads.length;i++)
                if($(heads[i]).height() > maxHeight)
                        maxHeight = $(heads[i]).height();

        for(var i=0;i<heads.length;i++)
        {
                //set height to element
                $(heads[i]).css("height",maxHeight);
                //      console.log($(heads[i]).height());

                //width of head
                var width =$(heads[i]).width();

                if($(heads[i]).has("img").length>0)
                {

                        var img =$(heads[i]).children("img");
                        var imgW = img.width();
                        console.log("Head ID: " + $(heads[i]).attr("id")+", " + img.attr("alt")+": Width " + img.width()+" left: " +(width - imgW) /2);
                        //$(heads[i]).css("position","relative");
                        $(heads[i]).children("img").css("margin-left",(width - imgW) /2);

                }
        }
});

Nějaké nápady ? Díky ! :)

Odpovědět
10.11.2013 19:10
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Petr Nymsa
Tvůrce
Avatar
Petr Nymsa:10.11.2013 19:31

Ještě přikládám screen úplného rozhození, po dalším refresh se to už nestane, ale stále špatně odsazené (spočítané)

Nahoru Odpovědět
10.11.2013 19:31
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Drahomír Hanák:10.11.2013 19:42

Centrovat obrázky JavaScriptem je dálnice do pekel. Vždycky, když chceš udělat takovou UI věc, snaž se to dělat co nejvíc v CSS resp. HTML5 případně použij nějaký polyfill, aby to fungovalo ve všech prohlížečích. Centrování obrázků konkrétně jde celkem snadno, protože je to defaultně inline element: http://jsfiddle.net/XhHv2/

 
Nahoru Odpovědět
10.11.2013 19:42
Avatar
Petr Nymsa
Tvůrce
Avatar
Odpovídá na Drahomír Hanák
Petr Nymsa:10.11.2013 19:46

Taky jsem už na to přišel, že to lze snadno přes CSS. No mám ještě v CSS mezery :). Díky, ale i tka by mě zajímalo čím to může být, nenapadá tě něco ?

Nahoru Odpovědět
10.11.2013 19:46
Pokrok nezastavíš, neusni a jdi s ním vpřed
Avatar
Drahomír Hanák
Tvůrce
Avatar
Odpovídá na Petr Nymsa
Drahomír Hanák:10.11.2013 19:54

Když já jsem líný, číst ty zdrojáky :D Nemáš to někde na webu? Zkus se na to podívat v chrome inspektoru (v Chrome: pravý klik -> zkontrolovat prvek) případně firebugu. To ti ukáže, jaké jsou rozměry toho elementu. Jinak můžeš dát ".list-head" statickou výšku, aby do ní nezasahoval ten text.

 
Nahoru Odpovědět
10.11.2013 19:54
Avatar
Petr Nymsa
Tvůrce
Avatar
Odpovídá na Drahomír Hanák
Petr Nymsa:10.11.2013 19:58

Chrome inspektor používám :).. vtipný je že šířku to normálně má ale to jQuery další položky kromě první vrátí šířku 0... nic, už to mám přes CSS a časem to zkusím třeba vyzkoumat :)

Nahoru Odpovědět
10.11.2013 19:58
Pokrok nezastavíš, neusni a jdi s ním vpřed
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.