Sliding animation orientation from top to bottom - javascript

I am working on making slideshow of forms and it is working fine. Here is my codepen link.
As you can see if I click those dots, it will open another form but the transition happens from left to right. I wanted to make that transition from top to bottom. Is this possible to do? I am not able to figure out how we can make the transition happen from top to bottom if I click those dots. You can play around with my codepen link.
Below is my code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>SlidesJS Standard Code Example</title>
<meta name="description" content="SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.">
<meta name="author" content="Nathan Searles">
<!-- SlidesJS Required (if responsive): Sets the page width to the device width. -->
<meta name="viewport" content="width=device-width">
<!-- End SlidesJS Required -->
<!-- CSS for slidesjs.com example -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- End CSS for slidesjs.com example -->
<!-- SlidesJS Optional: If you'd like to use this design -->
<style>
body {
-webkit-font-smoothing: antialiased;
font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #232525;
}
#slides,
#slides2,
#slides3 {
display: none;
margin-bottom:50px;
}
.slidesjs-navigation {
margin-top:3px;
}
.slidesjs-previous {
margin-right: 5px;
float: left;
}
.slidesjs-next {
margin-right: 5px;
float: left;
}
.slidesjs-pagination {
margin: 6px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url("https://s16.postimg.org/pt4k43i9x/pagination.png");
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
.navbar {
overflow: hidden
}
</style>
<!-- End SlidesJS Optional-->
<!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
<style>
#slides {
display: none
}
.container {
margin: 0 auto
}
/* For tablets & smart phones */
#media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
.container {
width: auto
}
}
/* For smartphones */
#media (max-width: 480px) {
.container {
width: auto
}
}
/* For smaller displays like laptops */
#media (min-width: 768px) and (max-width: 979px) {
.container {
width: 724px
}
}
/* For larger displays */
#media (min-width: 1200px) {
.container {
width: 1170px
}
}
</style>
<!-- SlidesJS Required: -->
</head>
<body>
<div class="topnav">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
<nav>
<ul>
<li class="dropdown">
<b>INSURANCE</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i>
</li>
<li><i>CORPORATE</i>
</li>
</ul>
</li>
<li class="our-story">OUR STORY</li>
<li class="login-signup">Log In | Sign up</li>
<li class="get-covered">GET <strong style="font-style:italic">COVERED</strong>
</li>
</ul>
</nav>
</div>
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<h3>INSURANCE FORM</h3>
<h4><i>BASIC DETAILS</i></h4>
<br>
<div id="slides" class="container-fluid" >
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 1">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<a href="#" class="arrow slidesjs-previous slidesjs-navigation">
<i class="fa fa-chevron-left"></i>
</a>
<a href="#" class=" arrow slidesjs-next slidesjs-navigation">
<i class="fa fa-chevron-right"></i>
</a>
</div>
</div>
<!-- End SlidesJS Required: Start Slides -->
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="js/jquery.slides.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 800,
height: 528,
navigation: false
});
/*
To have multiple slideshows on the same page
they just need to have separate IDs
*/
$('#slides2').slidesjs({
width: 800,
height: 528,
navigation: false,
start: 3,
play: {
auto: true
}
});
$('#slides3').slidesjs({
width: 800,
height: 528,
navigation: false
});
});
</script>
<!-- End SlidesJS Required -->
</body>
</html>
I am using SlideJS plugin here but looks like they don't allow this animation or maybe I am wrong. Is there any other way by which I can accomplish this?


I checked the SlidesJS plugin code and it looks like it doesn't have a direction option. All over the code it just changes the "left" offset so it doesn't seem like it will support it.
I would suggest either moving to another plugin or you will have to adjust the plugin manually from "left" offset to "top" (this will for sure require some CSS adjustments as well).


