lmccart/07_jQuery.js

## 07_jQuery.js
///////////////////////////////////////////////////////////////////////
// JAVASCRIPT
// * JavaScript provides the ability to add interactivity to a website, and help enrich the user experience.
// * HTML provides a page with structure and CSS provides a page with style, JavaScript provide a page with behavior.
// * Like CSS, JavaScript should be saved in an external file with the .js file extension, and then referenced within
//   an HTML document using the script element.
//   <script src="script.js"></script>
// * Demo file setup
// * Demo console.log()
<!DOCTYPE html>
<html>
  <head>
    <title>jQuery demo</title>
    <link rel="stylesheet" href="style.css"></link>
    <script src="main.js"></script>
  </head>
  <body>
  </body>
</html>

///////////////////////////////////////////////////////////////////////
// JQUERY
// * jQuery is an open source JavaScript library written by John Resig that simplifies the interaction between
//   HTML, CSS, and JavaScript.
// * Demo add jQuery script tag.
// * jQuery file goes first so custom JS code that comes after can use functionality added by jQuery library.
// * Separate files, don’t put custom JS into jQuery file.
// * $(); - The $ object is specifically made for selecting an element and then returning that element node to
//   perform an action on it.
// * Before trigging any jQuery to traverse and manipulate a page it is best to wait until the DOM is finished loading.
// * Demo document.ready with console.log
$(document).ready(function() {
  // put javascript code here
  console.log("page has loaded!");
});

///////////////////////////////////////////////////////////////////////
// SELECTORS
// * One of the core concepts of jQuery is to select elements and perform an action. It uses a syntax that corresponds
//   to the CSS selectors we already learned.
// * Demo selecting tag, class, ID with console.log.
<p>This is my first paragraph.</p>
<p class="banana">This is my second paragraph.</p>
<p class="banana" id="third">This is my third paragraph.</p>


$(document).ready(function() {
  // var elements = $("p");
  // var elements = $(".banana");
  // var elements = $("#third");
  console.log(elements);
});

///////////////////////////////////////////////////////////////////////
// .html()
$(document).ready(function() {

  // get the html content
  var contents = $("#third").html();
  console.log(contents);

  // or set the html content
  $('#third').html("This is the <b>updated</b> text!!");
});


///////////////////////////////////////////////////////////////////////
// .css()
$(document).ready(function() {

  // get a css property
  var size = $("#third").css("font-size");
  console.log(size);

  var color = $("#third").css("color");
  console.log(color);


  // or set a css properties
  $("#third").css("color", "blue");
  $("p").css("text-decoration", "underline");

});

///////////////////////////////////////////////////////////////////////
// .attr()
$(document).ready(function() {

  // get an attribute
  var src = $("#myPic").attr("src");
  console.log(src);

  // or set a css properties
  $("#myPic").attr("src", "http://4.bp.blogspot.com/-L7f1jZFLmSw/UjlcQsPcxmI/AAAAAAAAHkY/xTmvuOl7VjM/s1600/3.jpg")

});


///////////////////////////////////////////////////////////////////////
// .click()
$(document).ready(function() {

  $("p").click(function() {
    $("p").css("color", "green");
    // $(this).css("color", "green");
  });

});

// button
$(document).ready(function() {

  $("#myButton").click(function() {
    $("p").css("color", "green");
    $("img").attr("src", "http://vacationpassage.com/wp-content/gallery/clementon-park/WhitewaterFusion.jpg");
  });

});

///////////////////////////////////////////////////////////////////////
// .hover()
$(document).ready(function() {

  $("p").hover(function() {
    $("p").css("color", "green");
    // $(this).css("color", "green");
  });

});


///////////////////////////////////////////////////////////////////////
// .hide()
$(document).ready(function() {

  $("p").click(function() {
    $(this).hide();
    // $(this).fadeOut();
  });

});


$(document).ready(function() {

  $("#myButton").click(function() {
    $("p").hide();
    // $("p").fadeOut();
  });

});

