Sanwebcorner | Programming Blog

Multi Select Checkbox jquery and Bootstrap


Now we will see how to create dropdown muliple select with checkbox. bootstrap multiselect.js is convert the normal select box to multi select box with select all button. the select all button used to select the all values and return the values. Using keyboard and mouse you can select the muliple check box in the dropdown.

Below example shows you How to use Checkbox inside Select Option. This example have the full source code and demo link. check out the example and demo link and code. I hope this example really helpful.




Multi Select Checkbox Code:

<html>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#lstFruits').multiselect({
includeSelectAllOption: true
});

$('#btnSelected').click(function () {
var selected = $("#lstFruits option:selected");
var message = "";
selected.each(function () {
message += $(this).text() + " " + $(this).val() + "\n";
});
alert(message);
});
});
</script>
<body>
<select id="lstFruits" multiple="multiple">
<option value="1">Mango</option>
<option value="2">Apple</option>
<option value="3">Banana</option>
<option value="4">Guava</option>
<option value="5">Orange</option>
</select>
<input type="button" id="btnSelected" value="Get Selected" />
</body>
</html>

How to create whatsapp link for website


Now a days WhatsApp is one of the important Messenger. Lot of peoples using WhatsApp Messenger so it is important to add whatsapp link to the website. Now will see how to add the whatsapp link to social media icon. when you add this link to site client directly will chat with your whatsapp number using your whatsapp number. Now we can see how to link this to website. Below is the code to link the whatsapp to website. You just use the code and link it to your website. Below code you can change your number from the below code.

whatsapp-link-for-website



Html code for whatsapp link

<html>
<head>
<title>How to create whatsapp link for website  </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-whatsapp" aria-hidden="true"></i> <a href="https://wa.me/919900000000" style="text-decoration:none;">Send Message</a>
</body>
</html>

Screenshots


whatsapp-social-link-website

whatsapp-website-link

Multiple File Upload in PHP


In this article we will see how to upload multiple files in php. It is possible to upload multiple files in single input upload field using html and php. After upload will send the data and uploaded files to the particular email id using the php mailer. First you need to create html form with the required fields and you should add the enctype="multipart/form-data" to the form to accept upload and add post method to form.

Then set action to "mail-send.php" file. Here you can write the code to send the form fields data to mail using php mailer. Here you can set the loop for multiple attachments. This example is working fine and i given complete code to your reference and also i given the demo link for this example. Click the demo link and check it out the result of this example.


index.php

<html>
<head>
<title>Upload multiple files in php form at a time</title>
<link rel="stylesheet" type="text/css" href="swc.css">
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function (e){
$("#sanForm").on('submit',(function(e){
e.preventDefault();
$('#loader-icon').show();
var valid;
valid = validateContact();
if(valid) {
$.ajax({
url: "mail-send.php",
type: "POST",
data:  new FormData(this),
contentType: false,
cache: false,
processData:false,
success: function(data){
$("#mail-status").html(data);
$('#loader-icon').hide();
},
error: function(){}      

});
}
}));

function validateContact() {
var valid = true;
$(".formfield").css('background-color','');
$(".info").html('');
$("#u_name").removeClass("invalid");
$("#u_email").removeClass("invalid");
$("#subject").removeClass("invalid");
$("#comment").removeClass("invalid");

if(!$("#u_name").val()) {
$("#u_name").addClass("invalid");
        $("#u_name").attr("title","Required");
        valid = false;
}
    if(!$("#u_email").val()) {
        $("#u_email").addClass("invalid");
        $("#u_email").attr("title","Required");
        valid = false;
    }
    if(!$("#u_email").val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
        $("#u_email").addClass("invalid");
        $("#u_email").attr("title","Invalid Email");
        valid = false;
    }
if(!$("#subject").val()) {
$("#subject").addClass("invalid");
        $("#subject").attr("title","Required");
valid = false;
}
if(!$("#comment").val()) {
$("#comment").addClass("invalid");
        $("#comment").attr("title","Required");
valid = false;
}

return valid;
}

});
</script>
</head>
<body>
<form id="sanForm" action="" method="post" enctype='multipart/form-data'>
<div id="loader-icon" style="display: none;">
    <img src="ajax-loading-icon.gif" style="width: 85px;"/>
