Sanwebcorner | Programming Blog

Multi Level Dropdown Menu using Css and Javascript

Today we are going to see about how to create multilevel dropdown menu using simple Css, Html and JavaScript code. This is one of the useful code we can use this code for your website menu without any difficulty. Now a days lot of website having the more pages with links, when you can display all the links in the menu you are facing some difficulties but this types of multi-level-drop-down menu is easily reduce your difficulties. This types of menu structure is commonly used one. The additionally it supports responsive. It is properly displayed all the devices like Mobile, Tab, Laptop, Desktops.

In this example i used the menus like below. First you should include the meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> Because then only it detects the device for responsive menu otherwise it will not work.

Set the Navigation bar:

#nav {
position: relative;
min-height: 60px;
max-width: 100%;
background-color: transparent !important;
color: #000;
}

This code is helps to set the Navigation bar, You can also customize the min-height and max-width according to the your website layout. Then the media screen you can write the respective code to display the menu perfectly. The below is the media query code. 






Full Code for Multi Level Dropdown Menu using Css:


<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Multi Level Dropdown menu using css and javascript</title>

<style>
html { font-family: 'roboto', sans-serif; }

.container {
width: 90%;
margin: 10vh auto;
}

a { color: inherit; }

#nav, #nav ul, #nav li {
margin: 0;
padding: 0;
border: 0;
list-style: none;
box-sizing: border-box;
}

#nav {
position: relative;
min-height: 60px;
max-width: 100%;
background-color: transparent !important;
color: #000;
}
@media screen and (min-width: 650px) {

#nav { display: inline-block; }
}
@media screen and (max-width: 650px) {

#nav { display: block; }
}

#nav li { position: relative; }

#nav a {
text-decoration: none;
height: 100%;
display: block;
padding: 0 50px;
}
@media screen and (min-width: 650px) {

#nav a:focus { outline: none; }
}

.plusMark {
margin-left: 10px;
font-size: 20px;
font-weight: 700;
}
@media screen and (min-width: 650px) {

#nav li {
text-align: left;
width: 200px;
}
}
@media screen and (max-width: 650px) {

#nav li {
text-align: center;
width: 100%;
}
}


@media screen and (min-width: 650px) {

a + ul { position: absolute; }

a + ul:not(.js-showElement) { display: none; }
}
@media screen and (max-width: 650px) {

a + ul { position: relative; }

a + ul:not(.js-hideElement) { display: block; }
}

#nav > ul, .fa {
height: 100%;
line-height: 60px;
}

#nav > ul > li {
position: relative;
text-align: center;
line-height: 60px;
}
@media screen and (min-width: 650px) {

#nav > ul > li {
float: left;
width: auto;
}
}
@media screen and (max-width: 650px) {

#nav > ul > li {
float: none;
display: block;
width: 100%;
}
}

#nav > ul > li > a { background-color: transparent !important; }

#nav > ul > li > a:hover, #nav > ul > li > a:focus, #nav > ul > li > a.js-openSubMenu { background-color: #D35400; color:#007bff; }
@media screen and (min-width: 650px) {

#nav > ul > li: not(: last-child) {
border-right: 1px solid #D35400;
border-bottom: none;
}
}
@media screen and (max-width: 650px) {

#nav > ul > li: not(: last-child) { border-right: none; }

#nav > ul > li:not(:last-child):not(:first-child) { border-bottom: 1px solid #D35400; }
}

#nav > ul > li:not(#toggleMenu):not(.js-showElement) {  }

@media screen and (min-width: 650px) {

#nav > ul > li: not(#toggleMenu): not(.js-showElement) { display: inline-block; }
}
@media screen and (max-width: 650px) {

#nav > ul > li: not(#toggleMenu): not(.js-showElement) { display: none; }
}
@media screen and (min-width: 650px) {

#nav #toggleMenu { display: none; }
}
@media screen and (max-width: 650px) {

#nav #toggleMenu {
display: block;
width: 100%;
}

