File Upload Get MIME Type using JavaScript

<html>
<body>

    <input type="file" id="upload-files" multiple>
    <script>
    var control = document.getElementById("upload-files");
    control.addEventListener("change", function(event) {      
        var files = control.files;
        for (var i = 0; i < files.length; i++) {
            console.log("Filename: " + files[i].name);
            console.log("Type: " + files[i].type);
            console.log("Size: " + files[i].size + " bytes");
        }
    }, false);
    </script>

</body>
</html>

How to handle a Responsive 5 Column layout using Zurb’s Foundation 5

This is a 5 column responsive layout that will adjust in 3 screen sizes small (phone screens), medium (tablets) and large (PC).
1 columns for smart phone screens, 3 rows and 2 columns on first 2 rows on tablet screens and 1 row with 5 columns on large screens like laptop and PC.

Here you go kids! You’ve learned new tricks today!

    <div class="row">
        <div class="large-5 columns">
            <div class="row">
                    <div class="medium-12 columns">
                    <div class="row">
                        <div class="medium-6 columns">#</div>
                        <div class="medium-6 columns">#</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-5 columns">
            <div class="row">    
                <div class="medium-12 columns">
                    <div class="row">
                        <div class="medium-6 columns">#</div>
                        <div class="medium-6 columns">#</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-2 columns">
            <div class="row">        
                <div class="medium-12 columns">
                    <div class="row">
                        <div class="medium-12 columns">#</div>                    
                    </div>
                </div>                        
            </div>
        </div>
    </div>

Loosely Coupled , Test Driven Design and API Centric Application

I now have my Asp.net MVC WebAPI 2 implemented with Test Driven Design.

Loosely Coupled with the help of Unity and TDDed with Moq.

Now I can begin porting my Real Estate Billing Management System coded in PHP and Zend Framework

public class PeopleRepository<T> : IPeopleRepository<T> where T : class
{
   protected AppDBContext db;

   public PeopleRepository(IUnitOfWork unitOfWork)
   {
     db = unitOfWork.DbContext;
   }
}
   public interface IPeopleRepository<T> where T : class
   {
      IEnumerable<T> FindAll();
      T GetByID(int id);
      void Delete(int id);
      void SaveOrUpdate(T customer);
   }
   public interface IPeopleRepository<T> where T : class
   {
      IEnumerable<T> FindAll();
      T GetByID(int id);
      void Delete(int id);
      void SaveOrUpdate(T customer);
   }

I will have this Application front ended with AngularJs2 because of TypeScript.

I heard that ReactJs is becoming more popular. But just *7^&off!

Smooth Animated anchor Scrolling using Jquery

Hi Kids,

Here is a simple snippet to add scrolling effect with anchor and js.

$('.some_div > a').click(function(){
            $('html, body').animate({
                  scrollTop: $( $.attr(this, 'href') ).offset().top + (some_adjustments)
            }, 800);
            return false;
});

And here is for your HTML dom structure.

<div class="some_div">
        <a href="#achor">Anchor Link Here</a>
</div>


<div id="anchor">
     Your Load of BS here Kids!
</div>

Alright Kids. Enjoy! Ciao!

Common Techniques for aligning DIVs horizontally

1. Floating

     <div class="floatleft">LEFT</div>
     <div class="floatright">RIGHT</div>
     <div class="clearboth"></div>
    .floatleft{ float:left; }
    .floatright{ float:right; }
    .clearboth{ clear:both; }

2. Inline-Block

     <div class="item">LEFT</div>
     <div class="item">RIGHT</div>
    .item{ display:inline-block; }

3. Using Bootstrap

     <div class="row">
         <div class="md-col-6">Left</div>
         <div class="md-col-6">Right</div>
     </div>

4. Foundation

     <div class="row">
         <div class="medium-6 columns">Left</div>
         <div class="medium-6 columns">Right</div>
     </div>

5. Using Display:Tables

     <div style="display:table-row">
         <div style="display:table-cell">Left</div>
         <div style="display:table-cell">Right</div>
     </div>

