Active class to current page link

To highlight the current page add an active or another class name to the link when the linked page is opened using java script.

  <script>
$(".navbar-nav a").filter(function(){
    return this.href == location.href.replace(/#.*/, "");
}).addClass("active");
  </script>

Fix JQuery Plugin issue in Asp.net Update Panel

When you are using asp.net and using Jquery plugins JQuery UI Sliders these Jquery controls and scripts are not working in Update panel after a form submit postbacks.

Solution : document ready will fire only once, not during partial postbacks. You need to call some functions after each partial post back is happend

<script type="text/javascript">
    Sys.Application.add_load(function() {<!--JQUERY CODE GOES HERE-->});
</script> 

Link to send a text message in html - Cross Browser Solution

Cross-Browser Solution for Creating a sms link in html web page to click and send sms from your smart phone with a message and a number. This will work in web browsers for iOS 5,6,7,8,9,10 and Android versions.

function checkMobileOS() {
 
    var MobileUserAgent = navigator.userAgent || navigator.vendor || window.opera;
 
    if (MobileUserAgent.match(/iPad/i) || MobileUserAgent.match(/iPhone/i) || MobileUserAgent.match(/iPod/i)) {
 
        return 'iOS';
 
    } else if (MobileUserAgent.match(/Android/i)) {
 
        return 'Android';
 
    } else {
 
return 'unknown';
 
    }
 
}
 
var message_text = 'Some message goes here';
 
var href = '';
 
if (checkMobileOS() == 'iOS') {
 
    href = "sms:+123456789&body=" + encodeURI(message_text);
 
}
 
if (checkMobileOS() == 'Android') {
 
    href = "sms:+123456789?body=" + encodeURI(message_text);
 
}
 
document.getElementById("sms_link").setAttribute('href', href);

<a id="sms_link" href="#">Tap to SMS</a>

Custom image upload and preview inside the button

Customizing HTML file upload button is not always easy. Here is a way to create a custom image upload button (custom file upload button) with CSS Javascript and Jquery and preview the uploaded image instead of the image we used for the custom button. 

HTML

<div class="image-upload">
    <label for="file-input">
        <img src="http://goo.gl/pB9rpQ" id="blah" />
    </label>
    <input id="file-input" type="file"/>
</div>

CSS

.image-upload > input
{
    display: none;
}
.image-upload img
{
    width: 80px;
    cursor: pointer;
}

Javascript

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }
    reader.readAsDataURL(input.files[0]);
  }
}
$("#file-input").change(function() {
  readURL(this);
});

Bootstrap modal popup automatically timeout close

bootstrap modal popup automatically timeout close

<script>
        $(document).ready(function () {

            $('.face').click(function () {
                $('#myModal').modal('show', function () {
                    clearTimeout(myModalTimeout);
                });

                myModalTimeout = setTimeout(function () {
                    $('#myModal').modal('hide');
                }, 1000);

            });

        });
</script>

bootstrap change active tab on page reload

  <script>
  $('.nav-tabs-custom a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href").substr(1);
  window.location.hash = id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('.nav-tabs-custom a[href="' + hash + '"]').tab('show');
  </script>

slick slider horizontal scroll with mouse wheel js

<script src="js/mousewheel.js"></script>
<script src="slick/slick.min.js" type="text/javascript"></script>
        <script>
            $('.slickc').slick({
            })
                    .on("mousewheel", function (event) {
                        event.preventDefault();
                        if (event.deltaX > 0 || event.deltaY < 0) {
                            $(this).slick("slickNext");
                        } else if (event.deltaX < 0 || event.deltaY > 0) {
                            $(this).slick("slickPrev");
                        }
                    });
        </script>

Using Waypoints js on a web page - example

<script>

    var $imga = $('#mimg');

    $imga.waypoint(function (direction) {
        if (direction === 'down') {



            $('#mimg').removeClass('animated bounceOutRight');
            $('#mimg').addClass('animated fadeIn');

            $('.banny').removeClass('animated bounceOutLeft');
            $('.banny').addClass('animated fadeIn');

//            $('.ptextxs').textillate({
//                in: {effect: 'fadeInDown'}
//            });

        }
        else {
            $('#mimg').removeClass('animated  fadeIn');
            $('#mimg').addClass('animated bounceOutRight');


            $('.banny').removeClass('animated fadeIn');
            $('.banny').addClass('animated bounceOutLeft');
        }
    },
            {offset: '65%'});







</script>

Animate / function before go to the next page on link click - Jquery

Animate / function before go to the next page on link click - Jquery

<script>
    $(".mlink").click(function (e) {
        
        e.preventDefault();
        
        var link = $(this).attr('href');
        
        $('body').addClass('animated hinge').delay(3000).queue(function(){
            
//.delay(3000).queue - to delay next function

           location.href = link;            
          
        });
        });
</script>

or

<script>
$("#info-text-container").click(function(){
    setTimeout(function(){
       $("#info-text").addClass("info-text-active");
   }, 500);

});
</script>

Pure CSS3 JavaScript Pre loader without JQuery

Simple JavaScript pre-loader which works without the JQuery library created with CSS3 and JS.


<div id="spinner"> </div>

#spinner {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 999999999;
background: rgba(255,255,255,0.95);

}


<script type='text/javascript'>
  
  function attach(element,listener,ev,tf){

if(element.attachEvent) {

    element.attachEvent("on"+listener,ev);

}else{

    element.addEventListener(listener,ev,tf);

}

}

