JQuery Multiscroll.js

In this article, we will understand about the multiscoll.js plugin in detail with the help of example. In this we can move the slide in multiple directions at the same time i.e. either left or right and top or bottom.
Example 1:

<! DOCTYPE HTML>
<html>
	<head>
		<title>
			JQuery Multiscroll.js 
		</title>
		<link href="https://github.com/alvarotrigo/multiscroll.js/blob/master/jquery.multiscroll.css"> 
		<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
<script src = "https://cdn.staticfile.org/jquery-easing/1.3/jquery.easing.min.js"> </script>
<script src="https://github.com/alvarotrigo/multiscroll.js/blob/master/dist/jquery.multiscroll.js"> </script>
	</head>
	<style>
	.spacer {
  height: 600px;
  width: 100%;
  background: red;
  position:relative;
  z-index: 999;
}

.container {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow:hidden;
  background:blue;
}
.normal {
  height: 400px !important;
  width: 100%;
  background: red;
}
.stop-scrolling {
  height: 100%;
  overflow: hidden;
}
html, body {
    margin: 0;
    padding: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.ms-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ms-section.ms-table{
    display: table;
    width: 100%;
}
.ms-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.ms-easing {
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}
#multiscroll-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
}
#multiscroll-nav.right {
    right: 17px;
}
#multiscroll-nav.left {
    left: 17px;
}
#multiscroll-nav ul{
  margin: 0;
  padding: 0;
}
#multiscroll-nav li{
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}
#multiscroll-nav li a{
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#multiscroll-nav li .active span{
    background: #333;
}
#multiscroll-nav span{
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}
.multiscroll-tooltip {
    position: absolute;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    top: -2px;
    white-space: nowrap;
    max-width: 220px;
}
.multiscroll-tooltip.right {
    right: 20px;
}
.multiscroll-tooltip.left {
    left: 20px;
}
</style>
	<body>
	<center>
		<h1> Example </h1>
		<h2> jQuery multiscroll </h2>
<div class = "container">
  <div id = "multiscroll">
    <div class = "ms-left">
        <div class = "ms-section"> Section 1 Left </div> 
        <div class = "ms-section"> Section 2 Left </div>
        <div class = "ms-section"> Section 3 Left </div>
    </div>
    <div class = "ms-right">
        <div class = "ms-section"> Section 1 Right </div>
        <div class = "ms-section"> Section 2 Right </div>
        <div class = "ms-section"> Section 3 Right </div>
    </div>
  </div>
</div>
		<script>
