Como transformar widht=90% em pixels

Detalhes da questão

Endereço do fórum: http://www.schultzgames.com/
Versão do fórum: PunBB

Descrição

Olá pessoal... estou trabalhando em uma espécie de chat para o meu fórum, cujo código é o seguinte:

Código:

$(function() {
$('#main-content').before('

<br/>
<center>
<embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" bgcolor="#000000" width= "1200" height="350" name="chat" FlashVars="id=216020516&gn=schultzgames" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small></small><br>
</center>

');
});

Bastante simples... Más tem um problema, a largura da tela é dada em pixels

Código:

width= "1200"

Tentei utilizar width=90%, más não da certo...

Então tentei outra abordagem, declarar uma variável para capturar a largura e fazer a porcentagem na mão, transformando tudo em pixels... e depois jogar os pixels na variável:

Código:

int width = screenSize.getWidth();
int largura = (90.0*width)/100.0;
$(function() {
$('#main-content').before('

<br/>
<center>
<embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" bgcolor="#000000" width=largura height="350" name="chat" FlashVars="id=216020516&gn=schultzgames" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small></small><br>
</center>

');
});

Más continua a dar errado.

Tentei assim também:

Código:

var largura = screen.width;
var larguraAplicada = (90*largura)/100;

$(function() {
$('#main-content').before('

<br/>
<center>
<embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" bgcolor="#000000" width=larguraAplicada height="350" name="chat" FlashVars="id=216020516&gn=schultzgames" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small></small><br>
</center>

');
});

E continua a dar errado...

Alguém saberia dizer como resolver o problema?

Olá!

Vou responder diretamente ao seu título neste tópico, que é "como transformar 90% (de largura) em pixels".

Matematicamente, 90% de 1000px = 900px.
Mas temos telas em que a largura pode rondar 1024px ou 1080px, ou 1376px... ou mesmo acima dos 2000px.

A questão aqui é usar a matemática para calcular a percentagem do valor da tela.
Mas para quê tudo isso?
Quando, nos códigos CSS, usamos percentagem (%), o próprio código reconhece o espaço da tela ou o espaço do elemento pai (ou seja, o elemento em que essa div/span está inserida).

Criei aqui um código rápido que nos dirá o valor de 90% da nossa resolução da tela. Execute o seguinte código na Consola do navegador, pressionando a tecla F12 e depois clicando na aba "Consola". No espaço para digitar, cole o código abaixo e pressione a tecla "Enter".

Código:

var largura = $(window).width();
console.log(largura);
var percentagem = '90';
var resultado = parseInt(largura) * 100 / parseInt(percentagem);
alert(resultado + 'px. Este é o valor de 90% dos pixeis de largura da sua janela.');

Acho que isto o pode ajudar.

Hancki

O problema que estou encontrando é este:

se eu utilizar isto, funciona:

Código:

width=1600

Já se eu utilizar isto:

Código:

var largura = $(window).width();
console.log(largura);
var percentagem = '90';
var resultado = parseInt(largura) * 100 / parseInt(percentagem);

width=resultado

A janela fica com uns 400 px de largura sóhh... Não entendo por que

Também não sei onde possa estar o problema.
Pode ser uma div/span que esteja inserida noutra que não deixe aumentar/sobrepor o tamanho do elemento pai.
Não posso fazer muito mais face a isto :/

Hancki

Más qual a diferença?

se eu usar widht=1600, funciona

se eu usar widht=screen.widht, não funciona

eu não estou passando um size apenas?

Bom dia!

Eu confesso que estou com dificuldade em interpretar... mas veja:

Spoiler:

Mas eu não entendo... porque width: 90% não dá certo? Não seria melhor solucionar esse erro?

Esta que é a dúvida, por que o 90% não da certo...

Este é o código:

Código:

var t = $( window ).width();
var pt = 90;
var result = t * 100 / pt;

$(function() {
$('#main-content').before('

<br/>
<center>
<embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" bgcolor="#000000"
width=result
height=350
name="chat" FlashVars="id=216020516&gn=schultzgames" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small></small><br>
</center>

');
});

Más por algum motivo, o width só aceita pixels... se eu colocar do jeito que está, com uma variável, o seu tamanho vai para 400 e poucos pixels sempre

É que você aplicou de forma errônea, troque por esse:

Código:

$(function() {
var t = $( window ).width();
var pt = 90;
var result = t * 100 / pt;

$('#main-content').before('

<br/>
<center>
<embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" bgcolor="#000000"
width='+result+'
height=350
name="chat" FlashVars="id=216020516&gn=schultzgames" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small></small><br>
</center>

');
});

Desta vez acontece o mesmo efeito de utilizar o comando "90%"

A largura fica em 90% más a altura distorce. Tipo, se 90% corresponde a 1500px, e eu colocar 1500px, fica 100%. Más se eu colocar 90%, a altura distorce

Eu não entendi... explique melhor, por gentileza. É fato que se modificar a largura terá efeitos na altura, o que deseja exatamente? Pois, a questão em si era para transformar width % em pixels, fizemos, agora qual é a questão?

Ok, explicarei passo a passo

Este é o código:

Código:

$(function() {
var result = ($( window ).width() * 90) / 100;
$('#main-content').before('

<br/>
<center>
<embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" bgcolor="#000000"
width=1440
height=350
name="chat" FlashVars="id=216020516&gn=schultzgames" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small></small><br>
</center>

');
});

utilizando estes 2 comandos

Código:

width=1440
height=350

funciona perfeitamente, conforme a imagem abaixo mostra



Já se eu utilizar estes comandos:

Código:

width='+result+'
height=350

ou

Código:

width=90%
height=350

Da errado, conforme a imagem abaixo mostra.



E isto tudo sendo que 1440 é exatamente a mesma coisa que 90% na minha tela. Não deveria funcionar normalmente?

Entendi de forma perfeita agora!
Substitua por este:

Código:

$(function() {
var result = $( window ).width() * 90 / 100;
$('#main-content').prepend('<br/><center>
<embed src="http://www.xatech.com/web_gear/chat/chat.swf" quality="high" bgcolor="#000000"
id="chat"
height=350
name="chat" FlashVars="id=216020516&gn=schultzgames" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://xat.com/update_flash.shtml" /><br><small></small><br>
</center>');
$('#chat').attr('width', result);
});

Nossa, perfeito. Aprendi mais uma coisa

Muito obrigado!