How to show a preview image of an input file upload

Today we’re going to show you how to show a preview image of a file that you upload using the HTML input type file.

Okay, let’s dig right into it, firstly, let’s image you have the following HTML markup:-


<input type="file" onchange="readURL(this);" />
<img id="blah" alt="Your Image Preview" />

We’re going to add a bit of CSS styling to hide the image initially and only display the image once the file has been uploaded.


img {
  max-width: 180px;
  display: none;
}

input[type=file] {
  padding: 10px;
  background: #2d2d2d;
  color: #FFF;
  display: block;
  margin-bottom: 20px;
}

Now, we just need the jQuery function to show the preview and add the uploaded file to replace the image, you can do this as follows:


function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah')
        .attr('src', e.target.result);
      $('#blah').show();
    };

    reader.readAsDataURL(input.files[0]);
  }
}

The end result will look something as follows:-

If you take a look at this blog post, you will see how you can take this one step further to make it even more visually appealing đŸ˜‰

This is a pretty cool feature to add to file uploads to make them a bit more visually impressive to the user.

You can check out and test the CodePen we created here.

As always, we hope you have found this useful… make sure to leave a comment and stay tuned for the next tutorial!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

How to get the selected file name from an input type file using jQuery

Today we will show you how to get the selected file name from an input type file using jQuery. On a recent job, we were using a form where a user could add up to 3 images to upload to a contact form on CF7. We styled this to look as follows:-

So how do we get the filename on a selection of a file? The answer is jQuery’s change() method.

You can use the jQuery’s change() method to get the file name selected by the HTML form control < input type="file" / >. Let’s check out an example to understand how it works:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Selected File Name</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        $('input[type="file"]').change(function(e){
            var fileName = e.target.files[0].name;
            alert('The file "' + fileName +  '" has been selected.');
        });
    });
</script>
</head>
<body>
    <form>
        <input type="file">
        <p><strong>Note:</strong> Choose any file on your computer and its name will be displayed in an alert dialog box.</p>
    </form>
</body>
</html>

In our case scenario, we wanted to display the filename inside the file box, in which case we added the following to the HTML:-


    <div class="icon-add-file"></div>

So all we did was replace the alert with the following JS code:-


$('.filename').html(fileName);

// If you are using multiple file uploads, you will have to do some traversing, in our case we had to get the parent(x3) selector and find the .filename class:
$(this).parent().parent().parent().find('.filename').html(fileName);

Replacing the default file inputs

Okay, so you might have looked at the first screenshot and wondered how we replaced the default styling of the file input boxes. Don’t worry, we have you covered here as well.


.file-wrapper {
    padding: 10px 20px;
    border: solid 2px #F8F8F8;
    background: #F8F8F8;
    color: #818586;
    max-width: 100%;
    outline: none;
    height: 150px;
    width: 100%;
    display: block;    
}

div.wpcf7 input[type="file"] {
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
}

.icon-add-file {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;    
    background-image: url(../img/icon-plus-symbol.png);
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;    
}

.file-wrapper .wpcf7-form-control-wrap {
    position: relative;
    width: 100%;
    display: block;
    top: 0;
    left: 0;
    height: 150px;
    margin-top: -23px;
}

So what we did here was that we hid the original styling of the file input using opacity 0, we then added a background image which covers the grey input box so anywhere can be clicked to bring up the file upload window. In our example, we were using CF7 so the code may need to be amended to your project.

Well, we sure hope this helps, if you have any questions let us know and we’ll get back to you!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

A Collection of SVG Hamburger Menu Icon Animations

If you are looking to create an animated SVG Hamburger Menu icon then you are in the right place.

Today we bring you six different animations which would look great on any production website. It’s all about the added animations to make a website more appealing and look top dollar!

Here is a JSFiddle for you to view the animation styles:-

https://jsfiddle.net/silvawebdesigns/eo637uv1/

Like what you see? Here is the code for it as well:-

HTML


<!-- NOTE: Uses AnimateAnythingJS library for animation styles: https://github.com/matthewmain/AnimateAnythingJS -->

<div id="container">
  
  <div id="b1" class="box">
    <svg id="i1" class="icon" viewBox="0 0 100 100">
      <path id="top-line-1"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-1" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-1" 	d="M30,63 L70,63 Z"></path>
    </svg>
  </div>
  
  <div id="b2" class="box">
    <svg id="i2" class="icon" viewBox="0 0 100 100">
      <path id="top-line-2"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-2" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-2" 	d="M30,63 L70,63 Z"></path>
    </svg>
  </div>
  
  <div id="b3" class="box">
    <svg id="i3" class="icon" viewBox="0 0 100 100">
      <path id="top-line-3"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-3" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-3" 	d="M30,63 L70,63 Z"></path>
    </svg>  
  </div>
  
  <div id="b4" class="box">
    <svg id="i4" class="icon" viewBox="0 0 100 100">
      <polyline id="top-line-4" points="30 37 50 37 70 37"></polyline>
      <path id="middle-line-4" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-4" 	d="M30,63 L70,63 Z"></path>
    </svg>  
  </div>
  
  <div id="b5" class="box">
    <svg id="i5" class="icon" viewBox="0 0 100 100">
      <path id="top-line-5"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-5" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-5" 	d="M30,63 L70,63 Z"></path>
    </svg>
  </div>
  
  <div id="b6" class="box">
    <svg id="i6" class="icon" viewBox="0 0 100 100">
      <path id="top-line-6"     d="M30,37 L70,37 Z"></path>
      <path id="middle-line-6" 	d="M30,50 L70,50 Z"></path>
      <path id="bottom-line-6" 	d="M30,63 L70,63 Z"></path>
    </svg>
  </div>
  
</div>

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/animateAnything.js"></script>

CSS



#container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.box {
  width: 33.3333%;
  height: 50%;
  float: left;
}

.icon {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
	width: 100%; 
  height: 100%;
	fill: none;
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
  cursor: pointer;
}


/********
Peachy
********/

#b1 { background: #fc5c65; }
#b2 { background: #fd9644; }
#b3 { background: #fed330; }
#b4 { background: #eb3b5a; }
#b5 { background: #fa8231; }
#b6 { background: #f7b731; }
.icon { stroke: #FFFFFF; opacity: .95; }

JS


/////////////////////////////////////////////////////
/////////////////////  ICON 1  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_1 = document.getElementById("b1");
var topLine_1 = document.getElementById("top-line-1");
var middleLine_1 = document.getElementById("middle-line-1");
var bottomLine_1 = document.getElementById("bottom-line-1");
var state_1 = "menu";  // can be "menu" or "arrow"
var topLineY_1;
var middleLineY_1;
var bottomLineY_1;
var topLeftY_1;
var topRightY_1;
var bottomLeftY_1;
var bottomRightY_1;
var topLeftX_1;
var topRightX_1;
var bottomLeftX_1;
var bottomRightX_1;

///Animation Variables
var segmentDuration_1 = 15;
var menuDisappearDurationInFrames_1 = segmentDuration_1;
var arrowAppearDurationInFrames_1 = segmentDuration_1;
var arrowDisappearDurationInFrames_1 = segmentDuration_1;
var menuAppearDurationInFrames_1 = segmentDuration_1;
var menuDisappearComplete_1 = false;
var arrowAppearComplete_1 = false;
var arrowDisappearComplete_1 = false;
var menuAppearComplete_1 = false;
var currentFrame_1 = 1;

///Menu Disappear 
function menuDisappearAnimation_1() {
	currentFrame_1++;
	if ( currentFrame_1 <= menuDisappearDurationInFrames_1 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLineY_1 = AJS.easeInBack( 37, 50, menuDisappearDurationInFrames_1, currentFrame_1 );
			topLine_1.setAttribute( "d", "M30,"+topLineY_1+" L70,"+topLineY_1 );
			//bottom line
			bottomLineY_1 = AJS.easeInBack( 63, 50, menuDisappearDurationInFrames_1, currentFrame_1 );
			bottomLine_1.setAttribute( "d", "M30,"+bottomLineY_1+" L70,"+bottomLineY_1 );
			//recursion
			menuDisappearAnimation_1();
		});
	} else {
		middleLine_1.style.opacity = "0";
		currentFrame_1 = 1;
		menuDisappearComplete_1 = true;
		openMenuAnimation_1();
	}
}