function fadeOut(element,startLevel,endLevel,duration,callback){

var fOInt;

    op = startLevel;

fOInt = setInterval(function() {

    if(op<=endLevel){

    element.style.opacity = endLevel;
    element.style.filter = "alpha(opacity = " + endLevel + ")";

    clearInterval(fOInt);

        if(typeof callback == 'function') callback(true);

    }else{

    op -= 0.1;

    element.style.opacity = op;
    element.style.filter = "alpha(opacity = " + op*100 + ")";

    }

    },duration);

}

attach(window,'load',function(){
    fadeOut(document.getElementById('spinner'),1,0,50,function(cb){
        
        document.getElementById("spinner").style.display = "none";

    //alert('The loader has faded out!')

    });
    
},false);
  
</script>

Print only a div in web page No CSS JS Only

Printing only a specific div in a web page using javascript with a print button

<script>
function printContent(el){
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById(el).innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
}
</script>

<button class="btn btn-info" onclick="printContent('print')"> <span class="glyphicon glyphicon-print" aria-hidden="true"></span> Print Content</button>

<div class="col-lg-12" id="print">

This content will be printed

</div>

Adding a link click function on page load

Automatically adding a link's click function. Useful to load  a pop up or a lightbox plugin which works only on click function of a link.

$(document).ready(function() {
   $('#lightboxlink').click();
});


||

$(document).ready(function() {
   $('#lightboxlink').trigger("click");
});

Jquery JS add html code into a div if empty

<script>
    
    $(document).ready(function(){
       
       function isEmpty( el ){
      return !$.trim(el.html())
  }
  if (isEmpty($('#showvacnt'))) {
     
     $('#showvacnt').append("TEXT GOES HERE.");
     
  }

    });

</script>

Jquery select radio button group value and if else

$("input:radio[name=group1]").click(function() {
var value = $(this).val();
//alert(value);
if(value==='homedelivery'){
$('#payncolcontent').hide();
$('#cashndrcontent').fadeIn();

//alert("222");
}
else if(value==='pickupfromstore'){
//alert("111111");
$('#cashndrcontent').hide();
$('#payncolcontent').fadeIn();
}
});

Enable and Disable JQuery UI accordion rows

Enable and Disable and selecting JQuery UI accordion rows

$('#sdx').click(function(){

$("#accordion").accordion({
active: 0,
});

$('.ui-accordion-header').addClass('ui-state-disabled').on('click', function () {
return false;
});       

$('.ui-accordion-header').eq(0).removeClass('ui-state-disabled').on('click', function () {
return true;
});

});

JQuery if else on hover

CSS styles change on hover state with JQuery if else statement

    $(document).ready(function() {

        $('body').mouseover(function() {

            if ($('.comsec1').is(':hover')) {
                            $('.comsec2').css('width','40%');
           $('.comsec1').css('width','60%');
            }
            
            else if ($('.comsec2').is(':hover')) {
                          $('.comsec2').css('width','60%');
           $('.comsec1').css('width','40%');
            }
            
            else  {
            $('.comsec2').css('width','50%');
            $('.comsec1').css('width','50%');
            }

        });
        
    });

JQuery select the clicked class

Here is a JQuery code snippet  to get the clicked div elements's attribute or the value with the similar class names on click function

<script>

$(document).ready(function(){
    $('.simg').click(function(){
        //var pth = $('.simg').attr('src');
        
        var pth = $(this).attr('src');
        
        console.log(pth);
    });    
});

</script>

JQuery Detect the browser window top and change CSS on page

JQuery Detect the browser window top and change CSS on page

 var t = $("#nav2").offset().top;

    $(document).scroll(function() {
        if ($(this).scrollTop() > t)
        {
            $('#nav2').css('position', 'fixed');
            $('#nav2').css('top', '0');
        }
        else
        {
            $('#nav2').css('position', 'relative');
        }
    });

How to Stop Jquery code running on small screens

Using the IF ELSE statement and CSS media queries you can stop running a JQuery script on a Small screen or a mobile device which has a lowe screen resolution. This will be great to stop Jquery animations on the mobile phones

HTML Code

<div id="mobiledetech"></div>

<!--You can place this HTML somewhere in your HTML page-->

CSS Code

    .mobiledetech{
        display: block;
    }

    @media (min-width: 767px) {

        .mobiledetech {
            display: none;
            /* increases the carousel height so it looks good on phones */
        }
    }

/* This will detect the div tag to diaplay or display none*/


JQUery Code

<script>
//Apllying condition-
    $(window).scroll(function() {
        if ($(".toggleMenu").css("display") == "none") {
// Jquery code to run    
        var scroll = $(window).scrollTop();
        if (scroll >= 400) {
            $(".navbar-default").addClass("navbar-fixed-top slideDown hitebg");
            $('.line2').css('display', 'none');
        } else {
            $(".navbar-default").removeClass("navbar-fixed-top slideDown hitebg");
            $('.line2').css('display', 'block');
        }  
// END
        }
    });
</script>

// If the div tag is display none the Jquery will run on the page

Jquery Are you sure to Submit Confirmation

"Are you sure" alert box with Jquery for submit or a button on click

Script

<script>
$(':submit[name="topup"][value="Request"]').click(function() {
    return window.confirm(this.title || 'Are you sure?');
});
</script>