Slab Slab - 1 month ago 9
Javascript Question

How to check, if jQuery is used in a given web application?

This may seem like a ridiculous question, but as a newbie to JS/JQuery I've been merrily creating a simple .js file for creating a two column menu, mostly grabbing advice and bits of code from here. I've just come across a solution to something I need, where I need to use different code depending on whether I'm using JS or Jquery - and I have no idea what I'm using! This is confused by the fact that I was already including the JQuery library for my use of bxSlider (see below), before I started all this.

Apologies if I'm totally misunderstanding something fundamental here..

This is the relevent area from my HTML head:

<!-- jQuery library (served from Google)-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.bxslider/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="<?php bloginfo('template_directory'); ?>/js/jquery.bxslider/jquery.bxslider.css" rel="stylesheet" />

<!--Other javascript-->
<script src="<?php bloginfo('template_directory'); ?>/js/menu-two-cols.js"></script>


And this is my "menu-two-cols.js" file so far:

function menuTwoCols() {

var browserH = $(window).height();

if (browserH > 630) {
//do nothing - menu can stay as a single column
}else{
//do everything below

//make width auto for measurement for this child
$('.menu-header li:nth-child(6) li').css({'width':'auto'});

var maxOdd = 0;
var maxEven = 0;
var listItemNum = $(".menu-header li:nth-child(6) li").length;

console.log("First level menu (6) ODD num widths");
$('.menu-header ul li:nth-child(6) ul li:nth-child(odd)').each(function() {
var $this = $(this);
var colWidth = $this.outerWidth();
if (colWidth > maxOdd) {
maxOdd = colWidth;
}
console.log(colWidth);
});
console.log("Max Odd = " + maxOdd);

console.log("First level menu (6) EVEN num widths");
$('.menu-header ul li:nth-child(6) ul li:nth-child(even)').each(function() {
var $this = $(this);
var colWidth = $this.outerWidth();
if (colWidth > maxEven) {
maxEven = colWidth;
}
console.log(colWidth);
});

console.log("Max Even = " + maxEven);

var maxBoth = maxOdd + maxEven;
var maxOddPc = ((maxOdd / maxBoth) * 100)+"%";
var maxEvenPc = ((maxEven / maxBoth) * 100)+"%";

console.log("Max BothPx = " + maxBoth + '\n' +
"Max Odd% = " + maxOddPc + '\n' +
"Max Even% = " + maxEvenPc + '\n' +
"List Item Num = " + listItemNum + '\n');

console.log("Text content");
console.log($('.menu-header ul li:nth-child(6) ul').text() + ' _ ');

//make changes to widths if no space for single column
$('.menu-header ul li:nth-child(6) > ul').css('width', maxBoth);
$('.menu-header li:nth-child(6) li:nth-child(odd)').css('width', maxOddPc);
$('.menu-header li:nth-child(6) li:nth-child(even)').css('width', maxEvenPc);
$('.menu-header ul li:nth-child(6) ul li:nth-child(2)').css({'border-top':'5px solid #fff'}); //top white line

}//end of if statement

}

Answer

jQuery is a one of the most useful and commonly used library, available in javascript. Javascript is a language, which is commonly used in the front-end development. But, there are lot of inconsistencies amongst browser, regarding API they expose for doing different tasks. Thus, at that time, jQuery comes into picture, which abstracts cross-browser API differences and offers a generic interface to use. Thus, Your code is no more concerned about different browser-dependent API issues. Hope it helps you. For more information, refer to https://en.wikipedia.org/wiki/JQuery.

Generally, code which includes jQuery, makes heavy use of '$', which is an alias for jQuery selector function.

Eg. in your code, there are several selectors such as

$('.menu-header li:nth-child(6) li')
$('.menu-header ul li:nth-child(6) ul li:nth-child(even)')

Apart from above indicators, you can also use the following trick to find, if jQuery library is the part of your run-time environment or not :-

Press F12. Go to console. Type jQuery and press enter. enter image description here

In case, your app is not using jQuery, then you'll get error.

Comments