Trying to show DIV in jQuery
I have this java code:
<script src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.2.6");
$("a#more").click(function() {
$("#info_box").show("blind", { direction: "vertical" }, 800);
});
</script>
And this link:
<a href="#" id="more">More Info...</a>
info_box is just a div with properties:
width: 30%;
position: absolute;
left: 35%;
top: 250px;
background-color: #FFFFFF;
border: 2px solid #000000;
visibility: hidden;
How it could not work, tried to figure it out for 20 minutes.
source to share
You can use the function ready()
and display: none
in the original CSS
Working HTML:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(
function()
{
$("a#more").click(function() {
$("#info_box").show("blind");
});
});
</script>
<style>
#info_box {
width: 30%;
position: absolute;
left: 35%;
top: 250px;
background-color: #FFFFFF;
border: 2px solid #000000;
display: none;}
</style>
</head>
<body>
<a href="#" id="more">More Info...</a>
<div id="info_box">Secret info goes here</div>
</body>
</html>
There are also problems with the show function. You are using not documented params
. Instead, use the "animate" function to make custom animations.
I also recommend that you use Firebug for future javascript problems.
source to share
Are you sure you are calling the correct function? According to the docs http://docs.jquery.com/Effects/show the show function takes speed as the first parameter and the callback function as the second. I think that your "blind"
and { direction: "vertical" }
wrong.
It is also worth checking if there is a conflict with another script, eg. MooTools.
source to share