Sanwebcorner | Programming Blog

How to create statistic counter when scroll the page using Jquery and css

In this section will tell you how to create statistic counter while scroll the webpage. This section normally available for all types of websites. This is one of the animated counter section will easily explain the customers about our status. This pictorial representation is very attractive the customers. The counter animation will done by using javascript, Jquery and css. The fonts are font awesome icons.

For layout i am using the bootstrap here. This is one of the simple example shows how easy to create this types of animated circle counter using Jquery. You can customize this layout using the below simple css code. This types of sections are available most of the website to present the best information attractive animated manner.

This statistic counter is one of the simple animated counter. This counter will execute while scroll the website or view the particular animated section. This counter having the certain numeric value, the counter starts from number 0 and increase up to the specified value. You will specify the numeric value in the particular class called currency-count like this:

<span class="currency-count">530</span>

I hope this common below example is useful to you. Here i provided the demo link and full code to download. Checkout those pages. 







Styles for Stat counter while scroll:

<style>
html,
body {
  height: 100%;
  font-family: 'Open Sans', sans-serif;
}

.pb100 {
    padding-bottom: 100px;
}

.pt100 {
    padding-top: 100px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Lato', sans-serif;
    padding: 0;
    margin: 0;
}


.counter-section {
  background: url(bg.jpg);
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  background-size: cover;
}

.counter-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.89);
}

.count-items {
  text-align: center;
  padding: 50px 20px;
  border-radius: 100%;
  border-bottom: 3px dotted #666;
  border-top: 3px dotted #666;
}
.count-items:hover.count-items i{
  color: #ffaf53
}
.count-items:hover.count-items h2{
  color: #f35b68
}
.count-items i {
  color: #f35b68;
  font-size: 36px;
}

.count-items span {
  color: #fff;
  font-size: 36px;
  padding: 20px 0px;
  display: inherit;
  font-weight: 700;
}

.count-items h2 {
  font-size: 16px;
  color: #ffaf53;
}
.funfact {
  margin-top: 50px;
  text-align: right;
}

.funfact h2 {
    color: #ffaf53;
    font-size: 42px;
    font-weight: 700;
    position: relative;

}
.funfact h2:after {
position: absolute;
content: "";
width: 115px;
height: 2px;
background:#fff;
right: 0px;
bottom: -24px;


}
.funfact p {
  line-height: 24px;
  font-size: 16px;
  margin-top: 50px;
  color: #e1e1e1;
}
a.site-btn.transition-ease.quote-btn {
  padding:14px 28px;
  background: #f35b68;
}
.site-btn.header-quote-btn:hover {

    background: transparent;
    color: #252525;

}
.site-btn.header-quote-btn {
padding:14px 28px;
background: #f35b68;
  background: linear-gradient(to right, #f35b68, #ffaf53);
  margin-left: 20px;
text-transform: capitalize;
background-origin: border-box ;
}
#marquee-container {
  padding: 20px 0px;
}

.fix {
    overflow: hidden;
}
</style>



Html Code for Statistic Counter for website:


<section class="counter-section fix">
<div class="counter-overlay"></div>
<div class="container pt100 pb100">
<div class="row">

<div class="col-md-3 col-sm-6">
<div class="currency-counter count-items">
<i class="fa fa-rocket"></i>
<span class="currency-count">1224</span>
<h2>Designs Completed</h2>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="currency-counter count-items">
<i class="fa fa-users"></i>
<span class="currency-count">30</span>
<h2>Team Member</h2>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="currency-counter count-items">
<i class="fa fa-calendar"></i>
<span class="currency-count">15</span>
<h2>Years Experience</h2>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="currency-counter count-items">
<i class="fa fa-comment-o"></i>
<span class="currency-count">530</span>
<h2>Satisfied Customers</h2>
</div>
</div>
</div>

</div>
</section>
<h2 style="padding:40px; text-align:center;"><a href="http://www.sanwebcorner.com/">www.sanwebcorner.com</a></h2>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/jquery.counterup.min.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/main.js"></script>

How to Send Feedback form Information to email in tabular format using php

I already shared the concepts about customer feedback form. Now we will see how to send the feedback information to the particular email id in the format of table. If you can implement the tabular format information you can use the html tag inside the php tag. The below code is very helpful to send the feedback form information in the format of tabular.

This example works 100% . I hope this example will really helpful to the programmers to send the form information in the tabular format to the email. Here is the demo page. You can check the form here and you can't able to view the result here, so you will check in your server. Here is the option to download full code by clicking the below download button.