#nav #toggleMenu.js-open { border-bottom: 1px solid #D35400; }

#nav #toggleMenu.js-open .fa-times { display: block; }

#nav #toggleMenu.js-open .fa-bars { display: none; }

#nav #toggleMenu.js-open a { background-color: #D35400; }

#nav #toggleMenu:not(.js-open) .fa-times { display: none; }

#nav #toggleMenu:not(.js-open) .fa-bars { display: block; }
}

span#toggleMenu-text {
position: absolute;
opacity: 0;
}

#nav > ul > li > ul { background-color: #D35400; }
@media screen and (min-width: 650px) {

#nav > ul > li > ul {
top: 60px;
left: 0;
}
}
@media screen and (max-width: 650px) {

#nav > ul > li > ul {
width: 100%;
position: relative;
}

#nav > ul > li > ul:not(.js-showElement) { display: none; }
}

#nav > ul > li > ul > li > a {     background-color: #F5F5F5;
border: 1px solid #ECECEC; }

#nav > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > a:focus { color:#007bff; }

#nav > ul > li > ul > li:not(:last-child) a {  }


@media screen and (min-width: 650px) {

#nav > ul > li > ul > li > ul {
top: 0;
left: 200px;
}
}
@media screen and (max-width: 650px) {

#nav > ul > li > ul > li > ul {
width: 100%;
position: relative;
}

#nav > ul > li > ul > li > ul:not(.js-showElement) { display: none; }
}

#nav > ul > li > ul > li > ul > li > a { background-color: #E67E22; }

#nav > ul > li > ul > li > ul > li > a:hover, #nav > ul > li > ul > li > ul > li > a:focus { background-color: #D35400; }

#nav > ul > li > ul > li > ul > li:not(:last-child) > a { border-bottom: 1px solid #D35400; }

#nav .js-hideElement { display: none; }

#nav .js-showElement { display: block; }

html.no-js li:hover > a + ul, html.no-js li:focus > a + ul { display: block; }
@media screen and (max-width: 650px) {

html.no-js #nav: hover > ul > li: not(#toggleMenu), html.no-js #nav: focus > ul > li: not(#toggleMenu) { display: block; }

html.no-js #nav:hover li:hover > a + ul, html.no-js #nav:hover li:focus > a + ul, html.no-js #nav:focus li:hover > a + ul, html.no-js #nav:focus li:focus > a + ul { display: block; }
}
</style>
</head>
<body>
<nav id="nav">
<ul>

<!-- Menu tooggle on smaller screens  -->
<li id="toggleMenu"> <a href="/sitemap.html"> <i class="fa fa-bars"></i> <i class="fa fa-times"></i>
<span id="toggleMenu-text"></span> </a> </li>
<li> <a href="#">We</a>
<ul>
<li><a href="#">Who we are</a></li>
</ul>
</li>
<li> <a href="#">Connect</a>
<ul>
<li><a href="#">Products</a></li>
<li><a href="#">Contact</a></li>
<li> <a href="#">Services</a>
<ul>
<li><a href="#">Stall Design</a></li>
<li><a href="#">Stall Exibition</a></li>
</ul>
</li>
</ul>
</li>



<li> <a href="">Client</a>
<ul>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Testimonials</a></li>
</ul>
</li>


