Avatar
Petr Nymsa
Redaktor
Avatar
Petr Nymsa:

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
Redaktor
Avatar
Petr Nymsa:

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
Tým ITnetwork
Avatar
Odpovídá na Petr Nymsa
Drahomír Hanák:

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
Redaktor
Avatar
Odpovídá na Drahomír Hanák
Petr Nymsa:

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
Tým ITnetwork
Avatar
Odpovídá na Petr Nymsa
Drahomír Hanák:

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
Redaktor
Avatar
Odpovídá na Drahomír Hanák
Petr Nymsa:

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.