ipad online dictionary with jquery mobile

Here we go with one another ipad application “ipad online dictionary with jquery mobile” build with jquery mobile framework. Its simple dictionary application using google’s un-official dictionary api. google dictionary project is dead, but thanks to google, dictionary api service is still alive and we can use it. Here is link to googles (un) official api which we are using to create ipad online dictionary with jquery mobile

   http://www.google.com/dictionary/json?callback=dict_api_callbacks_function&q=test&sl=en&tl=en&restrict=pr%2Cde&client=te

While working on this script one thing made me really crazzzzy and wasted my time a lot, calling data from another server ie cross-domain requests. I will be writing on it in detail in a separate post, and second thing was huge google’s dictionary api json response. But final product makes you forget all this pains.

Html for iphone ipad dictionary app


<!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet"  href="themes/default/" />  
	<link rel="stylesheet"  href="themes/style.css" />  
	<script src="js/jquery.js"></script>
	<script src="js/"></script>
	<script src="js/app.js"></script>
	<script type="text/javascript" src="jquery.jplayer.min.js"></script>
	<script type="text/javascript" src="add-on/jquery.jplayer.inspector.js"></script>
	<style>
		#wtype{
			font-style: italic;
			font-size: 12px;
		}
		#word-big{
			font-size:18px;
			font-weight: bold;
			padding: 0px 10px; 
		}
		.list li{
			margin: 5px 10px;
		}
		.ui-btn-up-c #search{
			margin-top: -20px;
		}
	</style>
</head> 
<body> 
 <div data-role="page" id="main-page"> 
	<div id="jquery_jplayer_1"></div>
	<div data-role="header" data-position="fixed" data-theme="b"> 
	   <h1 style="display:none;">iPad Disctionary</h1>	
	   <fieldset class="ui-grid-a">
		<input type="search" name="word" id="word" value="" style="float:left"/>
		<div style="margin-top: 12px;width: 100px;clear:both;float:right;margin-right:28%;">
			<a data-inline="true" data-role="button" id="search" href="#" data-theme="c" class="ui-btn ui-btn-inline ui-btn-corner-all ui-shadow ui-btn-up-c" style="margin-top:-5px;"><span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all"><span class="ui-btn-text">Search</span></span></a>
		</div>
	   </fieldset>	
	   <a href="bug.html" data-icon="gear" class="ui-btn-right" data-rel="dialog">Report a bug</a>
	</div> 

	<div id="result" style="padding:5px 10px;">
	</div>

	<div data-role="footer" data-position="fixed" data-theme="b"> 
		<h1>iPad Dictionary by - <a href="http://www.amitpatil.me" data-icon="gear" class="ui-btn-left" style="color:#0E1187;text-decoration:none;" target="_blank">www.amitpatil.me</a></h1>
	</div> 
 </div>
</body>
</html>

Here is little javascript