(function($, window, document, Math, undefined) {
	$.fn.multiscroll = function(options) {
		var MS = $.fn.multiscroll;
		options = $.extend({
			'verticalCentered' : true,
			'scrollingSpeed': 700,
			'easing': 'easeInQuart',
			'menu': false,
			'sectionsColor': [],
			'anchors':[],
			'navigation': false,
			'navigationPosition': 'right',
			'navigationColor': '#000',
			'navigationTooltips': [],
			'loopBottom': false,
			'loopTop': false,
			'css3': false,
			'paddingTop': 0,
			'paddingBottom': 0,
			'fixedElements': null,
			'normalScrollElements': null,
			'keyboardScrolling': true,
			'touchSensitivity': 5,
			'sectionSelector': '.ms-section',
			'leftSelector': '.ms-left',
			'rightSelector': '.ms-right',
			'afterLoad': null,
			'onLeave': null,
			'afterRender': null,
			'afterResize': null
		}, options);
		var scrollDelay = 600;
		var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0) || (navigator.maxTouchPoints));
		if (options.rightSelector !== '.ms-right') {
			$(options.rightSelector).addClass('ms-right');
		}
		if (options.leftSelector !== '.ms-left') {
			$(options.leftSelector).addClass('ms-left');
		}
		var numberSections = $('.ms-left').find('.ms-section').length;
		var isMoving = false;
		var nav;
		var windowHeight = $(window).height();
		addMouseWheelHandler();
		addTouchHandler();
		if(options.css3){
			options.css3 = support3d();
		}
		if (options.sectionSelector !== '.ms-section') {
			$(options.sectionSelector).each(function(){
				$(this).addClass('ms-section');
			});
		}
		if (options.navigation) {
			$('body').append('<div id="multiscroll-nav"><ul></ul></div>');
			nav = $('#multiscroll-nav');

			nav.css('color', options.navigationColor);
			nav.addClass(options.navigationPosition);
		}
		$('.ms-right, .ms-left').css({
			'width': '50%',
			'position': 'absolute',
			'height': '100%',
			'-ms-touch-action': 'none'
		});
		$('.ms-right').css({
			'right': '1px', //http://stackoverflow.com/questions/23675457/chrome-and-opera-creating-small-padding-when-using-displaytable
			'top': '0',
			'-ms-touch-action': 'none',
			'touch-action': 'none'
		});
		$('.ms-left').css({
			'left': '0',
			'top': '0',
			'-ms-touch-action': 'none',
			'touch-action': 'none'
		});
		$('.ms-left .ms-section, .ms-right .ms-section').each(function(){
			var sectionIndex = $(this).index();
			if(options.paddingTop || options.paddingBottom){
				$(this).css('padding', options.paddingTop  + ' 0 ' + options.paddingBottom + ' 0');
			}
			if (typeof options.sectionsColor[sectionIndex] !==  'undefined') {
				$(this).css('background-color', options.sectionsColor[sectionIndex]);
			}
			if (typeof options.anchors[sectionIndex] !== 'undefined') {
				$(this).attr('data-anchor', options.anchors[sectionIndex]);
			}
			if(options.verticalCentered){
				addTableClass($(this));
			}
			if($(this).closest('.ms-left').length && options.navigation) {
				var link = '';
				if(options.anchors.length){
					link = options.anchors[sectionIndex];
				}
				var tooltip = options.navigationTooltips[sectionIndex];
				if(typeof tooltip === 'undefined'){
					tooltip = '';
				}
				if (options.navigation) {
					nav.find('ul').append('<li data-tooltip="' + tooltip + '"><a href="#' + link + '"><span></span></a></li>');
				}
			}
		});
		$('.ms-right').html( $('.ms-right').find('.ms-section').get().reverse());
		$('.ms-left .ms-section, .ms-right .ms-section').each(function(){
			var sectionIndex = $(this).index();
			$(this).css({
				'height': '100%'
			});
			if(!sectionIndex && options.navigation ){
				nav.find('li').eq(sectionIndex).find('a').addClass('active');
			}
		}).promise().done(function(){
			if(!$('.ms-left .ms-section.active').length){
				$('.ms-right').find('.ms-section').last().addClass('active');
				$('.ms-left').find('.ms-section').first().addClass('active');
			}
			if(options.navigation){
				nav.css('margin-top', '-' + (nav.height()/2) + 'px');
			}
			$.isFunction( options.afterRender ) && options.afterRender.call( this);
			silentScroll();
			setBodyClass();
			$(window).on('load', function() {
				scrollToAnchor();
			});
		});
		$(window).on('hashchange', hashChangeHandler);
		function hashChangeHandler(){
			var value =  window.location.hash.replace('#', '');
			var sectionAnchor = value;
			if(sectionAnchor.length){
				var section = $('.ms-left').find('[data-anchor="'+sectionAnchor+'"]');

				var isFirstScrollMove = (typeof lastScrolledDestiny === 'undefined' );
				if (isFirstScrollMove || sectionAnchor !== lastScrolledDestiny){
					scrollPage(section);
				}
			}
		};
		$(document).keydown(keydownHandler);
		var keydownId;
		function keydownHandler(e) {
			clearTimeout(keydownId);
			var activeElement = $(document.activeElement);
			if(!activeElement.is('textarea') && !activeElement.is('input') && !activeElement.is('select') &&
				options.keyboardScrolling){
				var keyCode = e.which;
				var keyControls = [40, 38, 32, 33, 34];
				if($.inArray(keyCode, keyControls) > -1){
					e.preventDefault();
				}
				keydownId = setTimeout(function(){
					onkeydown(e);
				},150);
			}
		}
		function onkeydown(e){
			var shiftPressed = e.shiftKey;

			switch (e.which) {
				case 38:
				case 33:
					MS.moveSectionUp();
					break;
				case 32: 
					if(shiftPressed){
						MS.moveSectionUp();
						break;
					}
				case 40:
				case 34:
					MS.moveSectionDown();
					break;
				case 36:
					MS.moveTo(1);
					break;
				case 35:
					MS.moveTo( $('.ms-left .ms-section').length);
					break;

				default:
					return; 
			}
		}
		$(document).mousedown(function(e) {
			if(e.button == 1){
				e.preventDefault();
				return false;
			}
		});
		$(document).on('click', '#multiscroll-nav a', function(e){
			e.preventDefault();
			var index = $(this).parent().index();
			scrollPage($('.ms-left .ms-section').eq(index));
		});
		$(document).on({
			mouseenter: function(){
				var tooltip = $(this).data('tooltip');
				$('<div class="multiscroll-tooltip ' + options.navigationPosition +'">' + tooltip + '</div>').hide().appendTo($(this)).fadeIn(200);
			},
			mouseleave: function(){
				$(this).find('.multiscroll-tooltip').fadeOut(200, function() {
					$(this).remove();
				});
			}
		}, '#multiscroll-nav li');
		if(options.normalScrollElements){
			$(document).on('mouseenter', options.normalScrollElements, function () {
				MS.setMouseWheelScrolling(false);
			});

			$(document).on('mouseleave', options.normalScrollElements, function(){
				MS.setMouseWheelScrolling(true);
			});
		}
		$(window).on('resize', doneResizing);
		function doneResizing() {
			windowHeight = $(window).height();
			$('.ms-tableCell').each(function() {
				$(this).css({ height: getTableHeight($(this).parent()) });
			});
			silentScroll();
			$.isFunction( options.afterResize ) && options.afterResize.call( this);
		}
		function silentScroll(){
			if(options.css3){
				transformContainer($('.ms-left'), 'translate3d(0px, -' + $('.ms-left').find('.ms-section.active').position().top + 'px, 0px)', false);
				transformContainer($('.ms-right'), 'translate3d(0px, -' + $('.ms-right').find('.ms-section.active').position().top + 'px, 0px)', false);
			}else{
				$('.ms-left').css('top', -$('.ms-left').find('.ms-section.active').position().top );
				$('.ms-right').css('top', -$('.ms-right').find('.ms-section.active').position().top );
			}
		}
		MS.moveSectionUp = function(){
			var prev = $('.ms-left .ms-section.active').prev('.ms-section');

			if(!prev.length && options.loopTop){
				prev = $('.ms-left .ms-section').last();
			}
			if (prev.length) {
				scrollPage(prev);
			}
		};
		MS.moveSectionDown = function (){
			var next = $('.ms-left .ms-section.active').next('.ms-section');
			if(!next.length && options.loopBottom ){
				next = $('.ms-left .ms-section').first();
			}
			if(next.length){
				scrollPage(next);
			}
		};
		MS.moveTo = function (section){
			var destiny = '';
			if(isNaN(section)){
				destiny = $('.ms-left [data-anchor="'+section+'"]');
			}else{
				destiny = $('.ms-left .ms-section').eq( (section -1) );
			}
			scrollPage(destiny);
		};
		function scrollPage(leftDestination){
			var leftDestinationIndex = leftDestination.index();
			var rightDestination = $('.ms-right').find('.ms-section').eq( numberSections -1 - leftDestinationIndex);
			var rightDestinationIndex = numberSections - 1 - leftDestinationIndex;
			var anchorLink  = leftDestination.data('anchor');
			var activeSection = $('.ms-left .ms-section.active');
			var leavingSection = activeSection.index() + 1;
			var yMovement = getYmovement(leftDestination);
			isMoving = true;
			var topPos = {
				'left' : leftDestination.position().top,
				'right': rightDestination.position().top
			};
			rightDestination.addClass('active').siblings().removeClass('active');
			leftDestination.addClass('active').siblings().removeClass('active');
			setURLHash(anchorLink);
			if (options.css3){
				$.isFunction(options.onLeave) && options.onLeave.call(this, leavingSection, (leftDestinationIndex + 1), yMovement);
				var translate3dLeft = 'translate3d(0px, -' + topPos['left'] + 'px, 0px)';
				var translate3dRight = 'translate3d(0px, -' + topPos['right'] + 'px, 0px)';
				transformContainer($('.ms-left'), translate3dLeft, true);
				transformContainer($('.ms-right'), translate3dRight, true);
				setTimeout(function () {
					$.isFunction(options.afterLoad) && options.afterLoad.call(this, anchorLink, (leftDestinationIndex + 1));
					setTimeout(function () {
						isMoving = false;
					}, scrollDelay);
				}, options.scrollingSpeed);
			}else{
				$.isFunction(options.onLeave) && options.onLeave.call(this, leavingSection, (leftDestinationIndex + 1), yMovement);
				$('.ms-left').animate({
					'top': -topPos['left']
				}, options.scrollingSpeed, options.easing, function(){
					$.isFunction(options.afterLoad) && options.afterLoad.call(this, anchorLink, (leftDestinationIndex + 1));
					setTimeout(function () {
						isMoving = false;
					}, scrollDelay);
				});
				$('.ms-right').animate({
					'top': -topPos['right']
				}, options.scrollingSpeed, options.easing);
			}
			lastScrolledDestiny = anchorLink;
			activateMenuElement(anchorLink);
			activateNavDots(anchorLink, leftDestinationIndex);
		}
		function removeMouseWheelHandler(){
			if (document.addEventListener) {
				document.removeEventListener('mousewheel', MouseWheelHandler, false); 
				document.removeEventListener('wheel', MouseWheelHandler, false); 
			} else {
				document.detachEvent("onmousewheel", MouseWheelHandler); 
			}
		}
		function addMouseWheelHandler(){
			if (document.addEventListener) {
				document.addEventListener("mousewheel", MouseWheelHandler, false); //IE9, Chrome, Safari, Oper
				document.addEventListener("wheel", MouseWheelHandler, false); //Firefox
			} else {
				document.attachEvent("onmousewheel", MouseWheelHandler); 
			}
		}
		function MouseWheelHandler(e) {
		
			e = window.event || e;
			var delta = Math.max(-1, Math.min(1,
					(e.wheelDelta || -e.deltaY || -e.detail)));
			if (!isMoving) { 
				if (delta < 0) {
					MS.moveSectionDown();
				}
				else {
					MS.moveSectionUp();
				}
			}


			return false;
		}
		function getTransforms(translate3d){
			return {
				'-webkit-transform': translate3d,
				'-moz-transform': translate3d,
				'-ms-transform':translate3d,
				'transform': translate3d
			};
		}
		function activateNavDots(name, sectionIndex){
			if(options.navigation){
				$('#multiscroll-nav').find('.active').removeClass('active');
				if(name){
					$('#multiscroll-nav').find('a[href="#' + name + '"]').addClass('active');
				}else{
					$('#multiscroll-nav').find('li').eq(sectionIndex).find('a').addClass('active');
				}
			}
		}
		function getYmovement(destiny){
			var fromIndex = $('.ms-left .ms-section.active').index();
			var toIndex = destiny.index();

			if(fromIndex > toIndex){
				return 'up';
			}
			return 'down';
		}
		function setURLHash(anchorLink){
			if(options.anchors.length){
				location.hash = anchorLink;
			}
			setBodyClass();
		}
		function setBodyClass(){
			var section = $('.ms-left .ms-section.active');
			var sectionAnchor = section.data('anchor');
			var sectionIndex = section.index();
			var text = String(sectionIndex);
			if(options.anchors.length){
				text = sectionAnchor;
			}
			text = text.replace('/', '-').replace('#','');
			var classRe = new RegExp('\\b\\s?' + 'ms-viewing' + '-[^\\s]+\\b', "g");
			$('body')[0].className = $('body')[0].className.replace(classRe, '');
			$('body').addClass('ms-viewing-' + text);
		}
		function support3d() {
			var el = document.createElement('p'),
				has3d,
				transforms = {
					'webkitTransform':'-webkit-transform',
					'OTransform':'-o-transform',
					'msTransform':'-ms-transform',
					'MozTransform':'-moz-transform',
					'transform':'transform'
				};
			document.body.insertBefore(el, null);
			for (var t in transforms) {
				if (el.style[t] !== undefined) {
					el.style[t] = "translate3d(1px,1px,1px)";
					has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
				}
			}
			document.body.removeChild(el);
			return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
		}
		function addTableClass(element){
			element.addClass('ms-table').wrapInner('<div class="ms-tableCell" style="height: ' + getTableHeight(element) + 'px" />');
		}
		function getTableHeight(section){
			var sectionHeight = windowHeight;
			if(options.paddingTop || options.paddingBottom){
				var paddings = parseInt(section.css('padding-top')) + parseInt(section.css('padding-bottom'));
				sectionHeight = (windowHeight - paddings);
			}

			return sectionHeight;
		}
		function scrollToAnchor(){
			var sectionAnchor =  window.location.hash.replace('#', '');
			var section = $('.ms-left .ms-section[data-anchor="'+sectionAnchor+'"]');
			if(sectionAnchor.length){ 
				scrollPage(section);
			}
		}
		var touchStartY = 0;
		var touchStartX = 0;
		var touchEndY = 0;
		var touchEndX = 0;
		function touchMoveHandler(event){
			var e = event.originalEvent;
			if(isReallyTouch(e)){
				event.preventDefault();
				var activeSection = $('.ms-left .ms-section.active');
				if (!isMoving) { 
					var touchEvents = getEventsPage(e);
					touchEndY = touchEvents['y'];
					touchEndX = touchEvents['x'];
					if (Math.abs(touchStartY - touchEndY) > ($(window).height() / 100 * options.touchSensitivity)) {
						if (touchStartY > touchEndY) {
							MS.moveSectionDown();

						} else if (touchEndY > touchStartY) {
							MS.moveSectionUp();
						}
					}
				}
			}
		}
		function addTouchHandler(){
			if(isTouch){
				MSPointer = getMSPointer();
				$(document).off('touchstart ' +  MSPointer.down).on('touchstart ' + MSPointer.down, touchStartHandler);
				$(document).off('touchmove ' + MSPointer.move).on('touchmove ' + MSPointer.move, touchMoveHandler);
			}
		}
		function getEventsPage(e){
			var events = [];
			events.y = (typeof e.pageY !== 'undefined' && (e.pageY || e.pageX) ? e.pageY : e.touches[0].pageY);
			events.x = (typeof e.pageX !== 'undefined' && (e.pageY || e.pageX) ? e.pageX : e.touches[0].pageX);
			if(isTouch && isReallyTouch(e)){
				events.y = e.touches[0].pageY;
				events.x = e.touches[0].pageX;
			}

			return events;
		}
		MS.destroy = function() {
			MS.setKeyboardScrolling(false);
			MS.setMouseWheelScrolling(false);
			$(window)
				.off('hashchange', hashChangeHandler)
				.off('resize', doneResizing);
			$(document)
				.off('mouseenter', '#multiscroll-nav li')
				.off('mouseleave', '#multiscroll-nav li')
				.off('click', '#multiscroll-nav a');
		};
		MS.build = function() {
			MS.setKeyboardScrolling(true);
			MS.setMouseWheelScrolling(true);
			$(window)
				.on('hashchange', hashChangeHandler)
				.on('resize', doneResizing);
			$(document)
				.on('mouseenter', '#multiscroll-nav li')
				.on('mouseleave', '#multiscroll-nav li')
				.on('click', '#multiscroll-nav a');
		};
	};
})(jQuery, window, document, Math);
var entering = true;
$(document).ready(function() {
  $('.spacer').click(function() {
    console.log("spacer clicked");
    $('html, body').animate({
        scrollTop: $(".spacer.one").height()
    }, 200);
    $('html').css("overflow","hidden");
    $('body').css("overflow","hidden");
  });
  $(window).scroll(function() {
    scroll_loc = $(window).scrollTop();
    top_loc = $(".spacer.one").height(); 
    if(scroll_loc < top_loc) {
      entering = true;
    }
  })
  $('#multiscroll').multiscroll({
        verticalCentered : true,
        scrollingSpeed: 300,
        easing: 'easeInQuart',
        menu: false,
        sectionsColor: [],
        navigation: false,
        navigationPosition: 'right',
        navigationColor: '#000',
        navigationTooltips: [],
        loopBottom: false,
        loopTop: false,
        css3: true,
        paddingTop: '100px',
        paddingBottom: 0,
        normalScrollElements: '.normal, .spacer',
        keyboardScrolling: false,
        allowScrolling: false,
        touchSensitivity: 5,
        sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
        sectionSelector: '.ms-section',
        leftSelector: '.ms-left',
        rightSelector: '.ms-right',
        onLeave: function(index, nextIndex, direction){
          console.log('index: '+index+' nextIndex: ' +nextIndex + ' direction: '+direction);
          var scroll_to = $("#multiscroll").offset().top;
          if(index == 2 && direction == 'up') {
            $('html, body').animate({
                scrollTop: scroll_to
            }, 600, function() {
              $('html').css("overflow","auto");
              $('body').css("overflow","auto");
            });
          } else if(index == 2 && direction == 'down') {
            $('html, body').animate({ 
                scrollTop: scroll_to
            }, 600, function() {
              $('html').css("overflow","auto");
              $('body').css("overflow","auto");
            });
          } else if(index == 1 && direction == 'down' && entering) {
            entering = false;
            $.fn.multiscroll.moveTo(0);
            console.log("entered");
          } else {   
            if(entering) {
              entering = false;
              console.log("test");
              window.setTimeout(function() {
              }, 400);
            }
              $('html').css("overflow","hidden");
              $('body').css("overflow","hidden");
              $('html, body').animate({
                  scrollTop: scroll_to
              }, 200);
          }
        },
        afterLoad: function(anchorLink, index){},
        afterRender: function(){},
        afterResize: function(){},
    });
});
		</script>
	</body>