</div>
    <div id="mail-status"></div>
    <div>
        <input
            type="text" name="u_name" id="u_name"
            class="formfield" placeholder="Name">
    </div>
    <div>
        <input type="text" name="u_email" id="u_email"
            class="formfield" placeholder="Email">
    </div>
    <div>
        <input type="text" name="subject" id="subject"
            class="formfield" placeholder="Subject">
    </div>
    <div>
        <textarea name="comment" id="comment" class="formfield"
            cols="60" rows="6" placeholder="comment"></textarea>
    </div>
    <div>
        <label>Attachment</label><br /> <input type="file"
            name="attachment[]" class="formfield" multiple="multiple">
    </div>
    <div>
        <input type="submit" value="Send" class="san_button" />
    </div>
</form>
</body>
</html>

mail-send.php

<?php
require('phpmailer/class.phpmailer.php');
require 'phpmailer/PHPMailerAutoload.php';
$mail = new PHPMailer();
$mail->Mailer = "mail";
$mail->SMTPDebug = 1;
$mail->SMTPAuth = TRUE;
$mail->SMTPSecure = "tls";
$mail->Port     = 587;
$mail->Username = "Your username";
$mail->Password = "Your password";
$mail->Host     = "Your Host";
$mail->Mailer   = "smtp";
$mail->SetFrom("From Email", "website");
$mail->AddReplyTo($_POST["u_email"], $_POST["u_name"]);
$mail->AddAddress("To Email");
$mail->Subject = $_POST["subject"];
$mail->WordWrap   = 80;
$message='';
$message.="Name  : ".$_POST['u_name']." <br/>";
//$message='';
$message.="Email  : ".$_POST['u_email']." <br/>";
$message.="Subject  : ".$_POST['subject']." <br/>";
$message.="Email  : ".$_POST['comment']." <br/>";
$mail->MsgHTML($message);

foreach ($_FILES["attachment"]["name"] as $k => $v) {
    $mail->AddAttachment( $_FILES["attachment"]["tmp_name"][$k], $_FILES["attachment"]["name"][$k] );
}

$mail->IsHTML(true);
if(!$mail->Send()) {
echo "<p class='error'>Problem in Sending Mail.</p>";
} else {
echo "<p class='success'>Mail Sent Successfully.</p>";
}
?>



Multi File upload result screenshot:

How to generate php random number

Here i will tell you how to generate random number using php random function, rand() this is the function to create the random number in php if you are used this function it generate the random number with any of the digits it may display the 5 digit number or 8 digit number or any thing.
 if you are using the specified range in the random number it generates the specified digits.

 If you want two digit random number then you can use this function echo(rand(10,99)); if you can want the 5 digit random number then you can use  echo(rand(10000,99999)) this function this is nothing but you can set the minimum and maximum number , 

This function displays the random number between the the minimum and maximum number you specified in the function. I hope this is really helpful to you to create simple random code. It is very useful to generate opt in some projects. In this example have the demo link check the result of the below example. and also have the download code please check



kllk


How to Create random number using php:

<html>
<head>
<title>How to create random number using php</title>
</head>
<body>
<h1>Default random number</h1>
<?php echo(rand() . "<br>"); ?><br/>

<h1>Random number for specified(with min number and max number)</h1>
<?php echo(rand(10,1000)); ?><br/>

<h1>Random number with digit</h1>

<h2>If you want two digit number</h2>
<?php echo(rand(10,99)); ?><br/>

<h2>If you want five digit number</h2>
<?php echo(rand(10000,99999)); ?><br/>


