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>

Using fonts with :before css as icon bullets

Using font awesome fonts with :before css as icon bullets

ul.downlistkn li a:before {

  content: "\f21b"; /* FontAwesome Unicode */
  font-family: FontAwesome;
  display: inline-block;
  width: 1.5em; 
  font-size: 20px;
  margin-left: 5px;

}

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>