Monthly Archives: September 2011

How to create you own Gmail like loader / progress bar with Jquery

Posted on by
6

Sometimes, It is necessary to create progress bar or loader to show user that something happening in the background. Loader/loading icons are good way to do this but If you want your user to show actual progress then something else is needed. A progress bar which shows how much task has been completed and how much left.

Gmail has done some remarkable job in this. Since, Gmail loader is simple and elegant in looks. And, It is really simple to create a Gmail like loader.

What you need is two divs. One div will treated like container, which will filled by other div to show progression of the task. So, outer div will contain border only and shows totality of the task, where as internal div will contain background color, it will give sense of filling the outer div. And, when some part of task happened we will increase this inner div’s size. So that, it fills outer div and give sense to user that we had done something and hence increase the progress.

Here is the example to do Gmail like loading feature,

<!DOCTYPE>
<html>
    <head>
        <title>Gmail like loader</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script>
			function callMe(inc)
			{
				inc</span> = inc || 10
				var w = parseInt((parseInt($("#inner").css("width"))/parseInt($("#inner").parent().css("width")))*100)+ inc;
				$("#inner").width(w+"%");
				if(w>100)$("#inner").width(0);
			}
			
			$(document).ready(function(){
				var id = setInterval(callMe,1000);
			});
			
		</script>
    </head>
    <body>
		loading...
		<div id="outer" style="border:1px solid;width:200px;height:10px;overflow:hidden;">
			<div id="inner" style="background-color:#0F67A1;height:100%;width:0%;"/>
		</div>
    </body>
</html>

I had two divs, outer and inner. outer had border and inner had background color. In outer we had used overflow:hidden to hide inner div progression if it increases beyond 100% (length/width of the outer div). I had to use interval to show some progress.

Update: Demo
http://jsfiddle.net/gagan/62CZZ/embedded/result/

Converting Simple XML to JSON in Python

Posted on by
Reply

Converting simple XML to JSON with some Google like extensions (http://code.google.com/apis/gdata/docs/json.html) like $t for text content and replace ‘:’ in element name with ‘$’. It is fairly simple here is how I do it.

import xml.parsers.expat
import sys,string

# 3 handler functions
def start_element(name, attrs):
    #sys.stdout.write 'Start element:', name, attrs
	sys.stdout.write('{"'+string.replace(name,':','$')+'":{')
	for attr in attrs.keys():
		sys.stdout.write('"'+attr+'":"'+attrs[attr]+'",')
def end_element(name):
    #sys.stdout.write 'End element:', name
	sys.stdout.write('}')
def char_data(data):
    #sys.stdout.write 'Character data:', repr(data)
	if data and (data!=""):
		sys.stdout.write( '"$t":{"'+data+'"}' )

p = xml.parsers.expat.ParserCreate()

p.StartElementHandler = start_element
p.EndElementHandler = end_element
p.CharacterDataHandler = char_data

p.Parse("""<?xml version="1.0"?>
<ns:parent id="top"><child1 name="paul">Text goes here</child1><child2 name="fred">More text</child2></ns:parent>""", 1)