<h2>If you want nine digit number</h2>
<?php echo(rand(100000000,999999999)); ?><br/>


<h2>If you want seven digit number</h2>
<?php echo(rand(1000000,9999999)); ?><br/>

<h2>If you want one digit number</h2>
<?php echo(rand(0,9)); ?><br/>
</body>
</html>

How to create html multi step form using html and jquery

Question type html form with jquery validation is one of the simple and looking good html form. This is totally different look when comparing to the other html forms.  Because it haves Question for each field step by step. In this form one interesting matter is to stick your result in next step. For example the first question is what is your name when you fill the field and go with next step , it ask with your next data with your name some thing like that, Please refer below screenshots for form display or visit the demo link you will understand clearly.check out other multi level form here

This types of multi level html forms very impress to your users and its totally different concept. This html form includes the perfect jquery validation each steps check out demo link you can able to see the validation rules. It displays the full result in final steps and it ask to submit when submit the mail function will execute.






index.html: (Multi step for design with jquery validation)

<html>
<head>
<title>Html Multi step question form</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Sniglet" rel="stylesheet">
<script type="text/javascript">
$(window).load(function(){
$( "input" )
.keyup(function() {
var value = $( this ).val(),
dataViewId = $( this ).data( "view-id" );  // get your data-attribute value
// use this value as a selector:
$( dataViewId ).text( value );
})
.keyup();
});
</script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.validate.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
// register jQuery extension
jQuery.extend(jQuery.expr[':'], {
focusable: function (el, index, selector) {
return $(el).is('a, button, :input, [tabindex]');
}
});
$(document).on('keypress', 'input,select', function (e) {
if (e.which == 13) {
e.preventDefault();
// Get all focusable elements on the page
var $canfocus = $(':focusable');
var index = $canfocus.index(this) + 1;
if (index >= $canfocus.length) index = 0;
$canfocus.eq(index).focus();
}
});
</script>
<?php $result="" ?>
</head>
<body>
<div class="container">
<h3 style="text-align:center; color:#fff;">www.sanwebcorner.com</h3>
<br><br>
<?php echo $result; ?>
<br/> <br/>
<form class="form-horizontal form" action="emailing-data.php" method="POST"  method="post" onsubmit="return submitUserForm();">
<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 id="g-recaptcha-error"></div>
<div class="box row-fluid">
<br>
<div class="step">
<div class="form-group">
<label for="name" class="control-label">Hey! What's your name? *</label>
<p class="santext">Let's just stick to first names for now :)</p>
<input type="text"  name="name" class="form-control saninput" id="name" data-view-id="#namen" placeholder="Type your answer here...">
</div>
</div>
<div class="step">
<div class="form-group">
<label for="institution" class="control-label">Okay, <span id="namen"></span>. Please tell me your Institution Name? *</label>
<input type="text"  name="institution" class="form-control saninput" id="institution" data-view-id="#institution" placeholder="Type your answer here...">
</div>
</div>
<div class="step">
<div class="form-group">
<label for="number" class="control-label">And tell me your contact Number? *</label>
<input type="text"  name="number" class="form-control saninput" id="number" data-view-id="#number" placeholder="Type your answer here...">
</div>
</div>
<div class="step">
<div class="form-group">
<label for="email" class="control-label">Amazing, thanks <span id="namen"></span> :)
<p class="santext">Now, just give us your email address, hit the submit button and our team will contact you as soon as possible. * </p></label>
<input type="text"  name="email" class="form-control saninput" id="email" data-view-id="#email" placeholder="Type your answer here...">
</div>
</div>
<div class="step display">
<h4 style="color:#fff; text-align:center;     font-size: 45px;
text-decoration: underline;">Confirm Details </h4>
<div class="form-group">
<label class="col-sm-6 control-label sanq">Name :</label>
<label class="col-md-6 control-label lbl sana" data-id="name"></label>
</div>
<div class="form-group">
<label class="col-sm-6 control-label sanq"> Institution Name :</label>
<label class="col-md-6 control-label lbl sana" data-id="institution"></label>
</div>
<div class="form-group">
<label class="col-sm-6 control-label sanq">Email :</label>
<label class="col-md-6 control-label lbl sana" data-id="email"></label>
</div>
<div class="form-group">
<label class="col-sm-6 control-label sanq">Contact Number :</label>
<label class="col-md-6 control-label lbl sana" data-id="number"></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>
<input type="submit" name="submit"  id="btn-validate"  class="action btn-hot text-capitalize submit btn" value="Submit Your Data" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<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);
})
// 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",
number   : {required : true, number:true, minlength:10, maxlength:10},
email    : {required : true, email:true},
institution : "required",
},
});
});
// 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>
</body>
</html>


