Jquery tutorial

About the JavaScript/jQuery

JavaScript is a programming language used to make web pages interactive. It runs on your visitor's computer and doesn't require constant downloads from your website. jQuery is a JavaScript Library, it takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.

Tutorial 1

Elastic Stack: Elastic Dragging Interaction Plugin

ElastiStack is a script that let's you navigate through a stack of items by dragging away the first one. It comes with an elastic touch meaning that when dragging the top-most item, the other ones will follow as if they were connected elastically. When reaching a certain distance, the dragged item will release itself and the next item will pop out.

demo

  • 01
    Mr. Bear
  • 02
    Ms. Cat
  • 03
    Mr. Deer
  • 04
    Mr. Dog
  • 05
    Ms. Fox
  • 06
    Mr. Owl

the code

HTML

As you can see it’s a very simple piece of HTML. The structure is an unordered list with as many list items as images you want to show. Give the unordered list an "id" name so you can call the script on it later.


		<ul id="elasticstack" class="elasticstack">
			<li><img src="img/1.jpg" alt="01"/><h5>Mr. Bear</h5></li>
			<li><img src="img/2.jpg" alt="02"/><h5>Ms. Cat</h5></li>
			<li><img src="img/3.jpg" alt="03"/><h5>Mr. Deer</h5></li>
			<li><img src="img/4.jpg" alt="04"/><h5>Mr. Dog</h5></li>
			<li><img src="img/5.jpg" alt="05"/><h5>Ms. Fox</h5></li>
			<li><img src="img/6.jpg" alt="06"/><h5>Mr. Owl</h5></li>
		</ul>	
		

CSS

Give your "ul" a relative and the items absolute position. Create the size of the frames and the images. Give the unordered list items a class called "animate" and set up a transition. This is for disappearing cards. It's important to call the class "animate", so you don't need to modify the javascrtipt. The "move-back" class makes the bottom cards smoother, when they jump back.


		.elasticstack {
			position: relative;
			margin: 40px auto;
			padding: 0;
			width: 340px;
			height: 380px;
			list-style: none;
		}
		.elasticstack li {
			position: absolute;
			z-index: 1;
			width: 340px;
			height: 380px;
			border-width: 60px 20px;
			border-style: solid;
			border-color: #fff;
			box-shadow: 0 10px 7px -7px rgba(0,0,0,0.12), 0 0 4px rgba(0,0,0,0.1);
			cursor: pointer;
		}
		.elasticstack li img {
			display: block;
			width: 300px;
			height: auto;
		}
		.elasticstack li h5 {
			margin: 0 5px;
			color: #143f51;
			height: 60px;
			text-align: right;
			font-size: 1.4em;
			font-family: 'Montserrat', sans-serif;
			line-height: 60px;
		}
		.elasticstack li.animate {
			transition: all 0.3s ease-out;
		}
		.elasticstack li.move-back {
			/* http://matthewlein.com/ceaser/ */
			transition-timing-function: cubic-bezier(0.175, 0.885, 0.470, 1.515);
		}
		

JavaScript

Download the source from here: http://tympanus.net/codrops/2013/11/12/elastic-stack-elastic-dragging-interaction/ and under "js" folder copy modernizr.custom.js, elastiStack.js and draggabilly.pkgd.min.js to your documents and link them before the closing body tag in the same order. You just need to put this one line of javascript to your HTML (between script tags) or in your separate javascript document. And done!


		new ElastiStack( document.getElementById('elasticstack') );
		

Tutorial 2

Accordion Panel

They’re most commonly used in F.A.Q.’s where you have questions and answers. Which, if just displayed straight to the page could potentially become incredibly long, stopping users from actually wanting to read or finding the answer they’re looking for.

demo

Mr. Bear

Mr. Bear

Skateboard etsy craft beer cornhole ugh tote bag pabst actually, kickstarter hashtag letterpress try-hard messenger bag offal. Tattooed humblebrag intelligentsia, fixie man bun authentic next level raw denim forage fanny pack migas truffaut.

Ms. Cat

Ms. Cat

Polaroid gluten-free cold-pressed mumblecore plaid. Letterpress hoodie thundercats try-hard selvage forage. Flannel chartreuse austin, four dollar toast vegan mixtape mustache man bun ethical meh hella. Celiac synth pug, slow-carb kombucha ethical sustainable health goth gochujang actually bespoke. Ramps tumblr vice slow-carb, tilde next level art party direct trade freegan hashtag.

Mr. Deer

Mr. Deer

Skateboard etsy craft beer cornhole ugh tote bag pabst actually, kickstarter hashtag letterpress try-hard messenger bag offal. Tattooed humblebrag intelligentsia, fixie man bun authentic next level raw denim forage fanny pack migas truffaut.

Mr. Dog

Mr. Dog