</html>	
Explanation:
In the above example, we can scroll the web page in multiple directions.
Output:
Following is the output of this example.
Next TopicJQuery Sort
← prev next →
For Videos Join Our Youtube Channel: Join Now
Feedback

Send your Feedback to [email protected]
Help Others, Please Share

Learn Latest Tutorials

Splunk
SPSS
Swagger
Transact-SQL
Tumblr
ReactJS
Regex
Reinforcement Learning
R Programming
RxJS
React Native
Python Design Patterns
Python Pillow
Python Turtle
Keras
Preparation

Aptitude
Reasoning
Verbal Ability
Interview Questions
Company Questions
Trending Technologies

Artificial Intelligence
AWS
Selenium
Cloud Computing
Hadoop
ReactJS
Data Science
Angular 7
Blockchain
Git
Machine Learning
DevOps
B.Tech / MCA

DBMS
Data Structures
DAA
Operating System
Computer Network
Compiler Design
Computer Organization
Discrete Mathematics
Ethical Hacking
Computer Graphics
Software Engineering
Web Technology
Cyber Security
Automata
C Programming
C++
Java
.Net
Python
Programs
Control System
Data Mining
Data Warehouse
Javatpoint Services

JavaTpoint offers too many high quality services. Mail us on h[email protected], to get more information about given services.
Website Designing
Website Development
Java Development
PHP Development
WordPress
Graphic Designing
Logo
Digital Marketing
On Page and Off Page SEO
PPC
Content Development
Corporate Training
Classroom and Online Training
Data Entry
Training For College Campus

JavaTpoint offers college campus training on Core Java, Advance Java, .Net, Android, Hadoop, PHP, Web Technology and Python. Please mail your requirement at [email protected].
Duration: 1 week to 2 week
^{Like/Subscribe us for latest updates or newsletter}