Autor Zpráva
Niorko
Profil
Ako zistiť absolútnu šírka DIVu v pixeloch cez JS, keď je určená percentuálne.

document.getElementById('idABCD').offsetWidth; -- vracia 0
document.getElementById('idABCD').width; -- vracia konkrétne 80%
DarkMeni
Profil
Je ten element ve chvíli, kdy zjištuješ jeho šířku, viditelnej? (že je už vloženej v dokumentu a nemá v css nic, co by ho nezobrazovalo (display: none;visibility: hidden;) - opactiy mu snad nevadí, ale tyto dvě vlastnosti by mohly kazit offsetWidth)
Jinak document.getElementById('idABCD').width; by mělo vracet 'undefined'.
Niorko
Profil
Máš pravdu document.getElementById('idABCD').width; vracia 'undefined'... v elemente je iba Canvas, ktorý je vložený v body a v DIV elemente s data-role="page" (jQuery mobile), ale to by tomu prekážať nemalo... document.getElementById('idABCD').offsetWidth vracia stále 0
DarkMeni
Profil
S Canvas nemam zkušenosti, ale je ten element (div s id idABCD) normálně vidět? Když mu nastavíš ještě výšku na nějakých 100px, pozadí na #000, uvidíš ho v dokumentu? / Co jsem slyšel, tak offsetWidth zjistí šířku (ale jen šířku elementu bez jeho rámečku a marginu) jedině když to může přepočítat, takže když je v tom dokumentu viditelnej (možná snad klidně i něčím překrytej, ale aby tam někde byl a zabíral prostor).

Vidíš ho tam někde? / Protože může být skrytej třeba kvůli nějakému rodiči - jinak nevidim důvod, proč by offsetWidth vracel 0 - snad jedině: má vůbec těch 80% vzhledem k nějakému elementu delšímu než 1px?
Niorko
Profil
Element viditeľný je, nastavil som mu border, aby som ho videl. Ak si dané dva riadky aj z html skopírujem do služby akou je http://jsfiddle.net/qqR5r/4/, funguje to tak ako má. Či tomuto už v projekte niečo bráni, to zistiť neviem, skúšam všetko možné, element je viditeľný a stále mi vyhadzuje 0.
DarkMeni
Profil
Můžeš ukázat živou ukázku celého projektu jestli to už máš na nějakém serveru?
Niorko
Profil
www.socw.php5.sk
Login-> email: email@gmail.com , heslo: heslo
Hore kliknúť na záložku Skic...

Ono išlo o to, že chcem podla okna zväčšovať a zmenšovať Canvas... bude tam viacej ovládacích prvkov na zmenu štetca, farby atď. Canvas nemôžem resizovať cez style, pretože sa zoomuje, čo ja nechcem, treba použiť parametre width a height a tam sa percentuálna velkosť nedá vložiť. Tak som to chcel obaliť DIVom kde budem potom zistovať jeho velkosť a podla toho nastavovať velkosť Canvasu, pretože stránka sa ako som povedal, bude resizovať podľa "zariadenia"...
DarkMeni
Profil
Co jsem koukal, tak mobilní jquery s tím něco udělá, po odstranění atributů data-role, theme atd. nebo vkládaného skriptu jquery.mobile to už offsetWidth sice spočítal, ale stránka se rozhodila. Žádný efektivní řešení mě nenapadá, ale jestli tam chceš nechat jquery.mobile, zjistit si šířku stránky a canvasu nastavit 95% šířky, tak by se to snad dalo nějak přes <body> nebo <html>:
var body = document.body || document.getElementsByTagName('body')[0]
  canvas_width = body.offsetWidth * 0.95; //95% šířky <body>