index.html

<html>
<head>
<title>Send Feedback Information in tabular format to mail</title>
</head>
<body>
<form name="contact-form1"  method="post" action="email_send.php">
<input type="text"  name="name" placeholder="Your Name.." required>
<input type="text"  name="email" placeholder="Your Email.."required >
<input type="text"  name="phone" placeholder="Your 10 digit Phone.."require pattern="[0-9]{10}">
<textarea  name="message" placeholder="Write something.." style="height:100px" required></textarea>
<input name="submit" type="submit" value="Submit" /><br>
</form>
</body>
</html>


email_send.php

<?php
if(isset($_POST['submit'])){
    $to = "admin@sanwebcorner.com";
    $from = "admin@sanwebcorner.com";
    $name = $_POST['name'];
$phone = $_POST['phone'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $subject = "New Enquiry From Website";
$msg.= "<table width='500' border='0' align='center' cellpadding='0' cellspacing='0' style='font-family:Arial, Helvetica, sans-serif; font-size:10pt; border:1px solid #ccc;'> ";
$msg.= "<tr>";
$msg.= "<td width='96' style='border:1px solid #ccc; padding:5px'>Name</td>";
$msg.= "<td height='25' style='border:1px solid #ccc; padding:5px'>$name</td>";
$msg.= "</tr>";
$msg.= "<tr>";
$msg.= "<td height='25' bgcolor='#F5F5F5'  style='border:1px solid #ccc; padding:5px'>Email Id </td>";
$msg.= "<td height='25' bgcolor='#F5F5F5'  style='border:1px solid #ccc; padding:5px'>$email</td>";
$msg.= "</tr>";
$msg.= "<tr>";
$msg.= "<td height='25'  style='border:1px solid #ccc; padding:5px'>Phone No</td>";
$msg.= "<td height='25'  style='border:1px solid #ccc; padding:5px'>$phone</td>";
$msg.= "</tr>";
$msg.= "<tr>";
$msg.= "<td height='95' style='border:1px solid #ccc; padding:5px'>Message</td>";
$msg.= "<td height='95' style='border:1px solid #ccc; padding:5px'>$message</td>";
$msg.= "</tr>";
$msg.= "</table>";              
$headers = "From: $name < admin@sanwebcorner.com >.";
$headers .= "\r\nContent-Type: text/html; charset=ISO-8859-1\r\n";
mail($to, $subject, $msg, $headers) ;
echo '<script>alert("Your Enquiry Received . We will contact you soon...");</script>';
echo '<script>location.href = "index.php"</script>';
    }
?>

jQuery Responsive popup box with feedback form

Here we can see how to create Jquery responsive popup box with feedback form. I already posted the popup box with feedback form. But in this post i will give you the code about how to display the responsive popupbox with feedback form.( or you can use contact form) or any type of form you can use in this popupbox. This responsive popup box will display on page load.

Here we write the styles (css) responsive manner. It will fit all the devices like mobile and tab, desktop, laptop. Here is the full html, css, jquery code you can view the code below. And i will  provide the full code here. To download full code please click the below download link. In this example have the responsive code you can see this example by clicking the demo link. You can see the result of this page. I hope this is very useful.





Style sheet for responsive pop-up box:

body { margin-top: 0; }

#container {
  max-width: 1000px;
  margin: 0 auto;
  background: #EEE;
}

h1,
p {     padding: 0em 2em;}

#fvpp-blackout {
  display: none;
  z-index: 499;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.5;
}

#pop-up-content {
  display: none;
  z-index: 500;
  position: fixed;
  width: 36%;
  left: 30%;
  top: 20%;
  padding: 20px 2%;
  font-family: Calibri, Arial, sans-serif;
  background: #FFF;
}

#fvpp-close {
    position: absolute;
    top: -16px;
    right: -10px;
    font-size: 23px;
    cursor: pointer;
    font-weight: bold;
    color: #FFF;
    background-color: #000;
    padding: 1px 9px;
    border-radius: 34px;
}


#fvpp-dialog h2 {
  font-size: 2em;
  margin: 0;
}

#fvpp-dialog p { margin: 0; }


input{
width:100%;
height:40px;
border:1px solid green;
padding:8px;
}

select
{
width:104%;
height:40px;
border:1px solid green;
padding:8px;
padding-top: 0px;
padding-bottom: 0px;
}

textarea
{
width:100%;
height:80px;
border:1px solid green;
padding:8px;
}
.enq-div{
width:300px;
padding:35px;
border:1px solid green;
background-color:#f1f1f1;
display:block;
margin:0 auto;
}