</ul>
</nav>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
$(document).ready(function() {

// Remove no-js class
$('html').removeClass('no-js');

$('#toggleMenu').on('click', function() {

if ($(this).hasClass('js-open')) {

$('#nav > ul > li:not(#toggleMenu)').removeClass('js-showElement');
$(this).removeClass('js-open');

} else {

$('#nav > ul > li:not(#toggleMenu)').addClass('js-showElement');
$(this).addClass('js-open');

}

return false;
})

// Add plus mark to li that have a sub menu


// sub menu
// ------------------------

// When interacting with a li that has a sub menu
$('li:has("ul")').on('mouseover keyup click mouseleave', function(e) {

// If either -
// tabbing into the li that has a sub menu
// hovering over the li that has a sub menu
if (e.keyCode === 9 | e.type === 'mouseover') {

// Show sub menu
$(this).children('ul').removeClass('js-hideElement');
$(this).children('ul').addClass('js-showElement');
}

// If mouse leaves li that has sub menu
if (e.type === 'mouseleave') {

// hide sub menu
$(this).children('ul').removeClass('js-showElement');
$(this).children('ul').addClass('js-hideElement');
}

// If clicking on li that has a sub menu
if (e.type === 'click') {

// If sub menu is already open
if ($(this).children('a').hasClass('js-openSubMenu')) {

// remove Open class
$(this).children('a').removeClass('js-openSubMenu');

// Hide sub menu
$(this).children('ul').removeClass('js-showElement');
$(this).children('ul').addClass('js-hideElement');

// If sub menu is closed
} else {

// add Open class
$(this).children('a').addClass('js-openSubMenu');

// Show sub menu
$(this).children('ul').removeClass('js-hideElement');
$(this).children('ul').addClass('js-showElement');

}

return false;

} // end click event

});

// Tabbing through Levels of sub menu
// ------------------------

// If key is pressed while on the last link in a sub menu
$('li > ul > li:last-child > a').on('keydown', function(e) {

// If tabbing out of the last link in a sub menu AND not tabbing into another sub menu
if ((e.keyCode == 9) && $(this).parent('li').children('ul').length == 0) {

// Close this sub menu
$(this).parent('li').parent('ul').removeClass('js-showElement');
$(this).parent('li').parent('ul').addClass('js-hideElement');

// If tabbing out of a third level sub menu and there are no other links in the parent (level 2) sub menu
if ($(this).parent('li').parent('ul').parent('li').parent('ul').parent('li').children('ul').length > 0 && $(this).parent('li').parent('ul').parent('li').is(':last-child')) {

// Close the parent sub menu (level 2) as well
$(this).parent('li').parent('ul').parent('li').parent('ul').removeClass('js-showElement');
$(this).parent('li').parent('ul').parent('li').parent('ul').addClass('js-hideElement');
}

}

})

})
</script>
</body>
</html>

Here i provided the full code and the demo page. Please check the demo button below to check the menu live. And also you can download full code by clicking the download button below. I hope this code is very useful.

 

How to Delete data from table using php and mysql

Here is the code to display the data from the table using php and mysql. This simple code is used to delete the record you choose.You can create the database and table. Here i created database name is oops and the table name is called as a oop. And the table fields are name, lname, salary. The below code helps you to display the table information in the format of table with the delete option. When you click the delete it takes the particular id and moves to the delete.php file, In the delete.php file haves the code to delete the particular row based on the id you chosen from the table. I hope this is very useful to you and this is one of the simple concept in php.


delete-data-from-table-php-mysql



index.php

<?php
$con=mysqli_connect("localhost","root","","oops");
$sql="select * from oop";
$result=mysqli_query($con,$sql);
echo "<table><tr><th>Name</th><th>Lname</th><th>Salary</th><th>Edit</th></tr>";
while($row=mysqli_fetch_assoc($result)){

echo "<tr><td>".$row['fname']."</td>";
echo "<td>".$row['lname']."</td>";
echo "<td>".$row['salary']."</td>";
echo "<td><a href='delete.php?id=".$row['id']."'>Delete</a></td>";
}
echo "</tr></table>";
?>



delete.php

<?php
$con=mysqli_connect("localhost","root","","oops");
$id=$_GET['id'];
$query="delete  from oop where id=$id";
$sql=mysqli_query($con,$query);
header("Location: view.php");
?>

How to create simple coming soon page

