4-jQuery events

4-jQuery events.markdown

4-jQuery events

Forked from glenda drew's Pen target practice complete.

A Pen by Spencer Mathews on CodePen.

License.

index.html

<section id="global">
<nav>
<a href="" id="hide">hide</a><a href="" id="show">show</a>
</nav>
</section>
<section id="mouseEvents">
<nav>
<ul>
<li id="mousedown">mousedown</li>
<li id="mouseup">mouseup</li>
<li id="mouseover">mouseover</li>
<li id="mouseout">mouseout</li>
<li id="click">click</li>
<li id="dblclick">dblclick</li>
<!--using an id on the p instead of li so that the li does not change margin when the text changes margin-->
<li><p id="hover">hover</p></li>
</ul>

</nav>
</section>

script.js

$(document).ready(function() {
  //console.log("ready");

  //create a var to hold font size called mySize and assign it 20

  //change a css property
  $('body').css('background-color', '#65B6D6');

  //assign mousedown event listener with anonymous function
  $('#mousedown').mousedown(function() {
    //change text size by taking the current size and adding 2

  });

  /*
  //this example assigns a mouseup event listeners with an anonymous function
  $('#mouseup').mouseup(function(){
  	//change the color of the type
  	$('#mouseup').css('color', 'orange');
  });
  */

  //assign mouseup event listener that calls a named (or custom) function instead

  $('#mouseover').mouseover(function() {
    //change the #mouseover background color to black
  });

  $('#mouseout').mouseout(function() {
    //change #mouseout background color to orange
  });

  $('#click').click(function() {
    //change "click" text to "stop it"
  });

  $('#dblclick').dblclick(function() {
    //change "dbl click" text to "that tickles" and add html <strong> around "tickles"...hint...use .html instead of .text
  });

  //hover takes two function and works like mouseover plus mouseout
  $('#hover').hover(function() {
    //jump text to right by changing margin-left
  }, function() {
    //jump text to left
  });

  //hide mouseEvents
  $('#hide').click(function() {
    //hide mouseEvents section

    //prevent page from reloading
    return false;
  });

  //show mouseEvents
  $('#show').click(function() {
    //show mouseEvents section

    //prevent page from reloading
    return false;
  });

  //organize your code so functions are all defined together at end of js
  //define function colorOrange
  function colorOrange() {
    //add statements here
  }

  //close jQuery ready function	
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@charset "UTF-8";
/* CSS Document */
* {
	margin:0px;
	padding:0px;
}
body {
	background-color:white;
	font-family: 'Droid', arial, serif;
	font-size:20px;	
}
section#mouseEvents{
	width:4in;
	margin:0 auto;
}
a {
	display:block;
	width:72px;
	height:30px;
	text-align:center;
	padding-top:5px;
	background: linear-gradient(120deg, #F30, #B91C99);
	color:black;
	margin:12px;
	border-radius:3px;
	text-decoration:none;
}
ul {
	box-shadow:7px 7px 7px #444;
	border-radius:20px;
	margin-top:24px;
}
li {
	list-style-type:none;
	height:.35in;
	background-color:#333;
	border-bottom:#CCC 1px solid;
	font-size:16px;
	color:#999;
	padding:18px;
}
li:first-child {
	border-top-left-radius:20px;
	border-top-right-radius:20px;
}
li:last-child {
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
	border-bottom:none;
}
strong {
	color:orange;
}
#global {
	text-align:center;
	position:absolute;
	right:-3px;
	top:250px;
	background-color:#333;
	padding:10px;
	border-top-left-radius: 7px;
	border-bottom-left-radius: 7px;
}
#hoverAnimate{
	position:relative;
}
.large {
	color:magenta;
	font-weight:bold;
	padding:25px 15px;
}