Image issues with fadeToggle() effect
Question
i'm new to JQuery + CSS so be patient please. I'm making a website that just have a header with a logo and i need it to be just like a button.. It has to change the background (an image) of the upper div when click it. But, when i click on it, the background change like it should but the logo disappears..
My problem should be simple but i can't see the solution anywhere... I'm using this:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="js/atooltip.jquery.js"></script>
<script type="text/javascript" src="js/kwicks-1.5.1.pack.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body id="page1">
<div class="body2" >
<div id = "fundo" class="bodyoff">
<div class="main">
<!-- header -->
<header>
<div id="a">
<h1><a id="logo" class="normaltip" title="Under Construction!"></a>
</div>
</header>
<div class="ic">myweb.com.br</div>
<!-- / header -->
<!-- content -->
<div class="inner">
<div class="kwiks_wrap">
</div>
</div>
<!-- / content -->
<!-- footer -->
<footer>
<div class="wrapper">
<ul id="icons">
<li><a href="#" class="normaltip" title="Facebook"><img src="images/icon1.png" alt=""></a></li>
<li><a href="#" class="normaltip" title="Twitter"><img src="images/icon4.png" alt=""></a></li>
</ul>
</div>
Support <a rel="nofollow" href="http://www.example.ufmg.br/" target="_blank">Inovation</a> - Example <br>
</footer>
<!-- / footer -->
</div>
</div>
</div>
<script>
$("#logo").click(
function(){
$("#fundo").fadeToggle("body2");
}
);
</script>
</body>
</html>
The difference between "body2" and "bodyoff" are just the 'background' image. Wy isn't working correctly ??
Some styles declared:
.bodyoff {
background: url(../images/bg_img_turnoff.jpg) top center no-repeat;
height: 100%;
min-height: 745px; }
.body2 {
background: url(../images/bg_img.jpg) top center no-repeat;
height: 100%;
min-height: 745px; }
h1 {
float: left;
padding: 114px 0 0 63px; }
#logo {
display: block;
background: url(../images/logo.png) repeat;
width: 319px;
height: 86px;
text-indent: -9999px; }
What i'm doing wrong? The logo shouldn't disappear... should it ? :/
1 answers
solution1
1 ACCPTED 2012-11-25 06:38:26
Try giving your #logo div a higher z-index, z-index: 9999;
If that doesn't work, use an img tag to hold the logo instead of using div.background.
I think the img tag for logo is a better way of doing this.
I think the problem was your call to fadeToggle() method. It effectively hides the element from view including its child elements (there goes your logo) when the fadeToggle() animation is complete.
I think what you need here is .toggleClass('body2') to change the css class of your target element.
Check the changed fiddle at http://jsfiddle.net/BuddhiP/VY3tp/2/
jQuery doc: toggleClass vs fadeToggle
Hope this helps. Sorry about not noticing the fadeToggle() earlier.
I've also changed your tag with back ground image to a direct tag with src attribute because I believe you should not use background images when it's not really an background image, specially if you want it to be clickable. This can give you lot of headaches later on if you get more elements on the page which happens to overlay your logo.
<img id="logoimg" tittle="my logo" src="http://img211.imageshack.us/img211/1775/logoex.png"></img>
But this change is not necessary for this example to work, it will even work with your original line
<a id="logo" tittle="my logo"></a>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.