Shafiul Azam JavaScript, Tutorials, Web Development

Auto Shorten dynamic URL by javascript

Live Demo

Thinking of using bit.ly Url Shortening service in your site? You can use a simple javascript code in any page of your site, specially if it is a dynamic page. For example, look at a dynamic page of my online code compiling site:

The link of a dynamic page is somewhat this: http://shafiul.progmaatic.com/hostcode/compiled.php?i=wRZWM&c=252&ext=11

The link is too long. So, I automatically shortened the links, and gifted it to the viewers! 😉

how to use bit.ly in your site

How to use bit.ly service in your site

First, you need an account on http://bit.ly. To create one, go to the site and register.

Once you’ve registered, login and go to your Account page. There, you will find your API key.

Now, we’ve all the resources. Let’s go to the code section

The Code

Between the <HEAD> and </HEAD> tag of your page, place the following code:

	
  • 

    <script type="text/javascript" charset="utf-8" src="http://bit.ly/javascript-api.js?version=latest&login=******&apiKey=*****************"></script>
    •

    Replace the first ***** by your bit.ly username and second ************** by your bit.ly API key!

    Now, place the following code anywhere of your page. It is nothing but a text-input field, where shortened link will be placed. You can use anything instead of a text area, perhaps a <div>tag to display the shortened link!

    <h3>Link to this page</h3><br>
Use this link to tell others about this page! <input onclick = "this.select()" type = 'text' id = "qlink" style = "width:100%;">

<br><br>

    Now, the final task. Place the following code just before </BODY> the tag of you page:

    <script>
	// Bit.ly API
	BitlyCB.shortenResponse = function(data) {
			var sss = '';
			var first_result;
			// Results are keyed by longUrl, so we need to grab the first one.
			for     (var r in data.results) {
					first_result = data.results[r]; break;
			}
			sss = first_result["shortUrl"].toString();
			document.getElementById("qlink").value = sss;
	}
	BitlyClient.shorten(window.location, 'BitlyCB.shortenResponse');
</script>

    Yeah, you’re done! Now anyone entering the page with any query string, the link of the page with the query string will be automatically shortened 😀

    Shafiul Azam JavaScript, Web Development

    Insert All 64 Districts of Bangladesh By JavaScript

    Want to add all 64 Districts of Bangladesh by JavaScript in your web page?

    Perhaps you need to place a Choise box (<select> element) on your webpage, where a Bangladeshi can choose his/her district.

    You’ll be happy, I’ve coded it. Enjoy

    The Code

    The code is pretty self explanatory, view live or download from here. If you have questions, or can’t understand how to use it, you’re always welcome to ask me by commenting.

    Others

    How to add all Country & State list by javascript

    Shafiul Azam JavaScript, Tutorials, Web Development

    JavaScript: How to set ID Attribute to all text inputs/textarea of a page

    Well, sometimes we need to use ID Attributes of some HTML Elements of a web page. But, if any element lacks ID attribute, we’ll face trouble. So here is a script to automatically set IDs to all of your text <input type = “text”> tags and <textarea> Elements 😉

    Tasks:

    First we’ll check if the element already has an ID attribute [i.e <input type = “text” id = “myId”>]

    If it does has an ID, we will not change it. Else, we will set an ID dynamically to the content.

    What we actually do?

    • Loop through all input elements
    • Check if it is a text field. If yes, we check if it already have an ID
    • If yes, continue. Else, dynamically set an iD

    The Code

    Here goes the code snippet, enjoy 🙂

    Shafiul Azam JavaScript, Tutorials

    How to install Greasemonkey (User javascripts) In Opera

    Please note that not all Greasemonkey scripts run on Opera. However, most of them works just fine 🙂

    These scripts are called User JavaScripts on Opera.

    How to install an User JavaScript:

    Step 1

    Create a folder any where in your computer. Name it as you like (exapmle: MyOperaScript).

    Step 2

    Copy user script file on that folder.

    Step 3

    Launch Opera. Then Go to:

     Tools > Preferences  > Advanced > Content>JavaScript Option

    select the folder created in step 1.

    Click “OK” and exit preference window.

    Opera Greasemonkey Support

    That’s so simple! 😀

    Shafiul Azam JavaScript, Web Development

    Free JavaScript BirthDate picker, how to add Date select option by JavaScript

    Howdy! Today I’m going to share a free birthdate picker for your website. Just call the function birthdate_populate, pass the IDs of Date, Month and Year’s <SELECT> tags, and you are done!

    Code in action

    View the live Demo here!

    How to use

    First, we need to include the javascript file birthdate.js to your html page. Put the following code in your <head></head> section:

    <script type="text/javascript" src ="birthdate.js">

    Now in your <body> section, at first put Three <select> tags to pick the date. Give them appropritae name and ID

    Choose your Birthday:
                <SELECT id ="date" name = "dd"></SELECT>
                <SELECT id ="month" name = "mm"></SELECT>
                <SELECT id ="year" name = "yyyy"></SELECT>

    Now is the main part. put this code just somewhere below your <select> tags:

    <script type="text/javascript">date_populate("date", "month", "year");</script>

    That’s it! You’re Done!

    Download Source Code

    Visit the official site here to download