Simple website always looks nice and very professional . Here we will see how to create very simple coming soon page for your website. It is very easy to create the coming soon page using simple html and css code. Take on simple icon related to the coming soon page and put it in to the center of the page using css code like 

.holder{
width: 480px;
text-align: center;
margin: 0 auto;
padding-top: 120px;
}

Then give your coming soon text in header tag. The simple coming soon page is ready. This is very simple and neat. I hope this page is very useful to you. You can use this page to your websites. I given the full html code here you can copy paste the code and change the image. or you can download the full code from here by pressing download button.




<!DOCTYPE html>
<html lang="en">
<head>
<title>Coming Soon Page</title>
<meta charset="UTF-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="description">
<link href="https://fonts.googleapis.com/css?family=Neuton|Roboto" rel="stylesheet">
<style>
.holder{
width: 480px;
text-align: center;
margin: 0 auto;
padding-top: 120px;
}
.holder h1 {
font-family: 'loveloblack', sans-serif;
font-size:5em;
color:#2d2d2d;
text-shadow: 3px 3px 0 #e3e3e3;
line-height: 27px;
margin-top: 12px;
margin-bottom: 10px;
}
.holder h1 span.tbl{
font-family: Dosis,Tahoma,sans-serif;
font-size:35px;
color:#2d2d2d;
line-height:1em;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.3);
}
.holder h1 span {
font-family: Dosis,Tahoma,sans-serif;
font-size:1em;
color:#3d9df8;
line-height:1em;
font-weight: bold;
letter-spacing: -1px;
line-height: 1;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.3);
}
p{
font-size: 18px;
font-weight: 600;
color: #13447E;
font-family: 'Neuton', serif;
}
</style>
</head>
<body>
<div class="holder">
<img src="Coming-Soon-Icon.png" style="width:250px;" />
<h1><span class="tbl">Our Website is Coming Soon.</span></h1>
<p><span class="tbl">We'll be back shortly.</span></p><br>
<br />
</div>
</body>
</html>

Create Auto complete to Input field without database Jquery

Auto complete system one of the simple thing, It will done by using Jquery. Now we will see how to create auto complete process to the input field by using manually given keyword by the programmer. This process is very useful to the user. When user types the keyword it automatically shows the suggestion tho the used based on the given keyword.

 There is two ways to complete this process one is auto complete based on the database data and another one is based on the given keyword.For this concept there is no need any database. In previous session i showed you here how to create auto complete system with database. I hope this below example will help you. Check out my demo page in below link.



<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
var availableTags = [
"ActionScript",
"Html",
"Css",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( ".san" ).autocomplete({
source: availableTags
});
} );
</script>

<style>
.san{
width:100%;
border:1px solid red;
height:35px;
max-width:300px;
margin:0 auto;
display:block;
}

.content{
width:500px;
margin:0 auto;
background-color: #588659;
padding: 65px 35px;
}
</style>
</head>
<body>
<div class="content">
<h2 style="color:#fff; text-align:center;">Auto complete System without database using jQuery</h2>
<input class="san">
<p style="color:#fff; text-align:center;">www.sanwebcorner.com</p>
</div>
</body>
</html>

How to Animate gradient Text using pure css

