Como transformar widht=90% em pixels

3 participantes

Ver o tópico anterior Ver o tópico seguinte Ir para baixo

Tópico resolvido Como transformar widht=90% em pixels

Mensagem por MarcosSchultz 22.11.15 19:04

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?


Última edição por MarcosSchultz em 23.11.15 16:53, editado 1 vez(es)
MarcosSchultz

MarcosSchultz
Membro

Membro desde : 19/09/2014
Mensagens : 547
Pontos : 755

http://schultzgames.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como transformar widht=90% em pixels

Mensagem por Hancki 22.11.15 20:54

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
Hancki

Hancki
Membro Entusiasta
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8190
Pontos : 12245

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como transformar widht=90% em pixels

Mensagem por MarcosSchultz 23.11.15 1:10

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
MarcosSchultz

MarcosSchultz
Membro

Membro desde : 19/09/2014
Mensagens : 547
Pontos : 755

http://schultzgames.forumeiros.com/

Ir para o topo Ir para baixo

Membro Entusiasta

Tópico resolvido Re: Como transformar widht=90% em pixels

Mensagem por Hancki 23.11.15 2:35

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
Hancki

Hancki
Membro Entusiasta
Membro Entusiasta

Membro desde : 03/10/2009
Mensagens : 8190
Pontos : 12245

https://ajuda.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como transformar widht=90% em pixels

Mensagem por MarcosSchultz 23.11.15 3:05

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?
MarcosSchultz

MarcosSchultz
Membro

Membro desde : 19/09/2014
Mensagens : 547
Pontos : 755

http://schultzgames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como transformar widht=90% em pixels

Mensagem por MateusAnjosV 23.11.15 13:42

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?
MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como transformar widht=90% em pixels

Mensagem por MarcosSchultz 23.11.15 16:22

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
MarcosSchultz

MarcosSchultz
Membro

Membro desde : 19/09/2014
Mensagens : 547
Pontos : 755

http://schultzgames.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como transformar widht=90% em pixels

Mensagem por MateusAnjosV 23.11.15 16:25

É 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>

');
});

Feliz
MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como transformar widht=90% em pixels

Mensagem por MarcosSchultz 23.11.15 16:31

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
MarcosSchultz

MarcosSchultz
Membro

Membro desde : 19/09/2014
Mensagens : 547
Pontos : 755

http://schultzgames.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Como transformar widht=90% em pixels

Mensagem por MateusAnjosV 23.11.15 16:33

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?

MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como transformar widht=90% em pixels

Mensagem por MarcosSchultz 23.11.15 16:39

Ok, explicarei passo a passo Muito feliz

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

Como transformar widht=90% em pixels 8jnKQF0

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.

Como transformar widht=90% em pixels QeRfGHW

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

MarcosSchultz
Membro

Membro desde : 19/09/2014
Mensagens : 547
Pontos : 755

http://schultzgames.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Como transformar widht=90% em pixels

Mensagem por MateusAnjosV 23.11.15 16:48

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);
});
MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Como transformar widht=90% em pixels

Mensagem por MarcosSchultz 23.11.15 16:52

Nossa, perfeito. Aprendi mais uma coisa Muito feliz

Muito obrigado!
MarcosSchultz

MarcosSchultz
Membro

Membro desde : 19/09/2014
Mensagens : 547
Pontos : 755

http://schultzgames.forumeiros.com/

Ir para o topo Ir para baixo

  • 0

Tópico resolvido Re: Como transformar widht=90% em pixels

Mensagem por MateusAnjosV 23.11.15 16:53

Como transformar widht=90% em pixels Symbol10 Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada.

Tópico marcado como Resolvido e movido para "Questões resolvidas".
MateusAnjosV

MateusAnjosV
Super Membro

Membro desde : 16/10/2015
Mensagens : 1718
Pontos : 2373

http://holder.forumeiros.com/

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos