Hiding a DIV in HTML with or without Javascript

Sometimes we need to hide a DIV in a HTML page. There are various ways to do that. Some of them includes usage of Javascript, while some of them don't. However if you learn the usage of Javascript then you can control it more easily. Without wasting the time let me show you the methods.


There are three ways to hide a DIV in a HTML document. The way to use these ways is explained with syntax in both HTML and Javascript. A person who have got basic knowledge of these languages can easily understand that.

Opacity: Opacity is a term more used by photoshop experts. But here we will use it a style for div.
 HTML :  <div id="div1" style="opacity:0.5;">Anything here</div>
Javascript : document.getElementById('div1').style.opacity=0.5;In the above statement opacity controls the visibility of the content of div. If you set opacity to 0.0 then it becomes completely invisible and shows everything behind it, while setting opacity to 1.0 makes it completely visible and hides every thing behind it. Any number between 0.0 to 1.0 will give a translucent effect.

Visibility: As the term suggests, visibility is again a style feature which can be used in the following manner.
HTML : <div id="div1" style="visibility:hidden;">Anything here</div>
Javascript: document.getElementById('div1').style.visibility='hidden';
The negative fact about "visibility" is that it keeps the space reserved for div, but just doesn't show it. So it might show a blank space in document. Visibility has got two options, one is hidden, while second is visible (to show that div again).

Display: This one is the one that i use a lot. It can totally remove the div from a HTML document and it does not leave any space reserved for that div.
HTML : <div id="div1" style="display:none;">Anything here</div>
Javascript: document.getElementById('div1').style.display='none';
As you can see "none" removes the div totally from sight and does not leave any space for that. There are two more options to make the div visible. "block" is used for block elements like <div> and <p>, while "inline" is used for inline elements like <span> and <a>.

I hope that the above coding features of HTML and Javascript will help some of you. If you have any query then feel free to comment.

Overlapping a DIV with another and adjusting its Opacity

While working with HTML in web designing, sometime we need to overlap a div with another. Those who do it for the very first time find it difficult to do that. Here i have provided a simple example to make it easier for you to do it.

The following code will overlap an existing DIV (with an image). There will be 9 different DIVs overlapping that image at different locations. Opacity of these DIVs can also be changed using a simple function. Check the live version of that code in running condition and then its code provided below.

Running Version:

Code:

<div style="position:relative;width:200px;height:200px;float:left;">      <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiXueG_CQgIeD7RWaVwzcRUdOS70AuhT2oyIk1Zf-NVerYOSodMP7MS7RgY5XgYEIZ1xfT5FOwskA5TpOFCsUlvypR0gxmixvsayaB_m55S0e4qDx28v5IKCpIPCoaO2TudhBDRnATJ-hC/s1600/c1.jpg" />      <div id="div1" style="position:absolute;opacity:0.9;top:0;left:0;width:66px;height:66px;background-color:red"></div>      <div id="div2" style="position:absolute;opacity:0.9;top:0;left:66px;width:66px;height:66px;background-color:green"></div>      <div id="div3" style="position:absolute;opacity:0.9;top:0;left:132px;width:66px;height:66px;background-color:blue"></div>      <div id="div4" style="position:absolute;opacity:0.9;top:66px;left:0px;width:66px;height:66px;background-color:yellow"></div>      <div id="div5" style="position:absolute;opacity:0.9;top:66px;left:66px;width:66px;height:66px;background-color:pink"></div>      <div id="div6" style="position:absolute;opacity:0.9;top:66px;left:132px;width:66px;height:66px;background-color:orange"></div>      <div id="div7" style="position:absolute;opacity:0.9;top:132px;left:0px;width:66px;height:66px;background-color:purple"></div>      <div id="div8" style="position:absolute;opacity:0.9;top:132px;left:66px;width:66px;height:66px;background-color:violet"></div>      <div id="div9" style="position:absolute;opacity:0.9;top:132px;left:132px;width:66px;height:66px;background-color:indigo"></div> </div> <input type="button" value="Remove Red" onclick="remove()" /> <script> function remove() { document.getElementById('div1').style.opacity=0; } </script>

How to run a Javascript Function on Page loading

It is a common necessity that web developers face to run a javascript function at the time of page loading. Here we have got two easy ways to that. The second way can be used to display an animation, if you use your brain to do that.

By Using window.onload

<script type="text/javascript">
    window.onload = initialize();
   function initialize()
  {
      //Code to be implemented at page load
  }
</script>

