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 =)

karim79 · Accepted Answer · 2009-03-27 02:25:41Z

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

answered Mar 27, 2009 at 2:25

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tsundoku Over a year ago

even with the alert after removing the $ I get that error...the thing actually is that the script won't execute again after having called the "fancybox"

Scott Evernden · Accepted Answer · 2009-03-27 03:11:43Z

1

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

answered Mar 27, 2009 at 3:11

Scott Evernden

40.1k15 gold badges81 silver badges84 bronze badges

2 Comments

Tsundoku Over a year ago

I removed them (I had originally 3 separate functions that's why) still I get the error. now I just have 1 $(function() {});

karim79 Over a year ago

I wasn't sure about the $variable thing, thanks for clarifying that.

Collectives™ on Stack Overflow

Odd javascript Error (using jQuery)

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related