Easy Code Stuff

Jan 26, 2017

[Solution] Call Method Once Flip Is Done - jQuery-Flip

Question

am using a Flip Plugin

I have been trying to call a method once the flip is done/completed, but the method is getting called even before the flip is done.completed.

$("#card").flip('toggle');
$("#card").on("done", ChangeWord());

Let me know where i am going wrong ?

Answere

Your answer is in the link you posted in the question under the 'Events' heading. Specifically, the flip:done event. Also note that you need to pass the reference of the ChangeWord() function to the event handler, not its return value. Try this:

$("#card").on('flip:done', ChangeWord).flip('toggle');

Alternatively the flip() method accepts a callback function to be executed when the animation completes:

$("#card").flip('toggle', ChangeWord);

$("#card").flip('toggle', ChangeWord); this worked out fine as this will happen only when i use it , but $("#card").on('flip:done', ChangeWord).flip('toggle'); will call the method every time it flips

Jan 22, 2017

[Solution] jQuery: How to capture the TAB keypress within a Textbox

Problem :

I have a text box which is an ajax auto complete,so when i select a record i save an id into a hidden variable.
And there is a keydown event on that text box, if key down i delete the hidden variable value. because i don't want the user to enter any thing after he selects from the autocomplete.
Now even when i press the tab button the hidden variable is cleared.
Is there a way to avoid only Tab press event.?

Answer :

When the tab is pressed you have to read if the keydown was from the Tab button, if so you can avoid it..