.btn{
width: 50% !important;
    background-color: green;
    color: #fff;
    height: 50px;
    margin: 0 auto;
    display: block;
}


Html code for responsive popup box with feedback form:

<body>
<div id="container">
<h1>jQuery Responsive popup box with feedback form</h1>
</div>
</div>
<div id="pop-up-content">
<form id="contact-form1" class="contact-form flex-type" action="mail1.php" method="post">
<p><input type="text" name="name"  required placeholder="Your Name (required)"></p>
<p><select name="enquiry-abt">
<option name="Enquiry About Admission" value="Enquiry About Admission" >Enquiry About Admission</option>
<option name="Enquiry About Fees" value="Enquiry About Fees" >Enquiry About Fees</option>
<option name="Others" value="Others" >Others</option>
</select></p>
<p><input type="email" name="email" required placeholder="Email (required)"></p>
<p><input type="text" name="subject" required placeholder="Subject"></p>
<p><input type="Mobile" name="mobile" required placeholder="Mobile Number"></p>
<p><textarea rows="8" name="message" required placeholder="Message"></textarea></p>
<p><input type="submit" name="submit" required value="submit" class="btn" data-type="submit"></button></p>
</div>
<h5><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h5>
</form>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
<script src="jquery.firstVisitPopup.js"></script> 
<script>
$(function () {
$('#pop-up-content').firstVisitPopup({
cookieName : 'homepage',
showAgainSelector: '#show-message'
});
});
</script>
</body>

Change images on mouse move on image using Jquery

In this section i will tell you how to create image change option on image move. It means to display various images when move the cursor point on the images from the left to right or right to left using Jquery and simple html code. This is one of the simple JavaScript effect. 

This is very useful to some sections in website. It changes the images when move the mouse from left and right. This example have the demo link please visit the demo link and check how it works. Click the download link to download the script. I hope this post is very useful to you.




Code for changes image on mouse  move on image using javascript and Jquery:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Change image on mouse move using javascript and Jquery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.shuffle-images.js"></script>
<style>
.container {
width: 980px;
margin: 0 auto;
}

a{
text-decoration:none;
color:#fff;
}

.main {
position: relative;
}

.shuffle-me {
width: 25%;
height: 150px;
margin: 2%;
display: block;
position: relative;
float: left;
width: 26%;
height: 209px;
}

.info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.35);
padding: 20px;
text-align: center;
display: block;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}


.shuffle-group {
position: relative;
width: 100%;
margin-bottom: 10px;
}

.shuffle-group .shuffle-me {
width: 31.9%;
float: left;
margin: 5px;
}

.shuffle-group .shuffle-me:first-child {
width: 66%;
float: left;
height: 431px;
}
.shuffle-group .shuffle-me:first-child h1 {
margin-top: 190px;
font-size: 30px;
}

</style>
<script>
$(document).ready(function(){
$(".shuffle-me").shuffleImages({
target: ".images > img"
});
});

</script>
</head>
<body>
<div class="wrapper">
<div class="main">
<div class="container">
<div class="shuffle-group">
<div data-si-mousemove-trigger="100" class="shuffle-me">
<a href="http://sanwebcorner.com/" class="info" target="_blank"><h1>www.sanwebcorner.com</h1><h2>web tutorial</h2></a>
<div class="images">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Display Feedback form in popup box on page load with the help of Javascript, Html and Css

Now i will give you the codes to display the feedback form in popup box on page load. This is one of the important concept to view the particular popup box on page load. In this popup box will set the feedback form or signup form to get the response from the client very easily. You can write the content what you want. You can set the images, contents, forms in the popup box.

In this feedback form onpage load will give the popup box on immediately after page load. The popup content or forms will be display here. If client interested to give the feedback they will fill the form. If they will click outside of the popup window the popup box will close automatically.

Here is i am using feedback form, When will fill the feedback form, the form information will go to the particular email id. the following php code will useful to send the form information to mail id.


This type of on load popup box really increased the visibility from the customer. So it is very useful to give the important news and feedback and lead generated forms. Most of the website they are using this types of popup boxes to generate the sales. Here is the source code and demo pages. Please check the demo page, then you can able to know how this process is working.



Code for Display Feedback Form on Page Load.:

<html>
<head>
<meta charset="utf-8">
<title>Display popup on page load</title>
<link rel="stylesheet" href="swc.css">
<link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/font-awesome.css" rel="stylesheet">
</head>
<body>
<div class="maintext">
<h2>www.sanwebcorner.com</h2>
</div>
<div id="boxes">
<div style="top: 50%; left: 50%; display: none;" id="dialog" class="window">
<div id="san">
<a href="#" class="close agree"><img src="close-icon.png" width="25" style="float:right; margin-right: -25px; margin-top: -67px;"></a>


<div class="form-body-w3l">
<form method="post" action="mail1.php">
<div class="user-text-w3ls">
<div class="w3ls-user">
<label>Fullname</label><br>
<input type="text" placeholder="NAME" name="name" required="required">
<span class="icon2"><i class="fa fa-user" aria-hidden="true"></i></span>
</div>
<div class="w3ls-password">
<label>Contact Number</label><br>
<input type="text" placeholder="CONTACT NUMBER" name="contactnumber" required="required">
<span class="icon3"><i class="fa fa-mobile" aria-hidden="true" style="    font-size: 22px;"></i></span>
</div>
<div class="clear"></div>
</div>
<div class="email-w3ls">
<label>Your e-mail</label><br>
<input type="email" placeholder="E-MAIL"  name="emailid" required="required">
<span class="icon1"><i class="fa fa-envelope" aria-hidden="true"></i></span>
</div>
<input type="submit" name="submit"  value="Signup">
</form>
</div>
</div>
</div>
<div style="width: 2478px; font-size: 32pt; color:white; height: 1202px; display: none; opacity: 0.4;" id="mask"></div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="swc.js"></script>
</body>
</html>


Php File to Send the form information to the particular Email:

 <?php
if(isset($_POST['submit'])){
    $to = "admin@sanwebcorner.com";
    $from = "admin@sanwebcorner.com";
    $name = $_POST['name'];
    $mobile = $_POST['contactnumber'];
    $email = $_POST['emailid'];
    $subject = "New Enquiry From Website";
    $message = " \n\n Name:".$name ."\n\n  Email : " . $email ."\n\n Mobile :".$mobile."\n\n" ;
    $headers2 = "Feedback From Website: " . $email;
    mail($to,$subject,$message,$headers2);
echo '<script>alert("Thanks for Sign up...");</script>';
echo '<script>location.href = "http://rcdcindia.com/race-on-the%20international-tracks/"</script>';
    }
?>


Our Team Page Design Ideas using Html and Css

Team member page design is one of the simple concept to display the team members in the webpage. Lot of peoples are confusing about to display the team members i think it is one of the useful post for them. This is one of the simple layout and have the simple and neat hover effect for each team members.This team member page design is fully responsive and i am used the bootstrap framework in this. This is one of the easy to do. You can modify the column for the team member using bootstrap grid. I used hear four column you can use how many columns you want. with the help of this code col-md-3 col-sm-6.

And you can change the background colors and opacity by customizing the css code. In our team member page have to display the team member name and designation. you can customize that also according to your choice. You can set the social media icons also using social media icons and the corresponding social media links by using below code.

<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>

Here i provided the demo and download both links, You can visit the demo link to get the result of this program. You can download the full code by clicking the download button below.I hope really this post helpful to create our team page (team section) 




Our Team Page Design code:

<html>
<head>
<title>Team Section design concept</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<style>
.our-team{
position: relative;
text-align: center;
overflow: hidden;
box-shadow: 0 0 5px #808080;
margin-bottom:35px;
margin-top:25px;
cursor:pointer;
}
.our-team img{
width: 100%;
height: auto;
transition: all 0.50s linear 0s;

}
.our-team:hover img{
transform: scale(1.2);

}
.our-team .team-content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 40px 20px;
background: rgba(152, 197, 112, 0.95);
opacity: 0;
transition: all 0.5s ease-in-out;
}
.our-team:hover .team-content{
opacity: 1;
}
.our-team .team-prof{
margin: 20px 0;
position: relative;
top: 13%;
font-size: 25px;
font-weight: bold;
color: rgba(0, 0, 0, 0.3);
letter-spacing: 1px;
text-transform: capitalize;
}
.our-team .team-prof small{
display: block;
font-size: 13px;
color: #fff;
margin-top: 10px;
text-transform: uppercase;
}
.our-team .social-link{
padding: 0;
margin: 0;
list-style: none;
position: relative;
top: 13%;
}
.our-team .social-link li{
margin-right: 5px;
display: inline-block;
}
.our-team .social-link li a{
width: 35px;
height: 35px;
line-height: 35px;
border-radius: 5px;
color: #fff;
background: rgba(0, 0, 0, 0.3);
}
.our-team .social-link li a:hover{
background: #fff;
color: #333;
text-decoration: none;
}
@media only screen and (max-width: 990px){
.our-team{ margin-bottom: 20px; }
}

