Odd javascript Error (using jQuery)

Question

I have a code that grabs the buttons click and then vanishes the actual content and makes the content of the clicked item appear. I have it running along with other thins in an init.js file that is I have:

$(function() {
    $('#contacto').fancybox({
     'hideOnContentClick': false,
     'frameWidth': 600,
     'frameHeight': 550,
     'centerOnScroll': true
    });


     $('ul.drawers').accordion({
      header: 'H2.drawer-handle',
      selectedClass: 'open',
      event: 'mouseover'
     });

     $("#about-button").css({ opacity: 0.3  });
     $("#contact-button").css({ opacity: 0.3 });
     $("#page-wrap div.button").click(function(){
      clicked = $(this);
      console.log(clicked);
      // if the button is not already "transformed" AND is not animated
      if ((clicked.css("opacity") != "1") && (clicked.is(":not(animated)"))) {
       clicked.animate({
        opacity: 1,
        borderWidth: 5
       }, 600 );
       // each button div MUST have a "xx-button" and the target div must have an id "xx" 
       var idToLoad = clicked.attr("id").split('-');
       //we search trough the content for the visible div and we fade it out
       $("#menu-content").find("div:visible").fadeOut("fast", function(){
        //once the fade out is completed, we start to fade in the right div
        $(this).parent().find("#"+idToLoad[0]).fadeIn();
       })
      }
      //we reset the other buttons to default style
      clicked.siblings(".button").animate({
       opacity: 0.5,
       borderWidth: 1
      }, 600 );
     });
    });

but only the 2nd $(function() is the one that executes during this event. The HTML code that answers to this is:

<div id="page-wrap"> 
            <div id="festival-button" class="button">
                <h2 class="header-ultimo-festival">&Uacute;timo Festival</h2>
            </div>
            <div id="cursos-button" class="button">
                <h2 class="header-cursos">Cursos del A&ntilde;o</h2>
            </div>
            <div id="viajes-button" class="button">
                <h2 class="header-viajes">Viajes del A&ntilde;o</h2>
            </div>

            <div class="clear"></div>

            <div id="menu-content"> 
                <div id="festival">
                    <p>
                        <a href="assets/img/varias/album/festival/plant1.jpg" title="Imagen 1" class="thickbox" rel="ultimo-festival">
                            <img src="assets/img/varias/album/festival/plant1_t.jpg" alt="Imagen 1" />
                        </a> 
         <a href="assets/img/varias/album/festival/plant2.jpg" title="Imagen 2" class="thickbox" rel="ultimo-festival">
          <img src="assets/img/varias/album/festival/plant2_t.jpg" alt="Imagen 2" />
                        </a> 
         <a href="assets/img/varias/album/festival/plant3.jpg" title="Imagen 3" class="thickbox" rel="ultimo-festival">
                            <img src="assets/img/varias/album/festival/plant3_t.jpg" alt="Imagen 3" />
         </a> 
         <a href="assets/img/varias/album/festival/plant4.jpg" title="Imagen 4" class="thickbox" rel="ultimo-festival">
                            <img src="assets/img/varias/album/festival/plant4_t.jpg" alt="Imagen 4" />
         </a>
                    </p>
                </div>

                <div id="cursos">
                    <p>Im&aacute;genes de Cursos aqu&iacute;</p>
                </div>

                <div id="viajes">
                    <p>Im&aacute;genes de Viajes aqu&iacute;</p>   
                </div>
            </div>
        </div>
    </div>

The issue is, when someone clicks on a link from my menu and activates the "fancybox" effect and afterwards tries to click on an item related to the 2nd $(function() event I get this error:

$clicked.css is not a function (?)()()album.html (ligne 24) ready()()jquery.min.js (ligne 26) trigger()()jquery.min.js (ligne 25) [Break on this error] if (($clicked.css("opacity") != "1") && ($clicked.is(":not(animated)"))) {

But I still don't know why...I have tried to fix it but I can't because according to me I have correct syntax =/

---

Edit 2 answer

I did what was suggested if I click it before calling the "fancybox" effect I get in the alert box an [object Object] afterwards I get [object HTMLDivElement] and the same error as well...

---

Edit

By using firebug and console.log(); I noticed something, if I click before calling the "fancybox" I get back:

Object 0=div#cursos-button.button length=1 jquery=1.2.6

But after having called it I get:

<div id="cursos-button" class="button" style="border-width: 1px; opacity: 0.5;">

Now trying to figure out why...

---

Edit

I still don't know why this happens however I fixed it using jQuery.noConflict(); anyway, if someone do knows why this happened, I'd appreciate if you tell me =)

Answer 1

To start:

1 - Try putting the two anonymous functions inside the $(document).ready()

2 - Get rid of the $ prefix on your $clicked variable, that could be confusing jQuery - But before you change the prefix, do an alert($clicked) after this line:

$clicked = $(this);
alert($clicked); //to see if it's an object or null

Let us know what happens

Answer 2

I don't understand the purpose of your 2

$(function () {
...

that appear inside your document ready handler. That idiom is shorthand for

$(document).ready(function () {
...

So - do you really mean to wrap more document ready handlers inside your outer document ready handler ?

PS: naming a javascript variable with a $ prefix is perfectly legal, will NOT confuse jQuery, and is in fact recommended for holding jQuery objects