Keskustelu: Nettisivujen teko: jQuery helppiä

Kyseinen tapa on erittäin epäkäytännöllinen, jos listaa haluttaisiin kasvattaa, joten apua tarvitaan koska oma pätevyys ei riitä:

var tabsUl = $('#tabsNav').outerWidth(true),
	tabsLi1 = $('#tabsNav li:eq(0)').outerWidth(true),
	tabsLi2 = $('#tabsNav li:eq(1)').outerWidth(true),
	tabsLi3 = $('#tabsNav li:eq(2)').outerWidth(true),
	tabsLi4 = $('#tabsNav li:eq(3)').outerWidth(true),
	tabsLi5 = $('#tabsNav li:eq(4)').outerWidth(true),
	tabsLi6 = $('#tabsNav li:eq(5)').outerWidth(true);

var tabsLiWidths = tabsLi1 + tabsLi2 + tabsLi3 + tabsLi4 + tabsLi5 + tabsLi6;

var fillWidth = tabsUl - tabsLiWidths;

Kokeilen each-funktiota mutten saanut arvoja talteen.

Näyttääpä epäilyttävältä. Et kai yritä tehdä JavaScriptilla jotain asetteluasiaa, joka kuuluisi tehdä CSS:llä?

Ilmeisesti kuitenkin haet jotain tällaista:

var sum = 0;
$('#tabsNav li').each(function() {
  sum += $(this).outerWidth(true);
});
alert(sum);

Koodi on sovellettu aivan suoraan linkittämäsi sivun ensimmäisestä esimerkistä.

Pääsi unohtumaan tuo += täydellisesti, kiitos.

No onnistuisihan se mutta koska listan pituus vaihtelee sen täytyisi aina käydä manuaalisesti muuttamassa, joka ei mielestäni ole kovin kätevää.

Siinäpä linkki: http://demo.knarsku.com/insidesign/slider-4.html

Ilman Javascriptiä näkee mihin tarkoitukseen koodi on.

Voisit yksinkertaisesti laittaa taustakuvan suoraan ul-elementille, niin koko ongelma ratkeaisi ilman JS:ää ja ylimääräisiä elementtejä.

Katsopa muuten tarkemmin noita diojen ja valikon pyöristettyjä kulmia: takaa paistaa rumasti pari pikseliä valkoista.

Eipä taida toimia koska aktiivisen tabin "painike" täytyy olla läpinäkyvä, jotta tausta näkyisi.

Joo olen kanssa spotannut ne.

Jaa. Yksi järkevä ratkaisu olisi siinä tapauksessa tyyli "display: table-cell", jolla saisi li-elementit asettumaan koko leveydelle. Toinen mahdollisuus olisi asettaa taustakuva vielä erikseen aktiiviselle li:lle.