Network Information API

How to detect Network Connection changes ??

Do you have same question sometime in ur mind ? hmm.. i got answer from MDN

This API provides information about the system’s connection, such as connection bandwidth of user device, or whether the connection is metered.

Usage :
This can be used to select hight definition and low definition content based on the user’s connection.

Detecting connection changes

var connection = navigator.connection || navigator.mozconnection 
|| navigator.webkitconnection;
function updateConnectionStatus(){
alert("connection bandwidth="+connection.bandwidth +"Mbs");
if(connection.metered){
alert("the connection is metered");
}
}
updateConnectionStatus();

Simple JS Code ..!!@@

Advertisements

Dealing with bootstrap alert

hello guys,

I got some problem while dealing with bootstrap alert.

How to show bootstrap alert div again

when we close alert div box, then if again we can’t show that div box. even if we write jquery show() function.

solution:

checkout  <a> tag there you got data-dismiss=”alert” , this will remove div from dom so that’s why we can’t show that div again. so just remove that and bind your function to that div

code:

<a id=”lieclose” onclick=”general_close(this.id)”>×</a>

jquery code:

function general_close(id)
{
	var current_id = "#"+id;
	$(current_id).parent().hide();
}

above function will work for any alert div. just change your id in a tag.

How to redraw bootstrap-error message

$('#loginerrbox').empty();
$('#loginerrbox').append("Please enter valid credentials. 
<a id='crdlogerr' class='close' onclick='general_close(this.id)'>×</a>");					
$('#loginerrbox').show();

above code demonstrate how to redraw new error message on alert div.

hope you like above Tips 🙂

jquery datatable simple n effective example

hello guys,

let’s go for very simple DataTables example which is filled by jquery ajax call.

Import bellow file in your html heading section

!!! note :–  just replace &gt; with > (end tag)

<link rel=”stylesheet” type=”text/css” href=”http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables_themeroller.css”&gt;
<link rel=”stylesheet” type=”text/css” href=”http://datatables.net/media/blog/beautiful_tables/complete.css”&gt;
<script type=”text/javascript” charset=”utf8″ src=”http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js”&gt;
</script>

JQuery function

$.ajax({
        	type: "GET",
		data: {data: pass ur data},
           	url:  "give your php file url here",
            	contentType: "application/json; charset=utf-8",
            	success: function(data) {
		$('#table').append("<tr><td>YOUR DATA HERE</td></tr>"); 
                $('#table').dataTable({
                   "sScrollY": 200,
                   "bJQueryUI": true,
               }); 
            } 
 });

HTML code for table

<table cellpadding=”0″ cellspacing=”0″ border=”0″ id=”ausgroup” width=”80%”>
<thead>
<tr>
<th>Your Heading </th>
</tr>
</thead>
<tbody>
</tbody>
</table>

Note

some important option listed bellow

“bJQueryUI”: true,       — for UI css of Table
“bPaginate”: false,        — for Pagination
“bLengthChange”: false,
“bFilter”: true,                — for filter
“bSort”: true,                 — for sorting

Redraw Datatable with fresh data

     $.ajax({
	            type: "GET",
	            url: "your url",
        	    success: function(data) {
		       if (typeof oTablelb != 'undefined') 
		        oTablelb.fnClearTable();
		        $('#lbtable').append("<tr><td>your data</td></tr>"); 
                        oTablelb=$('#lbtable').dataTable({ 
                                  "bDestroy": true, 
                                  "sScrollY": 200, 
                                  "sScrollX":400, 
                                  "bJQueryUI": true, 
                               }); 
                    } 
        });

just set bellow property

1) if (typeof oTablelb != 'undefined') oTablelb.fnClearTable();

2) "bDestroy": true,

now run your file,  DataTable will reload fresh data based on ajax call.  🙂

hope you like it!!

Add Google Search-box on your static website

hey guys,

today i integrate Google search box widget in my website which is very useful to add search functionality in our static website.

