Javascript Change css when in certain div

0

I have a white logo on my website and a white menu, and my contact div has the white background, so they disappear. I want to know how to make a script that will change the logo and menu css when in this div.

    
asked by anonymous 04.02.2016 / 19:06

3 answers

1

Can resolve with CSS only:

#foo{
	background-color:#ffffff;
	width:300px;
	height:80px;
}
#foo > .logo, #foo > .menu{
	color:#000000;
}
#bar{
	background-color:#cccccc;
	width:300px;
	height:80px;
}
.logo{
	color:#ffffff;
}
.menu{
	color:#ffffff;
}
<div id="foo">
	<div class="logo">logo</div>
	<div class="menu">menu - menu - menu</div>
</div>

Do a simulation. Just change the id "foo" to "bar" and see what happens.

<div id="foo"> change by <div id="bar">

When it is a "bar", the logo and menu are white because "bar" has a gray background. When it is "foo", the logo and menu become black because "foo" has a white background.

This trade-in effect is due to this stretch:

#foo > .logo, #foo > .menu{
    color:#000000;
}

This excerpt says "set black color for a selector logo and menu within foo "

    
04.02.2016 / 19:27
0

You can use Jquery to do this. What you need to define is the action that will change these colors, eg: click, change, etc.

$('#IdLogo').css('background-color','red');
$('#IdMenu').css('background-color','blue');
    
04.02.2016 / 19:13
0

Well, as I understand it, you use some Ajax system to load the contents of your site, like "# contact", "who are we" and etc.

>

Well in your case as colleagues have said you have to add some event that reads the change, type a click or when the URL is changed, and when it happens to do the color change, I am more the second case I think more elegant, because the exchange is directly linked to the action (in the case the page exchange), well if that's what I understood a pseudo code using pure JavaScript would be like this:

<script>
function changeCorContato() {
 // Pega a Âncora da URL #XXXXXX
 var hash = window.top.location.hash;

 // Pinta os div caso seja o contato
 if (hash == "#contato") {
  document.getElementById("logo").style.backgroundColor = "#FF0000";
  document.getElementById("menu").style.backgroundColor = "#0000FF";
 } else {
  // Volta a cor original caso seja outra Âncora
  document.getElementById("logo").style.backgroundColor = "#FFFFFF";
  document.getElementById("menu").style.backgroundColor = "#FFFFFF"; 
 } 
}

// "Escuta" a ação de troca de Âncora
window.addEventListener("hashchange", changeCorContato, false);
</script>

<div id="logo">Logo</div>
<div id="menu">
 <a href="#home">Home</a>
 <a href="#contato">Contato</a>
</div>

As I said this is a pseudo code, you can improve on how to use "single 1 IF" or rewrite it in jQuery or another framework of your own.

    
05.02.2016 / 03:14