Skateboard etsy craft beer cornhole ugh tote bag pabst actually, kickstarter hashtag letterpress try-hard messenger bag offal. Tattooed humblebrag intelligentsia, fixie man bun authentic next level raw denim forage fanny pack migas truffaut.

Ms. Fox

Ms Fox

Polaroid gluten-free cold-pressed mumblecore plaid. Letterpress hoodie thundercats try-hard selvage forage. Flannel chartreuse austin, four dollar toast vegan mixtape mustache man bun ethical meh hella. Celiac synth pug, slow-carb kombucha ethical sustainable health goth gochujang actually bespoke. Ramps tumblr vice slow-carb, tilde next level art party direct trade freegan hashtag.

Mr. Owl

Mr Owl

Skateboard etsy craft beer cornhole ugh tote bag pabst actually, kickstarter hashtag letterpress try-hard messenger bag offal. Tattooed humblebrag intelligentsia, fixie man bun authentic next level raw denim forage fanny pack migas truffaut.

the Code

HTML

The HTML structure that we are working with is the following: In a div with "class" and "id" name create as many titles (in my case: h3) and paragraphs wrapped in a "div" as you need. Like this:


	<div class="panels" id="panels">
		<h3>Mr. Bear</h3>
		<div>
		    <img src="img/1.png" width="auto" height="150" alt="Mr. Bear" />
		    <p>Skateboard etsy craft beer cornhole ugh tote bag pabst actually, 
		        kickstarter hashtag letterpress try-hard messenger bag offal. </p>
		</div> 
		
		<h3>Ms. Cat</h3>
		<div>
			<img src="img/2.png" width="auto" height="150" alt="Ms. Cat" />
			<p>Skateboard etsy craft beer cornhole ugh tote bag pabst actually, 
		    	kickstarter hashtag letterpress try-hard messenger bag offal. </p>
		</div>
	</div>
			

CSS

After sizing and positioning the panel, the first thing to note is the overflow: hidden; on the wrapping ".panels". This is done to give the rounded corners effect on the section links. The rest is simple styling: colors, sizes, positions. Here you can see the demo's styles:


		.panels {
		  width: 70%;
		  margin: 4em auto;
		  overflow: hidden;
		  border-radius: 10px;
		}

		.panels h3 {
		  margin: 0;
		  padding: 5px 0 10px 30px;
		  background-color: #213e4a;
		  font-size: 30px;
		  border-bottom: 1px solid #fff;
		  color: #f4f1bb;
		  font-weight: 500;
		  cursor: pointer;
		}

		.panels div {
		  height:200px;
		  background-color: #F4F4EE;
		  border-bottom:1px solid #fff;
		  position: relative;
		}

		.panels img {
		  margin:20px 0 0 10px;
		  background-color: #F4F4EE;
		}

		.panels p {
		  position: absolute;
		  left: 170px;
		  top: 10px;
		  margin: 0 10px 0 0;
		  padding: 0;
		  line-height: 1.5;
		}
		

JavaScript

We start with hiding the panels, so users without JavaScript can see all the panels. We call the function when we click on the title ("panlesReveal") and in the div wrapped image and paragraph (called "thisPane") will slide down or close back up.

			
	$('.panels > div').hide();

	var panelsReveal = $('.panels h3');

	panelsReveal.click(function() {
	  var thisPane = $(this).next();
	  if(thisPane.is(':visible')){
		  thisPane.slideToggle();	
	  }else{
		  $('.panels > div:visible').slideToggle();	
		  $(this).next().slideToggle();
	  };
	});
			

Tutorial 3

Text Rotator

A light weight jQuery plugin that will allow you to add a super simple rotating text to your website with little to no markup Created by Pete R., Founder of BucketListly

demo

Mr. Bear is lovely., nice., happy., kind.

the code

HTML

Put every rotating word inside a span tag and called the class "rotate". Separate the words with a comma and the script will automatically cycle through each word in order.


	<h1> Mr. Bear is <span class="rotate">lovely, nice, happy, kind</span> </h1>
			

CSS

Download the sources from this site:https://github.com/peachananr/simple-text-rotator and include the simpletextrotator.css to your documents and link it in the head section. With this CSS document your text will already rotate, however you might need extra styling like this:


	.rotator {
	font-size: 5vw;
	color: #ed6a5a;;
	text-align: left;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: 3px 3px 5px black;
	}
			

JavaScript

Simply include the latest jQuery library together with jquery.simple-text-rotator.js into your documents. And all you need is to link them in your html document and a function call. You can pick the way it animates when rotating through words. The default is dissolves. But there are fade, flip, flipUp, flipCube, flipCubeUp and spin options as well. I am using flipUp in the demo.


	$(".rotate").textrotator({
 	 	animation: "dissolve", 
 	 	separator: ",", 
  		speed: 2000
	});