Infobox display on click
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
&l开发者_如何学JAVAt;!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>
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();
});
}
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;
加载中,请稍侯......
精彩评论