Blogger Buzz: javascript

How to Use Cookies in Javascript

<div dir="ltr" style="text-align: left;" trbidi="on">
Each time we visit a website, cookies can be stored to 'remember' things that we do while browsing a page. This may happen, for example, when we visit a page where we have to login with an username and a password. In this case, after verifying that the login is correct, usually a cookie is recorded on our computer. 
 
An example would be the popular page of Google. This search engine allows users to choose how many search results they want to see on each page. Thanks to a cookie, this configuration remains unchanged for each computer, even after rebooting several sessions. Despite this, it is good to remove them from time to time because, although, some will expire being erased automatically after a while, some of them will never do so. 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihZAL5aLTMRZZmEIooUCgG0W8_UXBBcPgUuyowfrjh2VP8MOft0Dye_P51lthk6pJ5fOGg4Hl5Uf3KTqDsl4VlxnhtieQU4J5UucHAgVG1WYCVRgTLk5cLNKrySomaeCxsvQcHxOwl5Mu8/s1600/using-cookies-in-javascript.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="cookies with javascript, blogger tricks" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihZAL5aLTMRZZmEIooUCgG0W8_UXBBcPgUuyowfrjh2VP8MOft0Dye_P51lthk6pJ5fOGg4Hl5Uf3KTqDsl4VlxnhtieQU4J5UucHAgVG1WYCVRgTLk5cLNKrySomaeCxsvQcHxOwl5Mu8/s1600/using-cookies-in-javascript.png" title="How to use cookies in javascript" /></a></div>
 
Like many other things, cookies may suffer a poor use and hence their bad reputation. For instance, some websites can store and study the browsing habits of a user without their knowledge. This is why most browsers already include a system to filter them and can decide if they will provide some privacy or not. 
 
If you want to see a live example of how a cookie works, please visit this page and refresh it a few times. You should get an alert window telling you about how many times you visited the page. 
(script source: <a href="http://javascriptkit.com/script/script2/visitorinfo.shtml" rel="nofollow" style="color: blue;" target="_blank">javascriptkit.com</a>) 
 
There could be other ways to use cookies but a server could do this with JavaScript. Below we have a simple script that can be used as many times we want, even for different purposes. Basically, what the following script does is to create three functions: the first one is to set a cookie, the second one is to read it, and the last one is to erase it. We can apply it in Blogger by accessing the template HTML and add it just before the </head> tag: 
<blockquote class="tr_bq">
<script type='text/javascript'> 
//<![CDATA[ 
 
// Set cookie 
function setCookie(name, value, expires, path, domain, secure) { 
document.cookie = name + "=" + escape(value) + 
((expires == null) ? "" : "; expires=" + expires.toGMTString()) + 
((path == null) ? "" : "; path=" + path) + 
((domain == null) ? "" : "; domain=" + domain) + 
((secure == null) ? "" : "; secure"); 
} 
 
// Read cookie 
function getCookie(name){ 
var cname = name + "="; 
var dc = document.cookie; 
if (dc.length > 0) { 
begin = dc.indexOf(cname); 
if (begin != -1) { 
begin += cname.length; 
end = dc.indexOf(";", begin); 
if (end == -1) end = dc.length; 
return unescape(dc.substring(begin, end)); 
} 
} 
return null; 
} 
 
//delete cookie 
function eraseCookie (name,path,domain) { 
if (getCookie(name)) { 
document.cookie = name + "=" + 
((path == null) ? "" : "; path=" + path) + 
((domain == null) ? "" : "; domain=" + domain) + 
"; expires=Thu, 01-Jan-70 00:00:01 GMT"; 
} 
} 
 
//]]> 
</script></blockquote>
Once done, in order to set a cookie, we only need to put the name and the value in quotes when we call the function. Additionally, we will set the expiry date by getting the current Time (in milliseconds) and add the required number of minutes (in milliseconds): 
<blockquote class="tr_bq">
var expiration = new Date(); 
expiration.setTime(expiration.getTime() + 10000); //Expire after 10 seconds 
setCookie("cookiename","hello",expiration); 
}</blockquote>
The above code sets a cookie called cookiename, with the hello value and set its expiry date to 10 seconds after it has been set (10000 milliseconds = 10 seconds). If we want to restore the value of this cookie, then we should use the second function with the cookie name: 
<blockquote class="tr_bq">
var checkCookie = getCookie("cookiename");</blockquote>
By adding this code below <body>, we created a cookie with the value 'hello' which can be shown on the screen if we want to. The cookie will disappear after 10 seconds: 
<blockquote class="tr_bq">
<script type='text/javascript'> 
var expiration = new Date(); 
expiration.setTime(expiration.getTime() + 10000); 
setCookie("cookiename","hello",expiration); 
var checkCookie = getCookie("cookiename"); 
document.write(checkCookie); 
</script></blockquote>
The erase function is used in the same way as the one for reading just by clicking on the name of the cookie. The setCookie values for 'domain' and 'secure' are not utilized. Use 'domain' on the Javascript cookie if you are using it on a subdomain, where the cookie is set on the widgets subdomain, but you need it to be accessible over the whole yoursite.com domain. 
 
