ugrás a tartalomhoz

jquery .width(); és div tartalom float-tal

therest · 2011. Dec. 7. (Sze), 17.16
Adott egy div (slider), amihez javascript-tel adok gyermekeket egy cikluson belül, és beállítom a pozíciójukat:
  1. cr=document.createElement('div');  
  2. cr.className='mybox';  
  3. $(cr).css('left',cleft);  
  4. $(cr).css('top',ctop);  
  5. slider.appendChild(cr);  
A css-ek:
  1. .mybox{  
  2.     position: absolute;  
  3.     height: 100px;  
  4.     width: 100px;  
  5.     cursor: pointer;  
  6. }  
  7.   
  8. #slider {  
  9.     position: absolute;  
  10.     height: 250px;  
  11.     left: 0px;  
  12.     top: 0px;  
  13. }  
A későbbiekben szeretném elérni a slider szélességét, tehát azt hogy mekkorára nyúlik a gyermekek hozzáadása miatt. Itt minden adat amit el tudok érni, 0-át ad vissza. Ha a slidernek megadok fix értéket, akkor pedig azt kapom.

Természetesen amikor a hozzáadom a gyermekeket, akkor beállíthatnám a slider szélességét a megfelelő értékre, de gondolom, ennek automatikusan is meg kell történnie (vagy nem?), és tisztább lenne ha így lenne.

Mi miatt kapok mindig fix értéket, a valós szélességgel szemben?
‹ Abszolút középre pozícionálás DIV height dinamikusan ›
 ■
1

Egy abszolút pozícionált

Hidvégi Gábor · 2011. Dec. 7. (Sze), 17.19
Egy abszolút pozícionált elemet csak a benne levő relatív pozícionált tartalom "nyomja szét", az abszolút nem.
2

hogyan, mikor?

Poetro · 2011. Dec. 7. (Sze), 17.42
Én a következő formát jobban szeretem, főleg ha már egyébként is használsz hozzá jQuery-t:
  1. $('<div></div>', {  
  2.   className: 'mybox',  
  3.   css: {  
  4.     top: 0,  
  5.     left: 0  
  6.   }  
  7. }).appendTo(slider);  
Ha pedig jQuery nélkül szeretnéd csinálni, akkor:
  1. cr=document.createElement('div');  
  2. cr.className='mybox';  
  3. cs = cr.style;  
  4. cs.left = cleft + 'px';  
  5. cs.top = ctop + 'px';  
  6. slider.appendChild(cr);  
Egyébként, ha a gyerekeit abszolút pozicionálod, akkor az elemnek nem lesz szélessége, mivel nem lesz benne semmi. Ha azt akarod, hogy legyen szélessége akkor vagy inline / inline-block rakd az elemeket, vagy pedig floatold.
3

Ahh mindig megszívat a

therest · 2011. Dec. 7. (Sze), 18.34
Ahh mindig megszívat a blogmotor, és nem küldöm el a postom! :D

Amit az első blokkban írtál érdekes! Én általában próbálok minél kevésbé támaszkodni a jqueryre. Van számottevő sebességbeli különbség ha erőteljesen használod vagy ha kevésbé? Nekem az jut eszembe, hogy minden css tulajdonság állítás +1 függvényhívás....

Egyébként, ha a gyerekeit abszolút pozicionálod, akkor az elemnek nem lesz szélessége, mivel nem lesz benne semmi.

Abosolute pozíciónál kiemeli a parentből? A gyerekek left-je és top-ja mégis relatív a parent top, left tulajdonságaihoz. Valamit rosszul gondolok?

A float, és a block/inline-block azért nem tuti, hogy jó mert X darab elemet kell két sorban kiraknom (két sor tölti ki a konténer magasságát) , és utána vízszintes scroll van.
4

Kiemeli

Poetro · 2011. Dec. 7. (Sze), 18.55
Igen, az abszolút pozicionálásnak pont az a lényege, hogy kiemeljük a dokumentum folyamából. Azáltal, hogy kikerül a szülő folyamából, abból nem foglal helyet, ergó nem fogja növelni a szélességét / magasságát.

Ha két sorba kell tördelni, akkor veszel két div-t, li-t stb., és azokba pakold be az elemeket.
5

A gondom az, hogy a kis

therest · 2011. Dec. 7. (Sze), 19.09
A gondom az, hogy a kis div-eket, a konténer szélénél új sorba kényszeríti alapértelmezésben, ha a floattal próbálkozom. Van valami tulajdonság, ami megoldja ezt?
7

inline-block