Nebo co že s tím css udělá když mu v něm nastavíš šířku? (Což by bylo asi nejjednodušší řešení)
Niorko
Profil
Ďakujem za pomoc. Spravím to nakoniec tak, ako si poradil... chyba bude najskôr v tom jquery mobile. Čo sa týka použitia css v canvase, sa výsledný canvas nezväčší v pravom slova zmysle, ale upscalne, čiže ak zväčším canvas 2krát použitím css, výsledný canvas bude 2 taký kostrbatý, celé to bude zväčšené a zle vyzerajúce.
DarkMeni
Profil
Nebo nebylo by lepší tam dát možnost na vybrání si rozlišení plátna uživatelem?
Třeba:
Rozlišení plátna:
<input type="text" id="canvas_width" value="100">
x
<input type="text" id="canvas_height" value="100">px
<input type="button" onclick="zmen_velikost();" value="Přerozměrovat">
<br>
<a href="javascript:auto_set_resoultion();">Automaticky přerozměrovat na dostupnou šířku a výšku</a>
<script type="text/javascript">
function zmen_velikost(){
  var min = 99,
        max = 2000,
        width = parseFloat(document.getElementById('canvas_width').value),
        height = parseFloat(document.getElementById('canvas_height').value),
  if(width > min && height > min && width < max && height < max){
    var canvas = document.getElementById('canvas_id');
    canvas.width = width;
    canvas.height = height;
  }else{
    alert('Zadané rozlišení buď není číselné a nebo přesahuje limit (minimálně: ' + min + 'px, maximálně: ' + max + 'px).');
  }
}
function auto_set_resoultion(){
  var body = document.body || document.getElementsByTagName('body')[0],
  var canvas = document.getElementById('canvas_id');
  canvas.width = body.offsetWidth * 0.95;
  canvas.height = body.offsetHeight * 0.75;
}
</script>
Jinak, možná by šlo zjišťovat šířku z offsetWidth, jak jsi to chtěl už v 1 příspěvku, ale musel by jsi použít nějakej časovač, ten jquery.mobile to asi jen po načtení nějak refreshne, a zrovna když zjišťuješ tu šířku je stránka asi někde v procesu čehosi od jquery.mobile, takže má obsah atributů jako data-role šířku 0, ale tak po 100ms to jde opět zjistit správně:
setTimeout(function(){alert(document.getElementById('idABCD').offsetWidth);}, 100); //To mi už místo 0 vrátí 1300
Niorko
Profil
Díky za pomoc, si super =)... zajtra sa na to pozriem.

Užívateľsky nastavovať canvas by som nerád, ono to možno nikto nebude využívať, je to len taká malá práca na "školský projekt", ale ak by to fungovalo na mobilných zariadeniach, chcel by som aby tam boli možnosti hrúbky štetca v troch velkostiach a nejaké 4 základné farby... toto všetko natrepať do mobilu či už na výšku alebo šírku (podla naklopenia meniť canvas atď). Nechcem aby sa skrolovalo do šírky, takže hlavne tá šírka aby bola ošetrená a v landscape pohlade, aby sa canvas buď to preklopil alebo nejak zmenšil, poprípade na širku sa napravo natrepalo UI... k tomu som sa ešte nedostal, experimentoval som zatiaľ s dynamicky sa meniacov šírkov canvasu podla DIVu alebo body...

Ako by si to riešil ty? Čo by si radil?

Edit: Test <-- takto nejak to zatiaľ vypadá, no napríklad na 3.2" uhlopriečke na Androide na výšku je pravá strana pekne vycentrovaná, no na 3.5" uhlopriečke na výšku na iOS nezostáva ani pixel odsadený z pravej strany....
DarkMeni
Profil
Není < 5" displeje na kreslení nějak málo? Třeba pár čar by se udělat dalo, ale myslim si, že kreslení v mobilu je těžký naskriptovat a u menších displejů se dá sotva trefit do písmene na klávesnici, a to pak něco nakreslit je skoro nemožný

