CODEWITHSUNDEEP
jquery
zuk1
zuk1

Reputation: 18369

Trying To Show A 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 the properties:

width: 30%;
position: absolute;
left: 35%;
top: 250px;
background-color: #FFFFFF;
border: 2px solid #000000;
visibility: hidden;

How can this not be working, been trying to figure it out for 20 minutes.

Upvotes: 0

Views: 2053

Answers (3)

Eduardo Molteni
Eduardo Molteni

Reputation: 39413

You may use the ready() function and display: none in the initial 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 problems with the show function also. You are using a not documented params. Use the "animate" function instead to do a custom animation.

I also recommend you to use Firebug to troubleshot javascript problems in the future.

Upvotes: 4

V_H
V_H

Reputation: 1793

I had the exact same problem. You need to load the jQuery ui plugin as well as normal Jquery to use the format you have there.

Upvotes: 0

DisgruntledGoat
DisgruntledGoat

Reputation: 72510

Are you sure you're calling the right function? According to the docs at http://docs.jquery.com/Effects/show the show function takes a speed as the first parameter, and a callback function as the second. Your "blind" and { direction: "vertical" } are misplaced I think.

Also worth checking there's no conflict with another script e.g. mootools.

Upvotes: 1

Related Questions