Poetro · 2011. Dec. 7. (Sze), 20.09
  1. <div id="slider">  
  2.   <div class="row">  
  3.     <ul>  
  4.       <li class="mybox"><a href="#">Item 1</a></li>  
  5.       <li class="mybox"><a href="#">Item 2</a></li>  
  6.       <li class="mybox"><a href="#">Item 3</a></li>  
  7.       <li class="mybox"><a href="#">Item 4</a></li>  
  8.       <li class="mybox"><a href="#">Item 5</a></li>  
  9.       <li class="mybox"><a href="#">Item 6</a></li>  
  10.       <li class="mybox"><a href="#">Item 7</a></li>  
  11.       <li class="mybox"><a href="#">Item 8</a></li>  
  12.       <li class="mybox"><a href="#">Item 9</a></li>  
  13.       <li class="mybox"><a href="#">Item 10</a></li>  
  14.     </ul>  
  15.   </div>  
  16.   <div class="row">  
  17.     <ul>  
  18.       <li class="mybox"><a href="#">Item 1</a></li>  
  19.       <li class="mybox"><a href="#">Item 2</a></li>  
  20.       <li class="mybox"><a href="#">Item 3</a></li>  
  21.       <li class="mybox"><a href="#">Item 4</a></li>  
  22.       <li class="mybox"><a href="#">Item 5</a></li>  
  23.       <li class="mybox"><a href="#">Item 6</a></li>  
  24.       <li class="mybox"><a href="#">Item 7</a></li>  
  25.       <li class="mybox"><a href="#">Item 8</a></li>  
  26.       <li class="mybox"><a href="#">Item 9</a></li>  
  27.       <li class="mybox"><a href="#">Item 10</a></li>  
  28.     </ul>  
  29.   </div>  
  30. </div>  
  1. #slider {  
  2.   position: relative;  
  3.   height: 250px;  
  4.   overflow-x: scroll;  
  5.   overflow-y: hidden;  
  6. }  
  7.   
  8. #slider .row {  
  9.   height: 120px;  
  10.   margin: 0 0 10px;  
  11.   width: 3000em;  
  12.   padding: 0;  
  13. }  
  14.   
  15. #slider .row ul {  
  16.   padding: 0;  
  17.   margin: 0;  
  18.   float: left;  
  19. }  
  20.   
  21. #slider .mybox {  
  22.   float: left;  
  23.   height: 100px;  
  24.   margin: 0 10px;  
  25.   padding: 10px;  
  26.   background: lightgray;  
  27. }  
  1. var lists = document.getElementById('slider').getElementsByTagName('ul'),   
  2.     list, i = lists.length;  
  3. while (i--) {  
  4.     list = lists[i];  
  5.     list.parentNode.style.width = parseFloat(  
  6.         (window.getComputedStyle ?  
  7.          window.getComputedStyle(list, null) :  
  8.          list.currentStyle)['width']  
  9.     ) + 'px';  
  10. }  
9

Nah itt aztán van mit

therest · 2011. Dec. 7. (Sze), 20.19
Nah itt aztán van mit értelmezni, a window.getComputedStyle az nekem totál új, ennek utána kell olvassak, Crossbrowser metódus ez? Egyébként köszi a válaszra szánt időt!
11

Nem tudom, el is olvastad-e a

Poetro · 2011. Dec. 7. (Sze), 20.27
Nem tudom, el is olvastad-e a következő kódot:
  1. window.getComputedStyle ? window.getComputedStyle(list, null) : list.currentStyle  
A window.getComputedStyle visszaadja az aktuális stílusát a megadott elemnek. Ennek IE-s megfelelője a currentStyle, ami ugye pedig az elem egy tulajdonsága. Azaz ha van getComputedStyle (W3C), akkor meghívom azt, egyébként pedig a currentStyle-ra támaszkodom (IE).
13

Látom már, a lista alapú

therest · 2011. Dec. 7. (Sze), 21.22
Látom már, a lista alapú html-t vizslattam inkább.
10

Aztán menet közben ahogy

therest · 2011. Dec. 7. (Sze), 20.26
Aztán menet közben ahogy kódoltam, próbálgattam dolgokat, egyik verziónál a következőt csináltam:
1. a konténer width-je a css fileban 0px;
2. a konténer (slider) szélességét a gyerekek felfűzésénél jquery segítségével beállítom akkora méretre ami elég X/2 darab gyereknek (ezt szerettem volna elkerülni egyébként :D)

Később ha lekérem a jqueryvel a width tulajdonságot, akkor 0-át mutat, tehát a cssben megadottat.
Firebug szerint a tagnál a style tulajdonságban a jquery-vel beállított érték van.
Ha simán kiíratom az elem offsetWidth tulajdonságát, akkor megkapom a jqueryvel beállított értéket.

Kicsit összezavarodtam (ismét :)), és úgy érzem a jquery set/get-je nincs összhangban.
6

Ezt a dokumentumból kiemelést

therest · 2011. Dec. 7. (Sze), 19.43
Ezt a dokumentumból kiemelést sosem értettem. Ha veszek egy 301*301as div-et owerflow: hidden tulajdonsággal, akkor a gyermeke ami abszolút left: 301px, top 301px pozíciójú, nem fog látszani a dokumentumban.
Ha valóban ki lenne emelve a szülőből, akkor nem így kéne viselkednie.
8

Kiemelés

Poetro · 2011. Dec. 7. (Sze), 20.13
A kiemelést úgy kell érteni, hogy nem része a szövegfolyamnak, azaz nem foglal helyet a szülőjében. Ezáltal az utána következő elemek elfoglalják a helyét (amennyiben vannak ilyen elemek). Az, hogy ki van emelve nem azt jelenti, hogy valami más felett lenne, csak azt, hogy nem része a folyamnak, és mivel kilóg a szülőjéből, ami eltakar részeket, ezért nem is fog látszani.
12

Z-index

Pepita · 2011. Dec. 7. (Sze), 20.30
Csak az ő, illetve a "helyén lévő" elemek z-index-étől függ, hogy melyik takarja a másikat.