here is step for adding google widget in your website.

Go to Google Custom Search http://www.google.com/cse/

Click on Create a Custom Search Engine

Give it a name, enter sites you want to cover with the search.

Complete the process and get the javascript. Integrate the script into your static page.

Screenshot:

google search box

you can also customize this widget using different layout options. for example i want to display search result in new window tab. so i customized my code like

<gcse:searchbox-only newWindow=true></gcse:searchbox-only>

newWindow=true

visit Custom Search Element Control API for more information.

hope you like this post 🙂

List of file with Delete option in JSP

ya , here is improved version of previous post. you can view all files within a particular directory as well as delete any file.

specially this kind of requirements came when i was working in Advertisement Management Module. so there admin can view all advertisement images which he uploaded previously and he can also able to delete from directory. so he can able to manage disk size.

k lets go for coding.

oky so first i need to fetch all images from directory with delete button. i m putting filename in button id value so i can easily recognize that for which file user pressing delete button. and once i’will get filename then rest of coding flow is very simple.. i will pass that filename to delete.jsp file and there i will write logic to delete that file.

listfiles.jsp

JavaScript Function

script_img_dlt

and bellow screenshot is for listing of files from directory.

jsp_img_dlt

and now bellow jsp file show you delete function for that file

<%@ page import="java.io.*" %>
<% 
String id = request.getParameter("id"); 
File file = new File("C:\\Users\\LYMAN\\Documents\\NetBeansProjects\\WebApplication2\\web\\upload\\"+id+""); 
if(file.delete()) 
{ 	
out.println("file deleted successfully");
} 
else { 
	out.println("failed to perform delete operation"); 
} 
%>

hope you like this post.. 🙂

Get Latest Updated Data using SSE(Server-Sent-Events) Automatically

hii guys,

This is very interesting topic which i gonna share with you people.  So many times i think about how facebook/Twitter updates, stock price updates, news feeds, sport results are working?

finally i found easy and simple way to do same thing. so i just developed simple application which demonstrate usage of SSE (Sever-Sent-Events).

so i developed Latest Job Post Application, which give you latest job posted by any employee on webpage automatically.

let’s go for coding

index.html

index.php_SSE

so here i’m using SSE and in EventSource i’m passing viewpost.php file, which fetch latest record from table.

viewpost.php

viewpost.php_SSE

As a output in {topjob} div, always latest job will be printed without refreshing page.

About SSE:

A server-sent event is when a web page automatically gets updates from a server.

This was also possible before, but the web page would have to ask if any updates were available. With server-sent events, the updates come automatically.

Examples: Facebook/Twitter updates, stock price updates, news feeds, sport results, etc.

Disadvantage:

IE does not support it .. 😦

Done!

Hope you gonna like Dis. .. 🙂

ASCII Code application(write in ASCII code)

hey guys,

open this file in browser and write anything in ASCII code, this is really nice application, which is used for any purpose.

i developed this application for my project purpose. and the best thing about this application is backspace also working as usual to delete last character.

so lets go for coding..

note : here i include online jquery file.. so to run this application internet must be there, or you can download js file and give link here.


<!DOCTYPE html>
<html>
<head>
<script src=”http://code.jquery.com/jquery-latest.js”></script&gt;
</head>
<body>
<p id=”t1″></p>
<script>
var keycode=0;
var k;
var temp;
var len;
var totallen,sublen;
var str=””;
document.onkeyup = function(e){
keycode = window.event.keyCode;
if(keycode == 8)
{
var data = document.getElementById(“t1″).innerHTML;
totallen = data.length;
sublen = totallen-len;
str=””;
for(var i = 0;i<sublen;i++)
{
str += data.charAt(i);
}
data = str;
$(“p”).empty();
$(“p”).append(str);

}
else
{
k = keycode;
temp = k.toString();

len = temp.length;
$(“p”).append(keycode);
}
}
</script>
</body>
</html>


hope you like this application!!