$("body").on('keydown', '#textboxId', function(e) { 
  var keyCode = e.keyCode || e.which; 

  if (keyCode == 9) { 
    e.preventDefault(); 
    //IF Tab Pressed You Can Do Anything Here
  } else{ //If Its Not Tab, You Can Do It Here }
});

[Fixed Solution] Jquery autocomplete not working inside the ajax updatepanel

Issue : I have some auto complete text boxes with ajax calls within update panels in asp.net.

Initially the update panel will be hidden , but when i make the visible true,

the autocomplete ajax controls will not work. is there a way to initialize it again after a update panel is visible.?

Answer : Yes, there is a way. The update panel replaces the content of update panel on its update this means you have new content in the update panel. So the solution is to rebind the jQuery events like this:

Solution :

<script type="text/javascript">
        $(function () {
            initializer();
        });


        var prmInstance = Sys.WebForms.PageRequestManager.getInstance();


        prmInstance.add_endRequest(function () {
            //you need to re-bind your jquery events here
            initializer();
        });
        function initializer() {
            $("#<%=txtrefmastguage.ClientID%>").autocomplete('Handlerold.ashx', { minChars: 1, extraParams: { "param1": "1"} })
            .result(function (event, data, formatted) {
                if (data) {


                    $("#<%= hidrefguagecode.ClientID %>").val(data[1]);
                }
                else {
                    $("#<%= hidrefguagecode.ClientID %>").val('-1');
                }
            });


        }
  

    </script>

Nov 13, 2016

[Fixed Solution] jEasy UI Messenger Change Button Text

Question


I am using jEasy UI Framework for my project. I am using $.messager.confirm to get a confirmation from the user.

Which shows two buttons OK and Cancel.

How can i change button text when i am using $.messager.confirm ?

Example:

'ok' => 'yes',

'cancel' => 'no'

ANSWERE

$.messager.defaults.ok = 'Yes';
$.messager.defaults.cancel = 'No';

These are the two lines which will be need to change the text property of the prompt messenger in jEasy UI

Sep 28, 2016

[Fixed Solution] Show A Message When Mouse Hovers Over A Button In Windows Forms Application

In a windows forms application, sometimes you may wanted to show a mouse hover text on it, just like in web application. The easy way to do it is using a tool tip.

In this blog post I'm going to show you a easy way of doing it. With just two lines of C# codes. Simply you can do this using a MouseHover event. To do that click your button in designer mode and go to events in properties window. Now find the MouseHover event and double click in that. You will get the mouse hover event code. Simply use the below codes to show the text.

public void btnTest_MouseHover(object sender, EventArgs e)
{
 System.Windows.Forms.ToolTip toolTip = new System.Windows.Forms.ToolTip();
 toolTip.SetToolTip(btnTest, "This is a test text");
}

Sep 26, 2016

Disable All Tabs In JEasy UI [Solved]

Question

I am using jeasy ui Tabs. Link To Jeasy Ui Tabs

Is there a way to disable all tabs at once. ??

Currently i am able to disable one by one only.

$('#tab').tabs('disableTab', 1);    
$('#tab').tabs('disableTab', 2);

Answer

once soulation :

$('#tab').tabs('tabs').forEach(function(v,i){
     var opts=$('#tab').tabs("getTab",i).panel("options");
     opts.tab.addClass("tabs-disabled");
     opts.disabled=true;      
});

other soulation :

$('#tab').tabs('tabs').forEach(function(v,i){
  var opts=$('#tab').tabs("disableTab",i);
});

Mar 18, 2016

Google Maps Creating Polygon And Retrieving Coordinates

In this article I'm going to explain you about getting the latitude and longitude of a polygon in order to do a google map polygon search. In-order to do that first you should let the user to draw a polygon. Then you should get the latitude and longitude of the corners of the polygon. After getting the latitude and longitude of the area drawn by user, what you have to do is, search it in the database or what ever you want. It's completely up to you.

In this example I'm not telling you guys about the polygon search. I'm just trying to help you in the first step by giving the latitude and longitude array of the drawn area.Following example will help you to develop your own google map.Then you can draw a Polygon area on it.

<html>
<head>
    <title>Google Maps Creating Polygon And Retrieving Coordinates</title>
    <script type="text/javascript" src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false'></script>
    <style>
        #map-canvas
        {
            width: auto;
            height: 500px;
        }
    </style>
</head>
<body onload="initialize()">
    <div id="map-canvas"></div>
    <div id="result"></div>
    <script type="text/javascript">
        function initialize() {
            var myLatLng = new google.maps.LatLng(6.92814, 79.9124);
            var mapOptions = {
                zoom: 12,
                center: myLatLng
            };
            var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

            var triangleCoords = [
                new google.maps.LatLng(6.92814, 79.9124),
                new google.maps.LatLng(6.89746, 79.87636),
                new google.maps.LatLng(6.88553, 79.93644)
            ];

            myPolygon = new google.maps.Polygon({
                paths: triangleCoords,
                draggable: true,
                editable: true,
                strokeColor: '#FF0000',
                strokeOpacity: 0.8,
                strokeWeight: 2,
                fillColor: '#FF0000',
                fillOpacity: 0.35
            });

            myPolygon.setMap(map);

            google.maps.event.addListener(myPolygon.getPath(), "insert_at", getPolygonCoords);

            google.maps.event.addListener(myPolygon.getPath(), "set_at", getPolygonCoords);
        }

        function getPolygonCoords() {
            var len = myPolygon.getPath().getLength();
            var htmlStr = "";
            for (var i = 0; i < len; i++) {
                htmlStr += "<p>" + myPolygon.getPath().getAt(i).toUrlValue(5) + "</p>";
            }
            document.getElementById('result').innerHTML = htmlStr;
        }
    </script>
</body>
</html>

Then you can get the coordinates in the selected area. Above example I have draw a triangle so, Ill will get three coordinates. Actually what Google Map returning is the Latitude and Longitude of the corners.

1	myPolygon.getPath().getAt(i).toUrlValue(5);

Above code line returns the Latitude and Longitude of a corner. But if your trying to get a lat-lng object out of it, you cant do it directly. because above methods returns the lat lng as a string. But new google.maps.LatLng(lat,lng) expects two numbers separated with commas. So to do that's follow below lines of codes.

function getPolygonCoords() {
    var len = myPolygon.getPath().getLength();
    points = [];
    for (var i = 0; i < len; i++) {
        var strLatLng = myPolygon.getPath().getAt(i).toUrlValue(5);
        var arrLatLng = strLatLng.split(",");
        var objLatLng = new google.maps.LatLng(Number(zzz[0]), Number(zzz[1]));
        points.push(objLatLng);
    }
}

Hope you found this article useful.

Check My Other Articles About Google Maps.

1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

Mar 7, 2016

Google Map With InfoBubble

Following example will help you to develop your own google map with infobubble using given latitude & longitude.

<html>
<head>
    <title>Google Map With InfoBubble</title>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
    <script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/src/infobubble.js" type="text/javascript"></script>
</head>
<body>
    <div id="map-canvas" style="width: 100%; height: 500px;">
    </div>
    <script type="text/javascript">
        var lat = 6.929537;  //Your Location Latitude
        var lon = 79.866271; //Your Location Longitude
        var latlng = new google.maps.LatLng(lat, lon);
        var mapOptions = {
            center: latlng,
            zoom: 15
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map
        });

        var infoBubble = new InfoBubble({
            maxWidth: 300,
            content: '<div><h5>Content Header</h5><p>Content Goes Here</p></div>'
        });

        google.maps.event.addListener(marker, 'click', function () {
            infoBubble.open(map, marker);
        });

        google.maps.event.addListener(marker, 'mouseover', function () {
            infoBubble.open(map, marker);
        });

    </script>
