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 & Regards,%0D%0A' +

            'Your signature goes here..';

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

    return false;

};

HTML:

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

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;

}

C# - How to send email without any plugins

Below code helps to send email without any third party email plugins, but it requires SMTPServer details to be specified in web.config AppSettings. That server needs to be configured as email server.

using System.Net.Mail;

…

public void SendEmail(string fromAddress, string[] toAddress, string subject, string bodyContent, string[] filenames)

        {

            MailMessage email = new MailMessage();

            email.From = new MailAddress(fromAddress);

            if (toAddress != null && toAddress.Length > 0)

            {

                foreach (var toAdd in toAddress)

                {

                    email.To.Add(new MailAddress(toAdd));

                }

            }

            email.Subject = subject;

            email.Body = bodyContent;

            if (filenames != null && filenames.Length > 0)

            {

                foreach (var file in filenames)

                {

                    Attachment attachment;

                    attachment = new Attachment(@file);

                    email.Attachments.Add(attachment);

                }

            }

            try

            {

                using (var client = new SmtpClient())

                {

                    client.Send(email);

                }

            }

            catch (Exception ex)

            {

                throw ex;

            }

            finally

            {

                email.Dispose();

            };

        }

RavenDB Linq - How to use dynamic where clause

I faced scenario to add some specified where clause based some conditions, so that i have used following code. We can add any number of where conditions like below and execute query to RavenDB. 

public IEnumerable<Student> SearchStudents()

{

List<Expression<Func<Student, bool>>> whereConditionList = new List<Expression<Func<Student, bool>>>();

whereConditionList.Add(p => p.Name == "Balajiprasad");

whereConditionList.Add(p => p.Age > 16);

whereConditionList.Add(p => p.City == "Coimbatore");

var ravenQuery = ravenSession.Query<Student>();

foreach (var condition in whereConditionList)

  ravenQuery = ravenQuery.Where(condition);

return ravenQuery.ToList();

}       

AngularJS - Multiple Select Dropdown with Comma Seperated ngModel

My requirement is to create multiple select dropdown and ngmodel should result with comma seperated value. For that, i have created following directive

      app.directive('multiSelectDropDown', function () {

        return {

            restrict: 'E',

            scope: {

                model: '=',

                options: '='

            },

            template: "<div class='btn-group dropdown' style='width:100%'>" +

             "<input type='text' ng-model='model' style='width:92%;height:36px;float:left;' class='dropdown-toggle' data-toggle='dropdown' placeholder='Click to select' disabled>" +

             "<button class='btn btn-small dropdown-toggle' style='width:8%;height:36px;' data-toggle='dropdown'  ><span class='caret'></span></button>" +

                     "<ul class='dropdown-menu'  style='width:100%'  aria-labelledby='dropdownMenu'>" +

                         "<li><a data-ng-click='selectAll()'><i class='glyphicons ok'></i>  Select All</a></li>" +

                         "<li><a data-ng-click='deselectAll();'><i class='glyphicons remove'></i>  Deselect All</a></li>" +

                         "<li class='divider'></li>" +

                         "<li data-ng-repeat='option in options'>" +

                         "<a data-ng-click='setSelectedItem()'><span data-ng-class='isChecked(option)'></span>&nbsp;{{option}}</a>" +

                         "</li>" +

                     "</ul>" +

                 "</div>",

            controller: function ($scope) {

                $scope.selectAll = function () {

                    $scope.model = _.unique($scope.options).toString();

                };

                $scope.deselectAll = function () {

                    $scope.model = "";

                };

                $scope.setSelectedItem = function () {

                    var selected = this.option;

                    if ($scope.model != undefined && $scope.model != null && _.contains($scope.model.split(','), selected)) {

                        $scope.model = _.without($scope.model.split(','), selected).toString();

                    } else {

                        var arrayModel = [];

                        if ($scope.model != undefined && $scope.model != null && $scope.model != "")

                             arrayModel = $scope.model.split(',');

                        arrayModel.push(selected);

                        $scope.model = arrayModel.toString();;

                    }

                    return false;

                };

                $scope.isChecked = function (selected) {

                    if ($scope.model != undefined && $scope.model != null && $scope.model != "") {

                        if (_.contains($scope.model.split(','), selected)) {

                            return 'glyphicons ok';

                        }

                    }

                    return false;

                };

            }

        }

    });

In module, we can include this directive and just we set in html as follows

//ArrayList = [‘A1’,’A2’,’A3’]

//modelToBind = “A1,A2”

<multi-select-drop-down model="modelToBind" options="ArrayList"></multi-select-drop-down>

Office Javascript API and Angular JS HTML5 hash tag Url issue

I have faced very new and tricky issue with AngularJS and Office.js,

My app was working fine in HTML5Mode (i.e url without #) and all url navigated properly when only AngularJS JS file included.

But if i include Office App JavaScript API (aka Office AddIns) JS file (office.js), HTML5Mode stops working and Url shows with # tags. Means app worked without HTML5 History API, i found this using $sniffer.history in AngularJS. This returns as false.

Following two line of code made this problem, so to avoid this issue comment following lines in office.debug.js or office.js file

window.history.replaceState = null;

window.history.pushState = null;

JavaScript - Pinch and Zoom using Hammer JS

How to zoom content and not header or footer. Follow as below

Its simple with Hammer JS, download from here http://hammerjs.github.io/  or from Nuget package.

HTML Page:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

...

<script src="~/Scripts/hammer.min.js"></script>

...

<div id="someContainer">

..Some Content goes here

</div>

<script type="text/javascript">

    $(document).ready(function () {

        //Regisister here

        var element = $('#someContainer');

        contentPinchIntializer(element[0]);

    });

</script>

JavaScript to Pinch and Zoom content:
- Here i created max scale as 5, you can customize it
- Here i added Margin left and Margin Right to avoid space issue while on zooming, you can adjust the pixels however you want
- Added touch-action to enable horizontal scrolling

var contentPinchIntializer = function (element) {

    var scale = 1;

    var currentScale = null;

    var currentMarginLeft = null;

    var currentMarginRight = null;

    var pinchInHanlder = function (e) {

        scale = event.gesture.scale == null ? scale : event.gesture.scale;

        currentScale = currentScale == null ? scale : currentScale;

        currentMarginLeft = currentMarginLeft == null ? $(this).css("margin-left") : currentMarginLeft;

        currentMarginRight = currentMarginRight == null ? $(this).css("margin-right") : currentMarginRight;

        if (scale < currentScale) {

            scale = currentScale + 0.1;

            $(this).css({ "margin-left": currentMarginLeft, "margin-right": currentMarginRight });

        }

        scale = ('scale(' + (scale - 0.1).toString() + ')');

        $(this).css({ 'transform': scale, '-ms-transform': scale, '-webkit-transform': scale });

    };

    var pinchOutHandler = function (e) {

        scale = event.gesture.scale == null ? scale : event.gesture.scale;

        currentScale = currentScale == null ? scale : currentScale;

        currentMarginLeft = currentMarginLeft == null ? $(this).css("margin-left") : currentMarginLeft;

        currentMarginRight = currentMarginRight == null ? $(this).css("margin-right") : currentMarginRight;

        if (scale <= 5) {

            $(this).css({ "margin-left": "200px", "margin-right": "100px" });

            scale = ('scale(' + (scale + 0.1).toString() + ')');

            $(this).css({ 'transform': scale, '-ms-transform': scale, '-webkit-transform': scale });

        }

    };

    var hammertime = Hammer(element).on("pinchin", pinchInHanlder).on("pinchout", pinchOutHandler);

    $(element).css("touch-action", "manipulation");

}