///////////////////////////////////////////////////////////////////////
// .show()
<style>
#p2, #p3, #p4 {
  display: none;
}

p {
  cursor: pointer;
}
</style>

$(document).ready(function() {

  $("#p1").click(function() {
    $("#p2").show();
  });

  $("#p2").click(function() {
    $("#p3").show();
  });

  $("#p3").click(function() {
    $("#p4").show();
  });

  $('#p4').click(function() {
    $('p').hide();
  })

});


///////////////////////////////////////////////////////////////////////
// .show/hide() divs

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery demo</title>
    <link rel="stylesheet" href="style.css"></link>
    <script src="jquery.js"></script>
    <script src="main.js"></script>
  </head>
  <body>
    <div id='nav'>
      <span class='link' id='showP1'>link to project 1</span>
      <span class='link' id='showP2'>link to project 2</span>
      <span class='link' id='showP3'>link to project 3</span>
    </div>

    <div class='project' id='p1'>
      <h1>project 1</h1>
    </div>

    <div class='project' id='p2'>
      <h1>project 2</h1>
    </div>

    <div class='project' id='p3'>
      <h1>project 3</h1>
    </div>

  </body>
</html>


$(document).ready(function() {
  $("#showP1").click(showP1);
  $("#showP2").click(showP2);
  $("#showP3").click(showP3);

  function showP1() {
    $('.project').hide();
    $('#p1').show();
  }

  function showP2() {
    $('.project').hide();
    $('#p2').show();
  }
  function showP3() {
    $('.project').hide();
    $('#p3').show();
  }
});


///////////////////////////////////////////////////////////////////////
// resize iframe

