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 Prevent Bootstrap Modal from Closing when Clicking Outside by using CSS?

Prevent Bootstrap Modal from Closing when Clicking Outside

By expanding the modal-dialog dimensions to full window, we can avoid the outside click close.


//CSS
.modal {
    background-color: rgba(0,0,0,0.5);
}
.modal-dialog{
    width: 100%;
    height: 100vh;
    margin: 0 !important;
}
.modal-content {
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: auto;
    top: 15%;
}
@media (min-width: 600px){
.modal-content {
    width: 700px;
}
}
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

What are the important data visualization Applications?

Important data visualization Applications:

Data Voyage (Visualization browser)

Visualization browser for open-ended data exploration building on top of Vega-Lite.
Start exploring data by examining each field and continue by selecting interesting data fields in
data selector panel.

Online Demo:
Voyager

Repository:
Voyager Repository

Lightbeam

It is a Firefox add-on that uses interactive visualizations to show you the first and third party sites you interact with on the Web.
Lightbeam

Socilab

It allows users to visualize and analyze their LinkedIn network using methods derived from social-scientific research.
Socilab

Cytoscape

Cytoscape is an open source software platform for visualizing complex networks and integrating these with any type of attribute data.
cytoscape

Datavizcatalogue

Complete list of data visualization
Datavizcatalogue

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

How to do minification and concatenate the files using Gulp JS

Minify and concatenate the JS files using gulp js

Minify and concatenate the multiple JS files into singles file using gulp.

Step 1: Gulp plugin

Declare the gulp plugins in gulpfile.js file.
var gulp = require(‘gulp’);

Step 2: Uglify plugin

Declare the uglify plugin for minifies the required js files.
var uglify = require(‘gulp-uglify’);

Step 3: Concat plugin

Declare the concat plugin for combining the JS files into single file.
Var concat = require(‘gulp-concat’);

Step 4: Creating gulp task

Creating gulp task for Minification and concat process.

gulp.task(‘scripts’, function() {
gulp.src(‘src/*.js’)
.pipe(concat(‘all.min.js’))
.pipe(uglify())
.pipe(gulp.dest(‘dist’));
});

Gulp Task code Explanation:

gulp.src – It defines the input files path for processing
pipe – It is used to chain multiple tasks together using pipe method.
gulp.dest – It defines the output location for processed files.
Concat – This method combines multiples files into single file. We should declare the output
file name within the brackets.

Overall Source Code for Minify and concatenate the JS files using gulp js.


//gulpfile.js file

//Adding dependencies
var gulp = require('gulp');
varuglify = require('gulp-uglify');
varconcat = require('gulp-concat');

//defining tasks
gulp.task('default', function() {  //default is a task name, we can give any name.
	gulp.src('src/*.js')
	.pipe(concat('all.min.js'))
	.pipe(uglify())
	.pipe(gulp.dest('dist'));
});

Project Folder Structure:

Gulp folder structure

Continue Reading

How to install gulp js?

Steps to installing gulp js:

First we should install npm using below command.
npm install

To install npm in development environment use below command.
npm install –save—dev

After that Create empty package.json file in node folder then run the below command.
npm init

To install gulp, run the below command.
npm install gulp -g

To install gulp in project directory use below command.
npm install –save-dev gulp-install

After that create gulpfile.js file locally in the corresponding folder.

Folder Structure:
Gulp folder structure

Continue Reading

How CSS Position Properties work?

Position properties in CSS

Position is an essential CSS property for control the positioning of layout elements.

Static Position

All the HTML elements are always positioned to the normal flow of web page. Simply we can tell like default position.

Relative Position

An element with relative CSS property is always positioned relative to its normal (existing) position.

CSS relative position

Absolute Position

An element with absolute CSS property is always positioned relative to its parent element which has relative property.

CSS absolute position

If no parent element which has position property, it is always positioned relative to the document body. When page is scrolled, absolute element will move along with page scrolling.

CSS absolute position demo

Fixed Position

An element with fixed CSS property is always positioned relative to the viewport, it means it stays in the same position even if the page is scrolled.

CSS fixed position

Continue Reading

How CSS Display Property works?

Display Properties in CSS

Display is an essential CSS property for controlling layout structure / content.

Display: block

An element with CSS block property, it starts on a new line and stretches to the full width of row from left to right end.

Default block level elements:

  • div
  • ul
  • p
  • header
  • footer
  • section
  • fieldset
  • h1 to h6
  • table… etc

Display: Inline

An element with inline CSS property, it starts on a same existing line without any line break and wrap some text inside it without disrupting flow of row. It just starts on a same existing line and stretches to the text content size. It cannot have a width and height set.

Default inline elements:

  • span
  • a
  • strong
  • img
  • label
  • input
  • select
  • textarea
  • button
  • sub, sup… etc

Display: inline-block

An element with inline-block CSS property, it is positioning as an inline element but it behaves as a block element with defined width and height properties.

CSS Position properties

Display: flex

Flex layout provides an efficient way to alter its items dimension (width and height), align, distribute space among elements within the document.A flex container expands items to fill available free space, or shrinks them to prevent overflow.

To learn more about flexbox, please access the below link.
http://flexbox.help/

Display: table

An element with table CSS property will acts as a table layout.

Display: none

An element with a none CSS property will hide the element from view.

Display: inherit

An element with an inherit CSS property will apply the parent properties to child element.

Continue Reading
1 2 3 5