jenter

(function ($) {

  // insert Drupal.behaviors here

})(jQuery);

jenter

var testVar = $("body.section div.something");
if (testVar.length) { // checks to if exists 

  // add code in here
  console.log(testVar);

}

jenter

// currently written as 
.region-right-sidebar .block {
  background: {
  image: url('../../rotary_org/images/div.png');
  position: left top;
  repeat: no-repeat;  
  }
}

// shorthand 

jenter

.common-css {

  // these are needed regardless of browser size  
  background: blue;
  border: 1px solid black;
  width: 100%;

  // adjustments based on media query
  @media #{$large} {
    width: 50%;

jenter

(function ($, Drupal, window, document, undefined) {

  /**
   * Functionality for Nav bar
   */
  Drupal.behaviors.NavigationBar = {
    attach: function (context, settings) {
      if (context === document) { // only fires on document load 

        // JS code goes in here 

jenter

var timerEl;
$(window).bind("resize", function () {
  if (timerEl) {
    clearTimeout(timerEl);
  }
  timerEl = setTimeout(function () {

    // put code here ////////
    console.log('the page has been resized');

jenter

function example_preprocess_panels_pane(&$vars) {
  
  // add class per pane type 
  switch ($vars['pane']->subtype) {
    case 'something-panel_pane_plan':
      $vars['classes_array'][] = 'gw-grid-1';
      break;
    case 'another-panel_pane_plan':
      $vars['classes_array'][] = 'gw-grid-2';
      break;

jenter

// normal selector
$('.testelement .something').click(function(e) {
  console.log('this is clicked');
});

// could be improved by storing as a variable
var something = $('.testelement .something');
something.click(function(e) {
  console.log('this is clicked');
});

jenter

// previous used... 
font-family: "Nanum Gothic", Gulim, Dotum, Arial Unicode MS, serif;
 
// now used as a variable font stack  
$nanum-font: "Nanum Gothic", Gulim, Dotum, Arial Unicode MS, serif;
.something { font-family: $nanum-font; }

jenter

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})