Vycentruje to, z nějakého důvodu nedoporučovaná značka, <center>? Nebo jestli to má být vycentrovaný vertikálně tak pak asi jedině buňka tabulky s css vlastností "vertical-align: middle"
Niorko
Profil
Dosť populárna aplikácia Draw Free na kreslenie a následné uhádnutie obrázka druhým uživateľom funguje bez problémov... či už na ipade alebo iphone sa kresliť v pohode dá, nie je to zas také zlé ako sa zdá. Vycentrovať sa to nedá, pretože od lavého okraju je to pár pixelov a napravo od obrazovky to bolo konkrétne na iphone tak nalepené, že nebol vidieť ani border, pri tom na 3.2" Androide tam bol z pravej strany o dosť vačší kus volného miesta... Pri tom šírku canvasu som určoval ako si mi poradil body.offsetWidth * 0.90 napríklad...
1Pupik1989
Profil
Nehledáš toto?
getStyle = function(el,styleProp){ 
    if(typeof el == "string"){
    var el = document.getElementById(el);
  }
  if(el.currentStyle)
        var y = el.currentStyle[styleProp];
    else if(window.getComputedStyle)
        var y = document.defaultView.getComputedStyle(el,null).getPropertyValue(styleProp);
    return parseInt(y);
}
Niorko
Profil
1Pupik1989:
Stále vracal nula... proste niečo mu vadí na tom Jquery Mobile, ale funkcia super =)

DarkMeni:
Dík, so spojením s setTimeout() to funguje tak ako má, v pohode môže zostať delay na 0. Problém vyriešný.
1Pupik1989
Profil
Na dolphinu funguje, jquery k tomu tedy nepouzivam, u canvasu jsem to nepovazoval za nutne. Po onloadu body mi na padding normalne vrati 5. Body width nasobit 0.95 je v tomto pripade blbost, protoze by padding musel byt 0.025%. Jeste muzes padding a border definovat pri v javascriptu a nasledne spociyat sirku a vysku.
Chamurappi
Profil
Reaguji na Niorka:
proste niečo mu vadí na tom Jquery Mobile
Proč vlastně používáš jQuery Mobile, když ti většina jeho klíčových vlastností přidělává problémy, se kterými si nevíš rady?

offsetWidth vracia stále 0
Vlastnost offsetWidth funguje všude perfektně, akorát ten element nesmí mít display: none.
Niorko
Profil
1Pupik1989:
Nepoužívam jquery mobile kvôli canvasu, to by nedávalo zmysel... padding a margin je nastavený defaultne v jquery mobile.

Chamurappi:
Jquery mobile som chcel použiť kvôli UI na mobilných zariadeniach. A klúčová vlastnosť nie je to, že mi offsetWidth vracia nič... aj keď vyhodím všetok ostatný kód, aj pri čistom kóde to spraví, ak tam linknem JqM a použijem štandardný template, robí to stále...

offsetWidth hneď po načítani stránky aj s jquery mobile vráti 0, naskôr je to bug, ak použijem timer a použijem offsetWidth vráti mi to hodnotu akú potrebujem.... (po načítani stránky je element vidieť, nie je display: none)
1Pupik1989
Profil
Tak jsem se na ten skript podíval.

Takže funkce "init":
function init () {
    var body = document.body || document.getElementsByTagName('body')[0]
    
    padding = parseInt($("div.ui-content").css("paddingTop"));
    canvas_width = body.offsetWidth - padding*2; //95% šířky <body>
    canvas_height = body.offsetHeight * 0.75;
    alert(padding);

    // definovane platno a obsah platna
    platno = document.getElementById('platno');
    platno.width = canvas_width;
    platno.height = canvas_height;
    obsah = platno.getContext('2d');

    // vytvorenie pera
    tool = new tool_pencil();

    // eventlistenery pre pohyby mysou a dotyky prsta
    platno.addEventListener('mousedown', kresli, false);
    platno.addEventListener('mousemove', kresli, false);
    platno.addEventListener('mouseup',   kresli, false);
    platno.addEventListener('touchstart', kresli, false);
    platno.addEventListener('touchmove', kresli, false);
    platno.addEventListener('touchend',   kresli, false);    
}


a načtení

$(function(){
init();

// zabrani scroolovaniu na platne, aby sa pri kresleni web nehybal
document.getElementById('platno').addEventListener('touchmove',function(event){
    len = event.touches.length;
    if (len == 1) event.preventDefault();    
},false);

});


A tramtaratá :D
Niorko
Profil
1Pupik1989:
Ďakujem, ten padding si k tomu pripočítam, ide o to, že keď obalím canvas DIVom offsetWidth, DIVu pridelím percentá, tak pri zistovaní šírky DIVu s offsetWidth hneď po načítaní vráti 0. Až po tom ako mu dám timer mi vráti hodnotu, ako sa stále opakujem.

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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