The method described above is the easiest way to run a javascript function at the time of page load. window.onload is the command that can run any desired function at the time of page load.

By Using setInterval :

<p id="demo"><br /></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
var d = 10;
var myVar = setInterval(myTimer, 1000);
function myTimer()
   {
    document.getElementById("demo").innerHTML = d ;
    d = d-1;
    if (d==0)  {clearInterval(myVar);}
   }
</script>

In the above script myvar is a variable declared inside the script, which initializes and calls a function using setInterval. It runs the function mytimer again and again after every 1000 milliseconds (i.e. 1 second). It is a good way to run an animation at the time of page loading. In the above script a countdown from 10 to 1 is displayed, which either stops after reaching 1 or when the user click the button Stop Time.

How to use a HTML Table as a database through Javascript

As a professional blogger i am often reminded of the drawbacks of using blogger for doing something professional. One such thing is using databases. It is nearly impossible to use a big database file to create a dynamic page on blogger. But here i have successfully generated javascript to use a HTML Table as a database on a blogger post. However this feature is not just limited to usage on blogger platform (anyone can implement it), if javascript is allowed on client side. The best part is that the table (or database) is kept hidden while the dynamic page is generated.


The worst part of this type of implementation of database is that whole table (or database) is downloaded as a webpage and then dynamic page is created. It is not suggested if you are using a large database, as it will affect the page opening time and then processing of that data through java script.

<div id="hiddendiv" style="display: none;">
<table id="pollTable">
<tr><td></td><td>City</td></tr>
<tr><td>Afghanistan</td><td>Kabul - ISAF HQ</td></tr>
<tr><td>Afghanistan</td><td>Mazar-e Sharif - Camp Northern Lights </td></tr>
<tr><td>Andorra</td><td>Escaldes-Engordany</td></tr>
<tr><td>Argentina</td><td>Buenos Aires</td></tr>
<tr><td>Australia</td><td>Adelaide</td></tr>
<tr><td>Australia</td><td>Brisbane</td></tr>
<tr><td>Australia</td><td>Bunbury</td></tr>
<tr><td>United States of America</td><td>Cleveland-Elyria-Mentor, OH</td></tr>
<tr><td>United States of America</td><td>Clinton, IA</td></tr>
<tr><td>United States of America</td><td>Colorado Springs, CO</td></tr>
</table>
</div>
<form id="pollform" name="pollform">
<p id="selectcountry"></p>
<p id="selectcity"></p>
<p id="resultsentense"></p>
</form>

<script>
window.onload = populatecountries();
function populatecountries()
{
       var oldcountry="";
       var newcountry="";
       var selectcountry = "<b>Select your Country</b> : ";
       selectcountry = selectcountry + '<select name="country" onclick=populatecities()>';
       var myTab = document.getElementById('pollTable');
         // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
        for (i = 0; i < myTab.rows.length; i++) 
        { 

            // GET THE CELLS COLLECTION OF THE CURRENT ROW.
            var objCells = myTab.rows.item(i).cells;
            newcountry = objCells.item(0).innerHTML;
            if (newcountry!=oldcountry)
            {
            selectcountry = selectcountry + '<option value="' + newcountry + '">' + newcountry + '</option>';
            oldcountry = newcountry;
            }
       }
        selectcountry = selectcountry + "</select>";
        document.getElementById('selectcountry').innerHTML = selectcountry;
}
function populatecities()
{
       var selectedcountry=document.pollform.country.value;
       var oldcity="";
       var newcity="";
       var selectcity = "<b>Select your City</b> : ";
       selectcity =selectcity + '<select name="city" onclick=writeresult()>';
       var myTab = document.getElementById('pollTable');
         // LOOP THROUGH EACH ROW OF THE TABLE AFTER HEADER.
        for (i = 0; i < myTab.rows.length; i++) 
        { 

            // GET THE CELLS COLLECTION OF THE CURRENT ROW.
            var objCells = myTab.rows.item(i).cells;
            if (selectedcountry==objCells.item(0).innerHTML)
            {
               newcity = objCells.item(1).innerHTML;
               if (newcity!=oldcity)
               {
                selectcity = selectcity + '<option value="' + newcity + '">' + newcity + '</option>';
                oldcity = newcity;
               }
            }
       }
        selectcity = selectcity + "</select>";
        document.getElementById('selectcity').innerHTML = selectcity;
}