</style>
</head>
<body>
<div class="container">

<h1 style="text-align:center;">Team member page design idea.</h1>
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>


<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>



<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>

<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="team-page-design.jpg" alt="">
<div class="team-content">
<h3 class="team-prof">
Team Member Name
<small>Team member designation</small>
</h3>
<ul class="social-link">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-google"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
</ul>
</div>
</div>
</div>
</div>
<h1 style="text-align:center; font-size:18px;"><a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a></h1>
</div>
</body>
</html>

How to Create Vertical Fixed sidebar using pure css for webpages

This is one of the commonly used concept to highlighted text like contact number, Email ids, feedback etc.. This types of vertical fixed sidebar always increase the visibility of the particular text. When you promote the page for business those peoples really using this types of sidebars. 

This concept is purely done by using simple css. It also responsive and you can set this vertical fixed sidebar left or right sides to modifying simple css code here. You can able to set the margin and padding, colors, background colors according to your choice. I provided the simple css code here i hope this example  will helpful you. Here have the demo page to display the result of this code. 





<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>vertical fixed sidebar using simple css</title>
<style type="text/css" media="screen">

#vertical-fixed-bar {
    height: 0px;
    width: 65px;
    position: fixed;
    left: 1px;
    top: 50%;
    z-index: 1000;
    transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    margin-left: -38px;
}

#vertical-fixed-bar a {
    display: block;
    background: #f7a00c;
    height: 23px;
    width: 195px;
    padding: 11px 9px;
    color: #fff;
    font-family: Arial, sans-serif;
    font-weight: bold;
    text-decoration: none;
    border-radius: 10px;
}

</style>
</head>
<body>

<div id="vertical-fixed-bar">
<a style="font-size:15px;" href="">www.sanwebcorner.com</a>
</div>

</body>
</html>

360 degree product view using Jquery and css

To view the 360 degree image view using jquery. This is the concept to view the 360 degree image  on mouse cursor movement. This types of view is mostly used in the e-commerce website products to show the best image for customers. This is something old concept to use the different angled image to view 360 degree view. But it is useful some cases. I hope this is useful. Below is the demo page please check out the demo page so you will know how its working. And also have the download code option below. You can download the code as well.


Code for 360 degree Product View:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery 360 product view</title>
<script type="text/javascript" language="JavaScript" src="js/jquery-1.4.4.js"></script>
<script type="text/javascript" language="JavaScript" src="js/pic360-1.0.0.js"></script>
<style>
.PIC360{display:none;overflow:hidden;}
.PIC360 UL,.PIC360 LI{margin:0; padding:0;}
.PIC360 LI{list-style:none;}
.PIC360{width:400px; margin:10px auto;border:5px solid #CECECE;}
</style>
</head>
<body>
<div class="PIC360">
<ul>
<li><img width="400" height="255" src="images/image1_1.jpg" /></li>
<li><img width="400" height="255" src="images/image1_2.jpg" /></li>
<li><img width="400" height="255" src="images/image1_3.jpg" /></li>
<li><img width="400" height="255" src="images/image1_4.jpg" /></li>
<li><img width="400" height="255" src="images/image1_5.jpg" /></li>
<li><img width="400" height="255" src="images/image1_6.jpg" /></li>
<li><img width="400" height="255" src="images/image1_7.jpg" /></li>
<li><img width="400" height="255" src="images/image1_8.jpg" /></li>
<li><img width="400" height="255" src="images/image1_9.jpg" /></li>
<li><img width="400" height="255" src="images/image1_10.jpg" /></li>
<li><img width="400" height="255" src="images/image1_11.jpg" /></li>
<li><img width="400" height="255" src="images/image1_12.jpg" /></li>
<li><img width="400" height="255" src="images/image1_13.jpg" /></li>
<li><img width="400" height="255" src="images/image1_14.jpg" /></li>
<li><img width="400" height="255" src="images/image1_15.jpg" /></li>
<li><img width="400" height="255" src="images/image1_16.jpg" /></li>
<li><img width="400" height="255" src="images/image1_17.jpg" /></li>
<li><img width="400" height="255" src="images/image1_18.jpg" /></li>
</ul>
</div>
</body>
</html>

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");
?>