Topic on Project:Support desk

Hi I keep getting this error when using

error is '$' is undefined when using this

$(document).click(function(e) {

   if (!$(e.target).closest('#'+openDiv).length) {
       toggleDiv(openDiv);
   }

});

I get it in f12 internet explorer developer thing. please help.

I aslo get this error with this code

function toggleDiv(divID) {

   $("#" + divID).fadeToggle(150, function() {
       openDiv = $(this).is(':visible') ? divID : null;
   });

}

What exactly makes you believe that what all the Google hits tell you is wrong?

Google wont tell me but that is the error I am getting in ie in developer I tried searching goolg eso I just added $ to var $ but then another error comes and so I search that on google and there is nothing about the new error I am getting.

I now get this error

Line: 41 Error: Object expected

the link to project is https://github.com/paladox2015/Metrolook

What it means by on line 41 is this code

$(document).click(function(e) {
    if (!$(e.target).closest('#'+openDiv).length) {
        toggleDiv(openDiv);
    }
});

> Google wont tell me

Oh come on! Know what I believe? You are just lazy! Google does tell, believe me.

hi I tried searching goole but not everyone has the same type js code. I tried typing in the first line that the error code says like I copied this $(document).click(function(e) { but still nothing comes up.

Please google for the problem! It's easier as you think ;)

https://www.google.de/webhp?q=$(document)%20object%20expected

And please, please PLEASE! don't add JavaScript code directly in your skin. We have a great ResourceLoader, so i suggest, that you use it (btw: with RL you would haven't this problem). See here for more information.

Hi how would I use resource loader because I tried to do it by following how vector does it but it just doesent work for me.

And how would I start a js file with

var openDiv, $;
function toggleDiv(divID) {
    $("#" + divID).fadeToggle(150, function() {
        openDiv = $(this).is(':visible') ? divID : null;
    });
}
$(document).click(function(e) {
    if (!$(e.target).closest('#'+openDiv).length) {
        toggleDiv(openDiv);
    }
});
$(function () {
  $('.usermenu > div').toggleClass('no-js js');
  $('.usermenu .js div').hide();
  $('.usermenu .js').click(function(e) {
    $('.usermenu .js div').fadeToggle(150);
    $('.usermenu').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.usermenu .js div').is(':visible')) {
      $('.usermenu .js div', this).fadeOut(150);
      $('.usermenu').removeClass('active');
    }
  });
});

$(function () {
  $('.actionmenu > div').toggleClass('no-js js');
  $('.actionmenu .js div').hide();
  $('.actionmenu .js').click(function(e) {
    $('.actionmenu .js div').fadeToggle(150);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.actionmenu .js div').is(':visible')) {
      $('.actionmenu .js div', this).fadeOut(150);
      $('.clicker').removeClass('active');
    }
  });
});

in it

I suggest, that you read the page i linked for you :) There is all explained (registering module, load module, use module).

Hi I tried that but it still doesent work. I created a separate js file. and registered the module in my php file but it still fails it seems it only is working for me if I keep it in the template and not seprate file.

Without the code you tried... ;)

Hi I put

var openDiv, $;
function toggleDiv(divID) {
    $("#" + divID).fadeToggle(150, function() {
        openDiv = $(this).is(':visible') ? divID : null;
    });
}
$(document).click(function(e) {
    if (!$(e.target).closest('#'+openDiv).length) {
        toggleDiv(openDiv);
    }
});
$(function () {
  $('.usermenu > div').toggleClass('no-js js');
  $('.usermenu .js div').hide();
  $('.usermenu .js').click(function(e) {
    $('.usermenu .js div').fadeToggle(150);
    $('.usermenu').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.usermenu .js div').is(':visible')) {
      $('.usermenu .js div', this).fadeOut(150);
      $('.usermenu').removeClass('active');
    }
  });
});

$(function () {
  $('.actionmenu > div').toggleClass('no-js js');
  $('.actionmenu .js div').hide();
  $('.actionmenu .js').click(function(e) {
    $('.actionmenu .js div').fadeToggle(150);
    $('.clicker').toggleClass('active');
    e.stopPropagation();
  });
  $(document).click(function() {
    if ($('.actionmenu .js div').is(':visible')) {
      $('.actionmenu .js div', this).fadeOut(150);
      $('.clicker').removeClass('active');
    }
  });
});

In a separate js file and I called it metrolook.js

I then in metrolook.php added the followering

normal without adding metrolook.js

$GLOBALS['wgResourceModules']['skins.metrolook.js'] = array(
	'scripts' => array(
		'collapsibleTabs.js',
		'vector.js',
	),
	'position' => 'top',
	'dependencies' => array(
		'jquery.throttle-debounce',
		'jquery.tabIndex',
	),
	'remoteSkinPath' => 'Metrolook',
	'localBasePath' => __DIR__,
);

with metrolook.js added

$GLOBALS['wgResourceModules']['skins.metrolook.js'] = array(
	'scripts' => array(
		'collapsibleTabs.js',
		'vector.js',
                'metrolook.js',
	),
	'position' => 'top',
	'dependencies' => array(
		'jquery.throttle-debounce',
		'jquery.tabIndex',
	),
	'remoteSkinPath' => 'Metrolook',
	'localBasePath' => __DIR__,
);

and it just doesent work.

Have you ever looked at your browsers console? Are here any errors?

Nevertheless: Look at your JS code, and then compare it with the example of the RL page i linked above (or using the collapsibleTabs.js file of Vector).

Hi I get this error 'toggleDiv' is undefined.