Scroll Two Divs Together

Recently in one of my project there was a requirement to maintain scroll positions of two divs. In UI there are two divs side by side. If user scrolls on left DIV then right div should also be scrolled and if user scrolls on right DIV then left div should also be scrolled. So here is how to do this.

var leftPart = document.getElementById('leftPart');
var rightPart = document.getElementById('rightPart');

Now lets add scroll event on both.

leftPart.onscroll = function() {
    rightPart.scrollTop = this.scrollTop;
}

rightPart.onscroll = function() {
    leftPart.scrollTop = this.scrollTop;
}

That's it now both should scroll no but wait it makes your UI unresponsive because there is a deadlock. While right one is scrolling, it will also scroll left one and at the same time it will also fire event and will try  to scroll right one again and there is DEADLOCK.........

So to prevent it, we have to add flags to check if one is already scrolling then hold the event.

so lets have two flags.

var isSyncingLeftScroll = false;
var isSyncingRightScroll = false;

and use it in scroll event.

leftPart.onscroll = function() {
  if (!isSyncingLeftScroll) {
    isSyncingRightScroll = true;
    rightPart.scrollTop = this.scrollTop;
  }
  isSyncingLeftScroll = false;
}

rightPart.onscroll = function() {
  if (!isSyncingRightScroll) {
    isSyncingLeftScroll = true;
    leftPart.scrollTop = this.scrollTop;
  }
  isSyncingRightScroll = false;
}

That's it and now you will have smooth scrolling effect on both the DIVs. Hope this helps you.

OSX MAMP, Update PHP Version

Hello,

So recently I was working on Laravel Lumen framework where we need PHP 7.1.3 version. In my OSX XAMPP was using php version 7.1.1

So here in this blog I am going to explain step by step procedure.

Step 1: Go to MAMP website and download the new version of PHP. Go to following link

MAMP Downloads

On left side you will see column with title "Additional PHP versions"

There you will find list of PHP versions for OSX, download the one which you want and extract it. Copy it to

MAMP\bin\php folder.

For example if you download php version 7.1.3 then you will get folder with name

php7.1.3

Now you have to make two changes.

First edit path in your bash profile and update the existing path of PHP to newer version.

export PATH=/Applications/MAMP/bin/php/php7.1.3/bin:$PATH

After this quit the MAMP and restart it. It should work. No wait still it may not work for you.  As you go to MAMP preference screen, you will see that still it's using old version and new version is not displayed there.

That's because, by default free version of MAMP displays only last two folder here. So trick is to delete old folder or rename it and now your version of PHP will be displayed. Select it click on OK, restart MAMP and that's it now you get newer version of PHP. 

Hope this helps you.

Some Tips and Tricks of Working With Bootstrap Select2 Control

Hello,

Since I am a web developer, I used to work  a lot with Bootstrap Select 2 Control. Here I am going to share some quick tips and tricks of working with Select 2 controls.

1) Dynamically create Select2 control with JavaScript

When we are working on dynamic websites, sometimes we also have to create select2 controls dynamically. Most of the developers faces issues here. Because select2 control is created by JavaScript on document ready. So if you want create it dynamically, first append basic html of control inside and the by using JavaScript init it.

Something like this.

$('.select2').select2();

Sometimes it takes time to get reflect in DOM so in this case you may have to give some timeout.

setTimeout(function(){
      $('.select2').select2();
},500);

2) Open Select2 dropdown on focus.

This is one more UX experience. Most of the web users are used to work with TAB. So in your form if you have select2 control and you come on it via tab. It should open dropdown.

Here is how we can do it.

$(document).on('focus', '.select2', function() {
if($(this).prev().val() == ''){
  $(this).siblings('select').select2('open');
}
});

3) Open Select2 dropdown with down arrow key

This is one more UX experience. Most of the web users are used to work with up and down arrow while working with dropdown. So in case of select2 they are expecting the same result.

$(document).on('keydown', '.select2', function(event) {
    if(event.keyCode == 40){
    $(this).siblings('select').select2('open');
    }
});

4) Keep focus on Select2 after selecting item and dropdown is closed.

In new version of Select2 there is a bug that after you select an item and dropdown is closed. It will lost focus. So to keep focus on the control, use following code.

$('select').on(
  'select2:close',
  function () {
  $(this).focus();
  }
  );
},1000);

Hope this tips helps you in your development with Select2.

Amazon EC2 Laravel Not Live After " php artisan up " Command

Hello,

This blog post is about quick tip for the users who have deployed Laravel application on Amazon EC2 instance.

Recently we had Laravel application deployed on Amazon EC2 instance where we put site on maintenance mode with command

php artisan down

Worked properly, site was in maintenance mode and displayed

Be Right Back screen.

After sometime we tried to make site up and running by

php artisan up

Didn't work as site was still displaying

Be Right Back screen

Tried to clear the cache and config with

php artisan cache:clear
php artisan config:clear

But still it didn't worked. After 5 to 10 mins to struggle, found out an issue. It was because of file permission issue.  When you put site to maintenance mode, it creates

storage/framework/down folder

When you run

php artisan up

This folder should be removed. However in my case I was not using root user hence this file was not deleted.

So solution is

go to storage/framework folder and run command

rm -rf down

and that's it, your site is up and live.

Hope this helps you.