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