$(document).ready(function(){
	  var pageBuild = 0;

	  $("#jquery_jplayer_1").jPlayer({
		ready: function () {},
		swfPath: "",
		supplied: "mp3"
	  });

	  $(".jp-play").live("click",function(){
		$("#jquery_jplayer_1").jPlayer("play");
	  });

	$("#search").click(function(){
		var word = $("#word").val();	
		if(word.length)
		{
			$.mobile.showPageLoadingMsg();
			jQuery.getJSON('http://www.google.com/dictionary/json?&q='+word+'&sl=en&tl=en&restrict=pr%2Cde&client=te'+"&callback=?", function(data) {
				if(data.primaries){
					var meanings = "";
					var webDef = "";
					var vtypes = "";
					var type = data.primaries[0].terms[0].labels[0].text;	
					var phonetic = data.primaries[0].terms[1].text;	
					if(data.primaries[0].terms[2])
						var sound = data.primaries[0].terms[2].text.replace("http://","");	

					var otherDetArr = data.webDefinitions[0].entries;	
					var meaningArr = data.primaries[0].entries;
					var examples = data.primaries;

					var otype = data.primaries[0].entries[0].terms;

					$.each(otherDetArr,function(i,oitem) {
						if(oitem.terms[0].text)
						  webDef = webDef + "</pre>
<ul>
	<li>"+oitem.terms[0].text+"
</ul>
<pre class="brush:javascript">";
					});

					$.each(meaningArr,function(i,mitem) {
						if(mitem.terms[0].text)
						  meanings = meanings + "</pre>
<ul>
	<li>" +mitem.terms[0].text+"["+vntype.text+"] ";

					});

					$('#result').html('<div data-role="collapsible-set" data-inset="true" data-theme="b" data-content-theme="b"><div data-role="collapsible" data-collapsed="false"><h3> Meaning - '+word+'   '+phonetic+'   '+'</h3><span id="wtype">'+type+'</span>    <span id="word-big">'+word+'</span><a href="javascript:;" class="jp-play"><img src="images/speaker.jpg" width="25" height="20"></a> '+vtypes+'<p><ol class="list">'+meanings+'</ol></p></div><div data-role="collapsible"><h3>Web Definitions - '+word+'</h3><p><ol class="list">'+webDef+'</ol></p></div></div>');

					if(!pageBuild){
						$(document).page();
						pageBuild = 1;
					}else{
						$(document).page("destroy").page();
					}

					$("#jquery_jplayer_1").jPlayer("setMedia", {mp3 : "http://"+sound });
				}else{
					showDialog("Sorry, No definition found !");
				}
					$.mobile.hidePageLoadingMsg();
				});
		}
	}); 

	$("#submit").live("click",function(){
		var formData = $("#callAjaxForm").serialize();
		$.ajax({
			type: "POST",
			url: "submitBug.php",
			cache: false,
			data: formData,
			success: onSuccess,
			error: onError
		});

		return false;
	});

	function onSuccess(data, status)
	{
		if(data == "1")
			showDialog("Success ! Thank you !");
		else
			showDialog("Unexpected error !");

		$.mobile.changePage($('#main-page'), 'pop', false, true); 
	}

	function onError(data, status)
	{
		showDialog("Unexpected error, Please Try again !");
	}  

	function showDialog(string){
		$("</pre>
<div class="ui-loader ui-overlay-shadow ui-body-e ui-corner-all">
<h1><strong>"+string+"</strong></h1>
<div class="ui-block-a"></div>
</div>
<pre class="brush:javascript">")
		.css({ "display":"block", "opacity":0.96, "top": $(window).scrollTop() + 100 })
		.appendTo( $("body") )
		.delay( 2500 )
		.fadeOut( 400, function(){
			$(this).remove();
		});	
	}
});

This is how our ipad online dictionary with jquery mobile app will look a like

ipad dictionary app jquery mobile

ipad online dictionary with jquery mobile

Please share “ipad online dictionary with jquery mobile”
View Demo Download

About Amit

   Myself Amit Patil from Maharashtra (India). I have been working as a Web Application Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically i am a PHP developer but now a days exploring more in CSS and javascript.

Comments

  1. Very cool code. Clean and functional. I am always impressed with how flexible jQuery is. Thanks for the cool idea.

  2. iPhone, iPad Dictionary app is one of the best English Dictionary app out there. Thank you so much for the wonderful idea. jQuery stands out!

  3. Nice Way Amit. Dictionary for iPhone and iPad is very useful.

  4. nice code thanks…

    do you know how to clear the search term using the “x” button on the input box… somehow it is not functional… maybe i am doing something wrong.

    • If you see the code/output properly u will definitely notice that i am not using “input” type i am using “search” type, so that its showing “X” button to clear the input “<input type=”search” name=”search” id=”searc-basic” value=”” />”

  5. Hi Amit,

    Is it possible to run this dictionary on the client without php? Also, what kind of a license are you distributing this code under? Thanks!

    • Yes there is no PHP used but it uses google dictionary api so u will have to be connected to internet. Its a plain javascript. Its freeware app so you can use it for anything u want :)

  6. Beben Koben says:

    thanks :)

  7. very good amit….i like your idea…..keep blogging….

Speak Your Mind

*


*

Notify me of followup comments via e-mail. You can also subscribe without commenting.

More in Ajax, jQuery, Misc, PHP (18 of 44 articles)
Youtube rating script


   In this Youtube like rating script jquery php tutorial we will create youtube like video rating script using jquery ...