That code looks fine - so wordpress must be messing it up.
It looks like jQuery is loading fine, else it would never get to the $
('a') line. Perhaps you could try the LIVE event:
$(function() {
$('a').live( "click", (function() {
$('#box').fadeOut();
});
});
Which would add the click event handler to links added to the page at
anytime (even in the future). If THAT worked then it looks like the
document.ready function running before wordpress has put everything in
place. Perhaps you could also try running your code in the
window.onload instead. The $(function(){...}) wrapper is a shortcut
for $(document).ready(function(){...} - so instead of using
doucment.ready, try
$(window).load(function(){
$('a').click(function() {
$('#box').fadeOut();
});
});
This might delay things enough to actually load the DOM nodes you are
trying to target. If THAT doesn't work - is there anyway you can put
the script at the bottom of the page instead of the head?
On Sep 9, 1:46 am, mikethevike <m...@moxiedisplays.com> wrote:
> I'm doing some simple tests and I can't get this to work on a
> wordpress site. Basically I'm trying to fadeOut a div with id of "box"
> when a link is clicked. I mentioned Wordpress because the head code is
> loaded dynamically into the page template, as well as the body
> content. I wasn't sure i this made a difference in diagnosing the
> problem. When I load the page, Firebug keeps giving an error...
>
> $('a') is null
>
> Here is my stripped html code...Thanks for any help!
>
> <head>
> <script src="http://www.moxiedisplays.com/js/jquery-1.3.2.min.js";
> type="text/javascript"></script>
>
> <style type="text/css">
> #box {background-color: red; width: 300px; height: 300px;}
> </style>
>
> <script type="text/javascript">
> $(function() {
> $('a').click(function() {
> $('#box').fadeOut();
> });
> });
>
> </script>
> </head>
>
> <body>
> <div id="box">
> </div>
> <a href="#">Fade Out</a>
> </body>