The combination of these three functions will allow us to handle cookies for specific purposes, as we will see in the near future.</div>

how to javascript How to Use Cookies in Javascript

Each time we visit a website, cookies can be stored to 'remember' things that we do while browsing a page. This may happen, for exa...

How to Increase Thumbnail Resolution on Blogger

<div dir="ltr" style="text-align: left;" trbidi="on">
When we add a widget on Blogger, the thumbnails will keep a default size of 72 x 72px which might not look good if we try to make them bigger using only CSS. However, with a bit of JavaScript we'll be able to replace the thumbnail with the same image of higher resolution and this way, larger images will no longer appear blurry. 
 
In this tutorial we will see how we can replace the default thumbnail size of the popular posts widget but we can apply this trick on any of the blog widgets. 
 
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0R3oRLt0j-aECl1UADTDqMhfJlXK7nkmNh33vqOnYDryL5BRzQ2iHqnCV44slwLNMB2s5KUIQB3GEBEEYO1Mpt-pc_UrF5piGWdq-T-Lgum6qhrAUwPgq7N1ywMXWma6UA1ufVpemRFig/s1600/change-thumbnail-resolution-on-blogger.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Increase Thumbnail resolution " border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0R3oRLt0j-aECl1UADTDqMhfJlXK7nkmNh33vqOnYDryL5BRzQ2iHqnCV44slwLNMB2s5KUIQB3GEBEEYO1Mpt-pc_UrF5piGWdq-T-Lgum6qhrAUwPgq7N1ywMXWma6UA1ufVpemRFig/s1600/change-thumbnail-resolution-on-blogger.png" title="Increase Thumbnail resolution on Blogger" /></a>.</div>
 
<h3>
Changing the Thumbnail Size for the Popular Posts Widget </h3>
 
Step 1. First, let's add the Popular posts gadget by going to Layout > click on the Add a gadget link and select Popular Posts from the popup window. 
 
Step 2. Go to Template > click on the Edit HTML button > click anywhere inside the code area and press CTRL + F keys to open the Blogger search box. Step 3. Type or paste the </head> tag inside the search box then hit Enter to find it. After you found the </head> tag, add this CSS above it: 
<blockquote class="tr_bq">
<style type='text/css'> 
.PopularPosts .item-thumbnail a { 
clip: auto; 
display: block; 
height: 130px; 
margin: 0 0px 5px; 
overflow: hidden; 
width: 210px; 
border: 2px solid #EEEEEE; 
border-radius: 20px; 
} 
.PopularPosts .item-thumbnail img { 
position: relative; 
top: -30px; 
transition:all .2s linear; 
 -o-transition:all .5s linear; 
-moz-transition:all .2s linear; 
-webkit-transition:all .2s linear; 
} 
.PopularPosts .item-thumbnail img:hover{ 
opacity:.6; 
filter:alpha(opacity=60) 
} 
.PopularPosts .widget-content ul li { 
background: #F9F9F9; 
border: 2px solid #EEEEEE; 
border-radius: 10px; 
box-shadow: 0 4px 10px #EEEEEE; 
color: #555555; 
padding: 10px; 
margin-bottom: 5px; 
} 
.PopularPosts .item-title { 
font: 14px Cambria,Georgia, sans-serif; 
color: #2288BB; 
font-weight: bold; 
text-transform: uppercase; 
text-align: center; 
} 
.PopularPosts .item-snippet { 
display: none; 
} 
.widget .widget-item-control a img { 
height: 18px; 
width: 18px; 
} 
</style></blockquote>
Step 4. Search for the </body> tag and just above it, add this script: 
<blockquote class="tr_bq">
<script type='text/javascript'>                   
function changeThumbSize(id,size){ 
var blogGadget = document.getElementById(id); 
var replacement = blogGadget.innerHTML; 
blogGadget.innerHTML = replacement.replace(/s72-c/g,"s"+size+"-c"); 
var thumbnails = blogGadget.getElementsByTagName("img"); 
for(var i=0;i&lt;thumbnails.length;i++){ 
thumbnails[i].width = size; 
thumbnails[i].height = size; 
} 
} 
changeThumbSize("PopularPosts1",210);                   
</script></blockquote>
What I highlighted in red is the widget ID for the Popular Posts gadget - to change the thumbnails size for any of your blog widgets, first you need to find the gadget/widge ID and then add a line below this part: 
<blockquote class="tr_bq">
changeThumbSize("PopularPosts1",210); 
changeThumbSize("widget-ID-HERE",210);</blockquote>
 ... and replace widget-ID-HERE text with the ID of that widget/gadget. 
 
