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&amp;q=test&amp;sl=en&amp;tl=en&amp;restrict=pr%2Cde&amp;client=te

1	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

<!--
   App Name : jQuery Mobile Dictionary app
   Developed By : Amit Patil
   Website : https://amitpatil.me
   Created : 4 Dec 2011
-->
&lt;!DOCTYPE html&gt; 
&lt;html&gt; 
	&lt;head&gt;
	&lt;meta charset="utf-8"&gt;
	&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt; 
	&lt;link rel="stylesheet"  href="themes/default/" /&gt;  
	&lt;link rel="stylesheet"  href="themes/style.css" /&gt;  
	&lt;script src="js/jquery.js"&gt;&lt;/script&gt;
	&lt;script src="js/"&gt;&lt;/script&gt;
	&lt;script src="js/app.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript" src="jquery.jplayer.min.js"&gt;&lt;/script&gt;
	&lt;script type="text/javascript" src="add-on/jquery.jplayer.inspector.js"&gt;&lt;/script&gt;
	&lt;style&gt;
		#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;
		}
	&lt;/style&gt;
&lt;/head&gt; 
&lt;body&gt; 
 &lt;div data-role="page" id="main-page"&gt; 
	&lt;div id="jquery_jplayer_1"&gt;&lt;/div&gt;
	&lt;div data-role="header" data-position="fixed" data-theme="b"&gt; 
	   &lt;h1 style="display:none;"&gt;iPad Disctionary&lt;/h1&gt;	
	   &lt;fieldset class="ui-grid-a"&gt;
		&lt;input type="search" name="word" id="word" value="" style="float:left"/&gt;
		&lt;div style="margin-top: 12px;width: 100px;clear:both;float:right;margin-right:28%;"&gt;
			&lt;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;"&gt;&lt;span aria-hidden="true" class="ui-btn-inner ui-btn-corner-all"&gt;&lt;span class="ui-btn-text"&gt;Search&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;
		&lt;/div&gt;
	   &lt;/fieldset&gt;	
	   &lt;a href="bug.html" data-icon="gear" class="ui-btn-right" data-rel="dialog"&gt;Report a bug&lt;/a&gt;
	&lt;/div&gt; 

	&lt;div id="result" style="padding:5px 10px;"&gt;
	&lt;/div&gt;

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

<!--

App Name : jQuery Mobile Dictionary app

Developed By : Amit Patil

Website : https://amitpatil.me

Created : 4 Dec 2011

-->

<!DOCTYPE html>

<html>

<head>

<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>

<h1 style="display:none;">iPad Disctionary</h1>

<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>

<h1>iPad Dictionary by - <a href="https://amitpatil.me" data-icon="gear" class="ui-btn-left" style="color:#0E1187;text-decoration:none;" target="_blank">www.amitpatil.me</a></h1>

</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?&amp;q='+word+'&amp;sl=en&amp;tl=en&amp;restrict=pr%2Cde&amp;client=te'+"&amp;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 + "&lt;/pre&gt;
&lt;ul&gt;
	&lt;li&gt;"+oitem.terms[0].text+"
&lt;/ul&gt;
&lt;pre class="brush:javascript"&gt;";
					});

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

					});

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

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

$(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+"<em>["+vntype.text+"]</em> ";

});

$('#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>

<h1><strong>"+string+"</strong></h1>

</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 online dictionary with jquery mobile

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

10 Comments

jQuery Developer says:

December 5, 2011 at 7:56 am

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

Leading Directory says:

December 27, 2011 at 8:49 am

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!

Shakil says:

February 7, 2012 at 2:33 pm

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

fawzi says:

February 9, 2012 at 6:37 am

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.

- Amit says:
  
  February 9, 2012 at 2:18 pm
  
  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=”” />”
  
Hugh says:

April 20, 2012 at 12:43 am

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!

- Amit says:
  
  April 21, 2012 at 7:04 pm
  
  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 🙂
  
Beben Koben says:

June 5, 2012 at 3:10 pm

thanks 🙂

fuad indra setiawan says:

June 16, 2012 at 3:20 pm

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

Harga Hp Android says:

July 12, 2015 at 8:21 pm

Thanks for information… good article

Ipad online dictionary with jquery mobile

Html for iphone ipad dictionary app

Here is little javascript

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

Related

10 Comments

Leave a Comment X

Let your friends know what are you reading

Html for iphone ipad dictionary app

Here is little javascript

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

Related

You may also like

10 Comments

Leave a Comment X

Let your friends know what are you reading