function writeresult()
{
        var selectedcountry=document.pollform.country.value;
        var selectedcity=document.pollform.city.value;
        var resultstatement = '<h3>You have selected ' + selectedcity + ' , which is a popular city of ' + selectedcountry + '.</h3>' ;
        document.getElementById('resultsentense').innerHTML = resultstatement;
}
</script>

---

Result of the above code is provided below. Just select the country and city and see the magic.

---

	City
Afghanistan	Kabul - ISAF HQ
Afghanistan	Mazar-e Sharif - Camp Northern Lights
Andorra	Escaldes-Engordany
Argentina	Buenos Aires
Australia	Adelaide
Australia	Brisbane
Australia	Bunbury
United States of America	Cleveland-Elyria-Mentor, OH
United States of America	Clinton, IA
United States of America	Colorado Springs, CO

---

If you check the above code you will find that there is a table in above HTML code which looks like:

Country	City
Afghanistan	Kabul - ISAF HQ
Afghanistan	Mazar-e Sharif - Camp Northern Lights
Andorra	Escaldes-Engordany
Argentina	Buenos Aires
Australia	Adelaide
Australia	Brisbane
Australia	Bunbury
United States of America	Cleveland-Elyria-Mentor, OH
United States of America	Clinton, IA
United States of America	Colorado Springs, CO

This table is accessed by javascript. Country and Cities name are populated through it into the result form. When you select your preferred country, then it populates the cities name into the dropdown menu after searching for them in table. I you have got some knowledge of javascript then you may understand it better after looking into the code.

Dowry Calculator

For some people dowry is a way to earn, for some its a social liability of Girl's father and for some its a status symbol. There are various ways to ask for it. Here is a calculator that can help "to be Grooms" to check their expected dowry value. Enter all details correctly and check how much dowry you are expected to get.   Dowry Calculator

Groom's Age

23 24 25 26 27 28 29 30 31-35 36-40 41-45 46-50 51+

Groom's Caste

Bania Bhumihar Brahmin Chettiar Ezhava Jat Kayastha Kamma Kapu Kshatriya Labanas Maravar Nair Nadar Reddy Thevar Vaishya

Groom's Current Profession

Architect CA Consultant Doctor Engineer Family Business IAS Officer Investment Banker Journalist Lawyer Project Manager Self Employed Teacher Unemployed

Groom's Monthly Salary (in )

Less than 20,000 20,000 - 30,000 30,000 - 40,000 40,000 - 50,000 50,000 - 70,000 70,000 - 1 Lakh 1 Lakh - 1.5 Lakh 1.5 Lakh - 2 Lakh More than 2 Lakh

Groom's Alma Mater

Indian Instititute of Technology (IIT) Indian Institute of Management (IIM) IIT + IIM Massachusetts Institute of Technology (MIT) Stanford Harvard None of the Above

The Groom is working in

India USA Any European Country/Any Country more developed than India Any Country less developed than India

Groom's Skin Color

Brown Black Fairy White Pitch Black (Not visible on a moonless night) White Wheatish (Almost White. Would need some Fair n Lovely)

Groom's Height

Less than 5'2" 5'2" 5'3" 5'4" 5'5" 5'6" 5'7" 5'8" 5'9" 5'10" 5'11" 6' 6'1" Greater than 6'1"

Number of times the Groom has married before

0 1 2 More than 2

Groom's Father's Profession

Doctor Engineer Lawyer CA IAS Officer Journalist Family Business Teacher

  

Displaying Label and Search Results in feed using Script

Several bloggers and webmasters use to display a feed of posts and pages on a particular post/page. I am also using it on my blogs. Its easy to display label feeds. You can easily get its script code if you google for it. But you have to use a trick and do some changes in the code to make it display the search results for a particular word.


There is a common script that you need to add before </head> in your blogger template. That script in given below.

