Home/ Questions/Q 8885017
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T21:12:22+00:00

i’m new to JQuery + CSS so be patient please. I’m making a website

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team


    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>
    • 0