3

I've got an alphabeth table where I wanted to show/hide bubble with more info about the letter after clicking it. I'm completely new to jquery but I've managed to write down this:

JS:

function toggle(id) {
  $('#' + id).slideToggle();
}

HTML:

<td>
  <a href="javascript:toggle('a')" onmouseover="this.innerHTML='A'" onmouseout="this.innerHTML='あ'">あ</a>
    <div id="a" class="bubble_table">
      <a href=""><div class="img_table"></div></a><p>[a], a </p>
    </div>
</td>

And it works great but now I'd like the bubble to hide after clicking somewhere else on the page and I'm stuck. Can someone please show me how to edit/rewrite the function to achieve this? Possibly in the most simple way?

Thanks a lot, Eva

1
  • do all the bubbles have the class bubble_table ?
    – Patsy Issa
    Aug 5, 2013 at 7:15

3 Answers 3

2

try following:

$(document).mouseup(function (e)
    {
        var container = $(".bubble_table");
        if (container.has(e.target).length === 0)
        {
            container.hide();                
        }
    });

i hope it helps.

1

Inline events are to be avoided. Do not bind events that way. Use javascript or jQuery to get the work done. Added a class to the anchor elements. And storing the text to be shown in the HTML-5 data-* attributes

HTML

<tr>
    <td> <a href="" data-before="あ" data-after="A" class="bubble">あ</a>

        <div id="a" class="bubble_table"> <a href=""><div class="img_table"></div></a>

            <p>[a], a</p>
        </div>
    </td>
    <td> <a href="" data-before="あ" data-after="B" class="bubble">あ</a>

        <div id="b" class="bubble_table"> <a href=""><div class="img_table"></div></a>

            <p>[b], b</p>
        </div>
    </td>
    <td> <a href="" data-before="あ" data-after="C" class="bubble">あ</a>

        <div id="c" class="bubble_table"> <a href=""><div class="img_table"></div></a>

            <p>[c], c</p>
        </div>
    </td>
</tr>

Javascript

$(document).on('click', function(e) {
    e.preventDefault();
    var $this = $(e.target);
    if($this.closest('td').length) {
        if($this.hasClass('bubble') ) {
            var $currBubble = $this.next('.bubble_table')
            $currBubble.slideToggle();  
            $('.bubble_table').not($currBubble).slideUp();
        }
    }
    else {
        $('.bubble_table').slideUp();
    }
});

$('.bubble').on({ 
    mouseover : function() {
        $(this).text(function(_,txt) {
            return $(this).data('after');
        });
    },
    mouseout: function() {
        $(this).text(function(_,txt) {
            return $(this).data('before');
        });
    }

});

Check Fiddle

3
  • href can not be empty
    – frogatto
    Aug 5, 2013 at 7:28
  • @ABFORCE. y do you think so .. It can be empty Aug 5, 2013 at 7:30
  • It is definitely valid.. If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed, if it had been relevant. Aug 5, 2013 at 7:37
0

I used maverickosama92's function because of its simplicity and replaced the ".hide" with ".slideUp" as suggested by Sushanth because of the nice visual effect. It's working great, thanks to both of you :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.