Background de acordo com a resolução da tela[RESOLVIDO]

Turdin
Offline
JCB! Master

Mais

15 anos 6 meses atrás #28403 por Turdin

Turdin replied the topic: Re: Background de acordo com a resolução da tela

Sim, também da, eu fiz daquele jeito mais por poder mudar outras propriedades (como alinhamento, e etc )
<img src="{SMILIES_PATH}/icon_e_biggrin.gif" alt="

" title="Muito Feliz" />

[url=http://www.animespace.com.br:2atbtyfv]Animes Legendados e Dublados[/url:2atbtyfv]
[url=http://www.animespace.com.br:2atbtyfv]Joomla Studio, desenvolvendo seu caminho para o sucesso![/url:2atbtyfv]

Please Entrar ou Registrar to join the conversation.

lucascatani
Autor do Tópico
Offline
JCB! Professional

Mais

15 anos 6 meses atrás #28416 por lucascatani

lucascatani replied the topic: Re: Background de acordo com a resolução da tela

abobre escreveu: Bom dia, faz assim:

<script language="JavaScript">
if (screen.width == "640" && screen.height == "480"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "800" && screen.height == "600"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "1152" && screen.height == "864"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "1024" && screen.height == "768"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "1280" && screen.height == "1024"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "1440" && screen.height == "900"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
	 }
</script>

Apenas mude os links da imagem.

Como eu faço pra passar o link relativo ao site, por exemplo ao invés de passar toda a URL da imagem, passar só algo como /images/foto.jpg

url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed

???

Ta quase resolvido o problema!!!

Lucas Catani
[b:1bmpfj72]Blog[/b:1bmpfj72]: <a class="postlink" href=" www.l9web.com.br/blog/ " onclick="window.open(this.href);return false;"> www.l9web.com.br/blog/ </a>
[b:1bmpfj72]MSN:[/b:1bmpfj72] <a href="Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.">Este endereço de email está sendo protegido de spambots. Você precisa do JavaScript ativado para vê-lo.</a>
[b:1bmpfj72]L9WEB | WEBSITES[/b:1bmpfj72] <a...

Please Entrar ou Registrar to join the conversation.

abobre
Offline
JCB! Expert

Mais

15 anos 6 meses atrás #28424 por abobre

abobre replied the topic: Re: Background de acordo com a resolução da tela

lucascatani escreveu:

abobre escreveu: Bom dia, faz assim:

<script language="JavaScript">
if (screen.width == "640" && screen.height == "480"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "800" && screen.height == "600"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "1152" && screen.height == "864"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "1024" && screen.height == "768"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "1280" && screen.height == "1024"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
}
if (screen.width == "1440" && screen.height == "900"){
	document.body.style.background="url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed";
	 }
</script>

Apenas mude os links da imagem.

Como eu faço pra passar o link relativo ao site, por exemplo ao invés de passar toda a URL da imagem, passar só algo como /images/foto.jpg

url('http://127.0.0.1/joomla_1.5/original/templates/aula_joomla/images/1440X900.jpg') no-repeat fixed

???

Ta quase resolvido o problema!!!

Cara, não tem segredo !

templates/aula_joomla/images/1440X900.jpg

Please Entrar ou Registrar to join the conversation.

lucascatani
Autor do Tópico
Offline
JCB! Professional

Mais

15 anos 6 meses atrás #28463 por lucascatani

lucascatani replied the topic: Re: Background de acordo com a resolução da tela

Resumindo então como eu fiz. Deu certo. Quero agradecer aos amigos que me ajudaram nesta batalha!

Criei uma função conforme o amigo Turdin sugeriu, mas com o conteúdo javascript passado pelo amigo adobre.

A versão passada pelo Turdin funcionou no Internet Explorer somente, essa adaptada funciona em todos. Segue abaixo.

index.php

function resolucao()
{
if (screen.width == "640"){
   document.body.style.background="#fafafa url(http://localhost/xxxpolenta/templates/mariabenta/images/page_bg800.jpg) no-repeat";
}
if (screen.width == "800"){
   document.body.style.background="#fafafa url(templates/mariabenta/images/page_bg800.jpg) no-repeat";
}
if (screen.width == "1152"){
   document.body.style.background="#fafafa url(templates/mariabenta/images/page_bg1152.jpg) no-repeat";
}
if (screen.width == "1024"){
   document.body.style.background="#fafafa url(templates/mariabenta/images/page_bg1024.jpg) no-repeat";
}
if (screen.width == "1280"){
   document.body.style.background="#fafafa url(templates/mariabenta/images/page_bg1280.jpg) no-repeat";
}
if (screen.width == "1440"){
   document.body.style.background="#fafafa url(templates/mariabenta/images/page_bg1440.jpg) no-repeat";
   }
if (screen.width == "1600"){
   document.body.style.background="#fafafa url(templates/mariabenta/images/page_bg1600.jpg) no-repeat";
   }
}

Agora o pulo do gato, ao carregar o BODY do index.php adicionamos o evento onload chamando a funcao criada em javascript.

<body id="page_bg" onload = "resolucao()">

No CSS (template.css) não podemos de esquecer de remover a linha que "seta" o background

#page_bg {
	remover -->&#91;color=#FF0000&#93;background: #fafafa url(../images/page_bg.jpg) no-repeat;	&#91;/color&#93;
}

Simples, fácil e eu fiz cada coisa que chega me dar dor de cabeça ao lembrar. Eu havia resolvido isso de outra maneira:
Não façam isso em casa

Criei uma função em javascript que detecta a resolucao e grava numa variavel. <!-- s:

--><img src="{SMILIES_PATH}/icon_mrgreen.gif" alt=":

" title="Sr. Verde" /><!-- s:

-->
Essa variável eu gravo em um COOKIE <!-- s:

--><img src="{SMILIES_PATH}/icon_mrgreen.gif" alt=":

" title="Sr. Verde" /><!-- s:

-->
Após esse processo eu com recupero o cookie com php <!-- s:

--><img src="{SMILIES_PATH}/icon_mrgreen.gif" alt=":

" title="Sr. Verde" /><!-- s:

-->
Onde linka a CSS do template eu coloquei uma tag php que mudava o nome da css
Tive que criar 6 css diferentes <img src="{SMILIES_PATH}/icon_e_sad.gif" alt="

" title="Triste" />

Vou colocar o código aqui embaixo:

<?php $res = 1600; ?>
<script language="JavaScript">
//Criação da variável resolucao
var resolucao = ""

if (screen.width==640)
	resolucao = 640
else if (screen.width==800)
	resolucao = 800
else if (screen.width==1024)
	resolucao = 1024
else if (screen.width==1152)
	resolucao = 1152
else if (screen.width==1280)
	resolucao = 1280
else if (screen.width==1440)
	resolucao = 1440
else if (screen.width==1600)
	resolucao = 1600
else //if all else
	resolucao = ""

//chama a função que cria o cookie
setCookie('mariabenta1', resolucao, 1)

//Lê o valor do cookie
LeCookie()	

//Função que grava o cookie	
function setCookie(cookie_name, cookie_value, expire_in_days)
{
var cookie_expire = "";

  if (expire_in_days != null)
  {
        var expire = new Date();
        expire.setTime(expire.getTime() + 1000*60*60*24*parseInt(expire_in_days));
        cookie_expire = "; expires=" + expire.toGMTString();
  }

 document.cookie = escape(cookie_name) + "=" + escape(cookie_value) + cookie_expire;
}
//Função que pega o cookie
function getCookie(cookie_name)
{
  if (!document.cookie.match(eval("/" + escape(cookie_name) + "=/")))
  {
   return false;
  }

return unescape(document.cookie.replace(eval("/^.*?" + escape(cookie_name) + "=(&#91;^\\s;&#93;*).*$/"), "$1"));
}


//Função que lê cookie
function LeCookie()
{
cookie = getCookie("mariabenta1");

if (!cookie)
	alert('Erro!')
//else
	//alert(cookie)
}

function reloadPage()
{
window.location.reload();
}

</script>
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
JPlugin::loadLanguage( 'tpl_SG1' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />

<?php
$nome_do_cookie = "mariabenta1";
if(isset($_COOKIE&#91;$nome_do_cookie&#93;))
{
$res = $_COOKIE&#91;$nome_do_cookie&#93;;
//echo "O cookie $nome_do_cookie existe! ";
}
else
{
echo "<script>setCookie('mariabenta1', resolucao, 1)</script>";
//echo "O cookie $nome_do_cookie não existe!";
}
$res = $_COOKIE&#91;$nome_do_cookie&#93;;
?>
<link rel="stylesheet" href="templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/template<?php echo $res;?>.css" type="text/css" />

Em resumo: QUE SOFRIMENTO! Mas valeu pelo aprendizado sobre cookies e javascript.

Valeu aí galera!!!!! <img src="{SMILIES_PATH}/icon_e_ugeek.gif" alt=":ugeek:" title="Uber Geek" />

Please Entrar ou Registrar to join the conversation.

aroldoschwab
Offline
JCB! Novato

Mais

14 anos 6 meses atrás #46218 por aroldoschwab

aroldoschwab replied the topic: Re: Background de acordo com a resolução da tela[RESOLVIDO]

Amigo... poderia ser mais específico onde você colocou esse código no index.php?
Quando coloco no index aqui aparecem erros de linguagem... por acaso não tem que ter:
<script language="JavaScript">
antes e depois fechando o código no index? ou algo assim?
Agradeço a resposta...

Please Entrar ou Registrar to join the conversation.

Joomla Templates Best Joomla Templates Premium Joomla Templates Free Joomla Templates