This is one of the css3 trick to Animate the gradient text. This is one of the interesting concept and this will be done by using the html and css3 code. First we should give the gradient colors for the text using the following code. background: linear-gradient(to right, #FF3202 20%, #FF6E02 40%, #FF6E02 60%, #FF3202 80%); you can change the gradient color according to your choice. In this example i privided light orange and red color for gradient. Then will give the position for this gradient using the below code.background-position: 200% center; and then give the animation for the background using below code animation: shine 3s linear infinite; 

This is the process to generate the animated gradient text using css3 and html. I hope this example is very useful and also very simple to create. Here i provided the demo page, check out the demo page for this effect. And also have the code you can download and use this code for your projects.




Code for Animate gradient text using Css:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>How to Animate gradient Text using pure css</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:900" rel="stylesheet">
<style>
html {
height: 100%;
}
body {
background: #333;
text-align: center;
min-height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: 'Roboto', sans-serif;
}
h1 {
font-size: 100px;
text-transform:uppercase;
}
.linear-wipe {
text-align: center;
background: -webkit-gradient(linear, left top, right top, color-stop(20%, #FF3202), color-stop(40%, #FF6E02), color-stop(60%, #FF6E02), color-stop(80%, #FF3202));
background: linear-gradient(to right, #FF3202 20%, #FF6E02 40%, #FF6E02 60%, #FF3202 80%);
background-size: 200% auto;
color: #000;
background-clip: text;
text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: shine 3s linear infinite;
animation: shine 3s linear infinite;
}
@-webkit-keyframes shine {
to {
background-position: 200% center;
}
}
@keyframes shine {
to {
background-position: 200% center;
}
}
</style>
</head>
<body>
<h2>How to Animate gradient Text using pure css</h2>
<h1 class="linear-wipe">sanwebcorner</h1>
</body>
</html>

How to generate random password using php

In this program we are going to see how to generate random password using php. This is the php concept to generate random password with given character like abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-=+? you can give the any character like that. str_shuffle() is a php function is used to shuffle the given character. You can also mention how many digits you want. In this example i given 8 character length. You should provide according to your choice.

Here when you refresh the page using refresh button the password will be change. The password dynamically changed when you refresh the page. This is one of the old concept to generate the password but still is useful. Please check out the demo page and download the code from here. I hope this concept will useful somewhere in the programs. 

Code for Create random Password using PHP:

<html>
<head>
<title>Generate random password using php</title>
<style>
.san{
margin: 40px;
border: 1px solid #3A3737;
width: 355px;
padding: 16px;
font-size: 30px;
font-weight: bold;
float:left;
}
</style>
</head>
<body>
<?php
function random_password_generate($length) 
{
$chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()-=+?";
$password = substr(str_shuffle( $chars ),0, $length );
return $password;
}
$password = random_password_generate(8);?>
<h2 style="float:left; margin:40px;  padding: 21px 0px;"> Password: </h2> &nbsp; <div class="san">
<?php echo $password;?>
</div>
<input type="button" value="Refresh Page" onClick="window.location.reload()" style="float:left; margin:49px 40px;  padding: 15px;">
</body>
</html>

3D Drop Shadow for text using pure css

This is one of the simple concept using css3 code. It is just drop the shadow to the text for 3D Effect. 3D text always looking good and attractive to everyone. So you can use this for your headings to attractive your contents to the clients. This is very easy to drop the shadow with the help of css3. You can drop the shadow to the text using the following simple code.

text-shadow:     0 1px 0 hsl(174,5%,80%),
0 2px 0 hsl(174,5%,75%),
0 3px 0 hsl(174,5%,70%),
0 4px 0 hsl(174,5%,66%),
0 5px 0 hsl(174,5%,64%),
0 6px 0 hsl(174,5%,62%),
0 7px 0 hsl(174,5%,61%),
0 8px 0 hsl(174,5%,60%),

0 0 5px rgba(0,0,0,.05),
0 1px 3px rgba(0,0,0,.2),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.2),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.3);

You can change the color of the codes and shadow colors according to your choice. Here is the demo page of this example you can visit the demo page for this 3d text, and also download the code from here. I hope this simple  concept is very useful to you.



To Drop Shadow to Text for 3D Effect:

<html>
<head>
<title>Drop shadow for 3d text</title>
<style>
body { font: 900 120px/1 'Source Sans Pro', Arial, sans-serif; background: #becccc; text-transform: uppercase; color: #fff; text-align: center; letter-spacing: -3px; padding-top: 10%; }

h1 {
position: absolute;
top: 35%;
width: 100%;
font-size:75px;

text-shadow:     0 1px 0 hsl(174,5%,80%),
0 2px 0 hsl(174,5%,75%),
0 3px 0 hsl(174,5%,70%),
0 4px 0 hsl(174,5%,66%),
0 5px 0 hsl(174,5%,64%),
0 6px 0 hsl(174,5%,62%),
0 7px 0 hsl(174,5%,61%),
0 8px 0 hsl(174,5%,60%),

0 0 5px rgba(0,0,0,.05),
0 1px 3px rgba(0,0,0,.2),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.2),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.3);
}
</style>
</head>
<body>
<h2>3D Drop Shadow for text using pure css </h2>
<h1>SAN WEB CORNER</h1>
</body>
</html>

How to Set Different Scroll speed for Divs using Css and Jquery

This is one of the interesting concept to set the different scroll speed for different div. When you scroll each of the div moves based on the scroll speed you mentioned. For that you should include the JQuery file in the programs. The following code used to set the scroll speed each of the div.

<div class="box" data-scroll-speed="5">HTML</div>
<div class="box" data-scroll-speed="3">CSS</div>
<div class="box" data-scroll-speed="7">JAVASCRIPT</div>
<div class="box" data-scroll-speed="4">JQUERY</div>

I hope this topic will useful to you. Here we have the full code and also available the demo link of this program. Please check out the demo link for set the different scroll speed for each div. This types of concept is very useful somewhere in the programs.

How to set Different Scroll time for each div :

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jQuery different scroll speeds</title>
<style>
body {
font-family: arial, sans-serif;
}
.content {
height: 9000px;
}
.wrapper {
display: -webkit-box;
display: -moz-box;
display: box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
-webkit-justify-content: center;
-moz-justify-content: center;
-ms-justify-content: center;
-o-justify-content: center;
justify-content: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-moz-box-align: center;
box-align: center;
-webkit-align-items: center;
-moz-align-items: center;
-ms-align-items: center;
-o-align-items: center;
align-items: center;
-ms-flex-align: center;
height: 100vh;
width: 100%;
position: fixed;
top: 0px;
left: 0px;
}

.box {
-webkit-box-flex: none;
-moz-box-flex: none;
box-flex: none;
-webkit-flex: none;
-moz-flex: none;
-ms-flex: none;
flex: none;
height: 150px;
width: 190px;
line-height: 150px;
text-align: center;
font-size: 25px;
color: #fff;
background: #ff8330;
margin:25px;
}
.box:nth-of-type(2) {
background: #E01B5D;
}
.box:nth-of-type(3) {
background: #179292;
}
.box:nth-of-type(4) {
background: #699817;
}
</style>
</head>
<body>
<div class="content">
<div class="wrapper">
<div class="box" data-scroll-speed="5">HTML</div>
<div class="box" data-scroll-speed="3">CSS</div>
<div class="box" data-scroll-speed="7">JAVASCRIPT</div>
<div class="box" data-scroll-speed="4">JQUERY</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>



Auto 3d rotate gallery image using pure css

In this topic will see how to create auto rotate 3D images with the help of pure css. This is one of the simple concept and easy to create we can use it to the gallery page for better view for the images. And also this is very attractive animation effect with pure css. Now will see how to create this effect.This concept is to rotate multiple images in the 3d effect without using any jquery and javascript. This will done by using pure css3 code. and we can use n number of images to in this concept by reducing the transform deg.

For carousel id we can set the following important css3 code like below to animate rotate effect
transform-style: preserve-3d;
animation: rotation 20s infinite linear;

Then set the transform degree for each image with 40 degree difference between each images like below
#carousel figure:nth-child(1) {transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
#carousel figure:nth-child(10){ transform: rotateY(360deg)translateZ(288px);}

then set the keyframe rotation from 0deg to 360deg . This all are very important points to be noted. Please check the below demopage to view the auto rotate 3d gallery images. And download the code from here and use it to your website. We can use this types of animation in gallery pages for our website. I hope this is very useful to you. 


Css for 3d rotate image:

.gallery{
margin: 4% auto;
width: 210px;
height: 140px;
position: relative;
perspective: 1000px;
}
#carousel{
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
animation: rotation 20s infinite linear;
}
#carousel:hover{
animation-play-state: paused;
}
#carousel figure{
display: block;
position: absolute;
width: 90%;
height: 78%;
left: 10px;
top: 10px;
background: black;
overflow: hidden;
border: solid 5px black;
}
#carousel figure:nth-child(1) {transform: rotateY(0deg) translateZ(288px);}
#carousel figure:nth-child(2) { transform: rotateY(40deg) translateZ(288px);}
#carousel figure:nth-child(3) { transform: rotateY(80deg) translateZ(288px);}
#carousel figure:nth-child(4) { transform: rotateY(120deg) translateZ(288px);}
#carousel figure:nth-child(5) { transform: rotateY(160deg) translateZ(288px);}
#carousel figure:nth-child(6) { transform: rotateY(200deg) translateZ(288px);}
#carousel figure:nth-child(7) { transform: rotateY(240deg) translateZ(288px);}
#carousel figure:nth-child(8) { transform: rotateY(280deg) translateZ(288px);}
#carousel figure:nth-child(9) { transform: rotateY(320deg) translateZ(288px);}
#carousel figure:nth-child(10){ transform: rotateY(360deg)translateZ(288px);}
#carousel img{
-webkit-filter: grayscale(1);
cursor: pointer;
transition: all .5s ease;
width:100%;
}
#carousel img:hover{
-webkit-filter: grayscale(0);
transform: scale(1.2,1.2);
}

