Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Tuesday, March 7, 2017

JavaScript - Simple Export to excel

To export excel in JavaScript without any server side techiques, we can use following steps

Used blob file saver for download https://github.com/eligrey/FileSaver.js

Step 1: Create Html Content with required styles as below

var tableHtml = '<html xmlns:x="urn:schemas-microsoft-com:office:excel">';
        tableHtml += '<head><xml><x:ExcelWorkbook><x:ExcelWorksheets>';
        tableHtml += '<x:ExcelWorksheet><x:Name>PlanFundLineup</x:Name>';
        tableHtml += '<x:WorksheetOptions><x:Panes></x:Panes></x:WorksheetOptions></x:ExcelWorksheet>';
        tableHtml += '</x:ExcelWorksheets></x:ExcelWorkbook></xml></head><body>';
  tableHtml += "<div><table  border='1'>" +
        tableHtml += "<thead>" +
        tableHtml += "<tr><th>" +
        tableHtml += "Header Text" +
        tableHtml += "</th></tr>" +
 tableHtml += "</thead>" +
               "<tbody>" +
        tableHtml += "<tr><td>" +
        tableHtml += "Content Text" +
        tableHtml += "</td></tr>" +
               "</tbody>" +
              "</table></div>";
        tableHtml += '</body></html>';

Step 2: Download this html content using blob

var blob = new Blob([tableHtml], { type: "application/vnd.ms-excel;charset=utf-8" })
window.saveAs(blob, "excelname.xls");


Tuesday, June 28, 2016

AngularJS - BootStrap Popover Directive

In some cases we need to show some popover as tooltip or as dialog

Here am going to use BootStrap Popover, this plugin is part of BootStrap.js file or we can include spearately. For more information about that read here 

I am going to create simple popover

Step 1; Create your html pages, include BootStrap js files, AngularJS, JQuery basic setups

Step 2: Here is what I created directive to make PopOver work with AngularJS, add this directive to your application

var app = angular.module('appModuleName');

app.directive('popover', ['$compile',function ($compile) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            $(element).popover({
                html: true,
                title:  attrs.popoverTitle || "Header",
                content: function () {
                    return $compile($("#" + attrs.popoverContent).html())(scope);
                },
                placement: attrs.popoverPlacement || "top"
            });
        }
    };

}]);


Step 3: In your HTML, just use this directive and pass attributes

<input type="button" popover popover-title="Header Text" popover-content="popover-content-id" popover-placement="top"/>

Step 4: Here you can pass your Title, ContentId, placement (Top, Bottom, Right, Left) etc.  This popover-content-id is div with contents

  <div id="popover-content-id" class="hide">
Some content here..
  </div>

Friday, January 8, 2016

AngularJS - Custom form validation

We can have some situation to use custom validations to our input fields, we can use following code to implement it.

Here my case is, I want to validate multiple emails field and have to show field error using AngularJS Form Validation.

For multiple email JavaScript validation check here http://rbalajiprasad.blogspot.in/2015/04/javascript-validate-multiple-email.html 

For AngularJS Form validation check here http://www.w3schools.com/angular/angular_validation.asp


HTML Page:

<p>Email:<br>
  <input type="email" name="email" ng-model="email" required>
  
<span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
  
<span ng-show="myForm.email.$error.required">Email is required.</span>
  
<span ng-show="myForm.email.$error.validEmail">Invalid email address.</span>
  
</span>
</p>
<p>
  
<input type="button" ng-click="submit()"
  ng-disabled=
"myForm.email.$dirty && myForm.email.$invalid">
</p>


AngularJS Controller

$scope.Submit = function () {
     //your validation
            var isValidEmail = isValidEmailAddress($scope.email.ToAddress);
            $scope.myForm.email.$setValidity("validEmail", isValidEmail);

            var isValid = $scope.myForm.$valid;
            if (!isValid) { return; }

//your logic goes here

        };

Thursday, December 24, 2015

JavaScript - Simple Email without any server code

I have thought of using simple JavaScript Email feature using "mailTo:". But this is not used for bigger body contents or if you planned for much styles.

Use below JavaScript Method to send emails.

You can use more URL encode to format body.

Ref for URL Encode:  http://www.w3schools.com/tags/ref_urlencode.asp
For MailTo Documentation:  http://www.ietf.org/rfc/rfc2368.txt

JavaScript:

function SendEmail() {

   var subject = 'Mail subject goes here..';
   var body = 'Hi,%0D%0A %0D%0A' +
            'Some of your content %0D%0A%0D%0A' +
            'Next line of body goes here.%0D%0A' +
            '%E2%80%A2 Text within Bullet Text here %E2%80%A2 %0D%0A' +
           
            '%0D%0A Thanks &amp; Regards,%0D%0A' +
            'Your signature goes here..';


    window.location = 'mailto:?subject=' + subject + '&body=' + body;

    return false;

};

HTML:

<input type="button" value="Email" onclick="SendEmail();"/>

Friday, December 11, 2015

CSS - How to make two divs in equal height within container without any script

To set two divs to equal height dynamically without any scripts use this code  

<div class="equal-height-container">
            <div class="equal-height-box">
                dynamic content goes here..
            </div>
            <div class ="equal-height-box">
                dynamic content goes here..
            </div>

   </div>



.equal-height-container {
    display: table;
}

.equal-height-box {
    display: table-cell;
    height: auto;
    overflow: hidden;
    float:none;
    vertical-align:top;
}