</body>
</html>

Check My Other Articles About Google Maps.

1. Creating A Google Map Using Google Map API v3
2. Show Current Location In A Google Map Using Google Map API v3
3. Getting The Address Of Selected Location In Google Map Using Google Map API v3
4. Getting The Selected Latitude And Longitude From Google Map Using Google Map API v3
5. Google Map With Multiple Markers & Info Windows Using Google Map API v3
6. Getting The Direction Between Two Markers In Google Map Using Google MAP API
7. Getting The Direction Between Two Locations Using Google MAP API
8. Getting The Distance Between Two Markers In Google Map Using Google MAP API
9. Getting The Distance Between Two Locations Using Google MAP API
10. Getting The Nearest Places For A Location In Google Map Using Google MAP API
11. Google Map With InfoBubble
12. Google Maps Creating Polygon And Retrieving Coordinates

Feb 27, 2016

Calling AngularJS Function From Outside The Scope

Sometimes you may want to call a function in angular scope from outside the scope. For an example will say you have an AngularJS Controller which contains a function to do something. And you have another button outside the this controller. You can use below method to do it so.

Lets see initially how our controller looks like.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div ng-controller="myController">
        <input type="button" value="Say Hello" ng-click="sayHello()"/>
        <br />
        <span>{{name}}</span>
    </div>
    <hr/>
</body>
<script type="text/javascript" >
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {
        $scope.name = '';
        $scope.sayHello = function () {
            $scope.name = 'Nifal Nizar';
        };
    });
</script>
</html>

Now lets say you wanted to call the "sayHello()" function from outside the controller. First what you should do is get the scope of the controller which contains the method you wanted call to a variable. In order to that first you should have sort of an identification to the controller. Simply you can give id to the container which contains the controller. Then you can simply apply it to the scope.

<html>
<head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body ng-app="myApp">
    <div id="mySec" ng-controller="myController">
        <input type="button" value="Say Hello" ng-click="sayHello()"/>
        <br />
        <span>{{name}}</span>
    </div>
    <hr>
    <br />
    <input type="button" value="Say Hello From JQuery" onclick="callAngularFunction()">
</body>
<script>
    var app = angular.module('myApp', []);
    app.controller('myController', function ($scope) {
        $scope.name = '';
        $scope.sayHello = function () {
            $scope.name = 'Nifal Nizar';
        };
    });

    function callAngularFunction() {
        var scope = angular.element(document.getElementById("mySec")).scope();
        scope.$apply(function () {
            scope.sayHello();
        });
    }
  
</script>
</html>

Hope you had what you are looking for.