@keyframes rotation{
from{
transform: rotateY(0deg);
}
to{
transform: rotateY(360deg);
}
}

Html code for 3d rotate image gallery:

<body>
<div class="div-center gallery">
<div id="carousel">
<figure><img src="p1.jpg" alt=""></figure>
<figure><img src="p2.jpg" alt=""></figure>
<figure><img src="p3.jpg" alt=""></figure>
<figure><img src="p4.jpg" alt=""></figure>
<figure><img src="p5.jpg" alt=""></figure>
<figure><img src="p6.jpg" alt=""></figure>
<figure><img src="p1.jpg" alt=""></figure>
<figure><img src="p2.jpg" alt=""></figure>
<figure><img src="p3.jpg" alt=""></figure>
<figure><img src="p4.jpg" alt=""></figure>
</div>
</div>
</body>

How to create 3(three) step registration form with JavaScript validation

This post helps you how to create simple and perfect 3 step form with Javscript validation using Css3 and Html.Now a days 3 step form is commonly used form in the webpages because it is very attractive one for the customers because it helps no need to scroll down for the bigger type forms. And also 3 step form is captured the information by the categories, And also this from contains the Progress bar in the top of the form it will done by using css3 and Jquery for user reference.

This simple attractive form will done by using css3 and html and validation purpose we used the JavaScript. The form is processed the validation step by step by clicking the next button. Here have a final step to verify the all of your form contents with your data. You can customize this form according to your project. I hope this tutorial  is very useful for the developers.