<script type='text/javascript'>
//<![CDATA[
function labelthumbs(json){document.write('<ul class="label_with_thumbs">');for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){var commenttext=entry.link[k].title;var commenturl=entry.link[k].href;}
                                                                                                                                                                                                                                                      if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break;}}var thumburl;try{thumburl=entry.media$thumbnail.url;}catch(error)
{s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")){thumburl=d;}else thumburl='';}
var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="June";monthnames[7]="July";monthnames[8]="Aug";monthnames[9]="Sept";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";document.write('<li class="clearfix">');if(showpostthumbnails==true)
  document.write('<a href="'+posturl+'" target ="_top"><img class="label_thumb" src="'+thumburl+'"/></a>');document.write('<strong><a href="'+posturl+'" target ="_top">'+posttitle+'</a></strong><br>');if("content"in entry){var postcontent=entry.content.$t;}
else
if("summary"in entry){var postcontent=entry.summary.$t;}
else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");if(showpostsummary==true){if(postcontent.length<numchars){document.write('');document.write(postcontent);document.write('');}
else{document.write('');postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...');document.write('');}}
var towrite='';var flag=0;document.write('<br>');if(showpostdate==true){towrite=towrite+monthnames[parseInt(cdmonth,10)]+'-'+cdday+' - '+cdyear;flag=1;}
if(showcommentnum==true)
{if(flag==1){towrite=towrite+' | ';}
if(commenttext=='1 Comments')commenttext='1 Comment';if(commenttext=='0 Comments')commenttext='No Comments';commenttext='<a href="'+commenturl+'" target ="_top">'+commenttext+'</a>';towrite=towrite+commenttext;flag=1;;}
if(displaymore==true)
{if(flag==1)towrite=towrite+' | ';towrite=towrite+'<a href="'+posturl+'" class="url" target ="_top">More »</a>';flag=1;;}
document.write(towrite);document.write('</li>');if(displayseparator==true)
if(i!=(numposts-1))
document.write('');}document.write('</ul>');}
//]]>
</script>

Script to display the Label Feed

You have to add the following code in the HTML code of post/page where you want to display the feed.

<script type="text/javascript">var numposts = 10;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 125;</script>
<script src="/feeds/posts/default/-/Label%20Name?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script> 

In the above code change Label%20Name to the name of label for which you want to display the feed. The code %20 is used for space character (if any). As the above code is self explanatory so you can edit the number of posts, post thumbnail, numbers of characters in post summary and various other features.

Script to display Search Feed

<script type="text/javascript">var numposts = 10;var showpostthumbnails = true;var displaymore = false;var displayseparator = true;var showcommentnum = false;var showpostdate = false;var showpostsummary = true;var numchars = 125;</script>
<script src="/feeds/posts/default/-/search?q=search+phrase&by-date=true?published&amp;alt=json-in-script&amp;callback=labelthumbs" type="text/javascript"></script>

In the above code change search+phrase to the phrase or word that you want to search. If these is a single word to search then you don't need a "+" sign, but if there are more than one word then you need to place a "+" sign between them.

I hope that the above coding will help you in making your blog better.

The feed below uses blogger and script words to display the feed from my blog.

How to add a Copy Button under some text on your website

You must be visiting this page because you want to know a method to add a COPY button under some text in your website. Once i needed it too and discovered the following code. Its not written by by but it works perfectly.


How this code works :

Before we proceed you have to understand some basics of this code. At first we need a textarea where we put the text to be copied. Then there is a COPY IT Button just after the textarea. When the user clicks on COPY IT button, the text in textarea is copied to clipboard. Then the user can paste that text whereever he/she wants.

(If you want to do something else then I M Sorry !!!)

<p>
  <textarea class="js-copytextarea">
  Sample Text to be copied</textarea><br />
</p>
<p>
  <button class="js-textareacopybtn">Copy it</button>
</p>

<script>
var copyTextareaBtn = document.querySelector('.js-textareacopybtn');
copyTextareaBtn.addEventListener('click', function(event) {
  var copyTextarea = document.querySelector('.js-copytextarea');
  copyTextarea.select();
  try {
    var successful = document.execCommand('copy');
    var msg = successful ? 'successful' : 'unsuccessful';
    console.log('Copying text command was ' + msg);
  } catch (err) {
    console.log('Oops, unable to copy');
  }
});
</script>

Working Example:
Sample Text to be copied



This script works perfectly for me in most of the browsers.

Other important pages with some suggestions for blogger template coding.

Add Website Link in text copied from your Website

If you want to add your website link in the text copied from your website then you can use the script given on this page. This technique does not protect your website data but helps you in spreading your website link through the copied text.



The java script to add your website link in the copied text is given below:

<script type='text/javascript'>
function addLink() {
    //Get the selected text and append the extra info
    var selection = window.getSelection();
    pagelink = &quot;. Read more at: &quot; + document.location.href;
    copytext = selection + pagelink;
//Create a new div to hold the prepared text
    newdiv = document.createElement('div');
    //hide the newly created container
    newdiv.style.position = 'absolute';
    newdiv.style.left = '-99999px';
    //insert the container, fill it with the extended text, and define the new selection
    document.body.appendChild(newdiv);
    newdiv.innerHTML = copytext;
    selection.selectAllChildren(newdiv);
    window.setTimeout(function () {
        document.body.removeChild(newdiv);
    }, 100);
}
document.addEventListener('copy', addLink);
</script>

