Home › Forums › JavaScript › Drop Down Not Working – jQuery
- This topic is empty.
-
AuthorPosts
-
December 20, 2013 at 1:11 pm #158872
Zwiv
ParticipantI’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:
Up top in the right corner is where the drop down is.
Any help?
December 20, 2013 at 1:22 pm #158873Chromawoods
ParticipantYou 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); }); });
December 20, 2013 at 1:38 pm #158874Zwiv
ParticipantAlright, 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
December 20, 2013 at 1:53 pm #158876Alen
ParticipantPut noConflict back in and try using jQuery instead of $. So:
$('')
becomesjQuery('')
December 20, 2013 at 2:42 pm #158878Chromawoods
ParticipantI 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));
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.