///Cross Appear
function arrowAppearAnimation_1() {
	currentFrame_1++;
	if ( currentFrame_1 <= arrowAppearDurationInFrames_1 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLeftX_1 = AJS.easeOutBack( 30, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
			topLeftY_1 = AJS.easeOutBack( 50, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
			bottomRightX_1 = AJS.easeOutBack( 70, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
			bottomRightY_1 = AJS.easeOutBack( 50, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
			topLine_1.setAttribute( "d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1 );
			//bottom line
			bottomLeftX_1 = AJS.easeOutBack( 30, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
			bottomLeftY_1 = AJS.easeOutBack( 50, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
			topRightX_1 = AJS.easeOutBack( 70, 65, arrowAppearDurationInFrames_1, currentFrame_1 );
			topRightY_1 = AJS.easeOutBack( 50, 35, arrowAppearDurationInFrames_1, currentFrame_1 );
			bottomLine_1.setAttribute( "d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1 );
			//recursion
			arrowAppearAnimation_1();
		});
	} else {
		currentFrame_1 = 1;
		arrowAppearComplete_1 = true;
		openMenuAnimation_1();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_1() {
	if ( !menuDisappearComplete_1 ) { 
		menuDisappearAnimation_1();
	} else if ( !arrowAppearComplete_1) {
		arrowAppearAnimation_1();
	}
}

///Cross Disappear
function arrowDisappearAnimation_1() {
	currentFrame_1++;
	if ( currentFrame_1 <= arrowDisappearDurationInFrames_1 ) {
		window.requestAnimationFrame( ()=> {
			//top line
			topLeftX_1 = AJS.easeInBack( 35, 30, arrowDisappearDurationInFrames_1, currentFrame_1 );
			topLeftY_1 = AJS.easeInBack( 35, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
			bottomRightX_1 = AJS.easeInBack( 65, 70, arrowDisappearDurationInFrames_1, currentFrame_1 );
			bottomRightY_1 = AJS.easeInBack( 65, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
			topLine_1.setAttribute( "d", "M" + topLeftX_1 + "," + topLeftY_1 + " L" + bottomRightX_1 + "," + bottomRightY_1 );
			//bottom line
			bottomLeftX_1 = AJS.easeInBack( 35, 30, arrowDisappearDurationInFrames_1, currentFrame_1 );
			bottomLeftY_1 = AJS.easeInBack( 65, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
			topRightX_1 = AJS.easeInBack( 65, 70, arrowDisappearDurationInFrames_1, currentFrame_1 );
			topRightY_1 = AJS.easeInBack( 35, 50, arrowDisappearDurationInFrames_1, currentFrame_1 );
			bottomLine_1.setAttribute( "d", "M" + bottomLeftX_1 + "," + bottomLeftY_1 + " L" + topRightX_1 + "," + topRightY_1 );
			//recursion
			arrowDisappearAnimation_1();
		});
	} else {
		middleLine_1.style.opacity = "1";
		currentFrame_1 = 1;
		arrowDisappearComplete_1 = true;
		closeMenuAnimation_1();
	}
}

///Menu Appear
function menuAppearAnimation_1() {
	currentFrame_1++;
	if ( currentFrame_1 <= menuAppearDurationInFrames_1 ) {
		window.requestAnimationFrame( ()=> {
			//top line
			topLineY_1 = AJS.easeOutBack( 50, 37, menuDisappearDurationInFrames_1, currentFrame_1 );
			topLine_1.setAttribute( "d", "M30,"+topLineY_1+" L70,"+topLineY_1 );
			//bottom line
			bottomLineY_1 = AJS.easeOutBack( 50, 63, menuDisappearDurationInFrames_1, currentFrame_1 );
			bottomLine_1.setAttribute( "d", "M30,"+bottomLineY_1+" L70,"+bottomLineY_1 );
			//recursion
			menuAppearAnimation_1();
		});
	} else {
		currentFrame_1 = 1;
		menuAppearComplete_1 = true;
		closeMenuAnimation_1();
	}
}

///Close Menu Animation
function closeMenuAnimation_1() {
	if ( !arrowDisappearComplete_1 ) {
		arrowDisappearAnimation_1();
	} else if ( !menuAppearComplete_1 ) {
		menuAppearAnimation_1();
	}
}

///Events
icon_1.addEventListener( "click", ()=> { 
  if ( state_1 === "menu" ) {
  	openMenuAnimation_1();
  	state_1 = "arrow";
  	arrowDisappearComplete_1 = false;
		menuAppearComplete_1 = false;
  } else if ( state_1 === "arrow" ) {
  	closeMenuAnimation_1();
  	state_1 = "menu";
  	menuDisappearComplete_1 = false;
		arrowAppearComplete_1 = false;
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 2  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_2 = document.getElementById("b2");
var topLine_2 = document.getElementById("top-line-2");
var middleLine_2 = document.getElementById("middle-line-2");
var bottomLine_2 = document.getElementById("bottom-line-2");
var state_2 = "menu";  // can be "menu" or "cross"
var topLineY_2;
var middleLineY_2;
var bottomLineY_2;
var topLeftY_2;
var topRightY_2;
var bottomLeftY_2;
var bottomRightY_2;
var topLeftX_2;
var topRightX_2;
var middleLeftX_2;
var middleRightX_2;
var bottomLeftX_2;
var bottomRightX_2;

///Animation Variables
var segmentDuration_2 = 25;
var menuDisappearDurationInFrames_2 = segmentDuration_2;
var crossAppearDurationInFrames_2 = Math.round( segmentDuration_2*0.35 );
var crossDisappearDurationInFrames_2 = Math.round( segmentDuration_2*0.6 );
var menuAppearDurationInFrames_2 = segmentDuration_2;
var menuDisappearComplete_2 = false;
var crossAppearComplete_2 = false;
var crossDisappearComplete_2 = true;
var menuAppearComplete_2 = true;
var currentFrame_2 = 0;
var lineDisappearDelay_2 = segmentDuration_2*0.2;
var lineAppearDelay_2 = lineDisappearDelay_2;
var lineDisappearDurationInFrames_2 = segmentDuration_2 - lineDisappearDelay_2*2;
var lineAppearDurationInFrames_2 = lineDisappearDurationInFrames_2;
var topLineOpacity_2 = 1;
var middleLineOpacity_2 = 1;
var bottomLineOpacity_2 = 1;

///Menu Disappear
function menuDisappearAnimation_2() {
	currentFrame_2++;
	if ( currentFrame_2 <= menuDisappearDurationInFrames_2 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
      if ( currentFrame_2 <= lineDisappearDurationInFrames_2 ) {
        topLeftX_2 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_2, currentFrame_2 );
        topRightX_2 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_2, currentFrame_2 );
        topLine_2.setAttribute( "d", "M"+topLeftX_2+",37 L"+topRightX_2+",37 Z" );
        topLineOpacity_2 = AJS.linear( 1, 0, lineDisappearDurationInFrames_2*0.85, currentFrame_2 );
        topLine_2.style.opacity = topLineOpacity_2;
      }
      //middle line
      if ( currentFrame_2 > lineDisappearDelay_2 && currentFrame_2 <= lineDisappearDurationInFrames_2 + lineDisappearDelay_2 ) {
        middleLeftX_2 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2 );
        middleRightX_2 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2 );
        middleLine_2.setAttribute( "d", "M"+middleLeftX_2+",50 L"+middleRightX_2+",50 Z" );
        middleLineOpacity_2 = AJS.linear( 1, 0, lineDisappearDurationInFrames_2*0.85, currentFrame_2 - lineDisappearDelay_2 );
        middleLine_2.style.opacity = middleLineOpacity_2;
      }
      //bottom line
      if ( currentFrame_2 > lineDisappearDelay_2*2 ) {
        bottomLeftX_2 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2*2 );
        bottomRightX_2 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_2, currentFrame_2 - lineDisappearDelay_2*2 );
        bottomLine_2.setAttribute( "d", "M"+bottomLeftX_2+",63 L"+bottomRightX_2+",63 Z" );
        bottomLineOpacity_2 = AJS.linear( 1, 0, lineDisappearDurationInFrames_2*0.85, currentFrame_2 - lineDisappearDelay_2*2 );
        bottomLine_2.style.opacity = bottomLineOpacity_2;
      }
			//recursion
			menuDisappearAnimation_2();
		});
	} else {
		currentFrame_2 = 0;
		menuDisappearComplete_2 = true;
		openMenuAnimation_2();
	}
}

///Cross Appear
function crossAppearAnimation_2() {
	currentFrame_2++;
	if ( currentFrame_2 <= crossAppearDurationInFrames_2 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLeftX_2 = AJS.easeInQuad( -30, 35, crossAppearDurationInFrames_2, currentFrame_2 );
			topLeftY_2 = AJS.easeInQuad( -30, 35, crossAppearDurationInFrames_2, currentFrame_2 );
			bottomRightX_2 = AJS.easeInQuad( 0, 65, crossAppearDurationInFrames_2, currentFrame_2 );
			bottomRightY_2 = AJS.easeInQuad( 0, 65, crossAppearDurationInFrames_2, currentFrame_2 );
			topLine_2.setAttribute( "d", "M" + topLeftX_2 + "," + topLeftY_2 + " L" + bottomRightX_2 + "," + bottomRightY_2 );
      topLineOpacity_2 = AJS.easeInExpo( 0, 1, crossAppearDurationInFrames_2, currentFrame_2 );
      topLine_2.style.opacity = topLineOpacity_2;
			//bottom line
			bottomLeftX_2 = AJS.easeInQuad( -30, 35, crossAppearDurationInFrames_2, currentFrame_2 );
			bottomLeftY_2 = AJS.easeInQuad( 130, 65, crossAppearDurationInFrames_2, currentFrame_2 );
			topRightX_2 = AJS.easeInQuad( 0, 65, crossAppearDurationInFrames_2, currentFrame_2 );
			topRightY_2 = AJS.easeInQuad( 100, 35, crossAppearDurationInFrames_2, currentFrame_2 );
			bottomLine_2.setAttribute( "d", "M" + bottomLeftX_2 + "," + bottomLeftY_2 + " L" + topRightX_2 + "," + topRightY_2 );
      bottomLineOpacity_2 = AJS.easeInExpo( 0, 1, crossAppearDurationInFrames_2, currentFrame_2 );
      bottomLine_2.style.opacity = bottomLineOpacity_2;      
			//recursion
			crossAppearAnimation_2();
		});
	} else {
		currentFrame_2 = 0;
		crossAppearComplete_2 = true;
		openMenuAnimation_2();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_2() {
	if ( !menuDisappearComplete_2 ) { 
		menuDisappearAnimation_2();
	} else if ( !crossAppearComplete_2) {
		crossAppearAnimation_2();
	}
}

///Cross Disappear
function crossDisappearAnimation_2() {
	currentFrame_2++;
	if ( currentFrame_2 <= crossDisappearDurationInFrames_2 ) {
		window.requestAnimationFrame( ()=> {
      //top line
			topLeftX_2 = AJS.easeInBack( 35, -30, crossDisappearDurationInFrames_2, currentFrame_2 );
			topLeftY_2 = AJS.easeInBack( 35, -30, crossDisappearDurationInFrames_2, currentFrame_2 );
			bottomRightX_2 = AJS.easeInBack( 65, 0, crossDisappearDurationInFrames_2, currentFrame_2 );
			bottomRightY_2 = AJS.easeInBack( 65, 0, crossDisappearDurationInFrames_2, currentFrame_2 );
			topLine_2.setAttribute( "d", "M" + topLeftX_2 + "," + topLeftY_2 + " L" + bottomRightX_2 + "," + bottomRightY_2 );
      topLineOpacity_2 = AJS.linear( 1, 0, crossDisappearDurationInFrames_2, currentFrame_2, crossDisappearDurationInFrames_2*0.75 );
      topLine_2.style.opacity = topLineOpacity_2;
			//bottom line
			bottomLeftX_2 = AJS.easeInBack( 35, -30, crossDisappearDurationInFrames_2, currentFrame_2 );
			bottomLeftY_2 = AJS.easeInBack( 65, 130, crossDisappearDurationInFrames_2, currentFrame_2 );
			topRightX_2 = AJS.easeInBack( 65, 0, crossDisappearDurationInFrames_2, currentFrame_2 );
			topRightY_2 = AJS.easeInBack( 35, 100, crossDisappearDurationInFrames_2, currentFrame_2 );
			bottomLine_2.setAttribute( "d", "M" + bottomLeftX_2 + "," + bottomLeftY_2 + " L" + topRightX_2 + "," + topRightY_2 );
      bottomLineOpacity_2 = AJS.linear( 1, 0, crossDisappearDurationInFrames_2, currentFrame_2, crossDisappearDurationInFrames_2*0.75 );
      bottomLine_2.style.opacity = bottomLineOpacity_2;
			//recursion
			crossDisappearAnimation_2();
		});
	} else {
		middleLine_2.style.opacity = "1";
		currentFrame_2 = 0;
		crossDisappearComplete_2 = true;
		closeMenuAnimation_2();
	}
}

///Menu Appear
function menuAppearAnimation_2() {
	currentFrame_2++;
	if ( currentFrame_2 <= menuAppearDurationInFrames_2 ) {
		window.requestAnimationFrame( ()=> {  
			//top line
      if ( currentFrame_2 <= lineAppearDurationInFrames_2 ) {
        topLeftX_2 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_2, currentFrame_2 );
        topRightX_2 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_2, currentFrame_2 );
        topLine_2.setAttribute( "d", "M"+topLeftX_2+",37 L"+topRightX_2+",37 Z" );
        topLineOpacity_2 = AJS.linear( -2, 1, lineAppearDurationInFrames_2, currentFrame_2 );
        topLine_2.style.opacity = topLineOpacity_2;
      }
			//middle line
			if ( currentFrame_2 > lineAppearDelay_2 && currentFrame_2 <= lineAppearDurationInFrames_2 + lineAppearDelay_2 ) {
        middleLeftX_2 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2 );
        middleRightX_2 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2 );
        middleLine_2.setAttribute( "d", "M"+middleLeftX_2+",50 L"+middleRightX_2+",50 Z" );
        middleLineOpacity_2 = AJS.easeOutBack( -2, 1, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2 );
        middleLine_2.style.opacity = middleLineOpacity_2;
			}
			//bottom line
			if ( currentFrame_2 > lineAppearDelay_2*2 ) {
        bottomLeftX_2 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2*2 );
        bottomRightX_2 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2*2 );
        bottomLine_2.setAttribute( "d", "M"+bottomLeftX_2+",63 L"+bottomRightX_2+",63 Z" );
        bottomLineOpacity_2 = AJS.easeOutBack( -2, 1, lineAppearDurationInFrames_2, currentFrame_2 - lineAppearDelay_2*2 );
        bottomLine_2.style.opacity = bottomLineOpacity_2;
			}
			//recursion
			menuAppearAnimation_2();
		});
	} else {
		currentFrame_2 = 0;
		menuAppearComplete_2 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_2() {
	if ( !crossDisappearComplete_2 ) {
		crossDisappearAnimation_2();
	} else if ( !menuAppearComplete_2 ) {
		menuAppearAnimation_2();
	}
}

///Events
icon_2.addEventListener( "click", ()=> { 
  if ( state_2 === "menu" ) {
  	openMenuAnimation_2();
  	state_2 = "cross";
  	crossDisappearComplete_2 = false;
		menuAppearComplete_2 = false;
  } else if ( state_2 === "cross" ) {
  	closeMenuAnimation_2();
  	state_2 = "menu";
  	menuDisappearComplete_2 = false;
		crossAppearComplete_2 = false;
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 3  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_3 = document.getElementById("b3");
var topLine_3 = document.getElementById("top-line-3");
var middleLine_3 = document.getElementById("middle-line-3");
var bottomLine_3 = document.getElementById("bottom-line-3");
var state_3 = "menu";  // can be "menu" or "cross"
var topLineY_3;
var middleLineY_3;
var bottomLineY_3;
var topLeftX_3;
var topRightX_3;
var middleLeftX_3;
var middleRightX_3;
var bottomLeftX_3;
var bottomRightX_3;
var topLeftY_3;
var topRightY_3;
var middleLeftY_3;
var middleRightY_3;
var bottomLeftY_3;
var bottomRightY_3;

///Animation Variables
var segmentDuration_3 = 20;
var menuDisappearDurationInFrames_3 = segmentDuration_3;
var crossAppearDurationInFrames_3 = segmentDuration_3*1.5;
var crossDisappearDurationInFrames_3 = segmentDuration_3*1.5;
var menuAppearDurationInFrames_3 = segmentDuration_3;
var menuDisappearComplete_3 = false;
var crossAppearComplete_3 = false;
var crossDisappearComplete_3 = true;
var menuAppearComplete_3 = true;
var currentFrame_3 = 0;
var cPt_3 = { x: 50, y: 50 };  // center point
var tlPt_3 = { x: 30, y: 37 };  // top right point
var trPt_3 = { x: 70, y: 37 };  // top left point
var mlPt_3 = { x: 30, y: 50 };  // middle right point
var mrPt_3 = { x: 70, y: 50 };  // middle left point
var blPt_3 = { x: 30, y: 63 };  // bottom right point
var brPt_3 = { x: 70, y: 63 };  // bottom left point
var topLineOpacity_3 = 1;
var middleLineOpacity_3 = 1;
var bottomLineOpacity_3 = 1;

///Position Rotation
function positionRotation( centerPoint, orbitPoint, angleInRads ) {
  var distance = Math.sqrt( Math.pow( orbitPoint.x-centerPoint.x, 2 ) + Math.pow( orbitPoint.y-centerPoint.y, 2 ) );
  orbitPoint.x = centerPoint.x + Math.cos( angleInRads ) * distance;
  orbitPoint.y = centerPoint.y + Math.sin( angleInRads ) * distance;
}

///Menu Disappear
function menuDisappearAnimation_3() {
	currentFrame_3++;
	if ( currentFrame_3 <= menuDisappearDurationInFrames_3 ) {
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.5;
			//top line
      var tlAng = AJS.easeInBack( 3.7179, 3.7179+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var trAng = AJS.easeInBack( 5.7068, 5.7068+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, tlPt_3, tlAng );
      positionRotation( cPt_3, trPt_3, trAng );
      topLine_3.setAttribute( "d", "M"+tlPt_3.x+","+tlPt_3.y+" L"+trPt_3.x+","+trPt_3.y+" Z" );
      //middle line
      var mlAng = AJS.easeInBack( Math.PI, Math.PI+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var mrAng = AJS.easeInBack( 0, rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, mlPt_3, mlAng );
      positionRotation( cPt_3, mrPt_3, mrAng );
      middleLine_3.setAttribute( "d", "M"+mlPt_3.x+","+mlPt_3.y+" L"+mrPt_3.x+","+mrPt_3.y+" Z" );
      //bottom line
      var blAng = AJS.easeInBack( 2.5652, 2.5652+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var brAng = AJS.easeInBack( 0.5763, 0.5763+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, blPt_3, blAng );
      positionRotation( cPt_3, brPt_3, brAng );
      bottomLine_3.setAttribute( "d", "M"+blPt_3.x+","+blPt_3.y+" L"+brPt_3.x+","+brPt_3.y+" Z" );
			//recursion
			menuDisappearAnimation_3();
		});
	} else {
		currentFrame_3 = 0;
		menuDisappearComplete_3 = true;
		openMenuAnimation_3();
	}
}

///Cross Appear
function crossAppearAnimation_3() {
	currentFrame_3++;
	if ( currentFrame_3 <= crossAppearDurationInFrames_3 ) {
    tlPt_3 = { x: 50, y: 28.7867 };
    trPt_3 = { x: 50, y: 71.2132 };
    mlPt_3 = { x: 28.7867, y: 50 };
    mrPt_3 = { x: 71.2132, y: 50 };
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.75;
			//top line
      var tlAng = AJS.easeOutBack( Math.PI, Math.PI+rotation, crossAppearDurationInFrames_3, currentFrame_3 );
      var trAng = AJS.easeOutBack( 0, rotation, crossAppearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, tlPt_3, tlAng );
      positionRotation( cPt_3, trPt_3, trAng );
      topLine_3.setAttribute( "d", "M"+tlPt_3.x+","+tlPt_3.y+" L"+trPt_3.x+","+trPt_3.y+" Z" );
			//center line
      var mlAng = AJS.easeOutBack( Math.PI*1.5, Math.PI*1.5+rotation, crossAppearDurationInFrames_3, currentFrame_3 );
      var mrAng = AJS.easeOutBack( Math.PI*0.5, Math.PI*0.5+rotation, crossAppearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, mlPt_3, mlAng );
      positionRotation( cPt_3, mrPt_3, mrAng );
      middleLine_3.setAttribute( "d", "M"+mlPt_3.x+","+mlPt_3.y+" L"+mrPt_3.x+","+mrPt_3.y+" Z" );
      //bottom line
      bottomLine_3.style.opacity = 0;
			//recursion
			crossAppearAnimation_3();
		});
	} else {
		currentFrame_3 = 0;
		crossAppearComplete_3 = true;
		openMenuAnimation_3();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_3() {
	if ( !menuDisappearComplete_3 ) { 
		menuDisappearAnimation_3();
	} else if ( !crossAppearComplete_3) {
		crossAppearAnimation_3();
	}
}

///Cross Disappear
function crossDisappearAnimation_3() {
	currentFrame_3++;
	if ( currentFrame_3 <= crossDisappearDurationInFrames_3 ) {
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.75;
			//top line
      var tlAng = AJS.easeInBack( Math.PI*1.75, Math.PI*1.75+rotation, crossDisappearDurationInFrames_3, currentFrame_3 );
      var trAng = AJS.easeInBack( Math.PI*0.75, Math.PI*0.75+rotation, crossDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, tlPt_3, tlAng );
      positionRotation( cPt_3, trPt_3, trAng );
      topLine_3.setAttribute( "d", "M"+tlPt_3.x+","+tlPt_3.y+" L"+trPt_3.x+","+trPt_3.y+" Z" );
			//center line
      var mlAng = AJS.easeInBack( Math.PI*2.25, Math.PI*2.25+rotation, crossDisappearDurationInFrames_3, currentFrame_3 );
      var mrAng = AJS.easeInBack( Math.PI*1.25, Math.PI*1.25+rotation, crossDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, mlPt_3, mlAng );
      positionRotation( cPt_3, mrPt_3, mrAng );
      middleLine_3.setAttribute( "d", "M"+mlPt_3.x+","+mlPt_3.y+" L"+mrPt_3.x+","+mrPt_3.y+" Z" );
      //bottom line
      bottomLine_3.style.opacity = 0;
			//recursion
			crossDisappearAnimation_3();
		});
	} else {
		middleLine_3.style.opacity = "1";
		currentFrame_3 = 0;
		crossDisappearComplete_3 = true;
		closeMenuAnimation_3();
	}
}

///Menu Appear
function menuAppearAnimation_3() {
	currentFrame_3++;
	if ( currentFrame_3 <= menuAppearDurationInFrames_3 ) {
    tlPt_3 = { x: 37, y: 70 };
    trPt_3 = { x: 37, y: 30 };
    mlPt_3 = { x: 50, y: 70 };
    mrPt_3 = { x: 50, y: 30 };
    bottomLine_3.style.opacity = 1;
		window.requestAnimationFrame( ()=> {  
      var rotation = Math.PI*0.5;
			//top line
			var tlAng = AJS.easeOutBack( 2.1471, 2.1471+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
			var trAng = AJS.easeOutBack( 4.1360, 4.1360+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
			positionRotation( cPt_3, tlPt_3, tlAng );
			positionRotation( cPt_3, trPt_3, trAng );
			topLine_3.setAttribute( "d", "M"+tlPt_3.x+","+tlPt_3.y+" L"+trPt_3.x+","+trPt_3.y+" Z" );
      //middle line
      var mlAng = AJS.easeOutBack( Math.PI*0.5, Math.PI*0.5+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var mrAng = AJS.easeOutBack( Math.PI*1.5, Math.PI*1.5+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, mlPt_3, mlAng );
      positionRotation( cPt_3, mrPt_3, mrAng );
      middleLine_3.setAttribute( "d", "M"+mlPt_3.x+","+mlPt_3.y+" L"+mrPt_3.x+","+mrPt_3.y+" Z" );
      //bottom line
      var blAng = AJS.easeOutBack( 0.9944, 0.9944+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      var brAng = AJS.easeOutBack( 5.2887, 5.2887+rotation, menuDisappearDurationInFrames_3, currentFrame_3 );
      positionRotation( cPt_3, blPt_3, blAng );
      positionRotation( cPt_3, brPt_3, brAng );
      bottomLine_3.setAttribute( "d", "M"+blPt_3.x+","+blPt_3.y+" L"+brPt_3.x+","+brPt_3.y+" Z" );
			//recursion
			menuAppearAnimation_3();
		});
	} else {
		currentFrame_3 = 0;
		menuAppearComplete_3 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_3() {
	if ( !crossDisappearComplete_3 ) {
		crossDisappearAnimation_3();
	} else if ( !menuAppearComplete_3 ) {
		menuAppearAnimation_3();
	}
}

///Events
icon_3.addEventListener( "click", ()=> { 
  if ( state_3 === "menu" ) {
  	openMenuAnimation_3();
  	state_3 = "cross";
  	crossDisappearComplete_3 = false;
		menuAppearComplete_3 = false;
  } else if ( state_3 === "cross" ) {
  	closeMenuAnimation_3();
  	state_3 = "menu";
  	menuDisappearComplete_3 = false;
		crossAppearComplete_3 = false;
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 4  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_4 = document.getElementById("b4");
var topLine_4 = document.getElementById("top-line-4");
var middleLine_4 = document.getElementById("middle-line-4");
var bottomLine_4 = document.getElementById("bottom-line-4");
var state_4 = "menu";  // can be "menu" or "arrow"
var topLineY_4;
var middleLineY_4;
var bottomLineY_4;
var arrowLegY_4;
var arrowPointY_4;
var hideawayLinesOpacity_4;

///Animation Variables
var segmentDuration_4 = 25;
var menuDisappearDurationInFrames_4 = segmentDuration_4;
var arrowAppearDurationInFrames_4 = segmentDuration_4;
var menuAppearDurationInFrames_4 = segmentDuration_4*1.5;
var fadeInDurationInFrames_4 = segmentDuration_4;
var menuDisappearComplete_4 = false;
var arrowAppearComplete_4 = false;
var menuAppearComplete_4 = true;
var currentFrame_4 = 1;

///Collapse
function menuDisappearAnimation_4() {
	currentFrame_4++;
	if ( currentFrame_4 <= menuDisappearDurationInFrames_4 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLineY_4 = AJS.easeInOutBack( 37, 63, menuDisappearDurationInFrames_4, currentFrame_4 );
			topLine_4.setAttribute( "points", "30 "+topLineY_4+" 50 "+topLineY_4+" 70 "+topLineY_4 );
			//middle line
			middleLineY_4 = AJS.easeInOutBack( 50, 63, menuDisappearDurationInFrames_4, currentFrame_4 );
			middleLine_4.setAttribute( "d", "M30,"+middleLineY_4+" L70,"+middleLineY_4 );
			if ( middleLineY_4 >= 63) middleLine_4.style.opacity = "0";
			//bottom line
			if ( middleLineY_4 >= 63) bottomLine_4.style.opacity = "0";
			//recursion
			menuDisappearAnimation_4();
		});
	} else {
		bottomLine_4.style.opacity = "0";
		currentFrame_4 = 1;
		menuDisappearComplete_4 = true;
		openMenuAnimation_4();
	}
}

///Arrow Appear
function arrowAppearAnimation_4() {
	currentFrame_4++;
	if ( currentFrame_4 <= arrowAppearDurationInFrames_4 ) {
		window.requestAnimationFrame( ()=> { 
			//arrow
			arrowLegY_4 = AJS.easeOutBack( 63, 60, arrowAppearDurationInFrames_4, currentFrame_4 );
			arrowPointY_4 = AJS.easeOutBack( 63, 40, arrowAppearDurationInFrames_4, currentFrame_4 );
			topLine_4.setAttribute("points", "30 "+arrowLegY_4+" 50 "+arrowPointY_4+" 70 "+arrowLegY_4);
			//recursion
			arrowAppearAnimation_4();
		});
	} else {
		currentFrame_4 = 1;
		arrowAppearComplete_4 = true;
		menuAppearComplete_4 = false;
		openMenuAnimation_4();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_4() {
	if ( !menuDisappearComplete_4 ) { 
		menuDisappearAnimation_4();
	} else if ( !arrowAppearComplete_4) {
		arrowAppearAnimation_4();
	}
}

///Menu Return
function menuAppearAnimation_4() {
	currentFrame_4++;
	if ( currentFrame_4 <= menuAppearDurationInFrames_4 ) {
		window.requestAnimationFrame( ()=> { 
			//arrow to top line
			arrowLegY_4 = AJS.easeOutBounce( 60, 37, menuAppearDurationInFrames_4, currentFrame_4 );
			arrowPointY_4 = AJS.easeOutBounce( 40, 37, menuAppearDurationInFrames_4, currentFrame_4 );
			topLine_4.setAttribute("points", "30 "+arrowLegY_4+" 50 "+arrowPointY_4+" 70 "+arrowLegY_4);
			//middle line
			middleLineY_4 = AJS.easeOutBounce( 68, 50, menuAppearDurationInFrames_4, currentFrame_4 );
			middleLine_4.setAttribute( "d", "M30,"+middleLineY_4+" L70,"+middleLineY_4 );
			//bottom line
			bottomLineY_4 = AJS.easeOutBounce( 68, 63, menuAppearDurationInFrames_4, currentFrame_4 );
			bottomLine_4.setAttribute( "d", "M30,"+bottomLineY_4+" L70,"+bottomLineY_4 );
			//middle and bottom lines opacity
			hideawayLinesOpacity_4 = AJS.linear( 0, 1, fadeInDurationInFrames_4, currentFrame_4 );
			middleLine_4.style.opacity = hideawayLinesOpacity_4;
			bottomLine_4.style.opacity = hideawayLinesOpacity_4;
			//recursion
			menuAppearAnimation_4();
		});
	} else {
		currentFrame_4 = 1;
		menuDisappearComplete_4 = false;
		arrowAppearComplete_4 = false;
		menuAppearComplete_4 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_4() {
	if ( !menuAppearComplete_4 ) {
		menuAppearAnimation_4();
	}
}

///Events
icon_4.addEventListener( "click", ()=> {
  if ( state_4 === "menu" ) {
  	openMenuAnimation_4();
  	state_4 = "arrow"
  } else if ( state_4 === "arrow" ) {
  	closeMenuAnimation_4();
  	state_4 = "menu"
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 5  //////////////////////
/////////////////////////////////////////////////////


//Initiation Variables
var icon_5 = document.getElementById("b5");
var topLine_5 = document.getElementById("top-line-5");
var middleLine_5 = document.getElementById("middle-line-5");
var bottomLine_5 = document.getElementById("bottom-line-5");
var state_5 = "menu";  // can be "menu" or "arrow"
var topLineY_5;
var middleLineY_5;
var bottomLineY_5;
var topLeftY_5;
var topRightY_5;
var bottomLeftY_5;
var bottomRightY_5;
var topLeftX_5;
var topRightX_5;
var middleLeftX_5;
var middleRightX_5;
var bottomLeftX_5;
var bottomRightX_5;

///Animation Variables
var segmentDuration_5 = 25;
var menuDisappearDurationInFrames_5 = segmentDuration_5;
var arrowAppearDurationInFrames_5 = Math.round( segmentDuration_5*0.35 );
var arrowDisappearDurationInFrames_5 = Math.round( segmentDuration_5*0.35 );
var menuAppearDurationInFrames_5 = segmentDuration_5;
var menuDisappearComplete_5 = false;
var arrowAppearComplete_5 = false;
var arrowDisappearComplete_5 = true;
var menuAppearComplete_5 = true;
var currentFrame_5 = 0;
var lineDisappearDelay_5 = segmentDuration_5*0.2;
var lineAppearDelay_5 = lineDisappearDelay_5;
var lineDisappearDurationInFrames_5 = segmentDuration_5 - lineDisappearDelay_5*2;
var lineAppearDurationInFrames_5 = lineDisappearDurationInFrames_5;
var topLineOpacity_5 = 1;
var middleLineOpacity_5 = 1;
var bottomLineOpacity_5 = 1;

///Menu Disappear
function menuDisappearAnimation_5() {
	currentFrame_5++;
	if ( currentFrame_5 <= menuDisappearDurationInFrames_5 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
      if ( currentFrame_5 <= lineDisappearDurationInFrames_5 ) {
        topLeftX_5 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_5, currentFrame_5 );
        topRightX_5 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_5, currentFrame_5 );
        topLine_5.setAttribute( "d", "M"+topLeftX_5+",37 L"+topRightX_5+",37 Z" );
        topLineOpacity_5 = AJS.linear( 1, 0, lineDisappearDurationInFrames_5*0.85, currentFrame_5 );
        topLine_5.style.opacity = topLineOpacity_5;
      }
      //middle line
      if ( currentFrame_5 > lineDisappearDelay_5 && currentFrame_5 <= lineDisappearDurationInFrames_5 + lineDisappearDelay_5 ) {
        middleLeftX_5 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_5, currentFrame_5 - lineDisappearDelay_5 );
        middleRightX_5 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_5, currentFrame_5 - lineDisappearDelay_5 );
        middleLine_5.setAttribute( "d", "M"+middleLeftX_5+",50 L"+middleRightX_5+",50 Z" );
        middleLineOpacity_5 = AJS.linear( 1, 0, lineDisappearDurationInFrames_5*0.85, currentFrame_5 - lineDisappearDelay_5 );
        middleLine_5.style.opacity = middleLineOpacity_5;
      }
      //bottom line
      if ( currentFrame_5 > lineDisappearDelay_5*2 ) {
        bottomLeftX_5 = AJS.easeInBack( 30, 130, lineDisappearDurationInFrames_5, currentFrame_5 - lineDisappearDelay_5*2 );
        bottomRightX_5 = AJS.easeInBack( 70, 170, lineDisappearDurationInFrames_5, currentFrame_5 - lineDisappearDelay_5*2 );
        bottomLine_5.setAttribute( "d", "M"+bottomLeftX_5+",63 L"+bottomRightX_5+",63 Z" );
        bottomLineOpacity_5 = AJS.linear( 1, 0, lineDisappearDurationInFrames_5*0.85, currentFrame_5 - lineDisappearDelay_5*2 );
        bottomLine_5.style.opacity = bottomLineOpacity_5;
      }
			//recursion
			menuDisappearAnimation_5();
		});
	} else {
		currentFrame_5 = 0;
		menuDisappearComplete_5 = true;
		openMenuAnimation_5();
	}
}

///Arrow Appear
function arrowAppearAnimation_5() {
	currentFrame_5++;
	if ( currentFrame_5 <= arrowAppearDurationInFrames_5 ) {
		window.requestAnimationFrame( ()=> { 
			//top line
			topLeftX_5 = AJS.easeInQuad( 110, 50, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLeftY_5 = AJS.easeInQuad( 100, 40, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomRightX_5 = AJS.easeInQuad( 130, 70, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomRightY_5 = AJS.easeInQuad( 120, 60, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLine_5.setAttribute( "d", "M" + topLeftX_5 + "," + topLeftY_5 + " L" + bottomRightX_5 + "," + bottomRightY_5 );
			topLineOpacity_5 = AJS.easeInExpo( 0, 1, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLine_5.style.opacity = topLineOpacity_5;
			//bottom line
			bottomLeftX_5 = AJS.easeInQuad( -30, 30, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomLeftY_5 = AJS.easeInQuad( 120, 60, arrowAppearDurationInFrames_5, currentFrame_5 );
			topRightX_5 = AJS.easeInQuad( -10, 50, arrowAppearDurationInFrames_5, currentFrame_5 );
			topRightY_5 = AJS.easeInQuad( 100, 40, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomLine_5.setAttribute( "d", "M" + bottomLeftX_5 + "," + bottomLeftY_5 + " L" + topRightX_5 + "," + topRightY_5 );
      bottomLineOpacity_5 = AJS.easeInExpo( 0, 1, arrowAppearDurationInFrames_5, currentFrame_5 );
      bottomLine_5.style.opacity = bottomLineOpacity_5;      
			//recursion
			arrowAppearAnimation_5();
		});
	} else {
		currentFrame_5 = 0;
		arrowAppearComplete_5 = true;
		openMenuAnimation_5();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_5() {
	if ( !menuDisappearComplete_5 ) { 
		menuDisappearAnimation_5();
	} else if ( !arrowAppearComplete_5) {
		arrowAppearAnimation_5();
	}
}

///Arrow Disappear
function arrowDisappearAnimation_5() {
	currentFrame_5++;
	if ( currentFrame_5 <= arrowDisappearDurationInFrames_5 ) {
		window.requestAnimationFrame( ()=> {
      //top line
			topLeftX_5 = AJS.easeInQuad( 50, 110, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLeftY_5 = AJS.easeInQuad( 40, 100, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomRightX_5 = AJS.easeInQuad( 70, 130, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomRightY_5 = AJS.easeInQuad( 60, 120, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLine_5.setAttribute( "d", "M" + topLeftX_5 + "," + topLeftY_5 + " L" + bottomRightX_5 + "," + bottomRightY_5 );
			topLineOpacity_5 = AJS.easeInExpo( 1, 0, arrowAppearDurationInFrames_5, currentFrame_5 );
			topLine_5.style.opacity = topLineOpacity_5;
			//bottom line
			bottomLeftX_5 = AJS.easeInQuad( 30, -30, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomLeftY_5 = AJS.easeInQuad( 60, 120, arrowAppearDurationInFrames_5, currentFrame_5 );
			topRightX_5 = AJS.easeInQuad( 50, -10, arrowAppearDurationInFrames_5, currentFrame_5 );
			topRightY_5 = AJS.easeInQuad( 40, 100, arrowAppearDurationInFrames_5, currentFrame_5 );
			bottomLine_5.setAttribute( "d", "M" + bottomLeftX_5 + "," + bottomLeftY_5 + " L" + topRightX_5 + "," + topRightY_5 );
      bottomLineOpacity_5 = AJS.easeInExpo( 1, 0, arrowAppearDurationInFrames_5, currentFrame_5 );
      bottomLine_5.style.opacity = bottomLineOpacity_5; 
			//recursion
			arrowDisappearAnimation_5();
		});
	} else {
		middleLine_5.style.opacity = "1";
		currentFrame_5 = 0;
		arrowDisappearComplete_5 = true;
		closeMenuAnimation_5();
	}
}

///Menu Appear
function menuAppearAnimation_5() {
	currentFrame_5++;
	if ( currentFrame_5 <= menuAppearDurationInFrames_5 ) {
		window.requestAnimationFrame( ()=> {  
			//top line
      if ( currentFrame_5 <= lineAppearDurationInFrames_5 ) {
        topLeftX_5 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_5, currentFrame_5 );
        topRightX_5 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_5, currentFrame_5 );
        topLine_5.setAttribute( "d", "M"+topLeftX_5+",37 L"+topRightX_5+",37 Z" );
        topLineOpacity_5 = AJS.linear( -2, 1, lineAppearDurationInFrames_5, currentFrame_5 );
        topLine_5.style.opacity = topLineOpacity_5;
      }
			//middle line
			if ( currentFrame_5 > lineAppearDelay_5 && currentFrame_5 <= lineAppearDurationInFrames_5 + lineAppearDelay_5 ) {
        middleLeftX_5 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5 );
        middleRightX_5 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5 );
        middleLine_5.setAttribute( "d", "M"+middleLeftX_5+",50 L"+middleRightX_5+",50 Z" );
        middleLineOpacity_5 = AJS.easeOutBack( -2, 1, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5 );
        middleLine_5.style.opacity = middleLineOpacity_5;
			}
			//bottom line
			if ( currentFrame_5 > lineAppearDelay_5*2 ) {
        bottomLeftX_5 = AJS.easeOutBack( 130, 30, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5*2 );
        bottomRightX_5 = AJS.easeOutBack( 170, 70, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5*2 );
        bottomLine_5.setAttribute( "d", "M"+bottomLeftX_5+",63 L"+bottomRightX_5+",63 Z" );
        bottomLineOpacity_5 = AJS.easeOutBack( -2, 1, lineAppearDurationInFrames_5, currentFrame_5 - lineAppearDelay_5*2 );
        bottomLine_5.style.opacity = bottomLineOpacity_5;
			}
			//recursion
			menuAppearAnimation_5();
		});
	} else {
		currentFrame_5 = 0;
		menuAppearComplete_5 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_5() {
	if ( !arrowDisappearComplete_5 ) {
		arrowDisappearAnimation_5();
	} else if ( !menuAppearComplete_5 ) {
		menuAppearAnimation_5();
	}
}

///Events
icon_5.addEventListener( "click", ()=> { 
  if ( state_5 === "menu" ) {
  	openMenuAnimation_5();
  	state_5 = "arrow";
  	arrowDisappearComplete_5 = false;
		menuAppearComplete_5 = false;
  } else if ( state_5 === "arrow" ) {
  	closeMenuAnimation_5();
  	state_5 = "menu";
  	menuDisappearComplete_5 = false;
		arrowAppearComplete_5 = false;
  }
});



/////////////////////////////////////////////////////
/////////////////////  ICON 6  //////////////////////
/////////////////////////////////////////////////////

///Initiation Variables
var icon_6 = document.getElementById("b6");
var topLine_6 = document.getElementById("top-line-6");
var middleLine_6 = document.getElementById("middle-line-6");
var bottomLine_6 = document.getElementById("bottom-line-6");
var state_6 = "menu";  // can be "menu" or "arrow"
var topLineY_6;
var middleLineY_6;
var bottomLineY_6;
var topLeftX_6;
var topRightX_6;
var middleLeftX_6;
var middleRightX_6;
var bottomLeftX_6;
var bottomRightX_6;
var topLeftY_6;
var topRightY_6;
var middleLeftY_6;
var middleRightY_6;
var bottomLeftY_6;
var bottomRightY_6;

///Animation Variables
var segmentDuration_6 = 20;
var menuDisappearDurationInFrames_6 = segmentDuration_6;
var arrowAppearDurationInFrames_6 = segmentDuration_6;
var arrowDisappearDurationInFrames_6 = segmentDuration_6;
var menuAppearDurationInFrames_6 = segmentDuration_6;
var menuDisappearComplete_6 = false;
var arrowAppearComplete_6 = false;
var arrowDisappearComplete_6 = true;
var menuAppearComplete_6 = true;
var currentFrame_6 = 0;
var cPt_6 = { x: 50, y: 50 };  // center point
var tlPt_6 = { x: 30, y: 37 };  // top right point
var trPt_6 = { x: 70, y: 37 };  // top left point
var mlPt_6 = { x: 30, y: 50 };  // middle right point
var mrPt_6 = { x: 70, y: 50 };  // middle left point
var blPt_6 = { x: 30, y: 63 };  // bottom right point
var brPt_6 = { x: 70, y: 63 };  // bottom left point


///Position Rotation
function positionRotation( centerPoint, orbitPoint, angleInRads ) {
  var distance = Math.sqrt( Math.pow( orbitPoint.x-centerPoint.x, 2 ) + Math.pow( orbitPoint.y-centerPoint.y, 2 ) );
  orbitPoint.x = centerPoint.x + Math.cos( angleInRads ) * distance;
  orbitPoint.y = centerPoint.y + Math.sin( angleInRads ) * distance;
}

///Menu Disappear
function menuDisappearAnimation_6() {
	currentFrame_6++;
	if ( currentFrame_6 <= menuDisappearDurationInFrames_6 ) {
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.5;  // menu disappear rotation
			//top line
      var tlAng = AJS.easeInBack( 3.7179, 3.7179+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var trAng = AJS.easeInBack( 5.7068, 5.7068+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, tlPt_6, tlAng );
      positionRotation( cPt_6, trPt_6, trAng );
      topLine_6.setAttribute( "d", "M"+tlPt_6.x+","+tlPt_6.y+" L"+trPt_6.x+","+trPt_6.y+" Z" );
      //middle line
      var mlAng = AJS.easeInBack( Math.PI, Math.PI+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var mrAng = AJS.easeInBack( 0, rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, mlPt_6, mlAng );
      positionRotation( cPt_6, mrPt_6, mrAng );
      middleLine_6.setAttribute( "d", "M"+mlPt_6.x+","+mlPt_6.y+" L"+mrPt_6.x+","+mrPt_6.y+" Z" );
      //bottom line
      var blAng = AJS.easeInBack( 2.5652, 2.5652+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var brAng = AJS.easeInBack( 0.5763, 0.5763+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, blPt_6, blAng );
      positionRotation( cPt_6, brPt_6, brAng );
      bottomLine_6.setAttribute( "d", "M"+blPt_6.x+","+blPt_6.y+" L"+brPt_6.x+","+brPt_6.y+" Z" );
			//recursion
			menuDisappearAnimation_6();
		});
	} else {
		currentFrame_6 = 0;
		menuDisappearComplete_6 = true;
		openMenuAnimation_6();
	}
}

///Arrow Appear
function arrowAppearAnimation_6() {
	currentFrame_6++;
	if ( currentFrame_6 <= arrowAppearDurationInFrames_6 ) {
    tlPt_6 = { x: 60, y: 30 };
    trPt_6 = { x: 40, y: 50 };
    mlPt_6 = { x: 40, y: 50 };
    mrPt_6 = { x: 60, y: 70 };
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.5;  // arrow appear rotation
			//top line
      var tlAng = AJS.easeOutBack( 5.1759, 5.1759+rotation, arrowAppearDurationInFrames_6, currentFrame_6 );
      var trAng = AJS.easeOutBack( Math.PI, Math.PI+rotation, arrowAppearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, tlPt_6, tlAng );
      positionRotation( cPt_6, trPt_6, trAng );
      topLine_6.setAttribute( "d", "M"+tlPt_6.x+","+tlPt_6.y+" L"+trPt_6.x+","+trPt_6.y+" Z" );
			//center line
      var mlAng = AJS.easeOutBack( Math.PI, Math.PI+rotation, arrowAppearDurationInFrames_6, currentFrame_6 );
      var mrAng = AJS.easeOutBack( 1.1072, 1.1072+rotation, arrowAppearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, mlPt_6, mlAng );
      positionRotation( cPt_6, mrPt_6, mrAng );
      middleLine_6.setAttribute( "d", "M"+mlPt_6.x+","+mlPt_6.y+" L"+mrPt_6.x+","+mrPt_6.y+" Z" );
      //bottom line
      bottomLine_6.style.opacity = 0;
			//recursion
			arrowAppearAnimation_6();
		});
	} else {
		currentFrame_6 = 0;
		arrowAppearComplete_6 = true;
		openMenuAnimation_6();
	}
}

///Combined Open Menu Animation
function openMenuAnimation_6() {
	if ( !menuDisappearComplete_6 ) { 
		menuDisappearAnimation_6();
	} else if ( !arrowAppearComplete_6) {
		arrowAppearAnimation_6();
	}
}

///Arrow Disappear
function arrowDisappearAnimation_6() {
	currentFrame_6++;
	if ( currentFrame_6 <= arrowDisappearDurationInFrames_6 ) {
		window.requestAnimationFrame( ()=> { 
      var rotation = Math.PI*0.5;  // arrow disapear rotation
			//top line
      var tlAng = AJS.easeInBack( 0.4635, 0.4635+rotation, arrowDisappearDurationInFrames_6, currentFrame_6 );
      var trAng = AJS.easeInBack( Math.PI*1.5, Math.PI*1.5+rotation, arrowDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, tlPt_6, tlAng );
      positionRotation( cPt_6, trPt_6, trAng );
      topLine_6.setAttribute( "d", "M"+tlPt_6.x+","+tlPt_6.y+" L"+trPt_6.x+","+trPt_6.y+" Z" );
			//center line
      var mlAng = AJS.easeInBack( Math.PI*1.5, Math.PI*1.5+rotation, arrowDisappearDurationInFrames_6, currentFrame_6 );
      var mrAng = AJS.easeInBack( 2.6779, 2.6779+rotation, arrowDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, mlPt_6, mlAng );
      positionRotation( cPt_6, mrPt_6, mrAng );
      middleLine_6.setAttribute( "d", "M"+mlPt_6.x+","+mlPt_6.y+" L"+mrPt_6.x+","+mrPt_6.y+" Z" );
      //bottom line
      bottomLine_6.style.opacity = 0;
			//recursion
			arrowDisappearAnimation_6();
		});
	} else {
		middleLine_6.style.opacity = "1";
		currentFrame_6 = 0;
		arrowDisappearComplete_6 = true;
		closeMenuAnimation_6();
	}
}

///Menu Appear
function menuAppearAnimation_6() {
	currentFrame_6++;
	if ( currentFrame_6 <= menuAppearDurationInFrames_6 ) {
    tlPt_6 = { x: 37, y: 70 };
    trPt_6 = { x: 37, y: 30 };
    mlPt_6 = { x: 50, y: 70 };
    mrPt_6 = { x: 50, y: 30 };
    bottomLine_6.style.opacity = 1;
		window.requestAnimationFrame( ()=> {  
      var rotation = Math.PI*0.5;  // menu appear rotation
			//top line
			var tlAng = AJS.easeOutBack( 2.1471, 2.1471+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
			var trAng = AJS.easeOutBack( 4.1360, 4.1360+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
			positionRotation( cPt_6, tlPt_6, tlAng );
			positionRotation( cPt_6, trPt_6, trAng );
			topLine_6.setAttribute( "d", "M"+tlPt_6.x+","+tlPt_6.y+" L"+trPt_6.x+","+trPt_6.y+" Z" );
      //middle line
      var mlAng = AJS.easeOutBack( Math.PI*0.5, Math.PI*0.5+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var mrAng = AJS.easeOutBack( Math.PI*1.5, Math.PI*1.5+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, mlPt_6, mlAng );
      positionRotation( cPt_6, mrPt_6, mrAng );
      middleLine_6.setAttribute( "d", "M"+mlPt_6.x+","+mlPt_6.y+" L"+mrPt_6.x+","+mrPt_6.y+" Z" );
      //bottom line
      var blAng = AJS.easeOutBack( 0.9944, 0.9944+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      var brAng = AJS.easeOutBack( 5.2887, 5.2887+rotation, menuDisappearDurationInFrames_6, currentFrame_6 );
      positionRotation( cPt_6, blPt_6, blAng );
      positionRotation( cPt_6, brPt_6, brAng );
      bottomLine_6.setAttribute( "d", "M"+blPt_6.x+","+blPt_6.y+" L"+brPt_6.x+","+brPt_6.y+" Z" );
			//recursion
			menuAppearAnimation_6();
		});
	} else {
		currentFrame_6 = 0;
		menuAppearComplete_6 = true;
	}
}

///Close Menu Animation
function closeMenuAnimation_6() {
	if ( !arrowDisappearComplete_6 ) {
		arrowDisappearAnimation_6();
	} else if ( !menuAppearComplete_6 ) {
		menuAppearAnimation_6();
	}
}

///Events
icon_6.addEventListener( "click", ()=> { 
  if ( state_6 === "menu" ) {
  	openMenuAnimation_6();
  	state_6 = "arrow";
  	arrowDisappearComplete_6 = false;
		menuAppearComplete_6 = false;
  } else if ( state_6 === "arrow" ) {
  	closeMenuAnimation_6();
  	state_6 = "menu";
  	menuDisappearComplete_6 = false;
		arrowAppearComplete_6 = false;
  }
});e

///////////////// DEMO //////////////////

function playDemo() { 
  setTimeout( function() { icon_1.click(); }, 1000 );
  setTimeout( function() { icon_1.click(); }, 2000 );
  setTimeout( function() { icon_2.click(); }, 3000 );
  setTimeout( function() { icon_2.click(); }, 4000 );
  setTimeout( function() { icon_3.click(); }, 5000 );
  setTimeout( function() { icon_3.click(); }, 6000 );
  setTimeout( function() { icon_4.click(); }, 7000 );
  setTimeout( function() { icon_4.click(); }, 8000 );
  setTimeout( function() { icon_5.click(); }, 9000 );
  setTimeout( function() { icon_5.click(); }, 10000 );
  setTimeout( function() { icon_6.click(); }, 11000 );
  setTimeout( function() { icon_6.click(); playDemo(); }, 12000 );
}

document.addEventListener("DOMContentLoaded", function(event) { 
  //playDemo();
});

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

How to get Instagram / Twitter followers count using JQuery Ajax?

In this article I am going to show you how you can get the total Twitter and Instagram followers count using jQuery.

Twitter Followers Count

We can simply get the number of Twitter followers by using CDN widgets, so we are going to use the below CDN with the screen name ‘silvawebdesigns’.


https://cdn.syndication.twimg.com/widgets/followbutton/info.json?screen_names=company_name

In the following example you can see how it is work and how to get it. The only thing you need to change is the twitter_username variable to your Twitter handle.

HTML


<h3>Silva Web Designs has <span id="twitter-followers"></span> Twitter followers.</h3>

jQuery


var twitter_username = 'your_username';

$.ajax({
  url: "https://cdn.syndication.twimg.com/widgets/followbutton/info.json?screen_names=" + twitter_username,
  dataType: 'jsonp',
  crossDomain: true
}).done(function(data) {
  $("#twitter-followers").text(data[0]['followers_count']);
});

See this JSFIDDLE for a working demo.

Instagram Followers Count

Once you have your token, you can update the code below code with your “token” variable:-

HTML


<h3>Silva Web Designs has <span id="instagram-followers"></span> Instagram followers.</h3>

jQuery

<code class="language-JS">
var token = 'api_key';

$.ajax({
  url: 'https://api.instagram.com/v1/users/self',
  dataType: 'jsonp',
  type: 'GET',
  data: {
    access_token: token
  },
  success: function(data) {
    var follows = data['data']['counts']['followed_by'];
    $("#instagram-followers").text(follows);
  },
  error: function(data) {
    console.log(data);
  }
});

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

Detect Scroll up and Down event with jQuery

In this tutorial we will show you how to detect whether you scroll up or down using jQuery which will allow you to perform action based on the direction of scrolling.

Here is how you can achieve this with few very lines of jQuery:-


 $(function(){
	 var lastScrollTop = 0, delta = 5;
	 $(window).scroll(function(){
		 var nowScrollTop = $(this).scrollTop();
		 if(Math.abs(lastScrollTop - nowScrollTop) >= delta){
		 	if (nowScrollTop > lastScrollTop){
		 		// ACTION ON
		 		// SCROLLING DOWN 
		 	} else {
		 		// ACTION ON
		 		// SCROLLING UP 
			}
		 lastScrollTop = nowScrollTop;
		 }
	 });
 });

The code above is based on three variable lastScrollTop, nowScrollTop and delta.

  • lastScrollTop: This variable stores the last Y-position of website window, and by last position we mean number of pixels hidden from view above scrollable area. Initial value of this variable is set to 0 as the scroll bar is at very top.
  • nowScrollTop: This variable stores the number of pixels that are hidden above the scrollable area right now as you are scrolling.
  • delta: delta is like a threshold, it is a variation by which we need scroll detection to occur. for example: you might not like the scroll detection function to run when user scrolls accidentally like around 4px. So we set delta variable to 5px which will prevent accidental or very small scrolling that usually happens on touch screens.

Now we know what the variables are, here is the code explained line by line:-

  • $(function(){…}) will run the code once document is ready.
  • var lastScrollTop = 0, delta = 5; sets the value of two variables.
  • $(window).scroll(function(){…}) runs code enclosed inside it when user scrolls window.
  • var nowScrollTop = $(this).scrollTop(); sets value of third variable, which is equal to the value of scrolling that occurred.
  • if(Math.abs(lastScrollTop – nowScrollTop) >= delta){…} runs the code inside it only if absolute difference between lastScrollTop and nowScrollTop is less than delta (i.e. 5px). We are taking positive value because the distance between to scrolling values is always positive (its scaler).
  • if (nowScrollTop > lastScrollTop){…} if current scrolling value is greater than last scroll value then downward scrolling is occurred and will run the code inside this statement.
  • else upward scrolling is occurred.
  • Finally we set the lastScrollTop = nowScrollTop; because now the last scroll value become the previous nowSrollTop value.

I hope this helps!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

CSS/jQuery – How to add a custom Back to top Icon

The Back to top link allows users to smoothly scroll back to the top of the page. It’s a little detail which enhances navigation experience on website with long pages.

How to add a custom back (scroll) top top icon?

Firstly, within your footer, add the following HTML:-


<a href="#" class="back-to-top"></a>

Then add the following CSS:-


.back-to-top {
    display: none;
    background: url(../img/back-to-top.png); // Link this to your image
    background-repeat: no-repeat;
    position: fixed;
    height: 50px; // The height of the icon you added for the background
    width: 50px; // The width of the icon you added for the background
    bottom: 3em;
    right: 3em;
    width: 3em;
    height: 3em;
    z-index: 999;
}

The magic behind it is adding the jQuery to handle the fade in/out when the scroll point is further down the page. Add the following jQuery code:-


/* Back to Top */

var offset = 220;
var duration = 500;
jQuery(window).scroll(function() {
	if (jQuery(this).scrollTop() > offset) {
		jQuery('.back-to-top').fadeIn(duration);
	} else {
		jQuery('.back-to-top').fadeOut(duration);
	}
});

jQuery('.back-to-top').click(function(event) {
	event.preventDefault();
	jQuery('html, body').animate({scrollTop: 0}, duration);
	return false;
});	

And there you have it, you now have an icon that appears on the bottom right hand corner when you scroll down the page. Clicking this element will smoothly scroll back to the top of the page.

Remember to include the jQuery library and jQuery UI for this to work properly.

Any difficulties, just ask away in the comments!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

Bootstrap – Responsive Carousel – Changing the number of visible slides

In this example we are going to show how to configure the Bootstrap 3 carousel to show many panels at once but only slide one at a time.

See the JSFIDDLE to see how this works. On desktop it rotates one item at a time and has 3 elements in view. If you shrink the browser to mobile you will not see it rotates one item at a time but only has one element in view (as opposed to it usually stacking 3 elements).

Here is the code you need from the example:-

HTML


<div class="row">
  <div class="col-md-12">
    <div class="carousel carousel-blog slide" id="carousel123">
      <div class="carousel-inner">
        <div class="item active">
          <div class="col-xs-12 col-sm-4 col-md-4">
            <a href="#"><img src="https://placehold.it/500/0054A6/fff/&text=1" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-4">
            <a href="#"><img src="https://placehold.it/500/002d5a/fff/&text=2" class="img-responsive"></a>
          </div>
        </div>
        <div class="item">
          <div class="col-xs-12 col-sm-4 col-md-4">
            <a href="#"><img src="https://placehold.it/500/d6d6d6/333&text=3" class="img-responsive"></a>
          </div>
        </div>
      </div>
      <a class="left carousel-control" href="#carousel123" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
      <a class="right carousel-control" href="#carousel123" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
    </div>
  </div>
</div>

CSS


.carousel-blog .carousel-control {
  width: 4%;
  background-image: none;
}

.carousel-blog .carousel-control.left {
  margin-left: 15px;
}

.carousel-blog .carousel-control.right {
  margin-right: 15px;
}

.carousel-blog .cloneditem-1,
.carousel-blog .cloneditem-2,
.carousel-blog .cloneditem-3,
.carousel-blog .cloneditem-4,
.carousel-blog .cloneditem-5 {
  display: none;
}

@media all and (min-width: 768px) {
  .carousel-blog .carousel-inner > .active.left,
  .carousel-blog .carousel-inner > .prev {
    left: -33.333%;
  }
  .carousel-blog .carousel-inner > .active.right,
  .carousel-blog .carousel-inner > .next {
    left: 33.333%;
  }
  .carousel-blog .carousel-inner > .left,
  .carousel-blog .carousel-inner > .prev.right,
  .carousel-blog .carousel-inner > .active {
    left: 0;
  }
  .carousel-blog .carousel-inner .cloneditem-1,
  .carousel-blog .carousel-inner .cloneditem-2 {
    display: block;
  }
}

@media all and (min-width: 768px) and (transform-3d),
all and (min-width: 768px) and (-webkit-transform-3d) {
  .carousel-blog .carousel-inner > .item.active.right,
  .carousel-blog .carousel-inner > .item.next {
    transform: translate3d(33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.active.left,
  .carousel-blog .carousel-inner > .item.prev {
    transform: translate3d(-33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.left,
  .carousel-blog .carousel-inner > .item.prev.right,
  .carousel-blog .carousel-inner > .item.active {
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

@media all and (min-width: 992px) {
  .carousel-blog .carousel-inner > .active.left,
  .carousel-blog .carousel-inner > .prev {
    left: -16.666%;
  }
  .carousel-blog .carousel-inner > .active.right,
  .carousel-blog .carousel-inner > .next {
    left: 16.666%;
  }
  .carousel-blog .carousel-inner > .left,
  .carousel-blog .carousel-inner > .prev.right,
  .carousel-blog .carousel-inner > .active {
    left: 0;
  }
  .carousel-blog .carousel-inner .cloneditem-3,
  .carousel-blog .carousel-inner .cloneditem-4,
  .carousel-blog .carousel-inner .cloneditem-5 {
    display: block;
  }
}

@media all and (min-width: 992px) and (transform-3d),
all and (min-width: 992px) and (-webkit-transform-3d) {
  .carousel-blog .carousel-inner > .item.active.right,
  .carousel-blog .carousel-inner > .item.next {
    transform: translate3d(33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.active.left,
  .carousel-blog .carousel-inner > .item.prev {
    transform: translate3d(-33.333%, 0, 0);
    left: 0;
  }
  .carousel-blog .carousel-inner > .item.left,
  .carousel-blog .carousel-inner > .item.prev.right,
  .carousel-blog .carousel-inner > .item.active {
    transform: translate3d(0, 0, 0);
    left: 0;
  }
}

.container {
  margin-bottom: 50px;
}

body {
  font-family: 'Bitter', sans-serif;
  color: #E54A41;
}

p {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  margin-bottom: 2em;
}

h2 {
  margin: 2em 0 1em;
}

.logo {
  margin: 20px auto;
  height: 100px;
}

@media only screen and (min-width: 768px) {
  .logo {
    margin: 28px;
    float: left;
  }
}

.title {
  padding: 28px;
  display: table-cell;
  position: relative;
  vertical-align: middle;
  text-align: center;
}

jQuery


(function() {
  // setup your carousels as you normally would using JS
  // or via data attributes according to the documentation
  // http://getbootstrap.com/javascript/#carousel
  $('#carousel123').carousel({
    interval: 2000
  });
}());

(function() {
  $('.carousel-blog .item').each(function() {
    var itemToClone = $(this);

    for (var i = 1; i < 3; i++) {
      itemToClone = itemToClone.next();

      // wrap around if at end of item collection
      if (!itemToClone.length) {
        itemToClone = $(this).siblings(':first');
      }

      // grab item, clone, add marker class, add to collection
      itemToClone.children(':first-child').clone()
        .addClass("cloneditem-" + (i))
        .appendTo($(this));
    }
  });
}());

If you need to modify the code to show more slides or change the breakpoints, just remember to update these four key elements:

  • Update the html classes for responsive rules
  • Update the css item widths
  • Add in the required .cloneditem-n management
  • Tweak the js loop to control the number of cloned items

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

How to detect two elements colliding or overlapping in jQuery

If you want to know when two elements overlap or collide with each other, then this may be of use to you. This option doesn’t require any plugins which I feel is the better option.

Below is a very simple way to detect collision between DOM elements. This can be coupled with a window resize function “$( window ).resize(function(){});” to allow for continuous detection.

CSS


div {
    width:100%;
    height:500px;
    background:#EEE;
}
#two {
    position:absolute;
    left:200px;
    top:50px;
    background:#000;
}

HTML


<div id="one">One</div>
<div id="two">Two</div>
<span id="result"></span>

JavaScript


console.log(isOverlap("#one","#two"));//true
console.log(isOverlap("#one","#three"));//false

var overlap = isOverlap("#one","#two");

if (overlap) {
 // Do something when elements are overlapping
} else {
 // Do something when elements are not overlapping
}

jQuery


$("#result").text(isOverlap("#one","#two")+","+isOverlap("#one","#three")+","+isOverlap("#two","#three"));

function isOverlap(idOne,idTwo){
        var objOne=$(idOne),
            objTwo=$(idTwo),
            offsetOne = objOne.offset(),
            offsetTwo = objTwo.offset(),
            topOne=offsetOne.top,
            topTwo=offsetTwo.top,
            leftOne=offsetOne.left,
            leftTwo=offsetTwo.left,
            widthOne = objOne.width(),
            widthTwo = objTwo.width(),
            heightOne = objOne.height(),
            heightTwo = objTwo.height();
        var leftTop = leftTwo > leftOne && leftTwo < leftOne+widthOne                  && topTwo > topOne && topTwo < topOne+heightOne,             rightTop = leftTwo+widthTwo > leftOne && leftTwo+widthTwo < leftOne+widthOne                  && topTwo > topOne && topTwo < topOne+heightOne,             leftBottom = leftTwo > leftOne && leftTwo < leftOne+widthOne                  && topTwo+heightTwo > topOne && topTwo+heightTwo < topOne+heightOne,             rightBottom = leftTwo+widthTwo > leftOne && leftTwo+widthTwo < leftOne+widthOne                  && topTwo+heightTwo > topOne && topTwo+heightTwo < topOne+heightOne;
        return leftTop || rightTop || leftBottom || rightBottom;
}

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

jQuery – Preload Images

Here is how you can preload images which are needed later (e.g. when a hover is performed). You may notice that when replacing an image on the hover state, you get this horrible flicker, that is because the image is loaded as you hover the element. The below code will load the image on page load and therefore overcome this problem.


$.preloadImages = function() {
  for (var i = 0; i < arguments.length; i++) {
    $("<img />").attr("src", arguments[i]);
  }
}

$.preloadImages(“hover-img-1.jpg”,”hover-image-2.jpg”);

Hope this helps!

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share

jQuery – Submitting a form with AJAX

To submit a form with AJAX (without reloading the page), you can use the ajaxForm/ajaxSubmit functions from Ajax Form Plugin or the jQuery serialize function.

AjaxForm:


$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

or alternatively:-


$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

ajaxForm will send when the submit button is pressed. ajaxSubmit sends immediately.

Serialize Method:


$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

You can read the AJAX serialization documentation is here.

 

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development and web site design. His expertise is WordPress & Magento as well as many other frameworks. Would you like to work with Nathan? Send him an email on [email protected]

It’s good to share