Simple Jquery event not working

Question

I have an external .js file and I'm not sure if it's the .js fault.

Here is the .js file: (/js/scripts.js)

$(document).ready(function (){
    $('#about_link').click( function() {
        $('.middleface img').css('display','none');
        $('.aboutface').css('display','');
    });
});

I have three links (index, about, contact) each with #index_link, #about_link & #contact_link respectively.

What I'm trying to do is by clicking the About <a> link, the image inside .middleface div should disappear, and the .aboutface div should appear.

<html lang="en">
<head>
<link rel="stylesheet" href="css/styles.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/scripts.js" type="text/javascript"></script>
</head>
<body>
 <!-- navigation -->
<div class="navbar">
     <div class="navlinks">
        <a type="button" id="index_link">Index</a>
        <a type="button" id="about_link">About</a>
        <a type="button" id="contact_link">Contact</a>
             </div> 
</div>
<!-- middlecontent -->
<div class="middleface">
    <img id="middle_image" src="images/blabla2.png" alt="blabla">
    <!-- aboutpage -->
            <div class="aboutface"></div>
   </div>
</div>
</body>
</html>

...and the css

.middleface {
    background-image:url('images/blabla1.jpg');
    background-size:cover;
    width:100%;
}

#middle_image {
    height: 230px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-top:0px;
}

.middleface img{}

.aboutface {
    display:none;
    margin-left:auto;
    margin-right:auto;
    background-color:grey;
    width:800px;
    height:280px;
}

Try to add jQuery with full path: http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js. — user1823761
– user1823761, Commented Jun 5, 2013 at 6:49

Jurgen Vandw · Accepted Answer · 2013-06-05 06:38:51Z

4

Try:

$(document).ready(function (){
    $('#about_link').click( function() {
        $('.middleface img').css('display','none');
        $('.aboutface').css('display','block');
        });
    });

you can also use hide and show:

 $(document).ready(function (){
    $('#about_link').click( function() {
        $('.middleface img').hide();
        $('.aboutface').show();
        });
    });

answered Jun 5, 2013 at 6:38

Jurgen Vandw

6519 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2454367 Over a year ago

Thank you for the suggestion, i copy pasted it...but it still does'nt work :(. Perhaps a css/html problem?

user2454367 Over a year ago

Solved: Well what do you know, seems like the jquery link was not going through, after that everything works.

acdcjunior · Accepted Answer · 2013-06-05 06:57:04Z

Here are few ideas to solve your problem :

Use the on() function instead of the click() (as recommended here)
Before attaching the click event unbind it, it avoids strange behaviors (double click()s ... )
Access HTML elements by id is faster than .middleface img => use #middle_image
To display the element use display block or inline but it is better to use jquery functions hide() or show() or event fadeIn() and fadeOut() for an effect.

:

$('#about_link').unbind('click').on('click', function() {
     $('#middle_image').hide();
     $('.aboutface').show();
});

Hope it helps !

ShoibAhamed · Accepted Answer · 2013-06-05 06:39:24Z

0

Try-

$(document).ready(function (){
$('#about_link').click( function() {
    $('#middleface').hide();
    $('.aboutface').show();
});
});

You can use the id of the image in the aboutface div in the show() line

answered Jun 5, 2013 at 6:39

ShoibAhamed

3591 gold badge5 silver badges17 bronze badges

Comments

GautamD31 · Accepted Answer · 2013-06-05 06:40:22Z

0

Try to use preventDefault() for the click event of the links like

$(document).ready(function (){
    $('#about_link').click( function(e) {
        e.preventDefault();
        $('#middle_image').css('display','none');   //$('#middle_image').hide();
        $('.aboutface').show();
    });
});

answered Jun 5, 2013 at 6:40

GautamD31

28.8k10 gold badges66 silver badges86 bronze badges

Comments

Bharat Chodvadiya · Accepted Answer · 2013-06-05 06:44:55Z

0

You simply display the div using block. Use this.

$(document).ready(function (){
  $(document).on('click','#about_link', function() {
     $('.middleface img#middle_image').css('display','none');
     $('.aboutface').css('display','block');
  });
});

answered Jun 5, 2013 at 6:44

Bharat Chodvadiya

1,6484 gold badges20 silver badges31 bronze badges

1 Comment

user2454367 Over a year ago

Solved: Well what do you know, seems like the jquery link was not going through, after that everything works.

Collectives™ on Stack Overflow

Simple Jquery event not working

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

1 Comment

Related