Frontend Forever

Ayoub Web

About this Code

Hello reader, I am Ayoub. Nice to meet you again in this free code sharing website. In this post I am going to explain about Ayoub Web. If you are new to this website, we recommend you to subscribe to our youtube channel and watch the videos. Ok lets dive into the code.

Images

These are the output images of the code. You can click on the image to enlarge it. also you can click the try it button to see the output.

Youtube Tutorial Video

If you are a visual learner and want to learn how to use this code, you can watch the video below.
and also this video contains the clear step by step explanation and the output of the code.

Source Code

This is the source code of the code. You can copy and paste the code to your editor.

Device Information

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
/*basic reset*/

html {
  height: 100%;
  transition: all .3s linear;
  -o-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
  background: url('https://css-tricks.com/wp-content/csstricks-uploads/transpBlack50.png') center center, url('http://christiannaths.com/code/admin-interface/dots.png') center center fixed, url('https://images.unsplash.com/photo-1486433721740-19c1cabac7ad?dpr=2&auto=format&fit=crop&w=1500&h=750&q=80&cs=tinysrgb') center center no-repeat fixed;
  -webkit-background-size: auto, auto, cover;
  -moz-background-size: auto, auto, cover;
  -o-background-size: auto, auto, cover;
  background-size: auto, auto, cover;
}

body {
  font-family: montserrat, arial, verdana;
  margin: 0;
}

nav {
  height: 50px;
  width: 100%;
  padding-top: 15px;
}

li {
  list-style: none;
  float: right;
  font-size: 15px;
}

li a {
  color: #fff;
  padding: 11px;
  float: right;
  border: 1px solid #979797;
  margin-right: 20px;
  border-color: rgba(255, 255, 255, 0.1);
  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px 0;
  -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px 0;
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px 0;
  background: rgba(255, 255, 255, 0.1);
  text-shadow: none;
}

li a:hover {
  background: #fff;
  color: #000;
  transition: all .3s linear;
  -o-transition: all .3s linear;
  -moz-transition: all .3s linear;
  -webkit-transition: all .3s linear;
}

a {
  text-decoration: none;
}

#logo {
  width: 180px;
  margin: auto;
}

#logo h1 {
  margin: 0 auto;
  color: #fff;
  float: right;
  font-family: Lobster, arial;
  font-size: 35px
}

.content {
  height: 100%;
  min-height: 100%;
  /*for mozilla*/
}

html>body .content {
  height: auto;
}

/*form styles*/

#msform {
  width: 60%;
  margin: auto;
  margin-top: 50px;
  text-align: center;
  position: relative;
}

#msform #domain {
  padding: 15px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 0;
  border-radius: 3px 0px 0px 1px;
  margin-bottom: 10px;
  width: 70%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 13px;
  outline: none;
  float: left;
  text-align: left;
}

#msform #domaintext {
  width: 30%;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-left: 0;
  border-radius: 0px 3px 3px 0px;
  text-align: right;
  background: #F7F7F7;
}

#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 100%;
  /*stacking fieldsets above each other*/
  position: absolute;
}

/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {
  display: none;
}

/*inputs*/

#msform input,
#msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 13px;
  outline: none;
}

/*buttons*/

#msform .action-button {
  width: 100px;
  background: #27AE60;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}

#msform .action-button:hover,
#msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

/*headings*/

.fs-title {
  font-size: 15px;
  text-transform: uppercase;
  color: #2C3E50;
  margin-bottom: 10px;
}

.fs-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}

/*progressbar*/

#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
}

#progressbar li {
  list-style-type: none;
  color: white;
  text-transform: uppercase;
  font-size: 9px;
  width: 33.33%;
  float: left;
  position: relative;
}

#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 20px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  color: #333;
  background: white;
  border-radius: 3px;
  margin: 0 auto 5px auto;
}

/*progressbar connectors*/

#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  left: -50%;
  top: 9px;
  z-index: -1;
  /*put it behind the numbers*/
}

#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
}

/*marking active/completed steps green*/

/*The number of the step and the connector before it = green*/

#progressbar li.active:before,
#progressbar li.active:after {
  background: #27AE60;
  color: white;
}

console.log("Event Fired")
/* 
Orginal Page: http://thecodeplayer.com/walkthrough/jquery-multi-step-form-with-progress-bar

*/
//jQuery time
var current_fs, next_fs, previous_fs; //fieldsets
var left, opacity, scale; //fieldset properties which we will animate
var animating; //flag to prevent quick multi-click glitches

$(".next").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	next_fs = $(this).parent().next();
	
	//activate next step on progressbar using the index of next_fs
	$("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active");
	
	//show the next fieldset
	next_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale current_fs down to 80%
			scale = 1 - (1 - now) * 0.2;
			//2. bring next_fs from the right(50%)
			left = (now * 50)+"%";
			//3. increase opacity of next_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({'transform': 'scale('+scale+')'});
			next_fs.css({'left': left, 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

$(".previous").click(function(){
	if(animating) return false;
	animating = true;
	
	current_fs = $(this).parent();
	previous_fs = $(this).parent().prev();
	
	//de-activate current step on progressbar
	$("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active");
	
	//show the previous fieldset
	previous_fs.show(); 
	//hide the current fieldset with style
	current_fs.animate({opacity: 0}, {
		step: function(now, mx) {
			//as the opacity of current_fs reduces to 0 - stored in "now"
			//1. scale previous_fs from 80% to 100%
			scale = 0.8 + (1 - now) * 0.2;
			//2. take current_fs to the right(50%) - from 0%
			left = ((1-now) * 50)+"%";
			//3. increase opacity of previous_fs to 1 as it moves in
			opacity = 1 - now;
			current_fs.css({'left': left});
			previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity});
		}, 
		duration: 800, 
		complete: function(){
			current_fs.hide();
			animating = false;
		}, 
		//this comes from the custom easing plugin
		easing: 'easeInOutBack'
	});
});

$(".submit").click(function(){
	return false;
})

And also you can click the try it button to see the output of the code in our web Code Playground.
You can also download the code to the zip format by clicking the download button. The download process is little bit complex, you need ti await for 10 seconds. after that you can download the code by clicking the generated download link.

Download

Try It

Frontend Forever

Ayoub Web

About this Code

Images

Youtube Tutorial Video

Source Code

Device Information

Leave a Comment

You need to login first to comment.

About Us

Frontend Forever