emailing-data.php

<?php
if(isset($_POST['submit'])){
$to = "Your Mail id";
$from = "Your Mail id";
$name = $_POST['name'];
$email = $_POST['email'];
$mobile = $_POST['number'];
$institution = $_POST['institution'];
$subject = "New Emailer Registration Information";
$message = " \n\n Name:".$name . "\n\n Institution Name:".$institution . "\n\n Email : " . $email ."\n\n Mobile :".$mobile."\n\n" ;
$headers2 = "New Emailer Registration Information: " . $email;
if (mail($to,$subject,$message,$headers2))
{
$result='<div class="alert alert-success">Thank for your interest, we will contact you soon...</div>';
}
else
{
$result='<div class="alert alert-danger">Sorry there was an error sending your message. Please try again later</div>';
}
}
?>
<html>
<head>
<title>Html Multi step question form</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link href="https://fonts.googleapis.com/css?family=Sniglet" rel="stylesheet">
</head>
<body>
<div class="container">
<h3 style="text-align:center; color:#fff;">www.sanwebcorner.com</h3>
<br><br>
<?php echo $result; ?>
<br/> <br/>
</div>
</body>
</html>



Multi-Step html form Screenshots:



multi-step-form

question-type-form

html-type-form

html-step-form

different-type-form

html form-details

html form-result


Display Form Field data before Form submit

Now i will show you how to display form field validation before form submission. This is one of the simple concept and also useful one for our projects. This concept will done by using the JavaScript and Jquery.

In this example form i am used two different form field one is firstname and another one is give your location. when you enter the location it shows your entered firstname value before the label. In this example haves the demo page. Check out the demo page you will get to know the result of this concept. you also download the script from download page below. I hope this example is really helpful.







<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Display Form Field data before Form submit</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(window).load(function(){

$( "input" )
.keyup(function() {
var value = $( this ).val(),
dataViewId = $( this ).data( "view-id" );  // get your data-attribute value
// use this value as a selector:
$( dataViewId ).text( value );
})
.keyup();

});

</script>
<style>
.swc
{
height:35px;
border:1px solid green;

}

</style>
</head>
<body>
<h2 style="text-align:center;">Display Form Field data before Form submit</h2>
<table style="width:480px; margin:0 auto;">
<tr>
<td>First Name:</td>
<td><input type="text" data-view-id="#firstname" class="swc"/></td>
</tr>

<tr>
<td>Hello <span id="firstname"> </span> <span id="lastname"> </span> Give your Location:</td>
<td> <input type="text" data-view-id="#location" class="swc" /></td>
</tr>
<br/><br/>
<h3><a href="http://www.sanwebcorner.com/">www.sanwebcorner.com </a></h3>
</body>
</html>


Lock & Unlock page scroll using Jquery

Some times we need to lock & unlock the scroll bar in the webpages. This is very simple we will do this using the simple javascript and jquery, In this post we will see how to lock & unlock the webpage scroll using jquery. This concept is full body will loack using the button and also unloack the scroll body using the unlock button this two button action will works based on the javascript. 

