Autor Zpráva
ann
Profil *
Zdravím,
chci se zeptat,lze nějak udělat pomocí meter nebo progress to,že budou 2 hodnoty,a já je budu porovnávat?
např se to využívá u Like button
že to bude vypadat asi takto

že tam budou třeba hodnoty 4/7...
pcmanik
Profil
ann:
Pre tvoj príklad máš dokopy 11 hlasov takže 100% šírku vydelíš 11, tak ti výde 9.09% na dielik no a teraz nastavíš širku prvého boxu 4*9.09 a šírku druhého 7*9.09

Meter tag nemá cenu riešiť nakoľko ho nepodporuje Internet Explorer a ani niektoré mobilné prehliadače. No a progressu sa nedá nastaviť viacero hodnôt.
ann
Profil *
aha,jo to chápu...
jen,nejde to nějak jednodušejc?


hele,nějak mě to nefunguje..myslel jsi to takhle ne?
  <?
  $a="7";
  $b="11";
  $secti=$a+$b;
  $deleno=$secti/10;
  $lev=$a*$deleno;
  $prav= $b*$deleno;
  ?>
  <div id="hodnot" style="">
    <div style="width:200px">
    <div style="float:left;background-color:yellow;height:15px;width:<?=$lev?>">d</div>
    <div style="float:left;background-color:red;height:15px;width:<?=$prav?>">d</div>
    </div>
  </div>
yFang
Profil
ann:
Protože nemáš u width jednotky.
Joker
Profil
ann:
jen,nejde to nějak jednodušejc?
Vždyť to jsou jednoduché zlomky, to snad není taková hrůza.

Když první má X bodů a druhý Y bodů, oba dohromady mají S = X + Y bodů.
Takže skóre prvního má zabírat X / S plochy a druhého Y / S plochy.
Když se ten zlomek vynásobí 100, vyjde číslo v procentech.

Pokud jsou jen dva, stačí mi vypočítat podíl toho prvního a podíl toho druhého je prostě zbytek do plné šířky a můžu ho udělat barvou na pozadí toho většího prvku.
Takže když první má X bodů a druhý Y, čára toho prvního má mít šířku (100 * X / (X + Y)) a druhý má ten zbytek.
_es
Profil
ann [#3]:
Ešte si uvedomiť, aký je v PHP rozdiel medzi číslom a textovým reťazcom.
Bubák
Profil
Joker:
Vždyť to jsou jednoduché zlomky, to snad není taková hrůza.
A kdo se bojí zlomků, může to udělat postaru tabulkou (bude fungovat všude) nebo moderně využitím CSS tabulkových hodnot. Stačí zadat požadovanou šířku tabulky a hodnoty X a Y jako šířky buněk a prohlížeč se postará o výsledek.
ann
Profil *
nojo,ale zase tady je problém jak nastavím celkovou šířku?
jelikož takhle když tam nastavím třeba 7/8 tak to máš celkovou šířku 3px..
takže jak nastavím aby tam bylo pořád těch třeba 300px ?
Joker
Profil
ann:
když tam nastavím třeba 7/8 tak to máš celkovou šířku 3px
Tohle jsem nepochopil.

Celková šířka může být jakákoliv.
ann
Profil *
no jo ale to je zas naprd teda tohle řešení..co když tam budu mít hodnoty 6050/9032 ?
to mě rozhodí uplně celý stránky jelikož si to tu šířku nastavuje podle těch hodnot.
potřebuju aby celková,nebo spíš maximální i minimální šířka byla těch 300px
Joker
Profil
ann:
co když tam budu mít hodnoty 6050/9032 ?
Tak co?
Vyjde podíl prvního 100 * 6050 / (6050 + 9032) = zhruba 40% a podíl druhého ten zbytek, tj. zhruba 60%.

Šířka celého toho prvku bude nějaké pevně dané číslo, třeba 300px, nebo kolik se hodí.
ann
Profil *
jo aha,už to chápu...díky moc
Str4wberry
Profil
Ještě odpovím, jak by to vypadalo při použití značek <meter> nebo <progress>:

Živá ukázka

Nevýhoda je pochopitelně nepodporování těchto značek v některých prohlížečích. První nefunguje ani v IE 11 a druhá jen od IE 10.
ann
Profil *
aha,takže je lepší to dělat takhle přes css..ok. děkuji za odpovědi a rady :)
Joker
Profil
Str4wberry:
Možná ještě pro úplnost způsob(y), jak by to šlo udělat jedním klasickým prvkem (třeba <div>) bez dalších vnořených.

1. Udělat si jako obrázek na pozadí čáru dvojnásobné šířky než prvek, levou půlku vyplnit jednou barvou a pravou půlku druhou barvou (takže vznikne čára jedné barvy na šířku toho prvku a vedle čára druhé barvy na šířku toho prvku).
Pak stačí (výše uvedeným způsobem) spočítat procento toho kdo má být vpravo a to nastavit jako horizontální umístění obrázku na pozadí.
Příklad (označené je to procento):
<div style="background: url('obrazek.png') 75% top repeat-y; width: 400px; height: 20px;"></div>

Má to i výhodu, že tu čáru lze nějak graficky „vyšperkovat“.
Nevýhoda je, že je nutné při návrhu webu napevno stanovit šířku toho prvku s hodnocením a její případná změna znamená vyrobit nový obrázek na pozadí.

2. Udělat si jako obrázek dlouhou (minimálně aby pokryla celou šířku toho prvku) čáru té barvy, která má být vpravo. Výpočtem si určit podíl tentokrát toho vlevo, ale nenásobit 100, ale šířkou prvku v pixelech (např. 400). A na tolik pixelů pak umístit obrázek na pozadí.

Oproti 1. postupu je možné (snadněji) měnit šířku prvku, ale je nutné ji znát ve chvíli toho výpočtu.
ann
Profil *
tak ono způsobu je víc..např mě ještě napadá si vytvořit obrázek přímo v php...
tím pádem vlastně jen zobrazím jen obrázek,a po každé změně dat se vytvoří nový obrázek a ten starý přepíše...to by možná byl asi lepší způsob..ovšem zůstanu u toho co jste mě poradily :)
Joker
Profil
ann:
např mě ještě napadá si vytvořit obrázek přímo v php
Generovat pokaždé nový obrázek mi připadá zbytečně náročné, když můžu mít jeden a jen ho pomocí CSS posouvat.
Str4wberry
Profil
Reakce na Jokera:
3. Použít třeba border (při pevné šířce): Živá ukázka

4. Využít CSS gradient*: Živá ukázka

*) Ale těžko říct, jestli by to šlo nasimulovat přes filter i v IE 9 a starších.

Vaše odpověď

Mohlo by se hodit

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0