Note: you'll not be able to see the changes if the widget has a class selector - for this you will need to change class with id and replace the dot "." symbol with "#" within the CSS... 
 
Step 5. Finally, Save the Template.  
 
 If you need more help, please leave a comment below.</div>

When we add a widget on Blogger, the thumbnails will keep a default size of 72 x 72px which might not look good if we try to make them bigg...

How to Use Character Entities in CSS, HTML and JavaScript

<div dir="ltr" style="text-align: left;" trbidi="on">
Sometimes, when using scripts, we must write special characters like accents by using a special set of codes called character entities, however these don't always look good or we get a question mark or other strange symbols. Usually, this is solved if the character encoding is done right but the logic may not always work. 
 
<div class="ssmainhide" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7HJpLR8lZVAZmtEDpQSBC4skQ3B-q7ZnpHJA0zEX7ZJKSDBqdK7BE37A7ZBj_689Y0obmXHhqgwuPYM_SlDQwnBAPQEwa7GD6msp7ehdklUO2yIhXuQc8ogXWqpQujnrHlpJaF87TZD_-/s1600/use-character-entities-in-css-html-javascript.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Use Charater Entries in CSS,HTML,JavaScript" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7HJpLR8lZVAZmtEDpQSBC4skQ3B-q7ZnpHJA0zEX7ZJKSDBqdK7BE37A7ZBj_689Y0obmXHhqgwuPYM_SlDQwnBAPQEwa7GD6msp7ehdklUO2yIhXuQc8ogXWqpQujnrHlpJaF87TZD_-/s1600/use-character-entities-in-css-html-javascript.png" title="Use Charater Entries in CSS,HTML,JavaScript" /></a></div>
In Blogger, special characters most of the time appear correctly, but when it is about other services, like external files, things can get complicated. 
 
For example, this usually looks good and when you click on this link, you should see the letters in the right way: 
<blockquote class="tr_bq">
alert(" � � � � �  ? ? ? ");</blockquote>
If we are trying to use other method and we want to use this type of characters, sometimes we need to write them in a special format called escape sequence which is nothing but a backslash followed by a letter and a number in hexadecimal format. In the case of common characters or accents, it would be \x followed by two hex digits: 
<blockquote class="tr_bq">
\xe1 is the letter � 
\xe9 is the letter � 
\xed is the letter � 
\xf3 is the letter � 
\xfa is the letter �</blockquote>
Other combinations generate special characters: 
<blockquote class="tr_bq">
\n is a line break 
\t is the tab character 
\' is single quote 
\" is double quote 
\\ is a back slash </blockquote>
Or we can use \u followed by the Unicode character code expressed as four hexadecimal digits: 
<blockquote class="tr_bq">
\u00e1 is the letter � 
\u00e9 is the letter � 
\u00ed is the letter � 
\u00f3 is the letter � 
\u00fa is the letter � </blockquote>
this will allow us to see correctly what we couldn't before if we were using some other services: 
<blockquote class="tr_bq">
alert(" \u263a \u2764 \u271b ");</blockquote>
<a href="http://www.tamasoft.co.jp/en/general-info/unicode.html" rel="nofollow">On this page</a> you can find a comprehensive list of all the characters, both symbols and different alphabets. 
Although rare characters are not often used in the CSS, there is a case when they are necessary as well, like when using the content property with the :after and :before pseudo-elements. 
 
The same criteria applies there, but we only need to add a backslash followed by the four-digit hexadecimal code. For example: 
<blockquote class="tr_bq">
content: ":\24d1\24d4\24d5\24de\24e1\24d4"; 
 
content: ":after  \263a  \2724  \2602";</blockquote>
<div style="text-align: center;">
:??????</div>
<div style="text-align: center;">
:after ? ? ? </div>
 
Remember that IE doesn't understand the :before pseudoclass with content, and you would have to set the list-style-type property as none, or you would get 2 bullets in CSS compliant browsers.</div>

css how to javascript How to Use Character Entities in CSS, HTML and JavaScript

Sometimes, when using scripts, we must write special characters like accents by using a special set of codes called character entities, how...