If you know other techniques let the kids know.

Attaching Animation to CSS

I’m not sure if you kids can imagine the output of this css.
But you can drop me a question in the comments below.

to make it simple. its
1. set the attribute.
2. set the transition.
3. set the final attributes.

then you can make jquery or angularjs to the magic for this.

.fadeinfromtop{
    opacity: 0;

    -moz-transition: all 2s ease-out;
    -webkit-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;

    -ms-transform: translate(0px, -100px); / IE 9 /
    -webkit-transform: translate(0px, -100px); / Safari /
    transform: translate(0px, -100px);
}
.fadeinfromtop.in-view{
    opacity: 1;

    -ms-transform: translate(0px, 0px); / IE 9 /
    -webkit-transform: translate(0px, 0px); / Safari /
    transform: translate(0px, 0px);
}

Ciao Kids!

Foundation 6 vs Bootstrap 4

Zurb’s Foundation 6 fits best for Publisher Websites and Microsites while Twitter’s Bootstrap is best for Web Applications.

Now that I’m gearing towards Asp.Net Core, If you’re going to ask what will be my choice,its a no brainer Kids, it will be Bootstrap ofcouse.

But don’t get me wrong, Foundation 6 is also a nice alternative especially for FrontEnd side, I’m talking about Customer Side Front End and not an Admin Panel Front End.

anyways. Ciao!

jQuery Window Scrolling and Css Transform Animation

Here we go, our first tutorial of the year since I my rock n’roll days.

Glad to be back on track.
alright Kids, our first tutorial is using Jquery and Css to animate the size of a DIV on window scrolling.

Step 1: Your Javascript / JQuery snippet

    var $animation_elements = [$('.front-header-div-holder')];
    var $window = $(window);

    $window.on('scroll', check_if_in_view);
    $window.on('scroll resize', check_if_in_view);

    $window.trigger('scroll');

    function scaler(element,i){            
          i = (i/100)+1;          
          $(element).css("-ms-transform", "scale(" + i +")");
          $(element).css("-webkit-transform", "scale(" + i +")");
          $(element).css("transform", "scale(" + i +")");      
    }

    function fader(element,i){  
          i = ((i/100) * -1) +1;                    
          $(element).css("opacity",i);          
    }
    function check_if_in_view() {
      var window_height = $window.height();
      var window_top_position = $window.scrollTop();
      var window_bottom_position = (window_top_position + window_height);

      $.each($animation_elements, function() {
           
            if($(this).attr("class")!=undefined){
                 
                  var $element = $(this);
               
                  var element_height = $element.outerHeight();
                  var element_top_position = $element.offset().top;
                  var element_bottom_position = (element_top_position + element_height);

                  //check to see if this current container is within viewport

                  var h = 0;
                  var ename = $(this).attr('class');
                  if(ename == "front-header-div-holder"){
                        h = element_height;
                  }else{                    
                        h = element_height;  
                  }

                  if ((element_bottom_position >= (window_top_position + (h))) && (element_top_position <= (window_bottom_position-(h/2)))) {                        
                        var ename = $(this).attr('class');                        
                        if(ename == "front-header-div-holder"){
                              ename = ename.slice(0, -7);
                              scaler($("." + ename),window_top_position);
                              fader($(".front-header-title"),window_top_position);
                        }
                  } else {                      
                        var ename = $(this).attr('class');                  
                        if(ename == "front-header-div-holder"){
                              ename = ename.slice(0, -7);
                              scaler($("." + ename),window_top_position);
                              fader($(".front-header-title"),window_top_position);
                        }                                              
                  }

            }

           
      });
    }

Step 2: Your HTML

<div class="front-header-div-holder">
     <div class="front-header-div">
          <div class="front-header">
              <!-- your load of BS here -->
          </div>
      </div>
</div>

Step 3: Your CSS
Code as you please.

Drop me a question if you have one. Ciao!