In this concept when you click the lock button the you can't able to scroll the mouse jin the particular page until you click the unlock button once you click the unlock boutton you can able to scroll the page. This is called as a fullscreen scroll lock and unloack. This example have live demo and the download file you can use it. I hope this example is very useful.



Code for lock and unlock page scroll using Jquery


<!doctype html>
<html>
<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>Lock & Unlock page scroll using Jquery</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="jquery.lockscroll.js"></script>
<style type="text/css">
#window {
position: fixed;
right: 10px;
top: 10px;
}
button {
margin-bottom: 20px;
}
#outer {
height: 1200px;
}

#element {
width: 400px;
height: 200px;
overflow: scroll;
}
h1
{
margin-top:125px;
}
</style>
</head>
<body>
<div id="window">
Window control
<button id="window-lock">Lock Scroll</button>
<button id="window-unlock">Unlock Scroll</button>
</div>
<h1>jQuery lockscroll Demo</h1>
</div>
Element control
<h1>jQuery lockscroll Demo</h1>
<h1>jQuery lockscroll Demo</h1>
<h1>jQuery lockscroll Demo</h1>
<h1>jQuery lockscroll Demo</h1>
<h1>jQuery lockscroll Demo</h1>
<h1>jQuery lockscroll Demo</h1>
<h1>jQuery lockscroll Demo</h1>
<h1>jQuery lockscroll Demo</h1>
<h1>jQuery lockscroll Demo</h1>
<h1>jQuery lockscroll Demo</h1>
<h1>jQuery lockscroll Demo</h1>
<h1>jQuery lockscroll Demo</h1>
<h1>jQuery lockscroll Demo</h1>
<h1>jQuery lockscroll Demo</h1>
<h1>jQuery lockscroll Demo</h1>

<script>
$(function() {
$("#window-lock").click(function() {
$.lockScroll();
});

$("#window-unlock").click(function() {
$.lockScroll(false);
});

$("#lock").click(function() {
$("#element").lockScroll();
});

$("#unlock").click(function() {
$("#element").lockScroll(false);
});
});
</script>
</body>
</html>

How to populate html dropdown based on another dropdown using Jquery

Populate the Dropdown based on another dropdown is very easy and simple, Now we will see how to do this without any database using jquery and javascript. This will done by using html dropdown or select box, It is dynamically display the particular dropdown data based on main html dropdown. In this example i am using the list of branch in main dropdown, the branches like Machanical , css&IT, Civil, EEE based on this select box display the differnt courses when you select the machanical the machanical course will display the another html dropdown, this will automatically populated based on main dropdown.

 This example completely working with the help of Jquery and javascript. The below javascript code is used to poplulate the data to the dropdown.

<script type="text/javascript">
var courseByCategory = {
Mechanical: ["Mec-course-1", "Mec-course-2", "Mec-course-3", "Mec-course-4"],
Civil: ["Civ-course-1", "Civ-course-2", "Civ-course-3", "Civ-course-4"],
IT: ["IT-course-1", "IT-course-2", "IT-course-3", "IT-course-4"],
EEE: ["EEE-course-1", "EEE-course-2", "EEE-course-3", "EEE-course-4"]
}
function changecat(value) {
if (value.length == 0) document.getElementById("course").innerHTML = "<option></option>";
else {
var catOptions = "";
for (categoryId in courseByCategory[value]) {
catOptions += "<option>" + courseByCategory[value][categoryId] + "</option>";
}
document.getElementById("course").innerHTML = catOptions;
}
}
</script>

The below example haves the demo link and download link you will visit the demo page how the html dorpdown populate based on the another dropdown or select box and i also provided the download link you can download and use the code based on your requirement. It may very useful in various places in your web application development. I hope this is very useful to you.




