Monday, November 20, 2017

Query UI Tabs: Changing selected tab | Remembering Active Tab in JQuery UI Tabs | Select last tab by default on Page load, jQuery Ui Tabs | how to set a tab active in jQuery ui tab on page load | Set Jquery ui active tab on page load/reload

Query UI Tabs: Changing selected tab | Remembering Active Tab in JQuery UI Tabs | Select last tab by default on Page load, jQuery Ui Tabs | how to set a tab active in jQuery ui tab on page load | Set Jquery ui active tab on page load/reload

I'm using a basic implementation of Jquery UI Tabs that are working fine but I want to set (or reset) the active tab dynamically based on a user action.



<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>
        <li><a href="#tabs-2">Tab 2</a></li>
        <li><a href="#tabs-3">Tab 3</a></li>
    </ul>
    <div id="tabs-1">
        First tab
    </div>
    <div id="tabs-2">
        Second tab
    </div>
    <div id="tabs-3">
        Third tab
    </div>
</div>
<div class='log'></div>



$(function ($) {
    $("#tabs").tabs({
        active: 1,
        create: function (event, ui) {
            var newIndex = ui.tab.parent().children().index(ui.tab);
            $(".log").prepend("<div>Created fired for child=" + newIndex + "</div>");
        },
        activate: function (event, ui) {
            //  Get future value
            var newIndex = ui.newTab.parent().children().index(ui.newTab);
            $(".log").prepend("<div>Activate fired for child=" + newIndex + "</div>");
        },
        beforeActivate: function (event, ui) {
            var newIndex = ui.newTab.parent().children().index(ui.newTab);
            $(".log").prepend("<div>Before activate fired for child=" + newIndex + "</div>");
        }
    });
});







You can manually active a tab using below code (2 is index of tab):
$("#tabs").tabs("option", "active", 2);




Sunday, November 19, 2017

JQuery Load Javascript Dynamically | Dynamic JS Loading

JQuery Load Javascript Dynamically | Dynamic JS Loading



var script = document.createElement("SCRIPT");
script.src = '//code.jquery.com/jquery-latest.min.js';
script.type = 'text/javascript';
script.onload = function() {
    var nj = jQuery.noConflict(true);
    alert(jn.find("body").length);
};
document.getElementsByTagName("head")[0].appendChild(script);














Saturday, November 18, 2017

Finding the IP Number and MAC Address of a Network Card

At first need to open command prompt, press windows button and type cmd and open command prompt:




Now type "ipconfig" and below output would be generated:




You’ll see your IP address listed right above the subnet mask. Usually, it will say IPv4 Address and follow the prefix 192.168.1.# or 192.168.0.# for home networks as shown in the screenshot above.

Friday, November 17, 2017

JQuery Custom Checkbox Example | Checkbox Customization

It's easy to customize checkbox.



if (app === undefined) var app = {};
app.customCheckBox = (function() {
    var prop = null;

    function base() {
        if (!prop) {
            prop = $.prototype.prop;
            $.prototype.prop = function() {
                var elem = $(this), result = prop.apply(this, arguments);
                if (elem.is(".custom-checkbox-base-element")) {
                    elem.trigger("update_view");
                }
                return result;
            };
        }
    }

    return {
        convert: function(page) {
            base();

            page.find('input[type="checkbox"]:not(.custom-checkbox-base-element)').each(function() {
                var cb = $(this);
                cb.after("<span class='custom-checkbox-selection'></span>");
                if (cb.is(":checked")) cb.next().addClass("selected");
                cb.hide();
            });

            page.find('input[type="checkbox"]:not(.custom-checkbox-base-element)').change(function() {
                var cb = $(this);
                cb.next().trigger("update_view");
            });

            page.find('input[type="checkbox"]:not(.custom-checkbox-base-element)').on("update_view", function() {
                $(this).next().trigger("update_view");
            });

            page.find(".custom-checkbox-selection:not(.complete-event-compile)").click(function() {
                var elem = $(this), cb = elem.prev();
                if (elem.is(".selected")) {
                    elem.removeClass("selected").trigger("update_view");
                    cb.prop("checked", false).trigger("change");
                }
                else {
                    elem.addClass("selected").trigger("update_view");
                    cb.prop("checked", true).trigger("change");
                }
            });

            page.find('.custom-checkbox-selection:not(.complete-event-compile)').on("update_view", function() {
                var elem = $(this), cb = elem.prev();
                if (cb.is(":checked")) {
                    elem.addClass("selected");
                }
                else {
                    elem.removeClass("selected");
                }
            });
            page.find(".custom-checkbox-selection").addClass("complete-event-compile");
            page.find('input[type="checkbox"]').addClass("custom-checkbox-base-element");
        }
    };
}());








Thursday, November 16, 2017

JQuery form submission dynamically | Dynamic form submission

Below is the JQuery code snippet shows how to submit form dynamically:



<script src="//code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $("button").click(function () {
            var form = $("<form>", {
                'action': 'your-desired-url-here',
                'target': '_top'
            });
            $(document.body).append(form.hide());
            form.submit();
        });
    });
</script>

<button>Submit</button>










JavaScript Regex To Match Domain Name | Domain Validator Regex

Below is the required regex to validate any domain name, its simple so you can modify if you need to extend it.

^((http|https):\/\/)?([a-zA-Z0-9_][-_a-zA-Z0-9]{0,62}\.)+([a-zA-Z0-9]{1,10})$








Tuesday, November 14, 2017

JQuery JavaScript Select All Text In Content Editable Div

JQuery JavaScript Select All Text In Content Editable Div


jQuery.fn.selectText = function(){
   var doc = document;
   var element = this[0];
   if (doc.body.createTextRange) {
       var range = document.body.createTextRange();
       range.moveToElementText(element);
       range.select();
   }
   else if (window.getSelection) {
       var selection = window.getSelection();        
       var range = document.createRange();
       range.selectNodeContents(element);
       selection.removeAllRanges();
       selection.addRange(range);
   }
};

JSFiddle link