Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Drop Down Not Working – jQuery

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #158872
    Zwiv
    Participant

    I’m working on a theme for my forum and I want a drop down user panel but the drop down doesn’t seem to be working. I’ve been looking all over the place for a solution but can’t seem to find one. A helpful users from CSS-Tricks helped me get started but I still can’t figure out why the drop down isn’t working.

    Link to site:

    http://mediaforums.net/

    Up top in the right corner is where the drop down is.

    Any help?

    #158873
    Chromawoods
    Participant

    You have registered the click handler before the element is even existing in the document. If you load the page with dev tools console open, you’ll see Cannot call method 'click' of null so jQuery doesn’t know about $(this).siblings('.controls') yet..

    You have two alternatives. Either run that piece of script in the bottom of the page (you should try to put as much as you can there to avoid render blocking). Or, wrap your event handler in jQuery’s $(function() {});, like this:

    $(function() {
        $('.open_controls').click(function(e) {
            e.preventDefault();
    
            $(this).siblings('.controls').fadeToggle(200);
        });
    });
    
    #158874
    Zwiv
    Participant

    Alright, that seemed to work placing it in the bottom of the page, however, I also had to remove

    <script type="text/javascript">jQuery.noConflict();</script>

    in order for it to work which now is preventing me from collapsing the forum tables on my forum’s index…

    I suppose I’d rather have the drop down work rather than the collapse but I’d definitely like to figure out a way to make both of them work. :P

    #158876
    Alen
    Participant

    Put noConflict back in and try using jQuery instead of $. So:

    $('') becomes jQuery('')

    #158878
    Chromawoods
    Participant

    I see, $ is used by prototype too on your page. Well, you can still use $ as a jQuery alias if you pass it to your onready function, like this:

    jQuery(function($) {
        // You can now use $ as a reference to jQuery inside of this scope, hooray!
    });
    

    ..or you can make a straight up function expression:

    (function($) {
        // You can now use $ as a reference to jQuery inside of this scope, hooray!
    }(jQuery));
    
Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.