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.
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.
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
"
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');
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.