JQuery body append html

I wanted to append the html to body like below and the html control will be accessed in a JavaScript function.

$("body").append('<div id="vedioControl">VEDIO CONTROL</div >');

When I accessed the html control in a JavaScript function, I got an operation aborted error.

I have double checked the above statement, nothing is wrong.

Later I found that that, html will not be added to body unless the DOM is loaded.

To make sure the DOM is loaded, added the statement within the .ready function.

$(document).ready(function()

{     

      $("body").append('<div id=" vedioControl "> VEDIO CONTROL</div>');

});

JQuery Set Checkbox checked vs RadioButton checked

It is a common mistake or confusion on how to set value of Checkbox vs. RadioButton to checked using JQuery. Devs often use .attr method to set the value for both checkbox and radiobutton controls. Note: Using .attr on checkbox is deprecated.

However the right way to set checkbox checked is by using .prop method and radiobutton checked is by using .attr method respectively.

CHECKBOX:

$("#checkBoxCtrlId").prop("checked", true);
$("#checkBoxCtrlId").prop("checked", false);

RADIOBUTTON:

$("#radioButtonCtrlId").attr("checked", true);
$("#radioButtonCtrlId").attr("checked", false);

However same attribute will be used to check either checkbox or radiobutton is checked.

$('.checkBoxCtrlId').is(':checked');
$('.radioButtonCtrlId').is(':checked');

SharePoint Calendar Setting a default duration for new Events as Outlook

First of all i would like to thank Ryan for his post on Setting a default duration for new SharePoint Calender Events, which helped me in providing a better solution to my client.

However I have updated the script for my requirement to auto-updating the end date time based on start date time, not only for the first time load but also for consequent start date time changes similar to Outlook functionality.
Note: The outlook loads the 30 mins duration for first time and for any consequent duration change by changing the end date time, it keeps the updated duration for start time change.

My updated JavaScript has below functionality:
1. Sets the default duration to 30 mins on first time load
2. It updates the end date time accordingly on updating start date, start hours or start minutes.
3. It provides the similar functionality as Outlook, sets the default duration 30 mins and keeps the updated duration (by changing the end date time) and doesn't allow end date time less than current date time.
4. It works for All Day, Recurrence and All Day + Recurrence Events

To apply the functionality follow the below simple steps:
1. Go to Calendar -> Click “New” in your Calendar to open up NewForm.aspx
2. Edit New Form -> Add a query string &ToolPaneView=2 onto the end of the URL to open the page in edit mode
3. Add a Content Editor Web Part to the page (below the New Form)
4. Click Open the toolpane or Edit > Modify Share Web Part
5. Click Source Editor and paste in the following JavaScript

JavaScript to auto-update end date time with a specific duration with start date time.

JQuery Find Absolute Position of element

Scenario: Get coordinates of a element(X, Y) to display overlay message immediate next or immediate below the element.
Based on the coordinates set the absolute position of the control (overlay) to display it accordingly. The overlay can be started any side/corner of the element.

Get the element object using JQuery:

var obj = $('[id$=controlelement]');

Get the position of the element from Left

function findPosLeft(obj) 
{
    var pos = obj.offset();
    var left = pos.left;
    return left;
}

Get the position of the element from Top

function findPosTop(obj) 
{
    var pos = obj.offset();
    var top = pos.top;
    return top;
}

Get the position of the element from Bottom

function findPosBottom(obj) 
{
    var pos = obj.offset();
    var top = pos.top;
    var height = obj.height();
    var bottom = top + height;
    return bottom;
}

Get the position of the element from Right

function findPosRight(obj) 
{
    var pos = obj.offset();
    var left = pos.left;
    var width = obj.width();
    var right = left + width;
    return right;
}