TOP

Martin Carr.com

J-Query Commands

JQuery CDN

<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'></script>

Selectors

$('a:eq(0)')	// select the first anchor tag 
$('tr:odd')	// select all odd table rows
$('element:first')	
$('element:last')
$('element:first-child')	// selects all firsts!		

$('element').filter('class')
$('element').not('class')

$('element').next()
$('element').nextAll()
$('element').nextUntil()
$('element').prev()	// also prevAll & prevUntil
$('element').parent()
$('element').parents('.nav')	// notice the 's'
$('element').parentsUntil('body')
$('element').siblings()	// elements on the same level
$('element:gt(0)')	// select all apart from first

Build Elements & Add

var newElement = $('<div></div>').text('New Text')

.append()
.appendTo()
.before()
.after()

.text()
.html()

Classes

$($(this).children()).toggleClass('showNav')	// jquery select children

Arrays & Each

var myArray = ['a', 'b', 'c', 'd', 'e']
            
$.each(myArray, function (i, value) {	// use 'VALUE' keyword to get content
       console.log(i + value)
            })

////////////// alternative each function ///////////////
 $('li').each(function (e, elem) {
        console.log(e)	// outputs 0, 1, 2, 3...
        console.log(this.className)	//outputs class name (think this is vanilla js)
           $(elem).addClass('redBorder')             
               })

Function Call with Switcheroo!

$('.btn').on('click', {
     test: 'passed through variable'
         }, spinMe);

     function spinMe(e) {
          console.log(e.data.test)
             e.target.className = e.target.className == "btn" ? "btn showList" : "btn";
            }

Callback Function

$('.d1').fadeOut(2000, myFunc)

     function myFunc() {}
       console.log('Callback Fuction!')
         }

Event Parameters

 $('a').on('click', {var1: 'Martin', var2:'Carr'}, function (e) {

                console.log(e.target.getAttribute('data-test'));
                console.log(e.data.var2);
                return false;
            })

            // e.which - button or key tahat was pressed
            // e.type - click, mouseover etc

            // e.target - DOM ellement
            // e.target.getAttribute('href') - Get HREF attribute
            // e.target.getAttribute('data-test') - Get data-? from DOM element
            // e.target.textContent - Text content of target
            // e.target.innerHTML - Inner HTML

            // e.data.status - Get extra data passed through function

            // e.pageX - Mouse X pos
            // e.pageY - Mouse Y pos
            // e.timeStamp - Time of event            

        })

Events

$("a")[0].click();	// simulate a click

$("a").on('mouseover mouseout', function(){	// toggle mouse over effect
           $(this).toggleClass('navActive')
           })

$($(this).children())	// select the clicked elements children

Redirects

$('.toutImageHome').on('click', function(){
var newUrl = $(this).attr('data-rel');
window.location.href = newUrl;
});  

CSS Values

$('.div, .div2').css('background-color', 'blue')
$('.div, .div2').css({'background-color':'red'})

Load Content

var urlLink; 
$('a').on('click', function(){
  urlLink = $(this).attr('data-link');	// grab url for jquery load command
    $('.main').load(urlLink).hide().fadeIn(300);	// load content

Create Elements - 'each' through them & 'appendTo' to page with 'addClass' Transition

var myArray = [];
            for (var i = 0; i < 20; i++) {
                var newElem = $('<img src="images/picture-1">');
                myArray.push(newElem)
            }
// below use '$.each' on the Array and 'myArray[i]' so you can attach the Class to the Array Item!!
            $.each(myArray, function (i) {
                myArray[i].appendTo('.d1').addClass('fadeElementOut')
                setTimeout(function () {
                    myArray[i].addClass('fadeElementIn')
                }, i * 120)
            })

Fade In on Scroll

$(window).scroll( function(){
        $('.fadeInScrollHide').each( function(i){
            var bottom_of_object = $(this).position().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();
            bottom_of_window = bottom_of_window + 100;  
               if( bottom_of_window > bottom_of_object ){
               $(this).addClass('fadeInScroll');
               }
}); 
});        
        

Dynamically Style Nav Links - Commands Page

var navPosition = 0;
navPosition = ($(this).parent().index()) // grab link position number with 'parent().index()' (ie 2)
$(".ulNav a").css({'text-decoration':'none', "color":"#B33621"}) //reset links
$(".ulNav a:eq("+navPosition+")").css({"text-decoration":"underline", "color":"#414141"}) // dynamic
           return false;
             })

Javascript Vanilla!

SID Page Accordian - Switcheroo Ternary


$('.btn').on('click', function () {                 
this.className = this.className == "btn" ? "btn showList" : "btn";             
})

!! SWITCHEROO on CLASS below with some Vanilla!!

var classname = document.getElementsByClassName("clickToShow");   //get class name

var myFunction = function() {

   // var attribute = this.getAttribute("data-myattribute");
   // console.log(this.firstChild)   //show selected element
   // console.log(this.nextElementSibling)   //show next element
   // v1.style.display = v1.style.display == "block" ? "none" : "block";   //alternative switcheroo
   // v1.className += " showList";   //append to class

      var v1 =  this.nextElementSibling;   //select next element
      v1.className = v1.className == "sub_menu" ? "sub_menu showList" : "sub_menu";   //switcheroo on class :)
};


//loop through class names and assign addEventListener
  for (var i = 0; i < classname.length; i++) {
  classname[i].addEventListener('click', myFunction, false);
}

Javascript ADD Class

var v2 = document.querySelectorAll(".flexRow > div");
for(var i = 0; i < v2.length; i++){
v2[i].classList.add('fadeInSet');
}

Javascript Fade In Up (setTimeou) ADD Class

var elemToFadeIn = document.querySelectorAll(".mainContent");
for(var i = 0; i < elemToFadeIn.length; i++){
elemToFadeIn[i].classList.add('hideFirst');	
elemToFadeIn[i].className += ' hideFirst';
}	
fadeInUp(elemToFadeIn)
function fadeInUp(elem) {
for (i = 0; i < elem.length; i++) {
(function(i) {
setTimeout(function(){
elem[i].className += ' fadeInUp';	
elem[i].classList.add('fadeInUp');	
}, 110 * i);
})(i);
}
}