Hide clickable links inside div when opacity is 0

Question

I have the HTML structure as follows:

<div class="boxes workshops wrapl">
    <a href="#" id="showw1" class="workshops-button lfloat">Show it</a>
</div>

<div class="boxes exhibitions">
    <a href="#" id="showex1" class="exhibitions-button lfloat">Show it</a>
</div> 
<div class="boxes gallery">
    <a href="#" id="showex1" class="gallery-button lfloat">Show it</a>
</div>

The class .boxes are squares set next to one another. There are about 30 boxes. Initially all the boxes are set to opacity:1 and all the -button class are set at opacity:0.

However, then also if I hover my mouse inside the .boxes, the links are clickable.

My .navi menu:

<div id="navi">
    <a href="#"><div id="t0"><span>Home</span></div></a>
    <a href="#"><span>Events</span></a>
    <a href="#"><span>Gallery</span></a>
    <a href="#"><span>Exhibitions</span></a>
</div>

My javascript code for changing the opacity.

    <script type="text/javascript">
    var isHome = true;
        $(function () {

            $("#navi a").click(function() {
                c = $(this).text().toLowerCase();
                isHome = c=="home";
                if (isHome){
                    $('.events-button, .workshops-button, .gallery-button, .sponsors-button, .hospitality-button, .lectures-button, .exhibitions-button').animate({opacity:0.0},500);
                    $(".boxes").animate({opacity: 1.0}, 500 );

                } else {
                    $('.' + c).animate({opacity: 1.0}, 500 );
                    $('.' + c + "-button").animate({opacity: 1.0}, 500 ).addClass('activehack');
                    $('.activehack').not('.' + c + "-button").animate({opacity: 0.0}, 500 );
                    $('.boxes').not('.' + c).animate({opacity: 0.3}, 500 );
                }
            });
        });
</script>

How can I remove the click event of the -button elements when they are not visible?

EDIT #1 I don't have to click the .-button elements.

When I click home, all .boxes should appear, but the <a>..</a> elements in each .boxes must not be clickable. Then if I click .events, only the .boxes with class: .events should appear alongwith <a>...</a> elements having .events-button class[and they should be clickable now.]

The Jsfiddle is here.

@popnoodles: Because I wanted to use the fadeIn and fadeOut effects. I know that `fadeIn` and `fadeOut` are also dedicated `Jquery` functions. Still, I was just using it. — xan, Jan 05 '13 at 19:23
fadeIn and fadeOut hide the elements after they reach 0% opacity so you wouldn't have this problem. I've given an answer in context of using opacity instead anyway. — Popnoodles, Jan 05 '13 at 19:25
updated my answer - misread slightly, please check it works. — Popnoodles, Jan 05 '13 at 19:34

Popnoodles · Accepted Answer · 2013-01-06T09:09:51.033

1

working demo

$('a[class="button"]').click(function(e){ // <--- don't miss this e
    if ($(this).css('opacity')==0) e.preventDefault();
});

edited Jan 06 '13 at 09:09

answered Jan 05 '13 at 19:23

Popnoodles

28,090
2
45
53

I think you have misunderstood the question. I don't have to click `.-button` elements. Please see my edited question. – xan Jan 06 '13 at 06:06
*"How can I remove the click event of the -button elements when they are not visible?"* With my code if you click them when they are invisible nothing will happen. When they become visible again, a click will work. – Popnoodles Jan 06 '13 at 07:15

score 1 · Answer 2 · answered Jan 06 '13 at 07:45

I know you already accepted an answer, but the thing is simply blocking the click event doesn't stop the default behavior - the "hand" icon when you hover over the anchor, indicating something clickable. Really, you should be showing/hiding the anchors, not overriding what happens when they are clicked since they shouldn't be clickable in the first place.

Here is a jsfiddle that actually shows/hides the links, making them unclickable as a "side effect" but also the expected behavior for a user.

$(".boxes a").hide(); is added when the home link is clicked, hiding all anchor tags within the divs.

This is also used when any other nav item is clicked, then $('.' + c + ' a').show(); is used to show the relevant links.

Well thanks. I had to accept an answer (or the closest answer) abiding by the rules of SO.:P — xan, Jan 06 '13 at 07:54
Well, I did post another question of that sort. People were having trouble understanding it. — xan, Jan 06 '13 at 08:06

score 0 · Answer 3 · answered Jan 05 '13 at 19:27

0

to unbind unecessary handlers use .unbind()

answered Jan 05 '13 at 19:27

allergic

392
2
6

Hide clickable links inside div when opacity is 0

3 Answers3

Linked