I personally used it several blogger blogs. You can add the above code just before </head> . It works perfectly like that in blogger code.

Spreading your link is a good thing to make your website popular. Adding this code can help you in attaining that target. Several people just copy paste text from your website without even noticing the link copied with it. You can utilize such copy-paste and spread your link by using this simple script.

Hope it will work for you !

Dynamic Image Map that works when window is resized

Last time i was creating an image map in my website and found my self into a state where image was dynamically resized by browser to fit it into the space. But it created a problem in the image map. Coordinates of Image Map were same as before, while image was resized by the browser. In such a situation i need my image map coordinates to be changed dynamically.
I tried to find a solution to this problem and found that i am not alone facing this problem. Finally i found a solution called dynamic image map. This technique need some java script to be implemented with your image map. This technique is not a tough one. Just follow the following steps.

How to create a dynamic image map with javascript

• Copy the following code

!function(){"use strict";function a(){function a(){function a(a){function c(a){return a*b[1===(d=1-d)?"width":"height"]}var d=0;return a.split(",").map(Number).map(c).map(Math.floor).join(",")}for(var b={width:h.width/i.width,height:h.height/i.height},c=0;f>c;c++)e[c].coords=a(g[c])}function b(){i.onload=function(){(h.width!==i.width||h.height!==i.height)&&a()},i.src=h.src}function c(){function b(){clearTimeout(j),j=setTimeout(a,250)}window.addEventListener?window.addEventListener("resize",b,!1):window.attachEvent&&window.attachEvent("onresize",b)}var d=this,e=d.getElementsByTagName("area"),f=e.length,g=Array.prototype.map.call(e,function(a){return a.coords}),h=document.querySelector('img[usemap="#'+d.name+'"]'),i=new Image,j=null;b(),c()}window.imageMapResize=function(b){function c(b){if("MAP"!==b.tagName)throw new TypeError("Expected <MAP> tag, found <"+b.tagName+">.");a.call(b)}Array.prototype.forEach.call(document.querySelectorAll(b||"map"),c)},"jQuery"in window&&(jQuery.fn.imageMapResize=function(){return this.filter("map").each(a)})}();

• Paste it in a blank notepad
• Save that notepad as MapResizer.js
• Upload it on your website server. (If you don't have file uploading access, then use yourjavascript.com to upload that file and get its url in your email). You will need the URL of MapResizer.js in the next step.
• After </map> paste the following code in your HTML document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>  <script src="Paste complete url of mapresizer.js" type="text/javascript"></script>  <script type="text/javascript">   $('map').imageMapResize();  </script>

How to Embed a PDF file in a Website using HTML Code

You must have seen a number of websites, showing pdf files directly on their webpages instead of giving a download link for that pdf file. You can also do it on your own blog or website. Bestrix.blogspot.com will demonstrate how to do it using a very simple method.

 How to Embed a PDF file in a Website using HTML Code 

You have to use very simple HTML code to embed a pdf file in your website. It would be better if the PDF is of your own and uploaded on server. Just collect the link of the PDF file and then follow the following steps to embed PDF on your website.
1) Open the HTML code of the Webpage on which you want to embed the PDF file.
2) Go to the exact location where you want to show it on your webpage.
3) Add the following code :
 <embed src="URL_of_the_PDF_file.pdf" width="550" height="750"></embed>
4) URL of the PDF file be added in the src field. Width and Height can be adjusted according to the display space on your website.
Given below is a simple example of one such PDF file. I hope you will use this simple code to embed PDF files on your webpages.

How to Reduce Photo Size Less than 20 KB / 10 kb / 100 KB Online

Most of us want to reduce size of images stored in our computers either to save space or to post them online. Sometimes we need it while applying for some job / recruitment and need a scanned photo
( size below 20 KB / 12 KB / 10 KB ) to upload on the official site. If the photo is above the specified limit it may be rejected. Advanced users know how to reduce image size by using iamge editing tools. But novice users find it dificult.

How to Reduce Photo Size Less than 20 KB

Here we are providing a simple tool that will help you to reduce the image size online. Using it you can change the photo to a specified dimension and also check its preview. Reducing the image size has never been so easy. If you find this tool helpful then you are most welcome to comment on this article.
Reducing the image size is not an easy task for those who don't know much about image editing. But its an easy task using this image size reducer tool. Reducing the image size is now a kids play. Just upload the file that you want to reduce and its smaller version (with reduced size) in seconds. Just download that reduced size image and use it where ever you want.

