Hello,
I am new to jQuery and over all web development.

I recently created a site using jQuery Effects/show (callback)
function, with a very basic show/hide effect.

$("button").click(function () {

     $("p").show("slow");
   });


However, it works fine in Safari and Firefox, but does not work at all
in Internet Explorer, even the latest version 8.  Since I am very much
an amateur, I probably did something very obviously wrong...

I think it's the way I tagged "bio2" with out a class or id, but I've
tried different ways to go about it and it doesn't seem to work even
on Safari or Firefox if I change anything.

I've included my basic code below along with the link to the actual
site, in hopes that someone has a suggestion for me.
Any help or advice is greatly appreciated!

P.S. I downloaded jquery_latest.js and compressed it.  It's labled
"jquery_latest.comp.js and linked as a separate file.

link to site: http://www.leylamccalla.com
(Firefox + Safari is how I would like it to work)





Code:

---------------------------------------------------------------------------

<head>

     <script src="Scripts/jquery_latest_comp.js"></script>

     <script>
           $(document).ready(function(){
               $("bio").click(function () {$("bio2").show(1500);
         });
     });


          $(document).ready(function(){
                $("clo").click(function () {$("bio2").hide(400);

         });
     });

     </script>

     <style>


          #bio {position: absolute;
                   width:115px;
                   left: 110px;
                   top: 63px;
                   text-align: center;
                   cursor:pointer;
                   z-index:2;}


          bio2 {background-image:url(images/bio_back.jpg);
                  background-repeat:no-repeat;
                  width:805px;
                  height:504px;
                  position:absolute;}


          clo {position:absolute;
                 width:20px;
                 height:20px;
                 left:750px;
                 top:450px;
                 z-index:2;
                 color:#063;
                cursor:pointer;}



          .content {position:absolute;
                         left:0px;
                         top: 135px;
                         display:none;}

         </style>


</head>

<body>

     <div id="bio">

               <bio>
                     <a onClick="document.getElementById
('bio').style.color='#999999';>
                      bio
                     </a>
            </bio>
     </div>


      <bio2 style="display: none" class="content">
             <p>TEXT HERE</p>

                   <clo><a onClick="document.getElementById
('bio').style.color='#000';">X</a></clo>
       </bio2>


</body>

Thanks so much!

Reply via email to