tag:blogger.com,1999:blog-69978428836884141312024-03-12T22:15:05.457-07:00The HTML5 JQuery JS ClubThe CSS3 jQuery HTML5 JavaScript WorldCarmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.comBlogger7125tag:blogger.com,1999:blog-6997842883688414131.post-64716541282080614882019-08-14T21:25:00.002-07:002019-08-14T21:25:38.411-07:00How to create an asynchronic Javascript Promise<div class="separator" style="clear: both;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu2zcen7vyVnGh8Cr3quCneCHFdg_2V1Jt21hWgkX4T8CGoy_2qmu-zjFC13C2wI1RSKBL2_EpDaj4TrA-n3X-oUU9SjcZW0wC6i7u-QCQJQh7DSEp6iH0236ayzD9n-l0ZGXdsrKzGunp/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The Application Cache of HTML5" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu2zcen7vyVnGh8Cr3quCneCHFdg_2V1Jt21hWgkX4T8CGoy_2qmu-zjFC13C2wI1RSKBL2_EpDaj4TrA-n3X-oUU9SjcZW0wC6i7u-QCQJQh7DSEp6iH0236ayzD9n-l0ZGXdsrKzGunp/s1600/1.png" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12pt;">by carmel schvartzman</span><br />
<span style="font-family: "times new roman" , serif; font-size: 12pt;">In this page we see how to create an asynchronic Javascript Promise. We use Jquery and HTML5.</span><span style="font-family: "times new roman" , serif; font-size: 12pt;"><br /></span><br />
<h2 style="text-align: center;">
<span style="font-family: "times new roman" , serif;">How to create an asynchronic Javascript Promise</span></h2>
<span style="font-family: "times new roman" , serif; font-size: 12pt;"><br /></span><br />
<span style="font-family: times new roman, serif;"><!DOCTYPE html></span><br />
<span style="font-family: times new roman, serif;"><html></span><br />
<span style="font-family: times new roman, serif;"><head></span><br />
<span style="font-family: times new roman, serif;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></span><br />
<span style="font-family: times new roman, serif;"><script></span><br />
<span style="font-family: times new roman, serif;">$(document).ready(function(){</span><br />
<span style="font-family: times new roman, serif;"> $("button").click(function(){</span><br />
<span style="font-family: times new roman, serif;"> </span><br />
<span style="font-family: times new roman, serif;"> ////// this line uses the Promise :</span><br />
<span style="font-family: times new roman, serif;"> fnPromise('Hello').then((url) => { console.warn(`DATA = ${url}`); },(e) => { alert('ERROR = ' + e); });</span><br />
<span style="font-family: times new roman, serif;"> </span><br />
<span style="font-family: times new roman, serif;"> });</span><br />
<span style="font-family: times new roman, serif;">});</span><br />
<span style="font-family: times new roman, serif;"><br /></span>
<span style="font-family: "times new roman", serif;"> ////// this is the Promise :</span><br />
<span style="font-family: times new roman, serif;">const fnPromise = (url) => { </span><br />
<span style="font-family: times new roman, serif;"><br /></span>
<span style="font-family: times new roman, serif;"><span style="white-space: pre;"> </span>return new Promise((resolve,reject) => { </span><br />
<span style="font-family: times new roman, serif;"> <span style="white-space: pre;"> </span>if(url !== null) resolve(url);</span><br />
<span style="font-family: times new roman, serif;"> else reject('Bad request');</span><br />
<span style="font-family: times new roman, serif;"> }</span><br />
<span style="font-family: times new roman, serif;"> );</span><br />
<span style="font-family: times new roman, serif;">}</span><br />
<span style="font-family: times new roman, serif;"><br /></span>
<span style="font-family: times new roman, serif;"></script></span><br />
<span style="font-family: times new roman, serif;"></head></span><br />
<span style="font-family: times new roman, serif;"><body></span><br />
<span style="font-family: times new roman, serif;"><button>Call a Promise and get the result back</button></span><br />
<span style="font-family: times new roman, serif;"></body></span><br />
<span style="font-family: times new roman, serif;"></html></span><br />
<div>
<br /></div>
<span style="font-family: "times new roman" , serif; font-size: 12pt;"></span><span style="font-family: "times new roman" , serif; font-size: 12pt;"><br /></span>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12pt;">That’s all: enjoy HTML5!!!<o:p></o:p></span></div>
<span style="font-family: "times new roman" , serif; font-size: 12pt;"></span><br />
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span dir="RTL" lang="HE" style="font-family: "times new roman" , serif; font-size: 12pt;">עריכה: כרמל שוורצמן</span><br />
<span dir="RTL" lang="HE" style="font-family: "times new roman" , serif; font-size: 12pt;"><br /></span></div>
</div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-6997842883688414131.post-15095790999411470502019-04-30T00:12:00.002-07:002019-04-30T00:12:38.879-07:00Simple Twitter Bootstrap Form Building-block<div class="separator" style="clear: both;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu2zcen7vyVnGh8Cr3quCneCHFdg_2V1Jt21hWgkX4T8CGoy_2qmu-zjFC13C2wI1RSKBL2_EpDaj4TrA-n3X-oUU9SjcZW0wC6i7u-QCQJQh7DSEp6iH0236ayzD9n-l0ZGXdsrKzGunp/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The Application Cache of HTML5" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu2zcen7vyVnGh8Cr3quCneCHFdg_2V1Jt21hWgkX4T8CGoy_2qmu-zjFC13C2wI1RSKBL2_EpDaj4TrA-n3X-oUU9SjcZW0wC6i7u-QCQJQh7DSEp6iH0236ayzD9n-l0ZGXdsrKzGunp/s1600/1.png" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12pt;">by carmel schvartzman</span><br />
<span style="font-family: "times new roman" , serif; font-size: 12pt;"><br /></span><span style="font-family: "times new roman" , serif; font-size: 12pt;">The following is a building block to create a Form :</span><br />
<span style="font-family: "times new roman" , serif; font-size: 12pt;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6VsCuOuSU41UlbtyHIELbqNFwWa1WTwvF0dKZ4wLGkqA-BSo-OJ0VhRVyK7yL_O1vzxPypaDHwkkTNAYztCbAKsPDpr-NlbNosiClLiTFlGfOyjDy_6MIVStGCqZ39qZV4vX9u9WFeIHm/s1600/1.PNG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="410" data-original-width="1275" height="204" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6VsCuOuSU41UlbtyHIELbqNFwWa1WTwvF0dKZ4wLGkqA-BSo-OJ0VhRVyK7yL_O1vzxPypaDHwkkTNAYztCbAKsPDpr-NlbNosiClLiTFlGfOyjDy_6MIVStGCqZ39qZV4vX9u9WFeIHm/s640/1.PNG" width="640" /></a></div>
<span style="font-family: "times new roman" , serif; font-size: 12pt;"><br /></span></div>
<br />
<!DOCTYPE html><br />
<html lang="en"><br />
<head><br />
<title>Bootstrap Example</title><br />
<meta charset="utf-8"><br />
<meta name="viewport" content="width=device-width, initial-scale=1"><br />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"><br />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><br />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script><br />
</head><br />
<body><br />
<br />
<div class="container"><br />
<h2>Form Building-block</h2><br />
<form action="/action_page.php"><br />
<br />
<div class="panel panel-primary"><br />
<div class="panel-heading panel-primary"><br />
<h3 class="panel-title ">Create Employee</h3><br />
</div><br />
<div class="panel-body panel-primary"><br />
<div class="form-group"><br />
<label for="email">Email:</label><br />
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email"><br />
</div><br />
<div class="form-group"><br />
<label for="pwd">Password:</label><br />
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd"><br />
</div><br />
<div class="checkbox"><br />
<label><input type="checkbox" name="remember"> Remember me</label><br />
</div><br />
<br />
</div><br />
<div class="panel-footer panel-primary"><br />
<button class="btn btn-primary" type="submit">Save</button><br />
</div><br />
<br />
</form><br />
</div><br />
<br />
</body><br />
</html><br />
<div>
<br /></div>
<div>
<br />
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12pt;">That’s all: enjoy HTML5!!!<o:p></o:p></span></div>
<span style="font-family: "times new roman" , serif; font-size: 12pt;"></span><br />
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span dir="RTL" lang="HE" style="font-family: "times new roman" , serif; font-size: 12pt;">עריכה: כרמל שוורצמן</span><br />
<span dir="RTL" lang="HE" style="font-family: "times new roman" , serif; font-size: 12pt;"><br /></span></div>
</div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
<div>
<br /></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-6997842883688414131.post-83414246974613616572016-01-05T10:53:00.000-08:002016-01-05T10:53:55.987-08:00The Application Cache of HTML5<div align="center" class="MsoNormal" style="direction: ltr; line-height: 23.75pt; margin-bottom: .0001pt; margin-bottom: 0cm; mso-outline-level: 1; text-align: center; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600"
o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f"
stroked="f">
<v:stroke joinstyle="miter"/>
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0"/>
<v:f eqn="sum @0 1 0"/>
<v:f eqn="sum 0 0 @1"/>
<v:f eqn="prod @2 1 2"/>
<v:f eqn="prod @3 21600 pixelWidth"/>
<v:f eqn="prod @3 21600 pixelHeight"/>
<v:f eqn="sum @0 0 1"/>
<v:f eqn="prod @6 1 2"/>
<v:f eqn="prod @7 21600 pixelWidth"/>
<v:f eqn="sum @8 21600 0"/>
<v:f eqn="prod @7 21600 pixelHeight"/>
<v:f eqn="sum @10 21600 0"/>
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="Picture_x0020_33" o:spid="_x0000_i1035" type="#_x0000_t75"
alt="1" href="http://html5club.comuv.com/wp-content/uploads/2013/11/14.png"
style='width:137.25pt;height:32.25pt;visibility:visible;mso-wrap-style:square'
o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image001.png"
o:title="1"/>
</v:shape><![endif]--><!--[if !vml]--></span><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu2zcen7vyVnGh8Cr3quCneCHFdg_2V1Jt21hWgkX4T8CGoy_2qmu-zjFC13C2wI1RSKBL2_EpDaj4TrA-n3X-oUU9SjcZW0wC6i7u-QCQJQh7DSEp6iH0236ayzD9n-l0ZGXdsrKzGunp/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The Application Cache of HTML5" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiu2zcen7vyVnGh8Cr3quCneCHFdg_2V1Jt21hWgkX4T8CGoy_2qmu-zjFC13C2wI1RSKBL2_EpDaj4TrA-n3X-oUU9SjcZW0wC6i7u-QCQJQh7DSEp6iH0236ayzD9n-l0ZGXdsrKzGunp/s1600/1.png" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">by carmel schvartzman<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">The Application Cache in HTML5 allows us to make an
offline version of a web page, releasing the load on our web server, and making
the web pages a lot more responsives increasing performance. That is
because in this case the browser will only download changed web pages from the
server.<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">This new HTML5 feature works by means of creating a cache
manifest file, a file of ”<b>text/cache-manifest</b>” MIME-type.<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/?p=180" style="line-height: 31.6667px; text-align: center;" title="Permanent Link to The Application Cache of HTML5"><span style="font-family: "times new roman" , serif; font-size: 22pt;"><span style="color: red;">The Application Cache of HTML5</span></span></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">You should create MIME-types to allow web clients handle new
file name extensions appropriately; elsewhere, if IIS does not recognize the
file name extension, then sends the content as the default MIME type:
Application, which means that clients cannot process the file.<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">So let’s add the cache-manifest MIME type to our web server.
Type “<b>inetmgr</b>” in the RUN window:<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWDpBwPJeI7drD8fkLmOwVeVQNX2lft5jgHbe00phbTYMHz1k-Ta5RRMRiJOaEvf1n1-nD2eSjj49oR30ecodCDKX5RDiW2y1Ieotk4flEMlBz7hFkKU3gHZvz7aU-mshXC3xKHw-kFFD/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The Application Cache of HTML5" border="0" height="232" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsWDpBwPJeI7drD8fkLmOwVeVQNX2lft5jgHbe00phbTYMHz1k-Ta5RRMRiJOaEvf1n1-nD2eSjj49oR30ecodCDKX5RDiW2y1Ieotk4flEMlBz7hFkKU3gHZvz7aU-mshXC3xKHw-kFFD/s400/2.png" width="400" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/21.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_32" o:spid="_x0000_i1034"
type="#_x0000_t75" alt="2"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/21.png" style='width:225pt;
height:130.5pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image002.png"
o:title="2"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">After IIS opens, select the Default Web Site, and
double-click “MIME Types”:<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEz99A5xJbYZ6UDMwZwZ3qaMRriDdNK9TOQ5aj18SuVyaLCkcfkVyshHLkfnplK0Vj9rR8KSFcNVgD1W0_752TvN8Fpn3kY_Wvw_LrIcWDm1E7cvv5mnq278xOjNEtKeiFrqlRjmaCm9rZ/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The Application Cache of HTML5" border="0" height="382" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEz99A5xJbYZ6UDMwZwZ3qaMRriDdNK9TOQ5aj18SuVyaLCkcfkVyshHLkfnplK0Vj9rR8KSFcNVgD1W0_752TvN8Fpn3kY_Wvw_LrIcWDm1E7cvv5mnq278xOjNEtKeiFrqlRjmaCm9rZ/s640/3.png" width="570" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/31.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_31" o:spid="_x0000_i1033"
type="#_x0000_t75" alt="3"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/31.png" style='width:225pt;
height:134.25pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image003.png"
o:title="3"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Click the “Add” link:<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjlo3MbZAQNmzeISVpF0OBn0xeT1GkIILY9dXNdOfXFxT-tPuPryyAimZnnvHbzl-RYLX2TDpj9Sl1Ey0-lZkBQm7b9gG4bQeWuXf_RuJ2NJJE9I29WV4Eeg78c6wwbenyQmnP1eRqTPPg/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="396" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjlo3MbZAQNmzeISVpF0OBn0xeT1GkIILY9dXNdOfXFxT-tPuPryyAimZnnvHbzl-RYLX2TDpj9Sl1Ey0-lZkBQm7b9gG4bQeWuXf_RuJ2NJJE9I29WV4Eeg78c6wwbenyQmnP1eRqTPPg/s640/4.png" width="570" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/41.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_30" o:spid="_x0000_i1032"
type="#_x0000_t75" alt="4"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/41.png" style='width:225pt;
height:138.75pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image004.png"
o:title="4"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">… and type the “.<b>appcache</b>” file extension and
its corresponding “<b>text/cache-manifest</b>” MIME type:<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnxA_25gJstoyWh094LHM0hRdLpk36a5-spuK0-YUXEVO_4t8kukMGP1l74jFw9qXtEuvsoTRfpsd2feo1zZF875H86FksPMUHHol-gUQJ9HfzKhgs-2Ya7GOyVSqLhBeO3ljlJVdE2Ly/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The Application Cache of HTML5" border="0" height="377" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAnxA_25gJstoyWh094LHM0hRdLpk36a5-spuK0-YUXEVO_4t8kukMGP1l74jFw9qXtEuvsoTRfpsd2feo1zZF875H86FksPMUHHol-gUQJ9HfzKhgs-2Ya7GOyVSqLhBeO3ljlJVdE2Ly/s400/5.png" width="400" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwMu8J-G58_X71PTIVRJYlLjh7Wfjb4JJ9CmZObZ_owGNUH5S3E-XRXKubA2G_UA9yPVQGPVEEdyywiNQ2J0jZyox3QrSig_VkO6YOL8MLmUfNt9quHXPc7o9hNwIsRKwo-oLKBDWfSGrw/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The Application Cache of HTML5" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwMu8J-G58_X71PTIVRJYlLjh7Wfjb4JJ9CmZObZ_owGNUH5S3E-XRXKubA2G_UA9yPVQGPVEEdyywiNQ2J0jZyox3QrSig_VkO6YOL8MLmUfNt9quHXPc7o9hNwIsRKwo-oLKBDWfSGrw/s400/6.png" width="392" /></a></div>
<o:p></o:p><br />
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/51.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_29" o:spid="_x0000_i1031"
type="#_x0000_t75" alt="5"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/51.png" style='width:225pt;
height:212.25pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image005.png"
o:title="5"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/61.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_28" o:spid="_x0000_i1030"
type="#_x0000_t75" alt="6"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/61.png" style='width:220.5pt;
height:225pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image006.png"
o:title="6"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Now , lets use the Application Cache feature. First, let’s
create a Manifest File with .<b>appcache </b>as extension. In this file
will be three sections: <b>CACHE MANIFEST</b>( setting <b>what</b> should
be cached),<b>NETWORK</b>(setting what should <b>NOT BE CACHED</b>)
and <b>FALLBACK</b> (for fallback pages if a page is not accessible)
. Therefore, type the “CACHE MANIFEST” section , in which we’ll list all the
files that must be kept in cache:<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrUAalQPcuqGGEcfDUUVJ81cL_eKWoCQD9aQgX7ap_uG4l4BobmAqnHfh82rNcuU0pShwE94wjSuuIhisPjGtNdxzyTx4F9-4hNHFX4LDp5bD1zFkSJJ0e3QOgjBr_Ryb0ibnYxRBX0-Kg/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The Application Cache of HTML5" border="0" height="263" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrUAalQPcuqGGEcfDUUVJ81cL_eKWoCQD9aQgX7ap_uG4l4BobmAqnHfh82rNcuU0pShwE94wjSuuIhisPjGtNdxzyTx4F9-4hNHFX4LDp5bD1zFkSJJ0e3QOgjBr_Ryb0ibnYxRBX0-Kg/s400/7.png" width="400" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/71.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_27" o:spid="_x0000_i1029"
type="#_x0000_t75" alt="7"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/71.png" style='width:225pt;
height:147.75pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image007.png"
o:title="7"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Then, set which files should NOT BE CACHED, meaning that
every request will be sent to the Web Server, using the “NETWORK” section:<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BJd8CRNBdyYJSFaTAI8YWrhxlioLUq1yKWyyHd-7Ohxi8_jOI9aKYXHBhloF_FSvmbM2g70tnzhRFrISATJHs9Rma_5EtrXUmgdyFAeWtycsQBH_09GRDeDakQ8CcQqlcdz1X4M0hT6r/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The Application Cache of HTML5" border="0" height="366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-BJd8CRNBdyYJSFaTAI8YWrhxlioLUq1yKWyyHd-7Ohxi8_jOI9aKYXHBhloF_FSvmbM2g70tnzhRFrISATJHs9Rma_5EtrXUmgdyFAeWtycsQBH_09GRDeDakQ8CcQqlcdz1X4M0hT6r/s400/8.png" width="400" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/81.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_26" o:spid="_x0000_i1028"
type="#_x0000_t75" alt="8"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/81.png" style='width:213pt;
height:195pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image008.png"
o:title="8"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Finally, add a FALLBACK section to estipulate which are the
web pages in recovery state:<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0YQgwqXxs0n57NbhIT-ZJo2o8qPcSkUNuONg24ynSyPD7yKP04aTMo5uAwGaFoPXE_X5OAO2abcT8ccIgLpr3Rl1dK3xCHHvSlaeLdTh1-FVJZy2mhBDWYFoZrqa_5dsMF_iRrkCRxz7M/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The Application Cache of HTML5" border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0YQgwqXxs0n57NbhIT-ZJo2o8qPcSkUNuONg24ynSyPD7yKP04aTMo5uAwGaFoPXE_X5OAO2abcT8ccIgLpr3Rl1dK3xCHHvSlaeLdTh1-FVJZy2mhBDWYFoZrqa_5dsMF_iRrkCRxz7M/s400/9.png" width="400" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/91.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_25" o:spid="_x0000_i1027"
type="#_x0000_t75" alt="9"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/91.png" style='width:225pt;
height:135pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image009.png"
o:title="9"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">There is a ” # ” to open comments, and also there are used
by the HTML5 browsers to decide whether the web page has been updated , to
evict them from cache and reload them:<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiha0j-kCVR3fIMid0J4c7q6GtDrRKQeQueJ1V9-lkJ4pENVhuEO4RQkmuTfBIlLtLUE3uotGer6KxgIKGa3LOUiRNSUVVeaKypQ0ZWJ25JXXMnq1WEXtmnN0McaXmd3ORxzwm_wRJKffKa/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The Application Cache of HTML5" border="0" height="325" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiha0j-kCVR3fIMid0J4c7q6GtDrRKQeQueJ1V9-lkJ4pENVhuEO4RQkmuTfBIlLtLUE3uotGer6KxgIKGa3LOUiRNSUVVeaKypQ0ZWJ25JXXMnq1WEXtmnN0McaXmd3ORxzwm_wRJKffKa/s400/10.png" width="400" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/101.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_24" o:spid="_x0000_i1026"
type="#_x0000_t75" alt="10"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/101.png" style='width:225pt;
height:183pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image010.png"
o:title="10"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">You can force the browser to renew the cached pages by
changing the Manifest File of the application.<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Finally, include the “<b>manifest</b>” attribute in the
document’s <b>html </b>tag:<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHjSBwd1hQulE2Ill4sLgAt3IgFoqfeUPsKhbsSeiZrzqzfN8lhegEWp04K6UCvb3TLlrUSk_qdn98mQXWOqT3BH98_wVNGFXGPv5N6dwkkdHEA1TB4cOVMrdzpypKoaT4HyiidXMEe5aW/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="87" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHjSBwd1hQulE2Ill4sLgAt3IgFoqfeUPsKhbsSeiZrzqzfN8lhegEWp04K6UCvb3TLlrUSk_qdn98mQXWOqT3BH98_wVNGFXGPv5N6dwkkdHEA1TB4cOVMrdzpypKoaT4HyiidXMEe5aW/s400/11.png" width="400" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/112.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_23" o:spid="_x0000_i1025"
type="#_x0000_t75" alt="11"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/112.png" style='width:225pt;
height:49.5pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image011.png"
o:title="11"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<b><span style="color: red; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><u>Important</u></span></b><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">:<i> different
browsers can have different size limits for web cached data.</i><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">That’s all: enjoy HTML5!!!<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span dir="RTL" lang="HE" style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">עריכה: כרמל שוורצמן</span><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<br />
<div align="right" class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-bottom: .0001pt; margin-bottom: 0cm; text-align: right; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";">Category: </span><a href="http://html5club.comuv.com/?cat=8" title="View all posts in HTML5 WEB STORAGE"><span style="color: black; font-family: "times new roman" , serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";">HTML5 WEB STORAGE</span></a><span style="font-family: "times new roman" , serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-6997842883688414131.post-84938118370520351532015-12-27T11:54:00.001-08:002015-12-27T11:54:17.716-08:00Local Web Storage in HTML5<div align="center" class="MsoNormal" style="direction: ltr; line-height: 23.75pt; margin-bottom: .0001pt; margin-bottom: 0cm; mso-outline-level: 1; text-align: center; unicode-bidi: embed;">
<a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/10/35.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shapetype id="_x0000_t75" coordsize="21600,21600"
o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe" filled="f"
stroked="f">
<v:stroke joinstyle="miter"/>
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0"/>
<v:f eqn="sum @0 1 0"/>
<v:f eqn="sum 0 0 @1"/>
<v:f eqn="prod @2 1 2"/>
<v:f eqn="prod @3 21600 pixelWidth"/>
<v:f eqn="prod @3 21600 pixelHeight"/>
<v:f eqn="sum @0 0 1"/>
<v:f eqn="prod @6 1 2"/>
<v:f eqn="prod @7 21600 pixelWidth"/>
<v:f eqn="sum @8 21600 0"/>
<v:f eqn="prod @7 21600 pixelHeight"/>
<v:f eqn="sum @10 21600 0"/>
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="Picture_x0020_46" o:spid="_x0000_i1037" type="#_x0000_t75"
alt="3" href="http://html5club.comuv.com/wp-content/uploads/2013/10/35.png"
style='width:135.75pt;height:32.25pt;visibility:visible;mso-wrap-style:square'
o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image001.png"
o:title="3"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zIEzv2j64rPPTXhUl4tcDHn5D8y2Hms3Wqf6zrDbKQzTP6eLI4Qza_DrvRUeN_SZ-Zo8-VuPDvwqB5sZxMYKpCOVDkRg6fu_tjtWHpHgw6MkozZcC1d6oemdhSusonWIs6L2bbf2DQJe/s1600/HTML5+SUPPORT.JPG" imageanchor="1" style="clear: left; display: inline !important; font-size: 12pt; line-height: 18pt; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7zIEzv2j64rPPTXhUl4tcDHn5D8y2Hms3Wqf6zrDbKQzTP6eLI4Qza_DrvRUeN_SZ-Zo8-VuPDvwqB5sZxMYKpCOVDkRg6fu_tjtWHpHgw6MkozZcC1d6oemdhSusonWIs6L2bbf2DQJe/s1600/HTML5+SUPPORT.JPG" /></a>by carmel schvartzman<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<i><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">[HTML5 Web storage is supported in IE 8+, Opera,
Chrome, Firefox, and Safari]</span></i><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">In HTML5, web pages can now store data in the user’s
browser, instead of using cookies. Web Storage is more secure and faster.<o:p></o:p></span><br />
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<br />
<h3 style="text-align: center;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><span style="color: red; font-family: "times new roman" , serif; font-size: large; mso-fareast-font-family: "Times New Roman"; mso-font-kerning: 18.0pt;">Local Web Storage in HTML5</span></span></h3>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">It is now possible to store large amounts of data in the
client side, affecting in a positive way the website’s performance.<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">The data is stored in a <b>localStorage </b>object,
a Collection structure based on key/value pairs, stored as strings.
We must convert them to the required format when needed.<o:p></o:p></span></div>
<ul type="disc">
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l0 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Can a web page access data stored
by another web page? <b>NO</b>: <b><i>a page can only
access data stored by itself</i></b><i>.</i><o:p></o:p></span></li>
</ul>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">There are two kinds of Web Storage in HTML5: SESSION
WEB STORAGE and LOCAL STORAGE.<br />
The difference between them are related to the duration of storage:<o:p></o:p></span></div>
<ul type="disc">
<a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo2; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">1-<b> SESSION
STORAGE:</b> data is stored in client side <b>until
the session ends</b>.<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo2; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">2- <b>LOCAL STORAGE:
</b> data is stored in client side with<b> no
expiration date</b>!!!!<o:p></o:p></span></li>
</ul>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">The HTML5 <b>Local Web Storage</b> object stores
the data not just for one session, but even when the user closes the browser
window, the data is persisted in the user’s local machine.<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">You can also use local storage in the browser, which is good
even if the user closes the tab, the window or the browser itself.<br />
However, if you open another browser, the <b>localStorage object</b> will
be initialized by itself, meaning that there will be now TWO <b>localStorage</b> objects
in your machine, each one corresponding to each browser. If you are using
Chrome and also IE, each one will have its own<b>localStorage</b> object.<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">1. To use the Local Web Storage HTML5 feature, add to
your html page a button containing a counter. We’ll see how the counter
is stored permanently inside the user’s browser, beyond the web session:<o:p></o:p></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsMdxJ7aYEsQqZUc-hSY9YFiCoX_ZjJsYopXksVB2Y0rf7U0LrPULpEP0cUW3726JxngHEN8Et5aW83k4opsMi33n2kTDHp-SbAsA34GYAcD7zRLbmgiUN9zF5vKzHDedv8-FICrhC0x0E/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="476" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsMdxJ7aYEsQqZUc-hSY9YFiCoX_ZjJsYopXksVB2Y0rf7U0LrPULpEP0cUW3726JxngHEN8Et5aW83k4opsMi33n2kTDHp-SbAsA34GYAcD7zRLbmgiUN9zF5vKzHDedv8-FICrhC0x0E/s640/1.png" width="570" /></a></div>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="background: rgb(236, 236, 236); direction: ltr; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/15.png"><i><span style="color: black; font-family: "georgia" , serif; font-size: 13.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape
id="Picture_x0020_45" o:spid="_x0000_i1036" type="#_x0000_t75" alt="1"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/15.png" style='width:375pt;
height:168pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image002.png"
o:title="1"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></i></a><i><span style="color: #383838; font-family: "georgia" , serif; font-size: 13.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></i></div>
<div class="MsoNormal" style="background: rgb(236, 236, 236); direction: ltr; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">2. Next, let’s add some css style to our page:<o:p></o:p></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaUXXDhVsrr-uuZp_GEUc5MnLP3vdhoT28XLzfNkXgRuukqgMFDKwABUll_mKG1kNp4rHJRrGKCCQUU3w9tHVC9ubhH5-W5gCwULEmyt4TIynz90N09Qxww-G0NawATfJ7YajUYrr99NcY/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Local Web Storage in HTML5" border="0" height="582" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaUXXDhVsrr-uuZp_GEUc5MnLP3vdhoT28XLzfNkXgRuukqgMFDKwABUll_mKG1kNp4rHJRrGKCCQUU3w9tHVC9ubhH5-W5gCwULEmyt4TIynz90N09Qxww-G0NawATfJ7YajUYrr99NcY/s640/2.png" width="570" /></a></div>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/22.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_44" o:spid="_x0000_i1035"
type="#_x0000_t75" alt="2"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/22.png" style='width:375pt;
height:204.75pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image004.png"
o:title="2"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">3. Now create a <b>script</b> as a <b>head</b> child.
Inside the script type the function you just linked to the onclick button’s
event:</span><br />
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6absvb91yXFxAvSOon6fK53lEcVUg-dL1Q6475bYcmowjleEXA6CIvJEu6nyMJDquycG-AvemS3TcdHkLQ-7iw717Cez3JjZ5N1d8If-yaMI3w3PPnqOI0nYNjVvuuZPJJUcV_daIqmMi/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Local Web Storage in HTML5" border="0" height="346" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6absvb91yXFxAvSOon6fK53lEcVUg-dL1Q6475bYcmowjleEXA6CIvJEu6nyMJDquycG-AvemS3TcdHkLQ-7iw717Cez3JjZ5N1d8If-yaMI3w3PPnqOI0nYNjVvuuZPJJUcV_daIqmMi/s640/3.png" width="570" /></a></div>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br />
</span><a href="http://html5club.comuv.com/wp-content/uploads/2013/11/3.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_43" o:spid="_x0000_i1034"
type="#_x0000_t75" alt="3"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/3.png" style='width:375pt;
height:143.25pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image006.png"
o:title="3"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">The code check whether the Storage object has been
initialized, meaning that the browser supports it.<o:p></o:p></span></div>
<div class="MsoNormal" style="background: rgb(236, 236, 236); direction: ltr; unicode-bidi: embed;">
<b><i><span style="color: #383838; font-family: "georgia" , serif; font-size: 13.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><script></span></i></b><i><span style="color: #383838; font-family: "georgia" , serif; font-size: 13.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br />
<b>function fnCounter() {</b><br />
<b>if (typeof (Storage) !== “undefined”) {</b><br />
<b>if (localStorage.counter) {</b><br />
<b>localStorage.counter = Number(localStorage.counter) + 1;</b><br />
<b>}</b><br />
<b>else {</b><br />
<b>localStorage.counter = 1;</b><br />
<b>}</b><br />
<b>document.getElementById(“counter”).innerHTML = “<H1>” +
localStorage.counter + “</h1>”;</b><o:p></o:p></span></i></div>
<div class="MsoNormal" style="background: rgb(236, 236, 236); direction: ltr; unicode-bidi: embed;">
<b><i><span style="color: #383838; font-family: "georgia" , serif; font-size: 13.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">}</span></i></b><i><span style="color: #383838; font-family: "georgia" , serif; font-size: 13.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br />
<b>else {</b><br />
<b>document.getElementById(“counter”).value = “Your browser does not support
HTML5″;</b><o:p></o:p></span></i></div>
<div class="MsoNormal" style="background: rgb(236, 236, 236); direction: ltr; unicode-bidi: embed;">
<b><i><span style="color: #383838; font-family: "georgia" , serif; font-size: 13.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">}</span></i></b><i><span style="color: #383838; font-family: "georgia" , serif; font-size: 13.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><br />
<b>}</b><br />
<b></script></b><o:p></o:p></span></i></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">4. Nested beneath the “if” clause, build a “if then else”
block to check whether the page has just loaded and the stored key/value must
be initialized:</span><br />
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqouW5OT2scc2FbN8MPrmHvbg-ZCbUdKRFX_y6BaKIhBXajgobua2U6q6s94-rvQJDJPxPLVFYS3s9zNUhkJD7kAvSJ6WokLW1y4NY8rcgTdtB5kdji0ucLUNw79-yZSUNmsDfcqO0nHcI/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Local Web Storage in HTML5" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqouW5OT2scc2FbN8MPrmHvbg-ZCbUdKRFX_y6BaKIhBXajgobua2U6q6s94-rvQJDJPxPLVFYS3s9zNUhkJD7kAvSJ6WokLW1y4NY8rcgTdtB5kdji0ucLUNw79-yZSUNmsDfcqO0nHcI/s640/4.png" width="570" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi76VMXa8cM41WSSeniXZ1WWBosoI9wy8U9fs9qI4lpUCrvbwyoyMyJp1iM_JqyZs7-yM1OeG7qGvN3nUudxIvwxozvEGFZtTJyIfyHb-m3d1a6sUc1NreXsLbCgbDz10zguyqIA01620gW/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Local Web Storage in HTML5" border="0" height="144" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi76VMXa8cM41WSSeniXZ1WWBosoI9wy8U9fs9qI4lpUCrvbwyoyMyJp1iM_JqyZs7-yM1OeG7qGvN3nUudxIvwxozvEGFZtTJyIfyHb-m3d1a6sUc1NreXsLbCgbDz10zguyqIA01620gW/s640/6.png" width="570" /></a></div>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br />
</span><a href="http://html5club.comuv.com/wp-content/uploads/2013/11/42.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_42" o:spid="_x0000_i1033"
type="#_x0000_t75" alt="4"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/42.png" style='width:375pt;
height:87.75pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image008.png"
o:title="4"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<div class="separator" style="clear: both; text-align: center;">
</div>
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/62.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_41" o:spid="_x0000_i1032"
type="#_x0000_t75" alt="6"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/62.png" style='width:375pt;
height:50.25pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image010.png"
o:title="6"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">5. If so, just increment the counter value:<o:p></o:p></span><br />
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgZ909EMfYSLdxpv3sl2-_d4DEmkueS1S3Kb8nYsBjR2_Et_FzbjUI8KptXZN3VH9za_WIlYaj0qCScmXqdJtuuRC4CbJifcdjfE1F_6ANJE80k_dvuOZ3us0jE30npWJMNquoyY3BUnF/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Local Web Storage in HTML5" border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjgZ909EMfYSLdxpv3sl2-_d4DEmkueS1S3Kb8nYsBjR2_Et_FzbjUI8KptXZN3VH9za_WIlYaj0qCScmXqdJtuuRC4CbJifcdjfE1F_6ANJE80k_dvuOZ3us0jE30npWJMNquoyY3BUnF/s640/5.png" width="570" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdhrZQgJBoPj8ZtlIU_JiinTIKlVLyAWeSy-42PXL_8_xHMKQ8Ku8NKONQ_mSmXn7Lj0wuZavik-ESQbbmkz1rh8pkoWh-i622kVzSYekulS8cerXAb79GsB7jj2z7hqgBLqatDmOjdMGi/s1600/7+-+Copy.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Local Web Storage in HTML5" border="0" height="222" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdhrZQgJBoPj8ZtlIU_JiinTIKlVLyAWeSy-42PXL_8_xHMKQ8Ku8NKONQ_mSmXn7Lj0wuZavik-ESQbbmkz1rh8pkoWh-i622kVzSYekulS8cerXAb79GsB7jj2z7hqgBLqatDmOjdMGi/s640/7+-+Copy.png" width="640" /></a></div>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/52.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_40" o:spid="_x0000_i1031"
type="#_x0000_t75" alt="5"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/52.png" style='width:375pt;
height:58.5pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image012.png"
o:title="5"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/7-Copy.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_39" o:spid="_x0000_i1030"
type="#_x0000_t75" alt="7 - Copy"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/7-Copy.png"
style='width:375pt;height:78pt;visibility:visible;mso-wrap-style:square'
o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image014.png"
o:title="7 - Copy"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">6. Now output the counter as the text button:<o:p></o:p></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7OAi51NEzuXtNlkdpqRNXT0T1x_auZUibLT_4iKm4UOYFMr2sg8bEALbFOuUVNnrhGb3Pp-TgqM9xHjPFMvSVr3jc1dKXaMky_kQclHvq50LYCQ8OErtjeO8ERGi7Mw6sbCkDTZ-ZAV-K/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Local Web Storage in HTML5" border="0" height="260" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7OAi51NEzuXtNlkdpqRNXT0T1x_auZUibLT_4iKm4UOYFMr2sg8bEALbFOuUVNnrhGb3Pp-TgqM9xHjPFMvSVr3jc1dKXaMky_kQclHvq50LYCQ8OErtjeO8ERGi7Mw6sbCkDTZ-ZAV-K/s640/8.png" width="570" /></a></div>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/82.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_38" o:spid="_x0000_i1029"
type="#_x0000_t75" alt="8"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/82.png" style='width:375pt;
height:91.5pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image016.png"
o:title="8"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">7. Having finished to code, let’s test it:<o:p></o:p></span><br />
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjmrzeI50zKswSsIYzXBnl54RjocjAf22pMgOogGonMrVHMIYlO6EexBp79Zaj_Nv-Yl728LB_4xmHbP532oxyqfZHXPsWc6-MkkZKw7N9RUZrildI8xczmTVkru9eq_-mIj0da-vHgLrI/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Local Web Storage in HTML5" border="0" height="114" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjmrzeI50zKswSsIYzXBnl54RjocjAf22pMgOogGonMrVHMIYlO6EexBp79Zaj_Nv-Yl728LB_4xmHbP532oxyqfZHXPsWc6-MkkZKw7N9RUZrildI8xczmTVkru9eq_-mIj0da-vHgLrI/s640/7.png" width="570" /></a></div>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/72.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_37" o:spid="_x0000_i1028"
type="#_x0000_t75" alt="7"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/72.png" style='width:375pt;
height:39.75pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image018.png"
o:title="7"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<div class="separator" style="clear: both; text-align: center;">
</div>
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">8. Load the web page. Click the button to increment the
counter, and refresh the browser to see that the value has been persisted:<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgv8GYLNqAb64P22q0zLHxx9Blm-5z-hsMPIaPjEkV-PXeCEzwZCJdVTaOkDHxrV8aOItpk8kjiVJQljjhDsQwcT4gy_l7aO7UjKO_DZt4ACPs0TMpXbO05fwLNaPw-5gVXx2M0gMpWs-w/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Local Web Storage in HTML5" border="0" height="132" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgv8GYLNqAb64P22q0zLHxx9Blm-5z-hsMPIaPjEkV-PXeCEzwZCJdVTaOkDHxrV8aOItpk8kjiVJQljjhDsQwcT4gy_l7aO7UjKO_DZt4ACPs0TMpXbO05fwLNaPw-5gVXx2M0gMpWs-w/s640/10.png" width="570" /></a></div>
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/102.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_36" o:spid="_x0000_i1027"
type="#_x0000_t75" alt="10"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/102.png" style='width:375pt;
height:46.5pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image020.png"
o:title="10"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<div class="separator" style="clear: both; text-align: center;">
</div>
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">9. Next, open another Browser Tab with the same URL, to
check that the counter is kept running: that’s because each session<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">SEES THE LOCAL Web Storage!!!<o:p></o:p></span><br />
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyw0tK87WBtNFKBq36IxjxGxxMSMC_vgcKB2c1GG08_APf2Gf2v3fvgQXyE2MLgaOG_8bkDu1EW6So8OMi-y7hVq1qGxBPzjORBNtt3_vsnHwTh3xf0oyDHviLkQdWhhe2SHDF0MELRoyl/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Local Web Storage in HTML5" border="0" height="250" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyw0tK87WBtNFKBq36IxjxGxxMSMC_vgcKB2c1GG08_APf2Gf2v3fvgQXyE2MLgaOG_8bkDu1EW6So8OMi-y7hVq1qGxBPzjORBNtt3_vsnHwTh3xf0oyDHviLkQdWhhe2SHDF0MELRoyl/s640/11.png" width="570" /></a></div>
<a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/113.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_35" o:spid="_x0000_i1026"
type="#_x0000_t75" alt="11"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/113.png" style='width:375pt;
height:87.75pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image022.png"
o:title="11"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">10. Increment the counter by pulsing the button:<o:p></o:p></span><br />
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTcQ4PsYSq0En8Vc3EbUTT9I3Y7WiO90eXXZKBveaELBUE2-F8YI-QVukqlUhOfBZyszJWZM17HuacdAqby5SO-uXbknUnvb5RmbgPefJkVAMtGGXviYsLq4lxy4QP2GHFLZBl0BRuZcSi/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Local Web Storage in HTML5" border="0" height="234" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTcQ4PsYSq0En8Vc3EbUTT9I3Y7WiO90eXXZKBveaELBUE2-F8YI-QVukqlUhOfBZyszJWZM17HuacdAqby5SO-uXbknUnvb5RmbgPefJkVAMtGGXviYsLq4lxy4QP2GHFLZBl0BRuZcSi/s640/9.png" width="570" /></a></div>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwUqRcB2gxhoHamhfYMjf2pf_b9PhdwZnKTlhzI0Y2YVxWVwJ4_2EI_pbyEgyeHA7zHfQyQ-Rpf0_Iu6hEtw0lyYYJtGj0G3AmNK95EEKUE_SbrS_dJcGHGHOkU7WN7Ik6lu9RKQri_zy/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Local Web Storage in HTML5" border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbwUqRcB2gxhoHamhfYMjf2pf_b9PhdwZnKTlhzI0Y2YVxWVwJ4_2EI_pbyEgyeHA7zHfQyQ-Rpf0_Iu6hEtw0lyYYJtGj0G3AmNK95EEKUE_SbrS_dJcGHGHOkU7WN7Ik6lu9RKQri_zy/s640/13.png" width="570" /></a></div>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/92.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_34" o:spid="_x0000_i1025"
type="#_x0000_t75" alt="9"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/92.png" style='width:375pt;
height:81.75pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image024.png"
o:title="9"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">11. Close the browser, reopen it and you’ll see that the
stored data has been KEPT AND PERSISTED and therefore the counter continues
incrementing:<o:p></o:p></span></div>
<div class="MsoNormal" style="background: rgb(236, 236, 236); direction: ltr; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">That’s all: enjoy HTML5!!!<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span dir="RTL" lang="HE" style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">עריכה: כרמל שוורצמן</span><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<br />
<div align="right" class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-bottom: .0001pt; margin-bottom: 0cm; text-align: right; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";">Category: </span><a href="http://html5club.comuv.com/?cat=8" title="View all posts in HTML5 WEB STORAGE"><span style="color: black; font-family: "times new roman" , serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";">HTML5 WEB STORAGE</span></a><span style="font-family: "times new roman" , serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-6997842883688414131.post-62116211008074321922015-12-27T11:53:00.001-08:002015-12-27T11:53:42.897-08:00jQuery animate() Method<div align="center" class="MsoNormal" style="direction: ltr; line-height: 23.75pt; margin-bottom: .0001pt; margin-bottom: 0cm; mso-outline-level: 1; text-align: center; unicode-bidi: embed;">
<h3>
<a href="http://html5club.comuv.com/?p=243" title="Permanent Link to jQuery animate() Method"><span style="color: red; font-family: "Times New Roman",serif; font-size: 22.0pt; mso-fareast-font-family: "Times New Roman"; mso-font-kerning: 18.0pt;">jQuery animate() Method</span></a></h3>
</div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">SINTAX :<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">(<i>selector</i>)<b><span style="color: red;">.animate(</span></b><i><span style="color: #274e13;"><b>{JSON styles object},speed in
milliseconds,easing,callback</b></span></i><span style="color: red;">)</span><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><b><i><span style="color: #274e13;">Allows the developer to implement custom animations, modifying
one or more of the following parameters</span></i></b> :<o:p></o:p></span></div>
<ul type="disc">
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">backgroundPositionX<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">backgroundPositionY<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">borderWidth<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">borderBottomWidth<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">borderLeftWidth<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">borderRightWidth<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">borderTopWidth<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">borderSpacing<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">margin<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">marginBottom<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">marginLeft<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">marginRight<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">marginTop<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">outlineWidth<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">padding<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">paddingBottom<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">paddingLeft<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">paddingRight<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">paddingTop<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">height<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">width<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">maxHeight<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">maxWidth<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">minHeight<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">minWidth<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">fontSize<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">bottom<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">left<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">right<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">top<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">letterSpacing<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">wordSpacing<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">lineHeight<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l1 level1 lfo1; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">textIndent<o:p></o:p></span></li>
</ul>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">The optional “EASING” parameter sets the speed of the
animation as follows:<o:p></o:p></span></div>
<ul type="disc">
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l0 level1 lfo2; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">“swing” – slower at the
beginning and at the end, faster in the middle;<o:p></o:p></span></li>
<li class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-left: 36.0pt; margin-right: 0cm; mso-list: l0 level1 lfo2; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; tab-stops: list 36.0pt; text-align: left; unicode-bidi: embed;"><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">“linear” – constant speed of
animation<o:p></o:p></span></li>
</ul>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Accepts a CALLBACK to trigger a function AFTER the animation
is done.<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">SAMPLE CODE :<o:p></o:p></span></div>
<div class="MsoNormal" style="background: rgb(236, 236, 236); direction: ltr; unicode-bidi: embed;">
<b><span style="color: #383838; font-family: "Georgia",serif; font-size: 8.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">$(document).ready(function(){<br />
$(“input[type=button]“).click(function(){<br />
$(“div”)<o:p></o:p></span></b></div>
<div class="MsoNormal" style="background: rgb(236, 236, 236); direction: ltr; unicode-bidi: embed;">
<b><span style="color: #383838; font-family: "Georgia",serif; font-size: 8.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">
.animate({right:’10px’,opacity:’0.1′,fontSize:’3em’,top:’100px’},2000,”swing”)<br />
.animate({left:’250px’,opacity:’0.9′,fontSize:’1em’,top:’200px’},2000,”swing”)<br />
.animate({left:’350px’,opacity:’0.3′,fontSize:’2em’,top:’50px’},2000,”swing”);<br />
});<br />
});<o:p></o:p></span></b></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<b><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><input type=”button” value=”Launch Animation” /></span></b><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<b><span style="font-family: "Georgia",serif; font-size: 8.5pt; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";"><div
style=”background: #C0C0C0; height: 200px; width: 200px; position: absolute;
padding: 10px 10px 10px 10px;”>LEARNING JQUERY ANIMATE</div></span></b><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">That’s all: enjoy HTML5!!!<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">by carmel schvartzman<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span dir="RTL" lang="HE" style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">עריכה: כרמל שוורצמן</span><span style="font-family: "Times New Roman",serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<br />
<div align="right" class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-bottom: .0001pt; margin-bottom: 0cm; text-align: right; unicode-bidi: embed;">
<span style="font-family: "Times New Roman",serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";">Category: </span><a href="http://html5club.comuv.com/?cat=14" title="View all posts in jQuery Effects"><span style="color: black; font-family: "Times New Roman",serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";">jQuery Effects</span></a><span style="font-family: "Times New Roman",serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-6997842883688414131.post-30468460674393882922015-12-04T02:09:00.000-08:002015-12-04T02:12:41.896-08:00The GeoLocation in HTML5<div align="center" class="MsoNormal" style="direction: ltr; line-height: 23.75pt; margin-bottom: .0001pt; margin-bottom: 0cm; mso-outline-level: 1; text-align: center; unicode-bidi: embed;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiaDIfKrxg-S77rPOYxk5MiKM0eOlcoNIuIUc-kc3MtjqzHOJQcM6f8m2LYFYQ26q7KS9XqzWSffx1W8IrAZ6MivkXJU1VSUbGoQ2vVtMmwvvK0b58SDiOkBUjTl-PFieGKi4qEzhiDFuY/s1600/17.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiaDIfKrxg-S77rPOYxk5MiKM0eOlcoNIuIUc-kc3MtjqzHOJQcM6f8m2LYFYQ26q7KS9XqzWSffx1W8IrAZ6MivkXJU1VSUbGoQ2vVtMmwvvK0b58SDiOkBUjTl-PFieGKi4qEzhiDFuY/s1600/17.png" /></a><span style="font-family: "times new roman" , serif; font-size: 12pt; line-height: 18pt;">by Carmel Schvartzman</span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<i><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">[HTML5 Geolocation is supported in IE 9+, Opera,
Chrome, Firefox, and Safari]</span></i><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<h3 style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="color: red; font-family: "times new roman" , serif; font-size: 22pt; line-height: 31.6667px; text-align: center;"><a href="http://html5club.comuv.com/?p=216" style="line-height: 31.6667px; text-align: center;" title="Permanent Link to The GeoLocation in HTML5">The GeoLocation in HTML5</a></span></h3>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">The<b> Geolocation</b> element is exposed via
the <b>navigator.geolocation</b> object, and used to get
the geographical position of the user.<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Because the Geolocation use can compromise user privacy, the
user’s position is not available unless the user approves it.<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">In this tutorial, we’ll use the Google Maps API to load a
map exposing the user’s location.<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6aCYNah1UBuSmKIyEvYqTItkshOv7XrwxzZkUgKZ_Hvv5Z03FA4OiURAWWSjivz-bm3kPwUclcKRImr4Rj3IJwbBGGF4E3nvxb48MoKttEbacquxPtqWOdukOAKU2R7J8M0FrRWhe5WE/s1600/15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6aCYNah1UBuSmKIyEvYqTItkshOv7XrwxzZkUgKZ_Hvv5Z03FA4OiURAWWSjivz-bm3kPwUclcKRImr4Rj3IJwbBGGF4E3nvxb48MoKttEbacquxPtqWOdukOAKU2R7J8M0FrRWhe5WE/s640/15.png" width="497" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/151.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_62" o:spid="_x0000_i1040"
type="#_x0000_t75" alt="15"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/151.png" style='width:249.75pt;
height:225pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image002.png"
o:title="15"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">To sample the Geolocation use, let’s build an HTM file
including a DIV placeholder to the map representing the user’s location, and a
button to trigger this function:<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_aPG1gsD-_gk3WEfDbujyKKfASMAnNzacX1gpbzgOVTrNuVlu2v5IoC3goD9c7HuJj_qPaKqwdLShNs9Ix_c_0mzEQ7ew5ZoXPAKJdSGD8Vl_ZoxlnJRVYb-1His7dz3MhghI-bp8KTOt/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="283" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_aPG1gsD-_gk3WEfDbujyKKfASMAnNzacX1gpbzgOVTrNuVlu2v5IoC3goD9c7HuJj_qPaKqwdLShNs9Ix_c_0mzEQ7ew5ZoXPAKJdSGD8Vl_ZoxlnJRVYb-1His7dz3MhghI-bp8KTOt/s400/1.png" width="400" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/17.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_61" o:spid="_x0000_i1039"
type="#_x0000_t75" alt="1"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/17.png" style='width:225pt;
height:159.75pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image004.png"
o:title="1"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Next, add some style to the page:<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhf4fMfmn2szfoNobKvosnIoAlWAG_AJ9kPHjJLVKhERMDLarOBtQDChJ36HMBLyflcj-xR0z1RP3IjUsIG0Mfw1tWljGxVS-XwVWLd2pN9m4o1pSF88OuVSV1tNCqU1l4EXUSn2_F5oM-/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="358" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhf4fMfmn2szfoNobKvosnIoAlWAG_AJ9kPHjJLVKhERMDLarOBtQDChJ36HMBLyflcj-xR0z1RP3IjUsIG0Mfw1tWljGxVS-XwVWLd2pN9m4o1pSF88OuVSV1tNCqU1l4EXUSn2_F5oM-/s400/2.png" width="400" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/23.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_60" o:spid="_x0000_i1038"
type="#_x0000_t75" alt="2"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/23.png" style='width:225pt;
height:201.75pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image005.png"
o:title="2"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Save and open in a browser:<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijy6-wxRUzN9NCZsNgg4zV_mubqHmlvLa4fVjLHvnfMr7MVgmsH8HUbu97jOyNnMKz8nLIh_gEdUWFxVJUaFHJ_9mZrk4mP5pVMlggHMH7gL6BzjF7Va2o1-3VIsRxK34R8fOz6ifwe1QC/s1600/3.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijy6-wxRUzN9NCZsNgg4zV_mubqHmlvLa4fVjLHvnfMr7MVgmsH8HUbu97jOyNnMKz8nLIh_gEdUWFxVJUaFHJ_9mZrk4mP5pVMlggHMH7gL6BzjF7Va2o1-3VIsRxK34R8fOz6ifwe1QC/s320/3.png" width="320" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/33.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_59" o:spid="_x0000_i1037"
type="#_x0000_t75" alt="3"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/33.png" style='width:225pt;
height:180pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image006.png"
o:title="3"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Now let’s code the function called by the button, inserting
also an “if” clause that checks whether the browser supports GeoLocation:<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVJOlPg172x7vadKLDHwLCG1NAwZMCGPBBFgAd7Mad2KVbRi9yRzs4omUhT4r_OR8lsc0E6Dupg-XKMeStb398KJP9f16l9QdGO_jwMv1bCJg0b6mcVI7IjIWUKjZBMpR2890wljQ_e63b/s1600/4.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="292" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVJOlPg172x7vadKLDHwLCG1NAwZMCGPBBFgAd7Mad2KVbRi9yRzs4omUhT4r_OR8lsc0E6Dupg-XKMeStb398KJP9f16l9QdGO_jwMv1bCJg0b6mcVI7IjIWUKjZBMpR2890wljQ_e63b/s400/4.png" width="400" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/43.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_58" o:spid="_x0000_i1036"
type="#_x0000_t75" alt="4"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/43.png" style='width:225pt;
height:165pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image007.png"
o:title="4"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Now browse to the JavaScript API documentation to see the <b>getCurrentPosition()</b> function
of the <b>geolocation</b> object:<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpfQn9jt19FX5u_NNP_gDt-6op-zfExw9Q742lEmUEvfOZ1XUluSFf_T5U1Po6nSkITKILOCroX7W0DSxr1x_Y1NC8KhazPku-tP1t3wbqFcQwYQPwvvcOkpZZTMivDc0OFd91ssS8tajT/s1600/6.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="308" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpfQn9jt19FX5u_NNP_gDt-6op-zfExw9Q742lEmUEvfOZ1XUluSFf_T5U1Po6nSkITKILOCroX7W0DSxr1x_Y1NC8KhazPku-tP1t3wbqFcQwYQPwvvcOkpZZTMivDc0OFd91ssS8tajT/s640/6.png" width="540" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/63.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_57" o:spid="_x0000_i1035"
type="#_x0000_t75" alt="6"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/63.png" style='width:225pt;
height:108.75pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image008.png"
o:title="6"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">As you can see, the first parameter gets a function pointer
to be used as a callback: we’ll name the callback function fnShowMap:<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi126rmsSmDxbc-fxKQeaWKIMTGT9UChdqB8dAmFkEZg3eEcctCfwnUt66s0_pwBwLETEA3fN_XP-eZQ1vKl0rEkVkcixIq26QumWbdFrCQSpw7RqS5h9DSBE5TBauDwOrd48dWBLN4Ic0o/s1600/5.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="177" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi126rmsSmDxbc-fxKQeaWKIMTGT9UChdqB8dAmFkEZg3eEcctCfwnUt66s0_pwBwLETEA3fN_XP-eZQ1vKl0rEkVkcixIq26QumWbdFrCQSpw7RqS5h9DSBE5TBauDwOrd48dWBLN4Ic0o/s400/5.png" width="400" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/53.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_56" o:spid="_x0000_i1034"
type="#_x0000_t75" alt="5"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/53.png" style='width:225pt;
height:99.75pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image009.png"
o:title="5"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Now let’s code the fnShowMap() function:<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRspdgHm7gEACXJkBBo7Bzom1UvC6FQxYwYAgskJfkgSLc_0s5ZO8O3wLoGfBZXMuG5bXcYyGcraFZ_FYitY7wrMOkB-rMKgs7Ra4t99b1gTdQEI921Iuty_M2qeIo19O9Hm4z_9qx-6Ab/s1600/7.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="202" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRspdgHm7gEACXJkBBo7Bzom1UvC6FQxYwYAgskJfkgSLc_0s5ZO8O3wLoGfBZXMuG5bXcYyGcraFZ_FYitY7wrMOkB-rMKgs7Ra4t99b1gTdQEI921Iuty_M2qeIo19O9Hm4z_9qx-6Ab/s400/7.png" width="400" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/73.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_55" o:spid="_x0000_i1033"
type="#_x0000_t75" alt="7"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/73.png" style='width:225pt;
height:114pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image010.png"
o:title="7"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">The callback function gets back the “position” of the user,
which includes latitude, longitude, altitude and accuracy:<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHgH0wxCOK_lncNvWN1ngcrYqaNZbufn7DvK_fEdHhn_027yo5W1f5YZYQQpscroAOF8BMmjXMvxwhMEKZxWb4KaUU0Fjb1HPT7WEz2y2X6M8vIkrY27zbJDRI0kTml8faSZk217ggV4Hh/s1600/8.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="556" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHgH0wxCOK_lncNvWN1ngcrYqaNZbufn7DvK_fEdHhn_027yo5W1f5YZYQQpscroAOF8BMmjXMvxwhMEKZxWb4KaUU0Fjb1HPT7WEz2y2X6M8vIkrY27zbJDRI0kTml8faSZk217ggV4Hh/s640/8.png" width="640" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/83.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_54" o:spid="_x0000_i1032"
type="#_x0000_t75" alt="8"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/83.png" style='width:300pt;
height:195.75pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image011.png"
o:title="8"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">That’s why we can get back the latitude and
longitude and use them.<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Next, google the Google Maps API and find the example in it:<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBEHWwEXiS4kS9Eq2TMXv9ObHOnU268y0MoCUTomdiT36_a4JVAm9yNwKakH9f0Afy9e7O3sFdH7mKjG2pZYJcx22SZc2HeLR5M5kLie8UE3hC6M400hCEW1BbJSOeKC9h8e0TGS7iLVy/s1600/9.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="436" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpBEHWwEXiS4kS9Eq2TMXv9ObHOnU268y0MoCUTomdiT36_a4JVAm9yNwKakH9f0Afy9e7O3sFdH7mKjG2pZYJcx22SZc2HeLR5M5kLie8UE3hC6M400hCEW1BbJSOeKC9h8e0TGS7iLVy/s640/9.png" width="640" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/93.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_53" o:spid="_x0000_i1031"
type="#_x0000_t75" alt="9"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/93.png" style='width:300pt;
height:153pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image013.png"
o:title="9"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Copy-paste it to our function and replace the latitude
and longitude in the URL string:<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDLc-ZRIda36LVySwGEHwSJoXuvZFtTEq3odq3qOvFk798bkUh219Kwa-ykTZ6l_v9iadPQT-bRvZcwzBWjVUdxxL-pl27PVjV01XO7-yjDKWQ-B7D4h30JhuMYaITUQ74tnDgT2nxGmbl/s1600/10.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="172" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDLc-ZRIda36LVySwGEHwSJoXuvZFtTEq3odq3qOvFk798bkUh219Kwa-ykTZ6l_v9iadPQT-bRvZcwzBWjVUdxxL-pl27PVjV01XO7-yjDKWQ-B7D4h30JhuMYaITUQ74tnDgT2nxGmbl/s640/10.png" width="640" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/103.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_52" o:spid="_x0000_i1030"
type="#_x0000_t75" alt="10"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/103.png" style='width:225pt;
height:60pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image015.png"
o:title="10"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Finally, create an <b>img</b> tag and set its
source as the URL of the static map:<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVM3hYhoIz8BLErbdJgibBCVpK4mGmwfWmsAnWSgLXAfKANSOH4suvfqvc52gx9_gRWi2r9M3vuf9MEdxE2hAcmHTtdKFwfSVurCmVRFPJTHqklMxQacI266fJo_dWtFxXnDoYQ3YVIZ27/s1600/11.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="166" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVM3hYhoIz8BLErbdJgibBCVpK4mGmwfWmsAnWSgLXAfKANSOH4suvfqvc52gx9_gRWi2r9M3vuf9MEdxE2hAcmHTtdKFwfSVurCmVRFPJTHqklMxQacI266fJo_dWtFxXnDoYQ3YVIZ27/s640/11.png" width="540" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/114.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_51" o:spid="_x0000_i1029"
type="#_x0000_t75" alt="11"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/114.png" style='width:225pt;
height:58.5pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image016.png"
o:title="11"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Refresh the page and press the button. The browser will try
to block the <b>geolocation</b> because of privacy:<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0sNZoCQ4kye4uhNU4n32anfarM-mLgCCOYdbS9O3rzOa0r7LWikByG2yJJunzcsG-J0OMXplX6ZBg3ZNewLLnn8fYcXeJwSS_Iz2TNiccCYRCtFtzzVPHRVpgLanNhShVFOb1Is17YGbk/s1600/12.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0sNZoCQ4kye4uhNU4n32anfarM-mLgCCOYdbS9O3rzOa0r7LWikByG2yJJunzcsG-J0OMXplX6ZBg3ZNewLLnn8fYcXeJwSS_Iz2TNiccCYRCtFtzzVPHRVpgLanNhShVFOb1Is17YGbk/s320/12.png" width="320" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/131.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_50" o:spid="_x0000_i1028"
type="#_x0000_t75" alt="13"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/131.png" style='width:225pt;
height:115.5pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image017.png"
o:title="13"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">Allow temporarily to track your position:<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_fTS9OuZxVHmGERQojnutxiv2dFERGXti8M3wCwhialLgwIIkYqBzMxn88Epei9e9jX1AkHEIMjEn64t-AkemCQr4eOK7aVwdTVRLE2zCYWwyBEX1lzbZWGZKf7x67KA_Taxgyo8T0a9i/s1600/13.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="164" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_fTS9OuZxVHmGERQojnutxiv2dFERGXti8M3wCwhialLgwIIkYqBzMxn88Epei9e9jX1AkHEIMjEn64t-AkemCQr4eOK7aVwdTVRLE2zCYWwyBEX1lzbZWGZKf7x67KA_Taxgyo8T0a9i/s320/13.png" width="320" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR4OL_fdh85WYzpBKe_20GPjeqOejLN_gw59nE4ztlM4fa8jW2RThyphenhypheneJTN4teRPjLoWjdnUW9LpQnA3uTGzhGIRep-rRW1BygNOB8l2SW-tesiy9jYGHrjAMiYrKoRPuFdymfoHtsBseS4/s1600/14.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="614" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR4OL_fdh85WYzpBKe_20GPjeqOejLN_gw59nE4ztlM4fa8jW2RThyphenhypheneJTN4teRPjLoWjdnUW9LpQnA3uTGzhGIRep-rRW1BygNOB8l2SW-tesiy9jYGHrjAMiYrKoRPuFdymfoHtsBseS4/s640/14.png" width="640" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/141.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_49" o:spid="_x0000_i1027"
type="#_x0000_t75" alt="14"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/141.png" style='width:225pt;
height:3in;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image018.png"
o:title="14"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">And your position has been exposed on the Google Map:<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6aCYNah1UBuSmKIyEvYqTItkshOv7XrwxzZkUgKZ_Hvv5Z03FA4OiURAWWSjivz-bm3kPwUclcKRImr4Rj3IJwbBGGF4E3nvxb48MoKttEbacquxPtqWOdukOAKU2R7J8M0FrRWhe5WE/s1600/15.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="540" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt6aCYNah1UBuSmKIyEvYqTItkshOv7XrwxzZkUgKZ_Hvv5Z03FA4OiURAWWSjivz-bm3kPwUclcKRImr4Rj3IJwbBGGF4E3nvxb48MoKttEbacquxPtqWOdukOAKU2R7J8M0FrRWhe5WE/s640/15.png" width="498" /></a></div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwtF3d42RH5GQIozLsLr3B2xG0NfXn0GlTCRCJYoK8gOGW-I8VJbqf2rrK21B9Vrspx7Q29zAzXyVs0XkmfrLhskyxRvN3b_fwdf6mmsqzD5GDxwD3vpeAc-qEFglOpicrUEiDeu-n44gy/s1600/16.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="The GeoLocation in HTML5" border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwtF3d42RH5GQIozLsLr3B2xG0NfXn0GlTCRCJYoK8gOGW-I8VJbqf2rrK21B9Vrspx7Q29zAzXyVs0XkmfrLhskyxRvN3b_fwdf6mmsqzD5GDxwD3vpeAc-qEFglOpicrUEiDeu-n44gy/s400/16.png" width="301" /></a></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/16.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_48" o:spid="_x0000_i1026"
type="#_x0000_t75" alt="16"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/16.png" style='width:169.5pt;
height:225pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image019.png"
o:title="16"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2013/11/151.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_47" o:spid="_x0000_i1025"
type="#_x0000_t75" alt="15"
href="http://html5club.comuv.com/wp-content/uploads/2013/11/151.png" style='width:174.75pt;
height:225pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image002.png"
o:title="15"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">That’s all: enjoy HTML5!!!<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span dir="RTL" lang="HE" style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">עריכה: כרמל שוורצמן</span><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<br />
<div align="right" class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-bottom: .0001pt; margin-bottom: 0cm; text-align: right; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";">Category: </span><a href="http://html5club.comuv.com/?cat=13" title="View all posts in HTML5 GEOLOCATION"><span style="color: black; font-family: "times new roman" , serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";">HTML5 GEOLOCATION</span></a><span style="font-family: "times new roman" , serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0tag:blogger.com,1999:blog-6997842883688414131.post-46185013395157587002015-12-02T23:12:00.002-08:002015-12-03T05:18:37.512-08:00jQuery Get Content – val() html() text()<div align="center" class="MsoNormal" style="direction: ltr; line-height: 23.75pt; margin-bottom: .0001pt; margin-bottom: 0cm; mso-outline-level: 1; text-align: center; unicode-bidi: embed;">
<a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><br /></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<b><i><u><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">SINTAX :</span></u></i></b><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">(<i>selector</i>)<b><span style="color: #990000;">.</span><span style="color: red;">html()</span><span style="color: #990000;"> </span></b> (<i>selector</i>).html(<i>value</i>)
(<i>selector</i>).html(<i>callback</i>)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">(<i>selector</i>)<b><span style="color: #660000;">.</span><span style="color: red;">val()</span><span style="color: #660000;"> </span></b> (<i>selector</i>).val(<i>value</i>)
(<i>selector</i>).val(<i>callback</i>)<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">(<i>selector</i>)<b><span style="color: #660000;">.</span><span style="color: red;">text() </span></b> (<i>selector</i>).text(<i>value</i>)
(<i>selector</i>).text(<i>callback</i>)<o:p></o:p></span><br />
<a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<br />
<h3>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><a href="http://html5club.comuv.com/?p=256" style="font-family: 'Times New Roman'; font-size: medium; line-height: 31.6667px; text-align: center;" title="Permanent Link to jQuery Get Content – val() html() text()"><span style="color: black; font-family: "times new roman" , serif; font-size: 22.0pt; mso-fareast-font-family: "Times New Roman"; mso-font-kerning: 18.0pt;">jQuery Get Content – val() html() text()</span></a></span></h3>
</div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><b><i><br /></i></b></span>
<a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><b><i>Allow the developer to manipulate , modify or fetch the
element values :</i></b><o:p></o:p></span><br />
<a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: right; float: right; margin-bottom: 1em; margin-left: 1em;"></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><b><i><br /></i></b></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><b>val()</b> >>>> returns the value of input tags<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><b>text()</b> >>>>> returns the innerText of
an element<o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><b>html()</b> >>>>> returns the
innerHtml of an element<o:p></o:p></span><br />
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">An overload of both functions accepts a function to set the
value, providing the current value of the element :<o:p></o:p></span><br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://www.blogger.com/blogger.g?blogID=6997842883688414131" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZLoP-jlIxy3O7-SfcYXF-hEAH9tMVPuldbMN4z4iVFp2ga6lwy1prl-9k5hrjz6rHBAdrlfWqBaLqsl67FYUBQTnrPZozIanUtJjIrjFkEIPgPaD-7NdlIHSLF9z9xdGJ1D31lJiItU-M/s1600/1.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery Get Content – val() html() text()" border="0" height="280" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZLoP-jlIxy3O7-SfcYXF-hEAH9tMVPuldbMN4z4iVFp2ga6lwy1prl-9k5hrjz6rHBAdrlfWqBaLqsl67FYUBQTnrPZozIanUtJjIrjFkEIPgPaD-7NdlIHSLF9z9xdGJ1D31lJiItU-M/s640/1.png" width="540" /></a></div>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKwlwsCKJmFyrNYeaySeh242OohZk0qaw7Dt0eF2mNuZwx_yHVgxMbox_WJjClXHeGEnwC3m44hGfaopQEZZPmsiIKKsLM1tpb9CRIDAbqOGxYNYif9szK2ySbcWn0znfyIwU64LsCE8M1/s1600/2.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="jQuery Get Content – val() html() text()" border="0" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKwlwsCKJmFyrNYeaySeh242OohZk0qaw7Dt0eF2mNuZwx_yHVgxMbox_WJjClXHeGEnwC3m44hGfaopQEZZPmsiIKKsLM1tpb9CRIDAbqOGxYNYif9szK2ySbcWn0znfyIwU64LsCE8M1/s640/2.png" width="540" /></a></div>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span></div>
<div align="center" class="MsoNormal" style="direction: ltr; line-height: 18.0pt; mso-margin-bottom-alt: auto; mso-margin-top-alt: auto; text-align: center; unicode-bidi: embed;">
</div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<a href="http://html5club.comuv.com/wp-content/uploads/2014/05/2.png"><span style="color: black; font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman"; mso-no-proof: yes; text-decoration: none; text-underline: none;"><!--[if gte vml 1]><v:shape id="Picture_x0020_64" o:spid="_x0000_i1025"
type="#_x0000_t75" alt="2"
href="http://html5club.comuv.com/wp-content/uploads/2014/05/2.png" style='width:618pt;
height:106.5pt;visibility:visible;mso-wrap-style:square' o:button="t">
<v:fill o:detectmouseclick="t"/>
<v:imagedata src="file:///C:\Users\U02\AppData\Local\Temp\msohtmlclip1\01\clip_image003.png"
o:title="2"/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></span></a><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<b><i><u><span lang="FR" style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-ansi-language: FR; mso-fareast-font-family: "Times New Roman";">SAMPLE CODE :</span></u></i></b><span lang="FR" style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-ansi-language: FR; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div style="background: #ECECEC; border: solid #939393 1.0pt; margin-left: 2.25pt; margin-right: 2.25pt; mso-border-alt: solid #939393 .75pt; mso-element: para-border-div; padding: 8.0pt 8.0pt 8.0pt 8.0pt;">
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; direction: ltr; line-height: 18pt; margin: 2.25pt 0cm; padding: 0cm; unicode-bidi: embed;">
<b><i><span lang="FR" style="color: blue; font-family: "courier new"; font-size: 10.0pt; mso-ansi-language: FR; mso-fareast-font-family: "Times New Roman";"><script></span></i></b><span lang="FR" style="font-family: "courier new"; font-size: 10.0pt; mso-ansi-language: FR; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; direction: ltr; line-height: 18pt; margin: 2.25pt 0cm; padding: 0cm; unicode-bidi: embed;">
<b><i><span lang="FR" style="color: blue; font-family: "courier new"; font-size: 10.0pt; mso-ansi-language: FR; mso-fareast-font-family: "Times New Roman";"> $(document).ready(function(){</span></i></b><span lang="FR" style="font-family: "courier new"; font-size: 10.0pt; mso-ansi-language: FR; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; direction: ltr; line-height: 18pt; margin: 2.25pt 0cm; padding: 0cm; unicode-bidi: embed;">
<b><i><span lang="FR" style="color: blue; font-family: "courier new"; font-size: 10.0pt; mso-ansi-language: FR; mso-fareast-font-family: "Times New Roman";"> </span></i></b><b><i><span style="color: blue; font-family: "courier new"; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">$("button").click(function(){</span></i></b><span style="font-family: "courier new"; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; direction: ltr; line-height: 18pt; margin: 2.25pt 0cm; padding: 0cm; unicode-bidi: embed;">
<b><i><span style="color: blue; font-family: "courier new"; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";">
$("input:text").val(function(index,current){</span></i></b><span style="font-family: "courier new"; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; direction: ltr; line-height: 18pt; margin: 2.25pt 0cm; padding: 0cm; unicode-bidi: embed;">
<b><i><span style="color: blue; font-family: "courier new"; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"> return current +
" new value";</span></i></b><span style="font-family: "courier new"; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; direction: ltr; line-height: 18pt; margin: 2.25pt 0cm; padding: 0cm; unicode-bidi: embed;">
<b><i><span style="color: blue; font-family: "courier new"; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"> });</span></i></b><span style="font-family: "courier new"; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; direction: ltr; line-height: 18pt; margin: 2.25pt 0cm; padding: 0cm; unicode-bidi: embed;">
<b><i><span style="color: blue; font-family: "courier new"; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"> });</span></i></b><span style="font-family: "courier new"; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; direction: ltr; line-height: 18pt; margin: 2.25pt 0cm; padding: 0cm; unicode-bidi: embed;">
<b><i><span style="color: blue; font-family: "courier new"; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"> });</span></i></b><span style="font-family: "courier new"; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<div class="MsoNormal" style="background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: none; direction: ltr; line-height: 18pt; margin: 2.25pt 0cm; padding: 0cm; unicode-bidi: embed;">
<b><i><span style="color: blue; font-family: "courier new"; font-size: 10.0pt; mso-fareast-font-family: "Times New Roman";"></script><o:p></o:p></span></i></b></div>
</div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><br /></span>
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><i>That’s all: enjoy HTML5!!!<o:p></o:p></i></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><i>by carmel schvartzman</i><o:p></o:p></span></div>
<div class="MsoNormal" style="direction: ltr; line-height: 18pt; unicode-bidi: embed;">
<span dir="RTL" lang="HE" style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";">עריכה: כרמל שוורצמן</span><span style="font-family: "times new roman" , serif; font-size: 12.0pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
<br />
<div align="right" class="MsoNormal" style="direction: ltr; line-height: 18.0pt; margin-bottom: .0001pt; margin-bottom: 0cm; text-align: right; unicode-bidi: embed;">
<span style="font-family: "times new roman" , serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";">Category: </span><a href="http://html5club.comuv.com/?cat=15" title="View all posts in jQuery Content & Attributes"><span style="color: black; font-family: "times new roman" , serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";">jQuery Content & Attributes</span></a><span style="font-family: "times new roman" , serif; font-size: 10.5pt; mso-fareast-font-family: "Times New Roman";"><o:p></o:p></span></div>
Carmel Shvartzmanhttp://www.blogger.com/profile/02395781739227543283noreply@blogger.com0