$(document).ready(function() {
  var w = $("iframe").width();
  var heightToWidthRatio = 9/16;
  $("iframe").height(w * heightToWidthRatio);
  console.log($("iframe").width())
});
	///////////////////////////////////////////////////////////////////////
	// JAVASCRIPT
	// * JavaScript provides the ability to add interactivity to a website, and help enrich the user experience.
	// * HTML provides a page with structure and CSS provides a page with style, JavaScript provide a page with behavior.
	// * Like CSS, JavaScript should be saved in an external file with the .js file extension, and then referenced within
	// an HTML document using the script element.
	// <script src="script.js"></script>
	// * Demo file setup
	// * Demo console.log()
	<!DOCTYPE html>
	<html>
	<head>
	<title>jQuery demo</title>
	<link rel="stylesheet" href="style.css"></link>
	<script src="main.js"></script>
	</head>
	<body>
	</body>
	</html>

	///////////////////////////////////////////////////////////////////////
	// JQUERY
	// * jQuery is an open source JavaScript library written by John Resig that simplifies the interaction between
	// HTML, CSS, and JavaScript.
	// * Demo add jQuery script tag.
	// * jQuery file goes first so custom JS code that comes after can use functionality added by jQuery library.
	// * Separate files, don’t put custom JS into jQuery file.
	// * $(); - The $ object is specifically made for selecting an element and then returning that element node to
	// perform an action on it.
	// * Before trigging any jQuery to traverse and manipulate a page it is best to wait until the DOM is finished loading.
	// * Demo document.ready with console.log
	$(document).ready(function() {
	// put javascript code here
	console.log("page has loaded!");
	});

	///////////////////////////////////////////////////////////////////////
	// SELECTORS
	// * One of the core concepts of jQuery is to select elements and perform an action. It uses a syntax that corresponds
	// to the CSS selectors we already learned.
	// * Demo selecting tag, class, ID with console.log.
	<p>This is my first paragraph.</p>
	<p class="banana">This is my second paragraph.</p>
	<p class="banana" id="third">This is my third paragraph.</p>


	$(document).ready(function() {
	// var elements = $("p");
	// var elements = $(".banana");
	// var elements = $("#third");
	console.log(elements);
	});

	///////////////////////////////////////////////////////////////////////
	// .html()
	$(document).ready(function() {

	// get the html content
	var contents = $("#third").html();
	console.log(contents);

	// or set the html content
	$('#third').html("This is the <b>updated</b> text!!");
	});


	///////////////////////////////////////////////////////////////////////
	// .css()
	$(document).ready(function() {

	// get a css property
	var size = $("#third").css("font-size");
	console.log(size);

	var color = $("#third").css("color");
	console.log(color);


	// or set a css properties
	$("#third").css("color", "blue");
	$("p").css("text-decoration", "underline");

	});

	///////////////////////////////////////////////////////////////////////
	// .attr()
	$(document).ready(function() {

	// get an attribute
	var src = $("#myPic").attr("src");
	console.log(src);

	// or set a css properties
	$("#myPic").attr("src", "http://4.bp.blogspot.com/-L7f1jZFLmSw/UjlcQsPcxmI/AAAAAAAAHkY/xTmvuOl7VjM/s1600/3.jpg")

	});


	///////////////////////////////////////////////////////////////////////
	// .click()
	$(document).ready(function() {

	$("p").click(function() {
	$("p").css("color", "green");
	// $(this).css("color", "green");
	});

	});

	// button
	$(document).ready(function() {

	$("#myButton").click(function() {
	$("p").css("color", "green");
	$("img").attr("src", "http://vacationpassage.com/wp-content/gallery/clementon-park/WhitewaterFusion.jpg");
	});

	});

	///////////////////////////////////////////////////////////////////////
	// .hover()
	$(document).ready(function() {

	$("p").hover(function() {
	$("p").css("color", "green");
	// $(this).css("color", "green");
	});

	});


	///////////////////////////////////////////////////////////////////////
	// .hide()
	$(document).ready(function() {

	$("p").click(function() {
	$(this).hide();
	// $(this).fadeOut();
	});

	});


	$(document).ready(function() {

	$("#myButton").click(function() {
	$("p").hide();
	// $("p").fadeOut();
	});

	});

	///////////////////////////////////////////////////////////////////////
	// .show()
	<style>
	#p2, #p3, #p4 {
	display: none;
	}

	p {
	cursor: pointer;
	}
	</style>

	$(document).ready(function() {

	$("#p1").click(function() {
	$("#p2").show();
	});

	$("#p2").click(function() {
	$("#p3").show();
	});

	$("#p3").click(function() {
	$("#p4").show();
	});

	$('#p4').click(function() {
	$('p').hide();
	})

	});



	///////////////////////////////////////////////////////////////////////
	// .show/hide() divs

	<!DOCTYPE html>
	<html>
	<head>
	<title>jQuery demo</title>
	<link rel="stylesheet" href="style.css"></link>
	<script src="jquery.js"></script>
	<script src="main.js"></script>
	</head>
	<body>
	<div id='nav'>
	<span class='link' id='showP1'>link to project 1</span>
	<span class='link' id='showP2'>link to project 2</span>
	<span class='link' id='showP3'>link to project 3</span>
	</div>

	<div class='project' id='p1'>
	<h1>project 1</h1>
	</div>

	<div class='project' id='p2'>
	<h1>project 2</h1>
	</div>

	<div class='project' id='p3'>
	<h1>project 3</h1>
	</div>

	</body>
	</html>


	$(document).ready(function() {
	$("#showP1").click(showP1);
	$("#showP2").click(showP2);
	$("#showP3").click(showP3);

	function showP1() {
	$('.project').hide();
	$('#p1').show();
	}

	function showP2() {
	$('.project').hide();
	$('#p2').show();
	}
	function showP3() {
	$('.project').hide();
	$('#p3').show();
	}
	});


	///////////////////////////////////////////////////////////////////////
	// resize iframe

	$(document).ready(function() {
	var w = $("iframe").width();
	var heightToWidthRatio = 9/16;
	$("iframe").height(w * heightToWidthRatio);
	console.log($("iframe").width())
	});