Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

rikaschmitt

Trocar background do site de acordo com a div

Por , em Desenvolvimento frontend

Recommended Posts

rikaschmitt    54

rikaschmitt
Postado

Boa tarde galera.

 

Estou na seguinte situação: preciso que o background do meu site altere de acordo com a div presente na página atual. O background do index tem que ser diferente das demais páginas.

 

Como não posso mexer na tag <body> e nem adicionar variáveis, decidi criar uma classe para a div geral do conteúdo, uma para a index e outra pras demais, e no jQuery eu faço um ready() e ele altera o background.

 

Tipo isso:

$('.content-index').ready(function(){
   $('body').css({ 'background':'#FFF' });
});
$('.content').ready(function(){
    $('body').css({ 'background':'url(img/bg_content.jpg) no-repeat top center #FFF' });
});

No caso, o background do index só é branco. Já o background as demais páginas, é uma imagem.

O problema é que ele está colocando a imagem e a cor branca em todas as páginas...

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

jgustavo99    85

jgustavo99
Postado

Então, tente retirar os {} dentro da propriedade CSS, e teste...


Caso NÃO dê, tente o seguinte: Comentar a linha da propriedade CSS "$('body').css(...", e coloque um Alert de teste só para saber se eles estas fazendo pelo menos a verificação corretamente...

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Então, tente retirar os {} dentro da propriedade CSS, e teste...

Caso NÃO dê, tente o seguinte: Comentar a linha da propriedade CSS "$('body').css(...", e coloque um Alert de teste só para saber se eles estas fazendo pelo menos a verificação corretamente...

 

Então, continua adicionando os dois background independentemente se for index ou outra página.

Também coloquei dois alerts, um com "oi" e outro com "tchau".. e os dois aparecem na mesma página.

 

:\

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

Posso ver como está seu html?

acho que talvez daria pra fazer algo assim: 

$('body .content-index').css({ 'background':'#000' });
$('body .content').css({ 'background':'#00f' });

Desse jeito que você está colocando o código vai acabar lendo os dois códigos, é um single page?

Posta o html ai rsrs...

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Sim, ele lê os dois.

Mas no index.php só existe 1 div com a classe "content-index" e nenhuma com "content", não deveria ler os dois... Tentei por o "body" antes, mas continua executando as duas funções :(

Compartilhar este post

Link para o post
Compartilhar em outros sites

wilnet    92

wilnet
Postado

Olá rikaschmitt,

 

Sua páginas não são dinâmicas? tem banco de dados?

 

Eu fiz algo similar para um cliente, porém, fiz a base de programação e banco de dados.

 

Só que é com ASP.

<%
Dim img_fundo
Set img_fundo = dados.Execute("select img01 from fotos")

If img_fundo.EOF = False Then
%>

<body background="../fotos/fundo<%=img_fundo("img01")%>">

<%
Else 

Response.Write("<style>")
Response.Write("body {")
Response.Write("background-image: url(../fotos/default/fundo_default.jpg);")
Response.Write("}")
Response.Write("</style>")

End If

img_fundo.Close
Set img_fundo = Nothing
%>

Para cada Página eu inseri esse code MUDANDO apenas o Campo das "img01" , "img02" ... para cada página.

 

Caso não tenha a Imagem cadastrada, percebeu que ele inseri um Background default.

 

De repente te ajuda com alguma ideia nova.

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Vai ser uma loja, pelo Magento.

 

Mas queria algo mais simples.. é estranho, o jQuery não deveria executar o comando somente quando conseguir "ler" e "identificar" a classe?

 

Pois mesmo a classe não existindo no index.php, ele executa :(

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

eu não entendi como você colocou essas classes, tipo você colocou uma div antes do body?

Por isso queria dar uma olhada, eu estou achando que está assim ai ele está meio que se desfazendo dessas divs e pegando o body direto para suas duas funções. :/

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Não né.

 

Tá mais ou menos assim:

<html>
<head>
<title></title>
</head>
<body>


<div class="content">
</div>


</body>
</html>

Isso para as páginas internas.. e no index.php só trocar a classe para "content-index".

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

Tenta add a classe em vez de adicionar o css direto no jquery, talvez funcione rrsrs: 

<!DOCTYPE html>
<html>
<head>
    <title>teste</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <style>
    .content-geral-class{
    	background-color:#f00;
    }
    .content-class{
    	background-color:#00f;
    }
    </style>
</head>
<body>
  <div class="content" style="width:100%; height:300px;"></div>
  <div class="content-geral" style="width:100%; height:300px;"></div>
<script>
	jQuery(document).ready(function($){
    	var content      = $('.content'),
    	    contentGeral = $('.content-geral');

    	    content.addClass('content-class');
    	    contentGeral.addClass('content-geral-class');
	});
</script>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Eu não quero usar a classe para personalizar a div, mas o body.

A classe é apenas para "identificar" qual fundo o <body> terá.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

Nossa estou meio ruim de ideias hoje, mas se liga maninho eu fiz basicamente o que você fez ali em cima, só que eu tentei pegar o body a partir do this dentro do ready:

jQuery(document).ready(function($){
    var content      = $('.content');
    content.ready(function(){
	var body = $(this)[0].activeElement;
	$(body).css({'background-color':'#f00'});
    });
});

Torcendo pra que funcione rsrs... boa sorte!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

rikaschmitt    54

rikaschmitt
Postado

Não funcionou.

 

Que droga! >_<

 

Também não tenho ideia de como fazer isso...


Cosnegui!!

Simples.. dã... só usar if e ver se a div está visível ou não.

 

    var divINDEX = $('.banner-principal'),
        divCONTENT = $('.content');
    if ( divINDEX.is(':visible') ) { 
       $('body').css({ 'background-color':'#FFF', 'background-image':'none' });
    }
    if ( divCONTENT.is(':visible') ) { 
        $('body').css({ 'background-image':'url(img/bg_content.jpg)', 'background-color':'#FFF', 'background-repeat':'no-repeat', 'background-position':'top center' });
    }

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Julião    34

Douglas Julião
Postado

Aeee boa man!! :D eu ia te passar esse código aqui também, mas pelo jeito não iria funcionar rsrsrsrs:

content.ready(function(){
	var body = $(this).offsetParent();
	body.css({'background-color':'#f00'});
});

flw!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito