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:


cr=document.createElement('div');
cr.className='mybox';
$(cr).css('left',cleft);
$(cr).css('top',ctop);
slider.appendChild(cr);

A css-ek:


.mybox{
	position: absolute;
	height: 100px;
	width: 100px;
	cursor: pointer;
}

#slider {
	position: absolute;
	height: 250px;
	left: 0px;
	top: 0px;
}

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?

■

HTML, CSS, JavaScript, Ajax

csirip

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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:

$('<div></div>', {
  className: 'mybox',
  css: {
    top: 0,
    left: 0
  }
}).appendTo(slider);

Ha pedig jQuery nélkül szeretnéd csinálni, akkor:

cr=document.createElement('div');
cr.className='mybox';
cs = cr.style;
cs.left = cleft + 'px';
cs.top = ctop + 'px';
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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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?

A hozzászóláshoz regisztráció és belépés szükséges
új téma

inline-block

Poetro · 2011. Dec. 7. (Sze), 20.09

<div id="slider">
  <div class="row">
    <ul>
      <li class="mybox"><a href="#">Item 1</a></li>
      <li class="mybox"><a href="#">Item 2</a></li>
      <li class="mybox"><a href="#">Item 3</a></li>
      <li class="mybox"><a href="#">Item 4</a></li>
      <li class="mybox"><a href="#">Item 5</a></li>
      <li class="mybox"><a href="#">Item 6</a></li>
      <li class="mybox"><a href="#">Item 7</a></li>
      <li class="mybox"><a href="#">Item 8</a></li>
      <li class="mybox"><a href="#">Item 9</a></li>
      <li class="mybox"><a href="#">Item 10</a></li>
    </ul>
  </div>
  <div class="row">
    <ul>
      <li class="mybox"><a href="#">Item 1</a></li>
      <li class="mybox"><a href="#">Item 2</a></li>
      <li class="mybox"><a href="#">Item 3</a></li>
      <li class="mybox"><a href="#">Item 4</a></li>
      <li class="mybox"><a href="#">Item 5</a></li>
      <li class="mybox"><a href="#">Item 6</a></li>
      <li class="mybox"><a href="#">Item 7</a></li>
      <li class="mybox"><a href="#">Item 8</a></li>
      <li class="mybox"><a href="#">Item 9</a></li>
      <li class="mybox"><a href="#">Item 10</a></li>
    </ul>
  </div>
</div>

#slider {
  position: relative;
  height: 250px;
  overflow-x: scroll;
  overflow-y: hidden;
}

#slider .row {
  height: 120px;
  margin: 0 0 10px;
  width: 3000em;
  padding: 0;
}

#slider .row ul {
  padding: 0;
  margin: 0;
  float: left;
}

#slider .mybox {
  float: left;
  height: 100px;
  margin: 0 10px;
  padding: 10px;
  background: lightgray;
}

var lists = document.getElementById('slider').getElementsByTagName('ul'), 
    list, i = lists.length;
while (i--) {
    list = lists[i];
    list.parentNode.style.width = parseFloat(
        (window.getComputedStyle ?
         window.getComputedStyle(list, null) :
         list.currentStyle)['width']
    ) + 'px';
}

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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!

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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:

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).

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

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.

A hozzászóláshoz regisztráció és belépés szükséges
új téma

Weblabor

Keresés