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 😀

    Advertisements

    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

    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 🙂

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

    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

    PHP Alert / Message box – Transparent & Cool! Javascript animated msgbox

    Tired of using JavaScript’s ugly Alert() function? Or PHP’s Ugly die() function to display an error or message? You’re in the right place! I’ve prepared a complete Alert Box or Message Box suite to use in javascript or PHP. Checkout the Screen-shot:

    Easy to Use!

    Just include the source-path and call the my_alert() function with parameters! Lots of optional arguments to spice it up…. you can call same function either in javascript or PHP, it’s up to you! 😀

    Full Demonstration and code examples

    Checkout easy documentations here…

    Free Download!

    Download

    Add Dropdown Country & State List Dynamically into HTML form by Javascript

    You can use a JavaScript to add all the country names and  state names’ Dropdown list. Which is actually done by HTMLand tag. I’ve written a JavaScript which can be simply inserted into your HTML file. Later, call my pre-defined functions and the country and state list will be automatically added into your HTML 🙂

    Live Demo!

    Check the code live here

    How to use?

    1. Copy the JavaScript code from the above link and save it in a file “countries.js”

    2. Put this code between yourandsection:

    &amp;lt;script type= "text/javascript" src = "countries.js"&amp;gt;&amp;lt;/script&amp;gt;
    

    3. Put this code between yourandsection:

     Select Country (with states):&amp;nbsp;&amp;nbsp; &amp;lt;select id="country" name ="country"&amp;gt;&amp;lt;/select&amp;gt;
    Select State: &amp;lt;select name ="state" id ="state"&amp;gt;&amp;lt;/select&amp;gt;
     &amp;lt;script language="javascript"&amp;gt;
    populateCountries("country", "state");
     &amp;lt;/script&amp;gt;
    

    Please note that, we are using twotags, which are actual drop-down boxes. Here I’ve chosen “country” and “state” as theirID attribute. You can choose any othe id attribute or name attribute as you like. But whatever you choose, you make to pass the correct IDs when calling the JavaScript Functions.

    If you only want Country list to appear on the page, Simply use following bit of code in Body section:

    Select Country:&amp;nbsp;&amp;nbsp; &amp;lt;select id="country2" name ="country2"&amp;gt;&amp;lt;/select&amp;gt;
    &amp;lt;script language="javascript"&amp;gt;
    populateCountries("country2");
     &amp;lt;/script&amp;gt;