jQuery Advance

By ukmodak | April 29th 2021 06:09:07 AM | viewed 94 times
<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

    Photo
    
    <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>
    
    
    bONEandALL