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 ? :/

can you please make us a jsfiddle... so that we can try it out....wanna see what is happenin... — bipen, Nov 25 '12 at 06:37
I will try to put in jsfiddle .. but don't really know how to use it.. regards, — Filipe Wolve, Nov 25 '12 at 21:09
>> here we go: JSFIDDLE shared : http://jsfiddle.net/hefferbh/VY3tp/ FULL VIEW: http://jsfiddle.net/hefferbh/VY3tp/embedded/result/ Can some one explain to me what's happening? Allready talk to my mom but she isnt an expert :X lol EDITED: made the code a little simplest and upload some images so yo can look what's happening. Have a look and click on LOGOTYPE img \o/ — Filipe Wolve, Nov 25 '12 at 21:49

BuddhiP · Accepted Answer · 2012-11-26T01:04:32.193

1

~~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>

edited Nov 26 '12 at 01:04

answered Nov 25 '12 at 06:38

BuddhiP

6,231
5
36
56

z-index: 9999; didn't work on #logo. I'd also tryed to change to and it didn't work also. The logo image keeps disappearing when i click on the logo with fadeToggle effect.... any ideas? – Filipe Wolve Nov 25 '12 at 17:17
Maybe you could look at the JSFIDDLE i made, and help me out! Regards, – Filipe Wolve Nov 25 '12 at 22:04
Thanks for checking it and answering! Help me a lot to understand some things... But unfortunatly i do want to keep the fade effect. Is there any solution i can keep with fade effect when the logo is clicked? \o/ – Filipe Wolve Nov 26 '12 at 01:27
1

@FilipeWolve, Hmm, then its a bit more trickier solution. I'm not sure if you can handle this by using background images. Setting opacity on a parent affects children too. See here how to avoid this: http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements, Anyway I've created a new Fiddle http://jsfiddle.net/BuddhiP/VY3tp/4/ with a simpler solution in which I use animate() method to hide and show a img tag which lives behind everything else (but not a background), absolute positioning is essential here. Not sure if this will suit you. – BuddhiP Nov 26 '12 at 04:35
I really need that fade smooth effect... i Guess i will check that opacity wihout affecting children ! Thanks for all answers! Best regards, – Filipe Wolve Nov 26 '12 at 05:16
1

Cool, my solution also uses the opacity, and I think that is also smooth,. But it is not using background images. – BuddhiP Nov 26 '12 at 05:23

Image issues with fadeToggle() effect

1 Answers1