Swiper Jquery Plugin

It is a modern mobile touch slider.

CSS:


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" />

JS:


<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js "></script>

It has lot of components.

  • Swipe slider navigation
  • Swipe pagination
  • Swipe pagination with dynamic bullets
  • Progress pagination
  • Fraction pagination
  • Custom pagination
  • Page Scrollbar
  • Vertical page slider
  • Space between slides
  • Multiple slides per view
  • Scroll container
  • Multiple row slides layout
  • Nested swipers
  • Loop mode carousel
  • Loop mode with multiple slides per group
  • 3D cube effect
  • 3D coverflow effect
  • 3D Flip effect
  • Mousewheel control
  • Autoplay carousel
  • Dynamic slides (append/prepend slide pagination)
  • Thumbs gallery with two-way swipe
  • Parallax (Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.)
  • Responsive breakpoints slider
  • Auto height slider
  • Zoom slider
  • Slideable navigation drawer

Demo: http://idangero.us/swiper/demos/

Continue Reading

How to fix footer at bottom gap without using height fixed?

How to fix footer at bottom gap without using height fixed?


 $(function () {
        function adjust() {
            var winH = $(window).height(),
                docH = $('document').height();

            if (docH > winH) {
                //leave it
            } else {
                $('.footer').addClass('fixedfooter');
            }
        }
        $(window).on('resize', adjust);
 adjust();
    })

How to add more than one click events on same element using Jquery?


$(document).on('click', 'a.menu', function() { 
  console.log('first');
});
$(document).on('click', 'a.active', function() { 
  console.log('second');  
});

How to add active class if corresponding page is active?


$(function () {
    var current = location.pathname;
    
$('.menu-primary .nav li a').each(function () {
        var $this = $(this);
        
// if the current path is like this link, make it active
        
if ($this.attr('href').indexOf(current) !== -1) {
            $this.addClass('active');
        }
    })
})

Add active class in tab head when click it


    $(document).ready(function () {
        $('.route-activity .nav li').click(function (e) {
            $('.route-activity .nav li').removeClass('active');
            var $this = $(this);
            if (!$this.hasClass('active')) {
                $this.addClass('active');
            }
            //e.preventDefault();
        });
 });

Continue Reading

How to Create a full screen bootstrap carousel slider?

Create a full-page bootstrap carousel

We can develop a full screen bootstrap carousel or slider by using below scripts.


/* full page carousel */
jQuery(document).ready(function () {
$('.carousel').carousel({
	pause: "false"
});
$('.carousel').css({ 'margin': 0, 'width': $(window).outerWidth(), 'height': $(window).outerHeight() });
//$('.carousel-inner').css({'z-index': 0});
$('.carousel .item').css({ 'position': 'fixed', 'width': '100%', 'height': '100%' });
$('.carousel-inner div.itemimg').each(function () {
	varimgSrc = $(this).attr('src');
	$(this).parent().css({ 'background': 'url(' + imgSrc + ') center center no-repeat', '-webkit-background-size': '100% ', '-moz-background-size': '100%', '-o-background-size': '100%', 'background-size': '100%', '-webkit-background-size': 'cover', '-moz-background-size': 'cover', '-o-background-size': 'cover', 'background-size': 'cover' });
	$(this).remove();
});
$(window).on('resize', function () {
	$('.carousel').css({ 'width': $(window).outerWidth(), 'height': $(window).outerHeight() });
});
});

Continue Reading

What are the best practices of Javscript coding?

Best Practices for Javascript Coding

Inclusion of Code

  • Use external JavaScript files. Do NOT include JavaScript in-line in the page unless there is a good reason.
  • Use the <script> tag to include your JavaScript files at the bottom of your HTML document just before the closing </body> tag. For optimal page performance, concatenate your JavaScript into separate file.

Formatting of Javascript Code

  • Open braces are preceded by a single space.
  • Open braces should appear on the same line as their preceding argument.
  • Close braces should appear at the same indentation as the statement preceding the opening brace.
  • There should be no space characters between parentheses and their contents.
  • Use semicolons and do not rely on automatic semicolon insertion.
  • Each comma and colon (and semi-colons that don’t end a line) should be followed by a single space.

Variable declaration

To avoid confusion between global and local variables, we declare each variable on its own line with the var keyword. We do not use a single var keyword and then chain several variable declarations onto it separated by a comma.

Variable Names and Types

  • Variable names should be Camel Case.
  • Objects, classes, and name-spaces should be Title Case.
  • Boolean values should be prefixed with is if at all possible.
    Cached JQuery objects can be prefixed with $.
  • Use shorthand versions of empty Arrays and Objects.

Examples:

// some examples
var exampleValue ='my example variable value';
var numberOfTimes =3;
// booleans
var isThisWorking =true;
var isNotWorking =0;
// cache a selector
var $body =$('body');
// short hand objects and arrays
var newObject ={};
var newArray =[];

Limit Events — Use Event Delegation

With jQuery this is easy, simply use the on method with a selector:


