<script type="text/javascript">
jQuery(document).ready(function(){
var name = 'lang';
var url = window.location.href; // http://www.yahoo.com/?lang=en
function getParameterByName(name, url) {
var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href);
if (!results) return null;
if (!results[1]){
return null;
}else{
return results[1];
}
}
if(getParameterByName(name, url) && getParameterByName(name, url)=='bn') {
jQuery("#btn").html('<a class="btnaction" href="<%= request.getContextPath()%>?lang=en" alt="en">English</a>'); // use groovy code
}else{
jQuery("#btn").html('<a class="btnaction" href="<%= request.getContextPath()%>?lang=bn" alt="bn">Bangla</a>'); // use groovy code
}
});
</script>
<p id="btn"></p>
How to show loading image on page loading
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(document).ajaxStart(function(){
$("#loading").css("display", "block");
});
$(document).ajaxComplete(function(){
alert("complete");
$("#loading").css("display", "none");
});
$("button").click(function(){
alert("okkk");
$("#txt").load("demo_ajax_load.html");
});
});
</script>
</head>
<body>
<div id="loading" style="position:absolute;top:30%;left:50%;padding:2px;height:64px;width:64px;margin:10% auto;display:none;">
<p><img src="loading.gif"/></p>
</div>
<div id="txt><h2>Let AJAX change this text</h2></div>
<button>Change Content</button>
</body>
</html>
How to collapse and expand a div by jquery
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="applicant"/>
<title>Applicant Profile</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
jQuery(document).ready(function(){
jQuery('.collapse').on('shown.bs.collapse', function(){
//$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
$(this).prev().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
//$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
$(this).prev().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
});
</script>
</head>
<body>
<div class="col-md-12 col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
<span class="glyphicon glyphicon-plus"></span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
<span class="glyphicon glyphicon-plus"></span>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</body>
</html>
How to create a analog clock using javascript
<!DOCTYPE html>
<html>
<body>
<canvas id="canvas" width="400" height="400"
style="background-color:#333">
</canvas>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90
setInterval(drawClock, 1000);
function drawClock() {
drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius);
}
function drawFace(ctx, radius) {
var grad;
ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2*Math.PI);
ctx.fillStyle = 'white';
ctx.fill();
grad = ctx.createRadialGradient(0,0,radius*0.95, 0,0,radius*1.05);
grad.addColorStop(0, '#333');
grad.addColorStop(0.5, 'white');
grad.addColorStop(1, '#333');
ctx.strokeStyle = grad;
ctx.lineWidth = radius*0.1;
ctx.stroke();
ctx.beginPath();
ctx.arc(0, 0, radius*0.1, 0, 2*Math.PI);
ctx.fillStyle = '#333';
ctx.fill();
}
function drawNumbers(ctx, radius) {
var ang;
var num;
ctx.font = radius*0.15 + "px arial";
ctx.textBaseline="middle";
ctx.textAlign="center";
for(num = 1; num < 13; num++){
ang = num * Math.PI / 6;
ctx.rotate(ang);
ctx.translate(0, -radius*0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius*0.85);
ctx.rotate(-ang);
}
}
function drawTime(ctx, radius){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
//hour
hour=hour%12;
hour=(hour*Math.PI/6)+
(minute*Math.PI/(6*60))+
(second*Math.PI/(360*60));
drawHand(ctx, hour, radius*0.5, radius*0.07);
//minute
minute=(minute*Math.PI/30)+(second*Math.PI/(30*60));
drawHand(ctx, minute, radius*0.8, radius*0.07);
// second
second=(second*Math.PI/30);
drawHand(ctx, second, radius*0.9, radius*0.02);
}
function drawHand(ctx, pos, length, width) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.moveTo(0,0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos);
}
</script>
</body>
</html>
How to create a button for back to top
<html>
<title>Back to top</title>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<style>
#myBtn {
display: none;
position: fixed;
bottom: 10px;
right: 10px;
z-index: 99;
font-size: 12px;
border: none;
outline: none;
background-color: #A19E9F;
color: white;
cursor: pointer;
padding: 10px;
border-radius: 4px;
}
#myBtn:hover {
background-color: #555;
}
</style>
</head>
<body>
<div class="container">
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
<div class="row">
<div style="height:1200px;">
hi
</div>
</div>
</div>
<script>
// back to top button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
How to create auto complete
<html>
<head>
<link href="css/autocom.css" rel="stylesheet" type="text/css" >
<link href="css/jquery-ui_1.12.1.css" rel="stylesheet" type="text/css">
<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery-ui_1.12.1.js"></script>
</head>
<body>
<form class="navbar-form" action="home/search" method="GET" >
<div class="input-group add-on">
<input type="hidden" class="form-control search_business_meta_name" value="" name="bn">
<input type="text" class="form-control srch-term" placeholder="search product..." name="search" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-sm" style="height:25px;" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</body>
<script>
jQuery(document).on('keyup',".srch-term",function(){
var baseurl ="http://localhost/autocom";
jQuery(this).autocomplete({
source: function (request, response) {
jQuery.ajax({
url: baseurl+"/adminJson/jsonGetBusinessMetaName",
dataType: 'json',
beforeSend: function(){jQuery('#loading').show()},
complete: function() {jQuery('#loading').hide()},
data: {"term": request.term},
success: function (data) {
response(jQuery.map( data, function( item ) {
return {
label: item.title_en+" ( "+item.upazila_name+" ) ",
meta_name:item.meta_name
}
}));
}
})
},
select: function (e, ui) {
jQuery(".search_business_meta_name").val('');
jQuery(".search_business_meta_name").val(ui.item.meta_name);
}
});
});
</script>
</html>
On laravel controller or any php page add the following function
<?php
function jsonGetBusinessMetaName(Request $request){
$businessInsIns = null;
$businessNane =$request->input('term');
$businessInsIns = EcBusinessName::distinct()
->select(['ec_business_names.*','ec_locations.title_en as upazila_name'])
->join('users','users.business_name_meta_name','=','ec_business_names.meta_name')
->join('ec_addreses','ec_addreses.user_meta_name','=','users.meta_name')
->join('ec_locations','ec_locations.id','=','ec_addreses.location_upazila_id')
->where('ec_business_names.title_en','LIKE',"%$businessNane%")
->where('ec_business_names.is_active','=',1)
->where('ec_business_names.meta_name','!=','all')
->where('ec_addreses.address_type','=','business')
->limit(20)
->get();
if($businessInsIns){
return response()->json($businessInsIns); // return array of object
}else{
return response()->json([0=>['status'=>'fail']]);
}
}
?>
How to create responsive horizontal smart menu
<!DOCTYPE html>
<html lang="en-US">
<head>
<link href="css/sm-core-css.css" rel="stylesheet" type="text/css" />
<link href="css/sm-blue.css" rel="stylesheet" type="text/css" />
<link href="css/demo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.smartmenus.js"></script>
<script type="text/javascript">
$(function() {
$('#main-menu').smartmenus({
subMenusSubOffsetX: 1,
subMenusSubOffsetY: -8
});
});
</script>
</head>
<body>
<nav id="main-nav" role="navigation">
<ul id="main-menu" class="sm sm-blue">
<li><a href="http://www.smartmenus.org/">Home</a></li>
<li><a href="http://www.smartmenus.org/about/">About</a>
<ul>
<li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
<li><a href="http://www.smartmenus.org/about/vadikom/">The company</a>
<ul>
<li><a href="http://vadikom.com/about/">About Vadikom</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
Download responsive horizontal smart menu
jQuery CSS Responsive multilevel menu
Download jQuery CSS Responsive multilevel
jQuery Responsive multilevel Mega menu
Download Responsive multilevel Mega menu
jQuery Mobile Responsive Mega menu like admin LTE
Download Mobile Responsive Mega menu like admin LTE
jQuery Responsive Mega menu where submenu like a box
Download Responsive mega menu where submenu like box
jQuery Responsive Mega menu where full menu come from right side
Download Responsive mega menu where full menu come from right side
How to create responsive banner slider
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="responsiveslides.css">
<link rel="stylesheet" href="demo.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="responsiveslides.js"></script>
<script>
$(function () {
$("#slider4").responsiveSlides({
auto: true,
pager: true,
nav: false,
speed: 500,
maxwidth: 1000,
namespace: "callbacks",
before: function () {
$('.events').append("before event fired.");
},
after: function () {
$('.events').append("
after event fired.");
}
});
});
</script
>
</head
>
<body
>
<div id="wrapper"
>
<h1
>ResponsiveSlides.js
</h1
>
<div class="callbacks_container"
>
<ul class="rslides" id="slider4"
>
<li
>
<img src="images/1.jpg" alt="111"
>
<p class="caption"
>This is a caption
</p
>
</li
>
<li
>
<img src="images/2.jpg" alt="222"
>
<p class="caption"
>This is another caption
</p
>
</li
>
<li
>
<img src="images/3.jpg" alt="333"
>
<p class="caption"
>The third caption
</p
>
</li
>
</ul
>
</div
>
</div
>
</body
>
</html
>
Download responsive banner slider
Jquery animated responsive fractional banner slider
Download animated responsive fractional banner slider
Jquery animated banner slider
Download animated banner slider
CSS3 fullscreen slide show
Download CSS3 fullscreen slide show
jQuery fashion responsive slider
Download jQuery fashion responsive slider
How to create image slide show with tab
Download image slide show with tab
How to create jquery carosol
Download jquery carosol
How to preview image on browsing image
<html>
<body>
<input type="file" id="f1" onchange="previewFile()"></span><br>
<img id="img1" src="" height="200" alt="Image preview...">
<input type="file" id="f2"onchange="previewFile2()"><br>
<img id="img2" src="" height="200" alt="Image preview...">
</body>
<script>
function previewFile() {
var preview = document.getElementById('img1');
var file = document.getElementById('f1').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
function previewFile2() {
var preview = document.getElementById('img2');
var file = document.getElementById('f2').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
preview.src = reader.result;
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
</script>
</html>
How to create Bootstrap tab
Download Bootstrap tab
How to create Bootstrap modal
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
How to create jQuery round magnifier
Download jQuery round magnifier
How to create javascript hover magnifier
Download javascript hover magnifier
How to create google marker map using google api
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=AIzaSyBxfQRitIbB4Mw2uwT3GhfZNCtROuXkFsY"></script>
<script type="text/javascript">
var markers = [
{
"title": 'Aksa Beach',
"lat": '19.1759668',
"lng": '72.79504659999998',
"description": 'Aksa Beach is a popular beach and a vacation spot in Aksa village at Malad, Mumbai.'
},
{
"title": 'Juhu Beach',
"lat": '19.0883595',
"lng": '72.82652380000002',
"description": 'Juhu Beach is one of favourite tourist attractions situated in Mumbai.'
},
{
"title": 'Girgaum Beach',
"lat": '18.9542149',
"lng": '72.81203529999993',
"description": 'Girgaum Beach commonly known as just Chaupati is one of the most famous public beaches in Mumbai.'
},
{
"title": 'Jijamata Udyan',
"lat": '18.979006',
"lng": '72.83388300000001',
"description": 'Jijamata Udyan is situated near Byculla station is famous as Mumbai (Bombay) Zoo.'
},
{
"title": 'Sanjay Gandhi National Park',
"lat": '19.2147067',
"lng": '72.91062020000004',
"description": 'Sanjay Gandhi National Park is a large protected area in the northern part of Mumbai city.'
}
];
window.onload = function () {
LoadMap();
}
function LoadMap() {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var infoWindow = new google.maps.InfoWindow();
var latlngbounds = new google.maps.LatLngBounds();
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
for (var i = 0; i < markers.length; i++) {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(
"<div style = 'width:200px;min-height:40px'>"
+ data.description +
"</div>"
);
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
}
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
</script>
<div id="dvMap" style="width: 300px; height: 400px">
</div>
</body>
</html>
How to create master details form on any language
Download master details form
How to setup zebra datepicker
Download setup zebra datepicker
How to setup scrulable button
Download setup scrulable button
Few way to lazy image loading
1
add jquery library and add this script at page head
<script>
window.addEventListener('load', function(){
var allimages= document.getElementsByTagName('img');
for (var i=0; i<allimages.length; i++) {
if (allimages[i].getAttribute('data-src')) {
allimages[i].setAttribute('src', allimages[i].getAttribute('data-src'));
}
}
}, false)
</script>
add this image tag
<img src="spinner.gif" data-src="realimage2.gif" />
or
<img src="blank.gif" data-src="realimage2.gif" />
2
add Echo.js Lazy Image Loading JavaScript
<script src="dist/echo.js"></script>
<script>
echo.init({
callback: function (element, op) {
console.log(element, 'has been', op + 'ed')
}
});
// echo.render(); is also available for non-scroll callbacks
</script>
3
add BLazy.js Lazy Image Loading JavaScript
<img class="b-lazy" src="blank.gif" alt="alt-text" data-src="image.jpg" />
<script src="blazy.js"></script>
<script>
// Initialize
var bLazy = new Blazy();
</script>
4
add jQuery Lazy Image Loading Plugin
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.lazy/1.7.4/jquery.lazy.min.js"></script>
<img class="lazy" src="img/blank.gif" alt="Photo" data-src="http://pipsum.com/800x500.jpg" />
<img class="lazy" src="img/blank.gif" alt="Photo" data-src="http://pipsum.com/400x500.jpg" />
<img class="lazy" src="img/blank.gif" alt="Photo" data-src="http://pipsum.com/700x500.jpg" />
<script>
$(function() {
$('.lazy').lazy();
});
</script>
5
add vanilla Lazy Image Loading Plugin
<script src="js/vanilla-lazyloading.min.js?v=0.12.0"></script>
<div>Basic Item</div>
<img data-vllsrc="images/image-1.jpg" alt="" />
<div>Background image</div>
<div style="height:200px; width:100%;" data-vlloffset="100" data-vllsrc="images/image-2.jpg" data-vlltype="background"></div>
