Author Archive

Create a TinyURL using PHP and TinyURL API

Posted by vivek in PHP, Web Service on November 24th, 2009

TinyURL is an awesome service. For those who don’t know what TinyURL is, TinyURL allows you to convert your long URLs like “http://www.akchauhan.com/category/jquery/” to small URLs like “http://tinyurl.com/yz4c4ba”. Basically you need such type of service when you are posting your data to some third party web service and there is limit on the number of characters you can post like Twitter. Twitter only allow 140 characters long Tweet.

Using the PHP and TinyURL API, you can create these tiny URLs.

function get_tiny_url($url)  
{  
	$ch = curl_init();  
	$timeout = 5;  
	curl_setopt($ch,CURLOPT_URL,'http://tinyurl.com/api-create.php?url='.$url);  
	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);  
	curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,$timeout);  
	$data = curl_exec($ch);  
	curl_close($ch);  
 
	return $data;  
}
 
//test it out!
$new_url = get_tiny_url('http://www.akchauhan.com/category/jquery/');
 
//returns http://tinyurl.com/yz4c4ba
echo $new_url;

,

6 Comments


Getting Browser Information using JQuery

Posted by vivek in JavaScript, jQuery on June 23rd, 2009

One day every browser will act in same way and support same web standards. However, that’s not today. In a sufficiently complicated web application, it’s important to know which browser user is using so we can know which JavaScript functions are available and which CSS properties it supports. Here, I am showing how you know about the users browser using JQuery. We can find lot of information about users browser like its name, version number etc through jQuery.

At the highest level, JQuery offers an object called browser that contains some simple flags to determine which one of the major browsers is currently being used – Safari, Opera, IE, or Mozilla.

   $(document).ready(function(){
 
    var browser;
    if($.browser.mozilla)
      browser = "Firefox";
    else if($.msie)
      browser = "Internet Explorer";
    else if($.browser.opera)
      browser = "Opera";
    else if($.browser.safari)
      browser = "Safari";
    else
      browser = "Unknown";
 
    $('#browserName').append(browser);
  });

Create a DIV so in your page so you can see the output of this JavaScript.

 <div id="browserName">Your Browser: </div>

When you execute the code, the output should look something like below. If you are using Safari.

Your Browser: Safari

,

No Comments


A Simple Modal Window Using CSS And JQuery

Posted by vivek in CSS, HTML, JavaScript, jQuery on May 24th, 2009

Simple Modal Window Using CSS and jQuery

Simple Modal Window Using CSS and jQuery


In this tutorial, I’m going to share how to create a simple attractive light weight modal window with jQuery and CSS. I like jQuery, because it makes everything so simple and so easy.

You can view the working demo here.

Right, let’s start, this example will show you how to create a modal window that will display the content of a DIV using its #ID.

For jQuery, please include jQuery file in your page where you want to use this model window.

1. HTML code 

# <!-- #dialog is the id of a DIV defined in the code below -->
# <a name="modalwindow" href="#open">Open</a>
#
<div>
#
#     <!--You easily customize your window here -->
#
<div class="window">
#         <strong>Testing of Modal Window</strong> |
#
#         <!-- close button is defined as close window -->
#         <a class="close" href="#">Close window</a>
#
#</div>
#
#     <!-- Do not remove div#hide, because you shall need it to fill the whole screen -->
#
#</div>

2. CSS code

 
# /* Z-index of #hide must lower than #container .window */
# #hide {
#   position:absolute;
#   z-index:9000;
#   background-color:#000;
#   display:none;
# }
#
# #container .window {
#   position:absolute;
#   width:440px;
#   height:200px;
#   display:none;
#   z-index:9999;
#   padding:20px;
# }
#
#
# /* Customize your modal window here, you can add background image too */
# #container #openbox {
#   width:375px;
#   height:203px;
# }

3. Jquery code

# $(document).ready(function() {
#
#     //select all the a tag with name equal to modalwindow
#     $('a[name=modalwindow]').click(function(e) {
#         //Cancel the link behavior
#         e.preventDefault();
#         //Get the A tag
#         var id = $(this).attr('href');
#
#         //Get the screen height and width
#         var hideHeight = $(document).height();
#         var hideWidth = $(window).width();
#
#         //Set heigth and width to hide to fill up the whole screen
#         $('#hide').css({'width':hideWidth,'height':hideHeight});
#
#         //transition effect
#         $('#hide').fadeIn(1000);
#         $('#hide').fadeTo("slow",0.8);
#
#         //Get the window height and width
#         var winH = $(window).height();
#         var winW = $(window).width();
#
#         //Set the popup window to center
#         $(id).css('top',  winH/2-$(id).height()/2);
#         $(id).css('left', winW/2-$(id).width()/2);
#
#         //transition effect
#         $(id).fadeIn(2000);
#
#     });
#
#     //if close button is clicked
#     $('.window .close').click(function (e) {
#         //Cancel the link behavior
#         e.preventDefault();
#         $('#hide, .window').hide();
#     });
#
#     //if hide is clicked
#     $('#hide').click(function () {
#         $(this).hide();
#         $('.window').hide();
#     });
#
# });
#

, ,

2 Comments