Code for html dorpdown based on another dropdown:


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>How to populate html dropdown based on another dropdown using Jqery</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
var courseByCategory = {
Mechanical: ["Mec-course-1", "Mec-course-2", "Mec-course-3", "Mec-course-4"],
Civil: ["Civ-course-1", "Civ-course-2", "Civ-course-3", "Civ-course-4"],
IT: ["IT-course-1", "IT-course-2", "IT-course-3", "IT-course-4"],
EEE: ["EEE-course-1", "EEE-course-2", "EEE-course-3", "EEE-course-4"]
}

function changecat(value) {
if (value.length == 0) document.getElementById("course").innerHTML = "<option></option>";
else {
var catOptions = "";
for (categoryId in courseByCategory[value]) {
catOptions += "<option>" + courseByCategory[value][categoryId] + "</option>";
}
document.getElementById("course").innerHTML = catOptions;
}
}
</script>


<style>
select
{
padding: 12px;
min-width:280px;
margin-top:10px;
}

.san{
width:280px;
margin:0 auto;
margin-top:90px;
background-color:#009688;
padding:55px;
}

label
{
color:#fff;
margin-bottom:25px;
}

html{
    background-color: #0aa798;
}
</style>

</head>
<body>
<div class="san">
<label>Select Branch: &nbsp; &nbsp; &nbsp; </label>
<select name="branch" id="branch" onChange="changecat(this.value);">
<option value="" disabled selected>Select</option>
<option value="Mechanical">Mechanical</option>
<option value="Civil">Civil </option>
<option value="IT">Csc & IT</option>
<option value="EEE">EEE</option>
</select>
<br/><br/>

<label>Select Course:  &nbsp; &nbsp; &nbsp; </label>
<select name="course" id="course">
<option value="" disabled selected>Select</option>
</select>
</div>
<h1 style="text-align:center; text-decoration:none; color:#fff;"><a style="text-decoration:none; color:#fff;" href="http://www.sanwebcorner.com/">www.sanwebcorner.com</a></h1>
</body>
</html>

Simple Breadcrumb Design using css

This is the simple breadcrumb navigation it is used to navigate previous pages links and also gives the current page in the website. Breadcrumb navigation one of the useful navigation to the user and also it is the seo friendly because it is act like a internal link building.

This is very simple to create you just follow the below css code to display the breadcrumb navigation bar, You can design various types of breadcrumb navigation bar usig the html and css. In this example i provided simple and nice breadcrumb design using html and css, Here also provided the demo link to check out the result of the example and also provided the download button download the code. I hope this simple concept will really helpful.



<html>
<head>
<title>simple Breadcrumb Design using css</title>
<style>
#my-breadcrumbs ul li {
list-style:none;
}

#my-breadcrumbs ul li a {
display: block;
    float: left;
    height: 30px;
    background: #3060A5;
    text-align: center;
    padding: 7px 30px 0 30px;
    position: relative;
    margin: 0 36px 0 0;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    font-size: 20px;
    text-decoration: none;
    color: #fff;
}

#my-breadcrumbs ul li a:hover{
  background: #5172B8;
}

#my-breadcrumbs ul li a:after {
    content: "";
    border-top: 20px solid transparent;
    border-bottom: 17px solid transparent;
    border-left: 30px solid #3060A5;
    position: absolute;
    right: -30px;
    top: 0;
}

#my-breadcrumbs ul li a:before {
    content: "";
    position: absolute;
    margin-top: -7px;
    border-width: 18px 0 19px 30px;
    border-style: solid;
    border-color: #3060A5 #3060A5 #3060A5 transparent;
    left: -30px;
}

/* Hover Effects */
#my-breadcrumbs ul li a:hover::before {
  border-color: #5172B8 #5172B8 #5172B8 transparent;

}
/* Hover Effects */
#my-breadcrumbs ul li a:hover::after{
    border-top: 20px solid transparent;
    border-bottom: 17px solid transparent;
border-left: 30px solid #5172B8;
}