In this example i used the name, email and country in the first step if you clicked next button without any data you will get the validation error like the below screenshot.In the next step is username and password and confirmation password is given with JavaScript validation, the third step is verification step is to display all your Datas from the form.

This multiple step form is the responsive form it will fit all the device because its done by using bootstrap and html . This multi step form is used to reduce the webpage space as well the user attraction. The below example have the codes and demo page. Check the below demo page for your better understanding of this Three(3) Level form with validation.

multi-step-form-with-validation


Html Code Three step form with Validation:

<div class="container">
<br><br>
<form class="form-horizontal form">
<div class="col-md-8 col-md-offset-2">  
<div class="progress">
<div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>

<div class="box row-fluid">
<br>
<div class="step">
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input type="text" name="name" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="text" name="email" class="form-control" id="email" placeholder="email">
</div>
</div>
<div class="form-group">
<label for="country" class="col-sm-2 control-label">Country</label>
<div class="col-sm-10">
<select class="form-control" name="country" id="country">
<option value="">Select</option>
<option value="India">India</option>
<option value="Australia">Australia</option>
<option value="USA">USA</option>
<option value="Japan">Japan</option>
<option value="Singapore">Singapore</option>
<option value="Malaysia">Malaysia</option>
</select>
</div>
</div>
</div>
<div class="step">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">Username</label>
<div class="col-sm-10">
<input type="text" name="username" value="" class="form-control" id="username" placeholder="Username">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" name="password" value="" class="form-control" id="password" placeholder="Password">
</div>
</div>
<div class="form-group">
<label for="rpassword" class="col-sm-2 control-label">Retype Password</label>
<div class="col-sm-10">
<input type="password" name="rpassword" class="form-control" id="rpassword" placeholder="Retype password">
</div>
</div>  
</div>
<div class="step display">
<h4>Confirm Details</h4>
<div class="form-group">
<label class="col-sm-2 control-label">Name :</label>
<label class="col-md-10 control-label lbl" data-id="name"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Email :</label>
<label class="col-md-10 control-label lbl" data-id="email"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Country :</label>
<label class="col-md-10 control-label lbl" data-id="country"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Username :</label>
<label class="col-md-10 control-label lbl" data-id="username"></label>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password :</label>
<label class="col-md-10 control-label lbl" data-id="password"></label>
</div>
</div>

