| Autor | Zpráva | ||
|---|---|---|---|
| Niorko Profil |
#1 · Zasláno: 19. 5. 2012, 17:29:07
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 |
#2 · Zasláno: 19. 5. 2012, 19:29:03
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 |
#3 · Zasláno: 19. 5. 2012, 20:18:15
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 |
#4 · Zasláno: 19. 5. 2012, 20:35:31
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 |
#5 · Zasláno: 19. 5. 2012, 21:02:56
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 |
#6 · Zasláno: 19. 5. 2012, 21:24:01
Můžeš ukázat živou ukázku celého projektu jestli to už máš na nějakém serveru?
|
||
| Niorko Profil |
#7 · Zasláno: 19. 5. 2012, 21:33:17
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 |
#8 · Zasláno: 19. 5. 2012, 22:55:40
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> |
||
| Niorko Profil |
#9 · Zasláno: 19. 5. 2012, 23:47:18
Ď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 |
#10 · Zasláno: 20. 5. 2012, 22:29:51
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>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 |
#12 · Zasláno: 21. 5. 2012, 20:12:08
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 |
#13 · Zasláno: 21. 5. 2012, 22:06:52
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 |
#14 · Zasláno: 22. 5. 2012, 01:10:33
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 |
#15 · Zasláno: 22. 5. 2012, 09:20:38
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 |
#16 · Zasláno: 22. 5. 2012, 11:28:07
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 |
#17 · Zasláno: 22. 5. 2012, 11:33:34
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 |
#20 · Zasláno: 22. 5. 2012, 15:28:59
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.
|
||
|
Časová prodleva: 12 let
|
|||
0