Bootstrap modal close event

Boot strap refers two hide events that we can use 

Bootstrap 3 modal close event 

From bootstrap documentation

hide.bs.modal :  This event is fired immediately when the hide instance method has been called.

hidden.bs.modal : This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Example:

You can use the following syntax to catch the bootstrap modal hide event 

$('#myModal').on('hidden.bs.modal', function () {

    // do somtething here

});

bootstrap 2 modal close event

hide: This event is fired immediately when the hide instance method has been called.

hidden: This event is fired when the modal has finished being hidden from the user (will wait for css transitions to complete).

Example:

You can use the following syntax to catch the bootstrap modal hide event

$('#myModal').on('hidden', function () {

     // do something…

});

Using above jquery code you can catch the bootstrap modal close event.

Read more...

Truncate Filter for AngularJS

You can truncate the text using angularJS by creating a truncate filter. The truncate filter accepts inputs like text to truncate,maximum length of the text allowed and truncating characters to append to the text (like '...')

Truncate Filter:

Add the following filter in your javascript file.

angular.module('filters', []).
filter('truncate', function () {
    return function (text, length, end) {
        if (isNaN(length))
            length = 10;
 
        if (end === undefined)
            end = "...";
 
        if (text.length <= length || text.length - end.length <= length) {
            return text;
        }
        else {
            return String(text).substring(0, length - end.length) + end;
        }
 
    };
});

Now use the truncate filter in your html code like below

<div id="main">
        <p>{{yourTextHere|truncate}}</p>  /*case:1*/
        <p>{{yourTextHere|truncate:5}}</p> /*case:2*/
        <p>{{yourTextHere|truncate:25:" ->"}}</p> /*case:3*/
</div>

In case 1, we are just using filter and not mentioning any length. So as defined in the filter code, the default length will be taken (10 in our case).

In case 2, we are providing length. So filter will limit the text as per the length mentioned.

In case 3, we are providing length and end. So filter uses this length to truncate the text and appends the given symbol at the end of the truncated text.

In this way we can truncate the text using AngularJS truncate filter.

For more posts on angularJS visit: angularJS

Read more...

How to open hyperlink in new window

We can open hyperlink in new window using javascript.

lets consider you have the following hyperlink

<a class="link" onclick="openWindow();"> open me in new window </a>

As we are not using href attribute above hyperlink is shown as plain text. So use below styles to make it look as a hyperlink

.link {
    color: blue;
    cursor: pointer;
}

Now add the following javascript code

function openWindow() {
    window.open('http://coding-issues.com', '', 'width=950,height=700');
}

The above javascript opens the new window when you click on the hyperlink.

Note: You have to specify the height and width of the new window. Otherwise it opens a new tab instead of new window.

Demo:

open me in new window

In this way we can open the hyperlink in new window using javascript.

For more posts on Javascript visit: javascript

Read more...

How to disable or enable input field using JQuery

If you want to disable any input field like button or checkbox or textbox etc, you can do it using JQuery.

Consider you have the following input fields in your page

<input type="text" id="tb1" />
<input type="button" id="btn1" />
<input type="checkbox" id="chkbx1" />
<input type="radio" id="radio1" />

Now if you don't want to allow a user to enter text into textbox(in cases when you are showing pre-loaded data) or if you don't want to allow a user to click on the submit/send button until all the form fields are valid, then in the above cases you can disable those input fileds using jQuery's prop() method.

jQuery code to disable the input fields:

Disable textbox using jQuery

$("#tb1").prop('disabled', true);  //for jQuery 1.6+
$("#tb1").attr('disabled', 'disabled'); //for jQuery 1.5 and below

Re-enable textbox using jQuery

$("#tb1").prop('disabled', false); //for jQuery 1.6+
$("#tb1").removeAttr('disabled'); //for jQuery 1.5 and below

Disable button using jQuery

$("#btn1").prop('disabled', true);  //for jQuery 1.6+
$("#btn1").attr('disabled', 'disabled'); //for jQuery 1.5 and below

Re-enable button using jQuery

$("#btn1").prop('disabled', false); //for jQuery 1.6+
$("#btn1").removeAttr('disabled'); //for jQuery 1.5 and below

You can also disable radio button or checkbox using jQuery in the same way.

In this way you can disable the input fields using jQuery. Let me no if it helped you through comments section. Feel free to share any information.

For more posts on jQuery please visit: jQuery

Read more...

Hyperlink open in new Tab

If you want any page to open in a new tab using html anchor tag you have to include target="_blank" attribute.

Example:

<a href="/http/www.coding-issues.in/content/Name.aspx" target="_blank">Click to open file </a>

Read more...