<div class="row">
<div class="col-sm-12">
<div class="pull-right">
<button type="button" class="action btn-sky text-capitalize back btn">Back</button>
<button type="button" class="action btn-sky text-capitalize next btn">Next</button>
<button type="button" class="action btn-hot text-capitalize submit btn">Submit</button>
</div>
</div>
</div>

</div>
<a style="color:#fff; float:right;" href="http://www.sanwebcorner.com/"><h3>www.sanwebcorner.com</h3></a>
</div>
</form>
</div>

Javascript for 3 step form with validation:

<script type="text/javascript">
$(document).ready(function(){
var current = 1;

widget      = $(".step");
btnnext     = $(".next");
btnback     = $(".back"); 
btnsubmit   = $(".submit");

// Init buttons and UI
widget.not(':eq(0)').hide();
hideButtons(current);
setProgress(current);

// Next button click action
btnnext.click(function(){
if(current < widget.length){
// Check validation
if($(".form").valid()){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})

// Submit button click
btnsubmit.click(function(){
alert("Submit button clicked");
});


// Back button click action
btnback.click(function(){
if(current > 1){
current = current - 2;
if(current < widget.length){
widget.show();
widget.not(':eq('+(current++)+')').hide();
setProgress(current);
}
}
hideButtons(current);
})

$('.form').validate({ // initialize plugin
ignore:":not(:visible)",
rules: {
name     : "required",
email    : {required : true, email:true},
country  : "required",
username : "required",
password : "required",
rpassword: { required : true, equalTo: "#password"},
},
});

});

// Change progress bar action
setProgress = function(currstep){
var percent = parseFloat(100 / widget.length) * currstep;
percent = percent.toFixed();
$(".progress-bar").css("width",percent+"%").html(percent+"%");
}

// Hide buttons according to the current step
hideButtons = function(current){
var limit = parseInt(widget.length); 

$(".action").hide();

if(current < limit) btnnext.show();
if(current > 1) btnback.show();
if (current == limit) { 
// Show entered values
$(".display label.lbl").each(function(){
$(this).html($("#"+$(this).data("id")).val());
});
btnnext.hide(); 
btnsubmit.show();
}
}
</script>