SlidesJS doesn't seem to have vertical slide option. I would suggest you to go with SlickSlider. It is a robust, responsive and fast. It is also very very easy to customise and use.
Have a look at their website : http://kenwheeler.github.io/slick/
I took your codepen and inserted SlickSlider to it and here is the code for it. I understand that you are not really comfortable with jquery but there is not much to it. You just need to tell slick what is the container of your slider and then give it the options that you wish to change. There are various demos on their website to help you find the best option.
https://codepen.io/vikrant-icd/pen/QgKXmN
You only need this much jquery to enable the slider. Rest is all HTML and CSS. If you need more customisation, you can refer their website and give it a try. This is the best way to get used to jQuery, or any other language for that matter.
$('#slides').slick({
vertical: true,
nextArrow: '<i class="fa fa-chevron-right"></i>',
prevArrow: '<i class="fa fa-chevron-left"></i>'
});
I hope this helps. Please note that I have also cleaned the HTML a bit. Other than removing SlidesJS code, I have not added or changed anything else in your code.
Cheers!


If you're open to using a different slider, bxSlider has an option for this.
$('#slides').bxSlider({
mode: 'vertical',
slideMargin: 5
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.12/jquery.bxslider.min.js"></script>
<div id="slides" class="container-fluid">
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 1">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
</div>


I hope you will find your final thing at this point.
https://codepen.io/sahil_patel/pen/NgppqW
Updated code:
.slick-dots li button{
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(https://s16.postimg.org/pt4k43i9x/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
background-color:transparent;
border:0px;
margin-right:6px;
}
li.slick-active button{
background-position: 0 -13px;
}
Thank you,
Sahil Patel

Related

Form Not Sending any Inputs

I made a request form for the user. The two problems I'm facing are
Whatever the sender fills the form or any input and sends it, the receiver does see it.
the form has multi-select option like if you choose an option show that and hide other options but when the user fills the inputs from one option the remaining blank input field also shows that.
$(function() {
$('#select-2 option:not([default])').wrap('<span/>');
});
$('#select-1').change(function() {
$('#select-2 span > option').unwrap();
$('#select-2 option:not(.' + $('#select-1').val() + ', [default])').wrap('<span/>');
//console.log($('#select-2').val());
});
$('#select-2').trigger('change');
$("#otherFieldGroupMod").hide();
$("#otherFieldGroupRes").hide();
$("#otherFieldGroupRem").hide();
$("#otherFieldGroupOutacc").hide();
$("#outlookAccountDistri").hide();
$("#otherFieldGroupWinacc").hide();
$("#otherFieldGroupKdrive").hide();
$("#otherFieldGroupDcnet").hide();
$("#otherFieldGroupResPass").hide();
$("#otherFieldGroupValpo").hide();
//AS400 NEW ACCOUNT SCRIPT//
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-1a") {
$("#otherFieldGroupNewacc").show();
} else {
$("#otherFieldGroupNewacc").hide();
}
});
});
//AS400 MODFIY ACCOUNT SCRIPT//
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-1b") {
$("#otherFieldGroupMod").show();
} else {
$("#otherFieldGroupMod").hide();
}
});
});
//AS400 RESET ACCOUNT SCRIPT//
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-1c") {
$("#otherFieldGroupRes").show();
} else {
$("#otherFieldGroupRes").hide();
}
});
});
//OUTLOOK NEW ACCOUNT /
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-2a") {
$("#otherFieldGroupOutacc").show();
} else {
$("#otherFieldGroupOutacc").hide();
}
});
});
//Add TO DISTRIBUTION LIST
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-2b") {
$("#outlookAccountDistri").show();
} else {
$("#outlookAccountDistri").hide();
}
});
});
//WINDOWS NEW ACCOUNT SCRIPT//
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-3a") {
$("#otherFieldGroupWinacc").show();
} else {
$("#otherFieldGroupWinacc").hide();
}
});
});
//K DRIVE AND GROUP ACCESS
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-3b") {
$("#otherFieldGroupKdrive").show();
} else {
$("#otherFieldGroupKdrive").hide();
}
});
});
//DC NET ACCESS
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-3c") {
$("#otherFieldGroupDcnet").show();
} else {
$("#otherFieldGroupDcnet").hide();
}
});
});
//RESET PASSWORD ACCESS
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-3d") {
$("#otherFieldGroupResPass").show();
} else {
$("#otherFieldGroupResPass").hide();
}
});
});
//VAPLO NEW ACCOUNT SCRIPT//
$(function() {
$("#select-2").change(function() {
if ($(this).val() == "option-4a") {
$("#otherFieldGroupValpo").show();
} else {
$("#otherFieldGroupValpo").hide();
}
});
});
$(function() {
$('#select-4 option:not([default])').wrap('<span/>');
});
$('#select-3').change(function() {
$('#select-4 span > option').unwrap();
$('#select-4 option:not(.' + $('#select-3').val() + ', [default])').wrap('<span/>');
//console.log($('#select-2').val());
});
$('#select-4').trigger('change');
html,
body {
min-height: 100%;
}
body,
div,
form,
input,
label {
padding: 0;
margin: 0;
outline: none;
font-family: Roboto, Arial, sans-serif;
font-size: 14px;
color: #666;
line-height: 18px;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
h1 {
position: absolute;
margin: 0;
font-size: 36px;
color: #fff;
z-index: 2;
}
.testbox {
display: flex;
justify-content: center;
align-items: center;
height: inherit;
padding: 20px;
}
form {
width: 75%;
padding: 20px;
border-radius: 8px;
background: #fff;
box-shadow: 0 0 50px 0 #095484;
}
.banner {
position: relative;
height: 300px;
background-image: url("/Krishneel/Walgreens Logo's/Walgreens New Logo/banner.png");
background-size: cover;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.banner::after {
content: "";
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
}
input {
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
font-size: 15px;
font-weight: bold;
}
input {
width: calc(100% - 10px);
padding: 5px;
}
select {
width: 100%;
padding: 3px 0;
background: transparent;
font-size: 15px;
font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="testbox">
<form name="form" id="form" method="post" action="#" enctype="multipart/form-data">
<div class="banner">
<h1>                ID Request Form</h1>
</div>
<br>
<p>Please fill out with the information that is requested below and submit the id request form. Thank you!</p>
<div class="form-group">
<label>Request Type</label>
<select id="select-1" name="select-1" class="form-control w-100">
<option default>Choose a Category</option>
<option value="option-1">AS400</option>
<option value="option-2">Outlook</option>
<option value="option-3">Windows</option>
<option value="option-4">Valpo</option>
</select>
<br/>
<label>Choose a Sub-Category</label>
<select id="select-2" name="select-2" class="form-control w-100">
<option default>Choose a Sub-Category</option>
<option value="option-1a" class="option-1">AS400 New Account</option>
<option value="option-1b" class="option-1">Modify Account</option>
<option value="option-1c" class="option-1">Reset Password</option>
<option value="option-1d" class="option-1">Remove Password</option>
<option value="option-2a" class="option-2">Outlook New Account</option>
<option value="option-2b" class="option-2">Add to Distribution List</option>
<option value="option-3a" class="option-3">Windows New Account</option>
<option value="option-3b" class="option-3">K Drive and Group Access</option>
<option value="option-3c" class="option-3">DC Net</option>
<option value="option-3d" class="option-3">Password Reset</option>
<option value="option-4a" class="option-4">Valpo New Account</option>
</select>
</div>
<hr>
<!----------------------------------------------------- AS400 Account------------------------------------------->
<!--AS400 New Account-->
<div class="form-group" id="otherFieldGroupNewacc">
<h2>AS400 New Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestor">Requestor Full Name</label>
<input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userTM">Beneficiary (Full Name)</label>
<input type="text" class="form-control w-100" id="userTM" name="userTM" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployee">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployee" name="userEmployee" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="selectJob">New Job Category</label>
<select id="selectJob" name="selectJob" class="form-control w-100" placeholder="*Click in box for Job Category List*">
<option value="NO CHANGE">NO CHANGE</option>
<option value="ADMCLK = Admin Clerk">ADMCLK = Admin Clerk</option>
<option value="ADMCLK+ = Admin Clerk w/ Manual Book">ADMCLK+ = Admin Clerk w/ Manual Book</option>
<option value="ADMMGR = Admin MGR w/ Manual Book">ADMMGR = Admin MGR w/ Manual Book</option>
<option value="DCM = DC Manager">DCM = DC Manager</option>
<option value="FM IN = Inbound Funtion Manager">FM IN = Inbound Funtion Manager</option>
<option value="FM OUT = Outbound Funtion Manager">FM OUT = Outbound Funtion Manager</option>
</select>
</div>
<br>
<div class="col-6">
<label for="userNewAS400">New AS400 ID</label>
<input type="text" class="form-control w-100" id="userNewAS400" name="userNewAS400" placeholder="Type Here...">
</div>
</div>
</div>
<!--Modify AS400 Account-->
<div class="form-group" id="otherFieldGroupMod">
<h2>AS400 Modify Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestor">Requester (Full Name)</label>
<input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userTM">Beneficiary (Full Name)</label>
<input type="text" class="form-control w-100" id="userTM" NAME="userTM" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployee">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployee" name="userEmployee" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userAS400">AS400 ID</label>
<input type="text" class="form-control w-100" id="userAS400" name="userAS400" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="selectJobs">New Job Category></label>
<select id="selectJobs" name="selectJobs" class="form-control w-100" placeholder="*Click in box for Job Category List*">
<option value="NO CHANGE">NO CHANGE</option>
<option value="ADMCLK = Admin Clerk">ADMCLK = Admin Clerk</option>
<option value="ADMCLK+ = Admin Clerk w/ Manual Book">ADMCLK+ = Admin Clerk w/ Manual Book</option>
<option value="ADMMGR = Admin MGR w/ Manual Book">ADMMGR = Admin MGR w/ Manual Book</option>
<option value="DCM = DC Manager">DCM = DC Manager</option>
<option value="FM IN = Inbound Funtion Manager">FM IN = Inbound Funtion Manager</option>
<option value="FM OUT = Outbound Funtion Manager">FM OUT = Outbound Funtion Manager</option>
<option value="FM LC = Location Control Function Manager">FM LC = Location Control Function Manager</option>
</select>
</div>
<br>
<div class="col-6">
<label for="userNewAS400">New AS400 ID</label>
<input type="text" class="form-control w-100" id="userNewAS400" name="userNewAS400" placeholder="Type Here...">
</div>
</div>
</div>
<!--Reinstate AS400 Account-->
<div class="form-group" id="otherFieldGroupRes">
<h2>AS400 Reinstate Password</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestor">Requester (Full Name)</label>
<input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userTM">Beneficiary (Full Name)</label>
<input type="text" class="form-control w-100" id="userTM" NAME="userTM" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployee">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployee" name="userEmployee" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userAS400">AS400 ID</label>
<input type="text" class="form-control w-100" id="userAS400" name="userAS400" placeholder="Type Here...">
</div>
</div>
</div>
<!--Remove AS400 Account-->
<div class="form-group" id="otherFieldGroupRem">
<h2>Remove AS400 Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestor">Requester (Full Name)</label>
<input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="userTM">Terminated TM (Full Name)</label>
<input type="text" class="form-control w-100" id="userTM" NAME="userTM" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="userEmployee">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployee" name="userEmployee" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="userAS400">AS400 ID</label>
<input type="text" class="form-control w-100" id="userAS400" name="userAS400" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label for="hideInput">Reason</label>
<input type="text" id="hideInput" value="No Longer With The Company!">
</div>
</div>
</div>
<!---Outlook Account---->
<!--New Account-->
<div class="form-group" id="otherFieldGroupOutacc">
<h2>Outlook New Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestor">Full Name</label>
<input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployee">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployee" name="userEmployee" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="useroneID">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="useroneID" name="useroneID" placeholder="Type Here...">
</div>
<br><br>
</div>
</div>
<!--Add to Distribution List-->
<div class="form-group" id="outlookAccountDistri">
<h2>Add to Distribution List</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestor">Full Name</label>
<input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="useroneID">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="useroneID" name="useroneID" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="select-5">Select a Distribution List</label>
<select id="select-5" name="select-5" class="form-control w-100" placeholder="*Click in box for Distribution List*">
<option default>Choose a Distribution List</option>
<option value="WoodlandDInsuffAitems">WoodlandDInsuffAitems</option>
<option value="WoodlandOutboundManagers">WoodlandOutboundManagers</option>
<option value="WoodlandSrManagers">WoodlandSrManagers</option>
<option value="WoodlandExpiredItems">WoodlandExpiredItems</option>
<option value="WoodlandFleetManagers">WoodlandFleetManagers</option>
</select>
</div>
</div>
</div>
<!--Windows New Account-->
<div class="form-group" id="otherFieldGroupWinacc">
<h2>Windows New Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestor">Full Name</label>
<input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployee">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployee" name="userEmployee" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="useroneID">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="useroneID" name="useroneID" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userMirror"> Mirror Account ONE ID</label>
<input type="text" class="form-control w-100" id="userMirror" name="userMirror" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userComment">Comments</label>
<input type="text" class="form-control w-100" id="userComment" name="userComment" placeholder="Type Here...">
</div>
</div>
</div>
<!--K Drive and Group Access-->
<div class="form-group" id="otherFieldGroupKdrive">
<h2>K Drive and Group Access</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestor">Full Name</label>
<input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployee">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployee" name="userEmployee" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="useroneID">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="useroneID" name="useroneID" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userMirror"> Mirror Account ONE ID</label>
<input type="text" class="form-control w-100" id="userMirror" name="userMirror" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userComment">Comments</label>
<input type="text" class="form-control w-100" id="userComment" name="userComment" placeholder="Type Here...">
</div>
</div>
</div>
<!--DC Net Access-->
<div class="form-group" id="otherFieldGroupDcnet">
<h2>DC Net Access</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestor">Full Name</label>
<input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployee">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployee" name="userEmployee" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="useroneID">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="useroneID" name="useroneID" placeholder="Type Here...">
</div>
<br>
<div class="col-6">
<label> Select your Job Title</label>
<select id="select-3" name="select-3" class="form-control w-100">
<option default>Select an option</option>
<option value="option-1">TM</option>
<option value="option-2">DCS</option>
<option value="option-3">AP Officer</option>
<option value="option-4">IO</option>
<option value="option-5">AGM</option>
<option value="option-6">GM</option>
<option value="option-7">IT Support</option>
</select>
<br><br>
<select id="select-4" name="select-4" class="form-control w-100">
<option default>Select your Department & Shift</option>
<option value="option-1a" class="option-1">Cost Recovery</option>
<option value="option-1b" class="option-1">Lean Captain</option>
<option value="option-2a" class="option-2">SC-AM</option>
<option value="option-2b" class="option-2">SC-PM</option>
<option value="option-2c" class="option-2">FC-AM</option>
<option value="option-2d" class="option-2">FC-PM</option>
<option value="option-2e" class="option-2">INB-AM</option>
<option value="option-2f" class="option-2">INB-PM</option>
<option value="option-2g" class="option-2">Shipping-AM</option>
<option value="option-2h" class="option-2">Shipping-PM</option>
</select>
</div>
</div>
</div>
<!--Password Access-->
<div class="form-group" id="otherFieldGroupResPass">
<h2>Reset Windows Password</h2>
<hr>
<div class="col-6">
<label for="otherField11">Click the link for Reset Password Help</label>
Password Resets & Account Unlocks for Direct Reports
</div>
</div>
<!--New Account-->
<div class="form-group" id="otherFieldGroupValpo">
<h2>Valpo New Account</h2>
<hr>
<div class="row">
<div class="col-6">
<label for="userRequestor">Full Name</label>
<input type="text" class="form-control w-100" id="userRequestor" name="userRequestor" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userEmployee">Employee ID</label>
<input type="text" class="form-control w-100" id="userEmployee" name="userEmployee" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="useroneID">ONE ID (Formally Authenticator ID)</label>
<input type="text" class="form-control w-100" id="useroneID" name="useroneID" placeholder="Type Here...">
</div>
<br><br>
<div class="col-6">
<label for="userBadge">Badge Number</label>
<input type="text" class="form-control w-100" id="userBadge" name="userBadge" placeholder="Type Here...">
</div>
</div>
</div>
<!--Sending Email-->
<div class="form-group">
<div class="row">
<div class="col-6">
<label for="userEmail">Enter your Email</label>
<input type="text" class="form-control w-100" id="userEmail" name="userEmail" placeholder="Type Here...">
</div>
</div>
</div>
<input type="submit" name="send" class="btn-submit" value="Send" />
</form>
</div>

I want to create multiple forms based on the user input of a dropdown list

I want to create multiple forms based on user input of a dropdown list. For example, if the user selects 3, then I have to create 3 same forms, one after another. I have the code below:
HTML code
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="selectPassegners">Select the number of passengers:</label>
<select class="form-control" id="passengersSelector">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
</div>
</div>
<button type="button" onclick="GetSelectedValue()" style="margin-left: 390px;">Get Selected Value</button>
<p id="result" style="text-align: center;"></p>
<div class="container" id="outside-container">
<div class="row">
<div class="col-md-12">
<h1>Passenger Info</h1>
<p>Enter your personal info below. These data will be displayed on your ticket.</p>
<form id="lead-passenger" action="" method="post">
<div class="container" id="inside-container">
<h2>Passenger One (Lead passenger)</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="firstname">First name:</label>
<input type="text" class="form-control" id="firstname" name="firtName">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="lastname">Last name:</label>
<input type="text" class="form-control" id="lastname" name=lastName>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="ptitle">Sex:</label>
<select class="form-control" id="sel-title" name="sex">
<option style="display:none"></option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="birthday">Date of birth: </label>
<input type="date" class="form-control" name="birthday">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" class="form-control" id="phone" name="phone" pattern="[6]{1}-[9]{1}-[0-9]{8}">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="address">Address:</label>
<input type="text" class="form-control" id="address" name="address">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="city">City:</label>
<input type="text" class="form-control" id="city" name="city">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="address">Postal code:</label>
<input type="text" class="form-control" id="address" name="postalCode">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
And JS code I found that shows the result of the dropdown list
function GetSelectedValue() {
var e = document.getElementById("passengersSelector");
var numberOfPassengers = e.options[e.selectedIndex].value;
document.getElementById("result").innerHTML = "You selected " + numberOfPassengers + " passengers";
}
I am still a beginner, so any tips would be appreciated! :)

You can store the contents of your outside-container class in a separate variable. And depending on the user selection, add this variable that many times to the array.
const formMarkup = `<div class="row">
<div class="col-md-12">
<h1>Passenger Info</h1>
<p>Enter your personal info below. These data will be displayed on your ticket.</p>
<form id="lead-passenger" action="" method="post">
<div class="container" id="inside-container">
<h2>Passenger One (Lead passenger)</h2>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="firstname">First name:</label>
<input type="text" class="form-control" id="firstname" name="firtName">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="lastname">Last name:</label>
<input type="text" class="form-control" id="lastname" name=lastName>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="ptitle">Sex:</label>
<select class="form-control" id="sel-title" name="sex">
<option style="display:none"></option>
<option>Male</option>
<option>Female</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="birthday">Date of birth: </label>
<input type="date" class="form-control" name="birthday">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="phone">Phone:</label>
<input type="tel" class="form-control" id="phone" name="phone" pattern="[6]{1}-[9]{1}-[0-9]{8}">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" name="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label for="address">Address:</label>
<input type="text" class="form-control" id="address" name="address">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="city">City:</label>
<input type="text" class="form-control" id="city" name="city">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="address">Postal code:</label>
<input type="text" class="form-control" id="address" name="postalCode">
</div>
</div>
</div>
</div>
</form>
</div>
</div>`
And then
function GetSelectedValue() {
var e = document.getElementById("passengersSelector");
var numberOfPassengers = e.options[e.selectedIndex].value;
var result = [];
for(var i=0; i < numberOfPassengers; i++) {
result.push(formMarkup);
}
document.getElementById("outside-container").innerHTML = result.join('');
}
Also, update your original markup to
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="selectPassegners">Select the number of passengers:</label>
<select class="form-control" id="passengersSelector">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
</div>
</div>
<button type="button" onclick="GetSelectedValue()" style="margin-left: 390px;">Get Selected Value</button>
<p id="result" style="text-align: center;"></p>
<div class="container" id="outside-container">
</div>

how to make dots little bigger in the slideshow of forms?

I am working on making slideshow of forms and it is working fine. As you can see if I click those dots, it will open another form. I have change the transition from top to bottom after I click the dots and here is my codepen link.
In my above codepen link, somehow my dots became very small. Check my original codepen link. In this my dots are big and properly spaced as well. I want to make my dots something like that. What is wrong in my fist codepen link and how can I make dots bigger.
Below is my code:
<html>
<head>
<meta charset="utf-8">
<title>SlidesJS Standard Code Example</title>
<meta name="description" content="SlidesJS is a simple slideshow plugin for jQuery. Packed with a useful set of features to help novice and advanced developers alike create elegant and user-friendly slideshows.">
<meta name="author" content="Nathan Searles">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="topnav">
<img src="https://s4.postimg.org/ojd13poal/northman_wordmark_CMYK.png">
<nav>
<ul>
<li class="dropdown">
<b>INSURANCE</b> <i class="fa fa-angle-down"></i>
<ul class="dropdown-content">
<li><i>INDIVIDUAL</i>
</li>
<li><i>CORPORATE</i>
</li>
</ul>
</li>
<li class="our-story">OUR STORY</li>
<li class="login-signup">Log In | Sign up</li>
<li class="get-covered">GET <strong style="font-style:italic">COVERED</strong>
</li>
</ul>
</nav>
</div>
<div class="container">
<h3>INSURANCE FORM</h3>
<h4><i>BASIC DETAILS</i></h4>
<br>
<div id="slides" class="container-fluid" >
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 1">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
<form action="/action_page.php" class="form-horizontal">
<div class="form-group">
<div class="col-sm-6">
<label>FIRST NAME</label>
<input type="text" class="form-control" name="fname" value="Mickey 2">
</div>
<div class="col-sm-6">
<label>LAST NAME</label>
<input type="text" class="form-control" name="lname" value="Mouse">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>EMAIL</label>
<input type="text" class="form-control" name="email" value="abc#host.com">
</div>
<div class="col-sm-6">
<label>PHONE NUMBER</label>
<input type="text" class="form-control" name="number" value="123-456-789">
</div>
</div>
<div class="form-group">
<div class="col-sm-6">
<label>COUNTRY</label>
<select name="country" class="form-control">
<option value="canada">Canada</option>
</select>
</div>
<div class="col-sm-3">
<label>PROVINCE</label>
<select name="province" class="form-control">
<option value="ontario">ONTARIO</option>
</select>
</div>
<div class="col-sm-3">
<label>CITY</label>
<select name="city" class="form-control">
<option value="ottawa">OTTAWA</option>
</select>
</div>
</div>
</form>
</div>
</div>
</body>
</html>

You're using <li>'s bullet points, you can edit it changing the font-size, try :
.slick-dots li {font-size:22px;}
Since you also need to be able to edit the space inbetween each bullet and make each of them look empty you can use :
.slick-dots li {
font-size:22px;
margin: -5px 0px;
list-style-type:circle;
}
.slick-dots li.slick-active {
color: black;
list-style-type: initial;
}

this will help you to change the size of the bullets:
<style>
li{list-style-type:none;}
li:before{content:'\00b7'; font-size:30px; line-height:24px; vertical-align:middle;}
</style>
If my answer helps you, please vote+1 my answer!

Select option form not work in master slider?

My demo at here: http://project.bulleno.com/dwi/index2.html
In my demo, the select option of other form work well, but the select of form on slider not work and I cannot figure out and solve it.
I think it is conflict with jquery from master slider and smart form. But I cannot troubleshoot it. So I need help and any help is greatly appreciated. You can check my code below:
<div class="ms-slide slide-1" data-delay="9">
<div class="slide-pattern"></div>
<img src="js/masterslider/blank.gif" data-src="images/slide3.jpg" alt="" />
<h3 class="ms-layer text31 text-center"
style="top: 230px; right: 230px;"
data-type="text"
data-delay="500"
data-ease="easeOutExpo"
data-duration="1230"
data-effect="top(250)">Welcome To DidYouBlow</h3>
<h3 class="ms-layer text36 text-center"
style="top: 20px; right: -900px;"
data-type="text"
data-delay="0"
data-ease="easeOutExpo"
data-duration="1230"
data-effect="top(250)">
<div class="col-md-4 col-sm-6 col-sm-6 col-xs-12 bmargin">
<span class="visible-lg">
<div class="feature-box57 bmargin">
<br />
<font color="000000"><i class="fa fa-university"></i><font size="+2">Submit DWI INFO</font><i class="fa fa-university"></i></font>
<form method="post" action="send.php" id="">
<div class="clearfix"></div>
<br>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Full Name">
</div>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Phone Number">
</div>
<div class="clearfix"></div>
<br>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Email">
</div>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="City / Court">
</div>
<div class="clearfix"></div>
<br>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Name">
</div>
<div class="col-sm-5">
<input class="form-control" type="text" name="Name" placeholder="Name">
</div>
<div class="clearfix"></div>
<br>
<div class="col-sm-5">
<label for="month" class="field select">
<select id="month" name="month">
<option value="">How Did You Hear About Us?</option>
<option value="Facebook">Facebook</option>
<option value="Google">Google</option>
<option value="Yahoo">Yahoo</option>
<option value="Mailer">Mailer</option>
<option value="Radio">Radio</option>
<option value="Bing">Bing</option>
<option value="Referral">Referral</option>
</select>
<i class="arrow double"></i>
</label>
</div>
<div class="col-sm-5">
<label for="month" class="field select">
<select id="month" name="month">
<option value="">How Did You Hear About Us?</option>
<option value="Facebook">Facebook</option>
<option value="Google">Google</option>
<option value="Yahoo">Yahoo</option>
<option value="Mailer">Mailer</option>
<option value="Radio">Radio</option>
<option value="Bing">Bing</option>
<option value="Referral">Referral</option>
</select>
<i class="arrow double"></i>
</label>
</div>
<div class="clearfix"></div>
<br>
<div class="col-sm-11">
<textarea class="form-control" id="sendermessage" name="sendermessage" placeholder="Enter message"></textarea>
</div>
<div class="clearfix"></div>
<br>
<button type="submit" class="btn btn-dark-2 less-round less-padding">Submit Information</button>
</div>
</form>
</div>
</span>
</h3>
</div>

The problem cause this matter is: mouse and loop option in master slider.
I had disable both options and everything work well.

HTML 5 / CSS button beside dropdown list

I'm trying to add a submit button beside my select option drop down menu. I can't seem to get to align properly above the message box.
It sits in a basic div but didn't think it was needed.
<form id="contact-form">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<h5>Join us now</h5>
<div class="form-group">
<label for="subject">
Select Option</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
<label for="name">
Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" /></div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="name">
Message</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-skin pull-right" id="btnContactUs">
Send Message</button>
</div>
</div>
</form>

I modified the rows and columns in your code, you can find it in this JSFiddle , hope this helps.
<form id="contact-form">
<div class="row">
<div class="col-md-6 col-xs-6">
<h5>Join us now</h5>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="subject">
Select Option
</label>
<select id="subject" name="subject" class="form-control" required="required">
<option value="na" selected="">Choose One:</option>
<option value="service">Nutritional Support</option>
<option value="suggestions">Nutritional Support and Exercise Pescription</option>
<option value="product">Single Nutrition or Exercise Plan</option>
</select>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<button type="submit" class="btn btn-skin pull-right buttonTest" id="btnContactUs">
Send Message
</button>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Name
</label>
<input type="text" class="form-control" id="name" placeholder="Enter name" required="required" />
</div>
<div class="form-group">
<label for="email">
Email Address
</label>
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-envelope"></span>
</span>
<input type="email" class="form-control" id="email" placeholder="Enter email" required="required" />
</div>
</div>
</div>
<div class="col-md-6 col-xs-6">
<div class="form-group">
<label for="name">
Message
</label>
<textarea name="message" id="message" class="form-control" rows="9" cols="25" required="required"
placeholder="Message"></textarea>
</div>
</div>
</div>
</div>
</div>

Categories

Resources