Category: Java Script

Java Script

Categories
AngularJS Career Code Area Java Script Tips and Tricks

Getting Query String Values Without a Hash in the URL

$location.search() returns empty? Angular does not remove the query before the hash bang in URL. According to AngularJS documentation,  hash bang URL format is:

http://example.com/#!/bar?baz=23

So if you have no hash bang in your URL (e.g. http://example.com/bar?baz=23), and try to get query string value, then you can use this snippet.

function getQueryParams(queryParam, url) 
{
        var pageUrl = url || window.location.search.substring(1);
        var urlVariables = pageUrl.split(/[&||?]/);
        var response = null;

        for (var i = 0; i < urlVariables.length; i += 1) {
            var param = urlVariables[i];
            var paramName = (param || '').split('=');

            if (paramName[0] === queryParam) {
                response = paramName[1];
            }
        }
        return response;
}
    
console.log(getQueryParams('baz', 'http://example.com/bar?baz=23'));

This code is also with pure JavaScript (withour AngularJS).

Categories
Career Java Script Tips and Tricks

Start Counting After Scroll on Specific Element

Sometimes it’s important to do some activities when a specific element is visible on the web page. So something needs to be trigger when that element is showing on the web page. Suppose you want to start counting after scroll on that specific element. Here is the code for that.

HTML CODE:
<div class="container">
  <h2 class="well well-lg" style="margin-top: 200px;">Scroll Down</h2>
  <h2 class="well well-lg" style="margin-top: 200px;">Scroll Down</h2>
  <div class="jumbotron text-center" style="margin-top: 200px;">
    <div class="container">
      <div class="col-lg-3">
        <h2>Total Sales</h2>
        <h1 class="counter">967</h1>
      </div>
      <div class="col-lg-3">
        <h2>Total Sales</h2>
        <h1 class="counter">967</h1>
      </div>
      <div class="col-lg-3">
        <h2>Total Sales</h2>
        <h1 class="counter">967</h1>
      </div>
      <div class="col-lg-3">
        <h2>Total Sales</h2>
        <h1 class="counter">967</h1>
      </div>
    </div>
  </div>
</div>
JAVASCRIPT CODE:
function isCounterElementVisible($element) {
  var topView = $(window).scrollTop();
  var botView = topView + $(window).height();
  var topElement = $element.offset().top;
  var botElement = topElement + $element.height();
  return ((botElement <= botView) && (topElement >= topView));
}

$(window).scroll(function() {
  $(".counter").each(function() {
    isOnView = isCounterElementVisible($(this));
    if (isOnView && !$(this).hasClass('visibled')) {
      $(this).addClass('visibled');
      $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
      }, {
        duration: 3000,
        easing: 'swing',
        step: function(now) {
          $(this).text(Math.ceil(now));
        }
      });
    }
  });
});

See Demo:

Categories
AngularJS Code Area Java Script

Download and then Print PDF File in AngularJS

Sometime developer need to download PDF file and print that pdf document. Here I have shared a code snippet for download pdf then print that pdf using angularJS.

$scope.printPdf = function (uuid){
        $http({
            url : 'PDF_URL',
            method : 'GET',
            headers : {
                'Content-type' : 'application/pdf'
            },
            responseType : 'arraybuffer'
        }).success(function(data, status, headers, config) {
            var pdfFile = new Blob([ data ], {
                type : 'application/pdf'
            });
            var pdfUrl = URL.createObjectURL(pdfFile);
            var printwWindow = $window.open(pdfUrl);
            printwWindow.print();
        }).error(function(data, status, headers, config) {
            alert('Sorry, something went wrong')
        });
    };
<button ng-click="printPdf()" type="button" class="btn btn-primary">Print PDF</button>

With this simple sample code snippet, you can easily download & print pdf by using angularJS.

Categories
Code Area Java Script Programming

Add Decimal Point Automatically After a Number

Here I have given a small code snipped for making a number as currency format by javascript only. This snippet will automatically be adding extra zeros after the decimal point. Let’s see it

Categories
AngularJS Java Script Programming

Remove ngOptions Elements in AngularJS

With the passing time, AngularJS is getting popularity day by day. We all know AngularJS is the structured, most powerful and powerful front-end framework. But today I am not going to describe you about the AngularJS. But I am here to describe an easier & effective way to Remove ngOptions elements in AngularJS.

How to Remove ngOptions Elements in AngularJS

AngularJS provides a ng-options directive to display the options of selectlist. Here I use a categories array (array of object) for the selectlist. Every category object has (id, name, and is_active) keys and is_active true means Active category and is_active false means Inactive category.

Now, I want to display two selectlist, one if for active and another one for inactive. To do this I am using filter:{is_active: true} for active category’s selectlist and filter:{is_active: false} for inactive category’s selectlist.

With this filter, you can easily refine options base on your application needed. So developers can fell free to use is and make their code more maintainable and handy.

If you have any advice or query, please fell free to ask me.

Categories
Java Script Tools and Technologies

Load jQuery fullcalendar Inside Boostrap Modal

Sometimes we need to load the jQuery fullcalendar inside Bootstrap. But normally fullcalendar is not loading properly inside Bootstrap modal. We need to apply small a tricks to do that. I have written a fiddle for you. To see the demo Click Here (jsFiddle).

Preview:

jquery_full_calendar

Now you are quite able to load your calendar inside your modal.

 

Categories
AngularJS Code Area Java Script

Avoid Curly Braces Conflict in Twig and AngularJS

When you will try to implement AngularJS in Twig Templete Engine,  then you will get a problem with curly braces conflict. To avoid this problem you can override the curly braces ({{}}) for AngularJS, with your custom configuration. It is really easy to override the configuration of angularJS. Here is the sample code snipped to override the configuration.

 

Now you can use (()) instead of {{}}. You can also set anything you want in

$interpolateProvider.startSymbol(‘CUSTOM_SYMBOL‘);
$interpolateProvider.endSymbol(‘CUSTOM_SYMBOL‘);
Just replace the “CUSTOM_SYMBOL” with you favorite symbol and then access with that symbol. Hope this tutorial is helpful to you for Avoid Curly Braces Conflict in Twig and AngularJS