$('body').on('click','a.scroller',function(){
// this only runs if the a.scroller is matched
});

Too many events bound on a page can mean memory leaks or just an accumulation of handlers bound to DOM elements which becomes less and less efficient over time.

Additionally, event delegation has the added benefit of persisting events over dynamic page updates when items are added or removed from the DOM.

More code practices

  • Avoid using document.write.
  • Only run scripts on a page that are needed for that page.
  • Don’t repeat yourself (i.e. keep your code DRY)
  • Do not modify JavaScript core objects .prototype unless you really know what you’re doing.
  • Use method names that make sense, such as init() or setup() for code that starts things off. Be consistent on your project.
  • Binary and ternary operators should have a single space on each side.
  • Quoted values should be in ‘single quotes’ so that double quotes may easily exist inside them.
  • Comment JavaScript code thoroughly and consider using a pattern such as those described by JSDocs so that documentation may be generated automatically.
  • Conditional statements go on a new line followed by the opening brace. Else/else go on the same line as the brace.
  • Use type strict checks with === as opposed to == whenever possible.
Continue Reading

How to do Form Validation using Jquery?

Form Validation using Jquery

<head> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.slim.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script> </head>

We will see the Jquery validation for below sample form.

form validation
HTML:
Required HTML codes for above form design.


<form>
<input name="firstname" type="text" value="firstname" />
<input name="lastname" type="text" value="lastname" />
<input name="email" type="email" value="email" />
<input type="button" value="submit" />
</form>
 

Add below CSS to differentiate the validation messages.

CSS:


.error { 
border: 1px solid #b94a48; 
background-color: #fee; 
}
 

Script:


$(document).ready(function(){
  $(function() {
  // Setup form validation on the #register-form element
 $("#register-form").validate({   //#register-form is form id
     // Specify the validation rules
rules: {
         firstname: "required", //firstname is corresponding input name
         lastname: "required",  //lastname:  is corresponding input name
         email: {               //email is corresponding input name
             required: true,
             email: true
         },
     },
     // Specify the validation error messages
messages: {
         firstname: "Enter First Name",
         lastname: "Enter Last Name",
         email: "Enter Valid Email ID",
         agree: "Please accept our policy"
     },
     submitHandler: function(form) {
         form.submit();
     }
 });

  });
})
 

Explanation:
By using validate method we can define two arrays like rules and messages. In the rules, we can set the validation conditions to accept the given input. In the messages part, we should define the validation messages to show when the user entered the detail wrongly.

Continue Reading

How to Add tooltip when hovering on html element?

Implement tooltip when hovering element

We can implement tooltip by using below script.

Script:


//append tooltip
          jQuery('li .helptext').hover(function(){
             // Hover over code
                   var title = $(this).attr('alt');           
                   jQuery('
').text(title).appendTo('body').fadeIn('slow');
          }, function() {
                   // alert('test');
// Hover out code
jQuery('.tooltip').remove();
          }).mousemove(function(e) {
                   var mousex = e.pageX + 20; //Get X coordinates
                   var mousey = e.pageY + 10; //Get Y coordinates
                   jQuery('.tooltip')
                   .css({ top: mousey, left: mousex })
          });           
          //tooltip end

Note:

Update the selector name based on your class name or id name.

CSS:


.tooltip {
          height:50px;
          color:#fff;
          position:absolute;
          border:1px solid #333;
          background:#333;
          border-radius:5px;
          padding:10px;
          font-size:12px;
          width: 250px;
          z-index: 999999;
          opacity: 1 !important;
}
.helptext {cursor:help;}
Continue Reading

How to Change the background color of odd and even row?

Change the background color for odd and event panel of accordion

‘Odd’ and ‘even’ pseudo classes are used to selecting the odd and even number of row.

Script:


  $(function(){
    $('.panel-group > .panel-default:even').addClass('even');
    $('.panel-group > .panel-default:odd').addClass('odd');
});

Explanation:
By using odd and even classes we can set the required background color using CSS.

Continue Reading

Popover / Tooltip using Jquey plugin

Popover implementation using Webui-popover

Webui-popover is a jquery plugin which is used for creating popover UI component.

Step 1:
Include webui-popover CSS in head section.


 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/webui-popover/2.1.15/jquery.webui-popover.min.css" />

Step 2:
Include Jquery library and webui-popover js files in head section.


 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js "></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/webui-popover/2.1.15/jquery.webui-popover.min.js"></script>

Step 3:
Call the webuipopover method to trigger the popover on the selected element.


$(document).ready(function(){
        $('#tooltippanel').webuiPopover({
                constrains: 'horizontal', 
                trigger:'click',
                multi: true,
                placement:'right-top',
                width:100,
                content: 'tooltip contents placed here...'
        });
    });

Explanation:

  • When click the corresponding selector (id or class name), script will trigger the webui-Popover on that target element.
  • Placement attribute specifies the tool-tip direction display. Different direction are there such as left, right, top, bottom, right-top, right-bottom, top-left, top-right.. etc.
  • We can put the tool-tip content within “content” attribute.
Continue Reading