Infobox display on click

Question

I've searched for 3 hours now and cant find a solution. All im after is when you click on an input field in a form, an infobox at the side reveals itself. I tried messing about with jQuery and just couldnt get it to work even though im sure the code is correct (aren't we always lol).

Anyway id appreciate any solution.

My attempt at jquery/css/html looks like this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<style>
    .infoBubble {
        visibility:hidden;
        color:#000;
    }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
    $('.box').click(function () { 
        $('.infoBubble').css({'visibility':'visible'});
    });
</script>
</head>
<body>

    <form action="process.php" method="get">

            <div class="row">
                <span class="label">Description: </span> 
                <input type="text" name="description" id="description" class="box" /><span class="infoBubble">Specific information related to this input</span>
            </div>

        </form>

</body>
</html>

Alex Barrett · Answer 1 · 2011-06-30T12:05:56.447

Firstly, your JavaScript is being executed before the document has finished loading, meaning the input field does not exist. Attach your code to jQuery's ready event to prevent this from happening.

$(function() {
    $('.box').click(function () { 
        $('.infoBubble').css({'visibility':'visible'});
    });
}

Secondly, an element hidden with visiblity: hidden will still take up space in the layout. Usually you would use display: none to make it seem as if the element were not there at all. Either way, you can use the show method to make the element visible.

CSS:

.infoBubble {
    color: #000;
    display: none;
}

JavaScript:

$('.infoBubble').show();

Thirdly, it is possible that your users focus the input without clicking on it (e.g., by pressing tab)! By using the focus event instead of click you can show the message regardless.

$('.box').focus(function() { 
    $('.infoBubble').show()
});

In addition to the above, you can also use the blur event to hide the message when the user no longer has focus on the input (when they click elsewhere, or tabbing out of it). All together you end up with something like this:

$(function() {
    $('.box').focus(function() {
        $('.infoBubble').show();
    }).blur(function() {
        $('.infoBubble').hide();
    });
}

Is that the code for the ready event? Based on your answer i found this and it worked so thanks for your reply. $(document).ready(function() { — user29660, Jun 30 '11 at 11:59
@user29660: `$(function() {` is the shorthand version of `$(document).ready(function() {`. Both are valid. — George Cummins, Jun 30 '11 at 12:01

score 0 · Answer 2 · edited Jun 30 '11 at 11:55

0

Try the following:

$('.box').click(function (){
    $('.infoBubble').toggle();
});

By the way. The css-property to hide/show something is not visibility, but display. For example:

display: none;

or

display: block;

edited Jun 30 '11 at 11:55

George Cummins

28,485
8
71
90

answered Jun 30 '11 at 11:52

Fidi

5,754
1
18
25

visibility is valid. `visibility: hidden` hides an element but does not remove it from the flow of the document. `display: none` hides an element and removes it from the page flow. http://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone – George Cummins Jun 30 '11 at 11:57
visibilty is used when the property remains on the page taking up the same spacing and position but isnt visible. Display removes it completely. – user29660 Jun 30 '11 at 12:02

Infobox display on click

2 Answers2