/* Hide the Before Pseudo Element */
#my-breadcrumbs ul li:first-child a:before {
display: none;
}

/* Add Border Radius */
#my-breadcrumbs ul li:first-child a{
border-top-left-radius: 10px; border-bottom-left-radius: 10px;border-bottom-right-radius: 1px;
}

</style>
</head>
<body>

<div id="my-breadcrumbs">
<ul style="height: 100px;">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">About our company</a></li>
<li><a href="#">Vision</a></li>
</ul>
</div>
</body>
</html>

Marquee text with close button using jquery

In this post i will tell you how to create close button in marquee text with the help of jquery and html. You can manually closing flash news section using jquery below javascript code is used to enable the close button in marquee div.

<script>
$(document).ready(function(c) {
$('.alert-close').on('click', function(c){
$('.message').fadeOut('slow', function(c){
$('.message').remove();
});
});
});
</script>

This types of flash news section most of the website now using to display the emergency flash news section dynamically using some technology. This types of marquee text with close button is one of the user friendly because when user don't want that message simple they close the section so none of the  flash news text will disturb the customers. Below i given full code and also i given demo link below you just check it out how it is working and also i given the download button download the code and use it, I hope this simple example is really helpful.



Code for Flash news with close button

<html>
<head>
<title>manually closing flash news section </title>
<style>
.alert {
background-color: #f39c12 !important;

}

.message {
border-radius: 2px;
display: block;
font-size: 10pt;
font-weight: bold;
margin: 0 0 15px;
padding: 10px 10px 10px 35px;
position: relative;
vertical-align: middle;
color: white;
}
.alert-close {

border-radius: 50%;
background-color: #F7C575;
color: #000;
opacity: .6;
cursor: pointer;
font-size: 18px;
font-weight: normal;
height: 22px;
line-height: 21px;
position: absolute;
right: 11px;
text-align: center;
top: 9px;
-webkit-transition: color 0.2s ease-in-out;
-moz-transition: color 0.2s ease-in-out;
-o-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
width: 22px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(c) {
$('.alert-close').on('click', function(c){
$('.message').fadeOut('slow', function(c){
$('.message').remove();
});
});
});
</script>
</head>
<body>
<div class="message alert"><marquee style="width:75%;">Flash News: This is manually closing flash news section jquery flash news. You can close this div by clicking the close button. </marquee>
<div class="alert-close"> x </div>
</div>
</body>
</html>

Labels

360 degree view product image 3d rotate 3d text 3step-form Accordion menu ajax All Browsers Animated Background Gradient animation audio controller auto complete Best accordion menu bootstrap border bounce effect on hover Breadcrumb calculate age by dob calendar Captcha change image on mouse move color chooser countdown Counter on scroll create random number Css css animation css buttons css hover css3 customized upload Button Date picker delete data from table Different scroll speed email otp verification email verifier Embed eventlist Expanding Menu feedbck form flash news section close button full screen menu Google custom search Google Maps Google reCAPTCHA Google site search gradient hide menu Horizontal News ticker Hover Htm Html html dropdown html form html5 html5 form validation Iframe image hover increment decrement textbox value based on select box Javascript Jquery js Layered image effect on mouse hover lock & unlock page scroll marquee marquee with close button mobile number validation mobile otp login Multi-level-drop-down-menu multi-level-form multi-select-checkbox Multi-Step-form Multiple File Upload in PHP mysql News ticker on hover change text to image our team page password generator password strength checker Photoshop PHP php mailer populate html selectbox Popup image on click the link pure css Question type form random number generate Random password Redirect page Based on the select box while submit the form responsive responsive menu responsive popup box Responsive Vertical Time line design rotate image selectbox based on select box simple coming soon page simple countdown based on end date simple typing effect slider sliding tab sms otp login statistic counter on scroll switch tag shape team member Time picker toggle toggle view transparent button underline animation up down slide validation vertical fixed sidebar Webtips whatsapp link website Youtube