SO Help: Get user ip with jquery

http://stackoverflow.com/questions/6160157/get-user-ip-with-jquery

by SpYk3

HTML

<table class="ui-widget">
    <thead>
        <tr>
            <th class="ui-widget ui-widget-header">IP</th>
            <th class="ui-widget ui-widget-header">City</th>
            <th class="ui-widget ui-widget-header">Country Code</th>
            <th class="ui-widget ui-widget-header">Country Name</th>
        </tr>
    </thead>
    <tbody>
        <tr></tr>
    </tbody>
</table>

















































































<!--    Strictly for Theme Changer (Nothing to do with Accordion)    -->
<div id="ThemeSwitcher" class="ui-widget ui-widget-content ui-corner-top" style="text-align: center;">
	<label for="selTheme" class="ui-widget-header ui-corner-all" style="padding: .1em .5em;">Select Theme</label>
	<select id="selTheme" name="selTheme" class="ui-widget ui-corner-all">
		<option value="base">base</option>
		<option value="black-tie">black-tie</option>
		<option value="blitzer">blitzer</option>
		<option value="cupertino">cupertino</option>
		<option value="dark-hive">dark-hive</option>
		<option value="dot-luv">dot-luv</option>
		<option value="eggplant">eggplant</option>
		<option value="excite-bike">excite-bike</option>
		<option value="flick">flick</option>
		<option value="hot-sneaks">hot-sneaks</option>
		<option value="humanity">humanity</option>
		<option value="le-frog">le-frog</option>
		<option value="mint-choc">mint-choc</option>
		<option value="overcast">overcast</option>
		<option value="pepper-grinder">pepper-grinder</option>
		<option value="redmond">redmond</option>
		<option value="smoothness">smoothness</option>
		<option value="south-street">south-street</option>
		<option value="start">start</option>
		<option value="sunny">sunny</option>
		<option value="swanky-purse">swanky-purse</option>
		<option value="trontastic">trontastic</option>
		<option value="ui-darkness">ui-darkness</option>
		<option value="ui-lightness">ui-lightness</option>
		<option...

CSS

table { border-collapse: collapse; margin: 1em auto; }
th, td { padding: .25em .5em; text-align: center; }
















































































/*  Theme Switcher CSS  */
#ThemeSwitcher {
    background: #f1da36;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YxZGEzNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZWZjZWEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #f1da36 0%, #fefcea 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1da36), color-stop(100%,#fefcea));
    background: -webkit-linear-gradient(top,  #f1da36 0%,#fefcea 100%);
    background: -o-linear-gradient(top,  #f1da36 0%,#fefcea 100%);
    background: -ms-linear-gradient(top,  #f1da36 0%,#fefcea 100%);
    background: linear-gradient(to bottom,  #f1da36 0%,#fefcea 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1da36', endColorstr='#fefcea',GradientType=0 );

    border-bottom: none !important;
    bottom: 0em;
    left: 50%;
    margin-left: -10em;
    padding: .5em .5em .25em;
    position: fixed;
    z-index: 999;
}
#ThemeSwitcher select { outline: 0 !important; }

JavaScript

$.ajax({
    dataType: 'json',
    url: 'http://api.hostip.info/get_json.php',
    success: function(data) {
        var $ip = data['ip'],
            $city = data['city'],
            $countryCode = data['country_code'],
            $countryName = data['country_name'];
        $('tbody tr').append(
            $('<td />', { class: "ui-widget ui-widget-content", text: $ip }),
            $('<td />', { class: "ui-widget ui-widget-content", text: $city }),
            $('<td />', { class: "ui-widget ui-widget-content", text: $countryCode }),
            $('<td />', { class: "ui-widget ui-widget-content", text: $countryName })
        );
    }
});

















































































/*    Strictly for Them Selector (Nothing to do with accordion)    */
var tmrThemSwitcher;
$("#ThemeSwitcher").on("mouseenter", function(e) {
    clearTimeout(tmrThemSwitcher);
    $(this).animate({ bottom: "0em" });
})
.on("mouseleave", function(e) {
    tmrThemSwitcher = setTimeout(function() { $("#ThemeSwitcher").animate({ bottom: "-2em" }); }, 1000);
});
$("select").change(function(e) {
	var thmURL = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/{theme}/jquery-ui.css".replace("{theme}", $(this).val()),
		thmLink = $("<link />", { id: "ui-theme-link", href: thmURL, rel: "stylesheet", type: "text/css" });
	$("head").append(thmLink);
	$("head .ui-theme-link").first().remove();
}).children("[value=hot-sneaks]").prop("selected", true).change();
/*    --    --    --    --    --    --    --    --    --    --    */