Till now i have received various comments who have found this image size reducing applet useful. You can recommend it to your those friends who don't have sufficient knowledge of image editing and they will never ask you again how to reduce image size.

You can reduce the image size by using a Windows Paint. But its not as perfect as the tool provided above. If you want to know how to use MS Paint to reduce image size then visit the following page.
How to Reduce Image Size using Paint : Read More 

People find this page while Searching for :

• how to reduce photo size below 12 kb 
• how to reduce image size below 10 kb
• decrease size of photo
• Photo size reducing tool 

Select All Friends on Facebook Javascript Code Chrome Extension

Select All Friends on Facebook

Sometimes you need to invite your friends to like a page or to an event on Facebook. Its easy if your friends are just 20 or 30. But its frustrating if you have to select thousands of friends. You can't click 1000 times to select 1000 friends. So here the trick to help you.

Bookmarklet Select All

Add the Bookmark to make it easy

The easier trick is that you just drag the Bookmarklet "Select All" to your bookmark bar and forget it. Once you are on that FB page where you have to select all of your friends just click on this bookmark "Select All". It will select all of your friends in one go. It might take some time depending upon the number of friends you have got. It can take upto 1 min if you have got 1000 friends.

Javascript Code to Select All friends on Facebook

Here i will tell you the javascript code and the method to use it. One you are on the page where you have to select all of your friends follow the following steps. I will suggest you to use Google Chrome.
Step 1: Scroll down in the facebook Select Friends box so that the complete friends list is loaded.
Step 2: Press F12 and go to console tab.
Step 3: Paste the following code into it and press "Enter".

javascript:var x=document.getElementsByTagName("input");for(var i=0;i<x.length;i++) {if (x[i].type == 'checkbox') {x[i].click();}}; alert('Done, all your friends have been selected');

Step 4: Wait for a while till the javascript works. It might take 1 or 2 minutes depending upon the number of friends you have got.
Step 5: It will display a message when all friends are selected. Press "OK" to clear it and then Press "Invite" button on FB.

How to make Dynamic URL in HTML by using Events

Its quiet easy to make dynamic URLs if you are using Javascript or PHP. But if you want to use pure HTML then what will u do ? In this post i will tell you a very simple code in HTML to create a dynamic URL.

What is Dynamic URL ?

A dynamic URL is an address which is generated by a web page when it is needed. It can also be called Dynamic Hyperlinks. To understand it better lets take a look at Static URL( or Static Hyperlinks).

HTML Code

<a href="http://www.facebook.com/sharer.php?u=http://bestrix.blogspot.com" target="_blank" rel="nofollow">Share on Facebook</a>

Output:

Share on Facebook

This Hyperlink contain a Static URL which will always remain same, no matter which post you are reading. It will share the homepage of my website i.e http://bestrix.blogspot.com on facebook. But here need some dynamic URL which can change itself to current post's address, so that it can be shared by users.

How to create Dynamic URL ?

Now i will write a code that will generate Dynamic Hyperlink, as the URL will change itself to current post's address.

HTML Code

<a href="http://www.facebook.com/sharer.php?u=http://bestrix.blogspot.com" target="_blank" rel="nofollow" onmouseover="this.href='http://www.facebook.com/sharer.php?u='+encodeURIComponent(location.href);">Share on Facebook</a>

Output:

Share on Facebook

As you can see that the above hyperlink points to share the current post's URL.
So you can use "onmouseover" event to change the dynamic hyperlinks on your webpage.

This event is very simple.
onmouseover="this.href = 'urlHere';"
you can put it inside <a> tag to generate dynamic hyperlinks.

Marquee HTML Code Example to Pause onmouseover in Middle

Marquee HTML Code Example to Pause onmouseover

Today i have been trying hard to create a marquee which can be paused when we take the cursor over it. However it took me an hour to do so but in the end the answer was very simple. I am sharing it with you now.

Code:

<marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">It will pause onMouseOver</marquee>

Result:

It will pause onMouseOver

When you will take your mouse over the scrolling text, it will pause there and when you take it out, it will resume. This functionality is provided by two events : onmouseover and onmouseout.

This code looks very simple but you can use it in very interesting style. Inspite of writing the text inside marquee, you can put some images or some links to give a good look to your website. I will show you one such example below.

---------------------------------

These two images also have two hyperlinks on them. Thus marquee can be used in a much interesting ways. Play with it and you will find much interesting things in it.