Invite Facebook friends from Sencha Touch app

Recently I’ve been working on a Sencha Touch project which is based on facebook api. A very simple feature is to invite facebook friends to this app. I was ransacking into the facebook api docs, other websites to figure out how to do it from Sencha Touch. There is a PhoneGap plugin for this but we’re not going to use PhoneGap for this one. I need a very simple php based solution. First I tried a lot to do it from php sdk. Cos according to the application’s design the user will select his friends from a sencha touch list, click a button and the selected records will be passed to backend php script via Ext.Ajax.request. After spending several hours on this I figured out it is not possible to invite friends to app from php sdk! Grrr..

Now the only way left is javascript. Most people are still using fbml for this and I tried it first, it didn’t work and you know fbml is deprecated by facebook anyway. Next javascript sdk. Requests Dialog is the proper way of doing this.

function sendRequestToManyRecipients() {
  FB.ui({method: 'apprequests',
    message: 'My Great Request',
  }, requestCallback);
}

From iPhone this won’t look good. You need to add display:’touch’ with it and call the function from your sencha touch button’s handler.

function sendRequestToManyRecipients() {
  FB.ui({method: 'apprequests',
    message: 'My Great Request',
    display:'touch',
  }, requestCallback);
}

That’s it! Here is how it looks from iPhone 4:

Tags | facebook, invite friends, invite to app, JavaScript, PHP, Requests Dialog, sdk, Sencha Touch, source code

Maintain reference to popup window over page refresh or redirect in Javascript (solved)

I’m working on a live chat project where the chat window opens as a child popup. The parent window may get refreshed or user may go to another page to chat with someone else. The chat window should not get refresh when user goes from one page to another page or try to chat with a new user. Problem is reference to the child window gets lost when you refresh your parent window which is supposed to be as all the js variables get reinitialized.

// from parent window
var win = null;
if(win === null)
  win = window.open('chatwindow.php');
// unfortunately win will be null again when the parent
// window is refreshed or redirected to another link

I know this is how JS works but somehow I need to retain the child window reference in parent window even after page refresh. Here comes googling and found a lot of guys having the same issue like me and no workaround. First I thought about localStorage and cookies but they both have limitations.

When you are under same domain you can talk between parent-child window seamlessly which is fine. So from parent window we can say win.some_child_win_var = 5; and from child window we can say window.opener.parent_var = something; In the same way I can do this from child window:

// parent window       // child window
window.opener.win    =    window;

But the parent window will forget the child window reference upon refresh. So why not make the child keep on buzzing this!! I’m your child.. I am your child… lol

This is what I am doing:

childTimer = window.setInterval(function(){
 try{
  window.opener.win = window;
 } catch(e){}
}, 300);

And I can’t believe myself! It really works on all browsers even on ie(omg).

[Update] When the child window is closed we should assign the “win” to null:

window.onUnload = function(){
 try{
  window.clearInterval(childTimer);
  window.opener.win = null;
 } catch(e){}

Not sure if this is the best way of doing it. Your suggestions are most welcome.

Tags | child, JavaScript, js, maintain, page, parent, redirect, reference, refresh, retain, window

jQuery pushStack Sortable Tables

pushStack() is a very useful function to handle the jQuery stack. $.pushStack( elements, name, arguments ) is very handy when you need to apply a method on the array of DOM elements. Recently I was doing some experiment on pushStack to create a sortable table. You can see it in action here. The source code is self-explanatory. (In fact I’m very busy right now to explain it. lol)

Tags | example, free, JavaScript, jQuery, pushStack, Sortable, table, tutorial

jQuery Mix Photo Gallery

Recently I coded an interesting photo gallery using jQuery. I’ve named it “jQuery Mix Photo Gallery”. I’ve included the screen-shots here.

You may have a look at the live demo here. The photo gallery is free to download. Here is the download link. You may modify it according to your need and use it in your commercial projects. Please drop a comment if you like it and suggest me how can I make it much better.

Tags | album, download, free, gallery, image, JavaScript, jQuery, mix, photo, plugin

JSONP First Timer

You already know ajax is one-man’s-girl, no way to make it work cross-domain(not even subdomain) due to browsers’ same origin policy security restriction. But using ajax is so sleek, you can’t even resist yourself using it under different domains. There is always a way around for everything. Do I sound contradictory? Ajax is based on the XMLHttpRequest and as long as we use it we can’t do cross-domain data transfer. Let’s think something else other than ajax.

We are used to loading images, css, javascript files from other domains and it’s okay if we use any server-side dynamic link as the src, this is a common phenomena on web. For example:

<script type="text/javascript" src="http://www.other-domain.com/dynamic-js.php?id=5&name=Matt"></script>

There is no security restriction including javascript source from different domains, and fortunately enough you can pass GET variables (don’t over-expect for POST) with the url. This is how JSONP (JSON with padding) works, thanks to the open policy for <script> tag. May be you’r already thinking how to implement this idea, hold on! you don’t need to reinvent the wheel.

Here comes jQuery’s $.getJSON(), with this function you can pass url of another domain and get JSON data. Lemme warn you, for the very first time most of you won’t be able to make it work. Here is an example:

$.getJSON("http://www.other-domain.com/dynamic-js.php?id=5&name=Matt&jsoncallback=?",
function(data){
    // your code goes here
});

You need to understand this “jsoncallback=?” bit clearly. From your firebug Net panel you can see the “?” is replaced with “jsonp1277557614558″ (random value on each request).

The common mistake you’re gonna do is you expect to see something on firebug’s Console tab, but nothing there, once again JSONP is NOT Ajax request. This is merely an external javascript file being added to your document dynamically, if you don’t believe me on your firebug panel click the JS from Net tab to filter out the JS only(marked in the screen-shot above). You’ll definitely see the JSONP url there. This is the client-side part of $.getJSON(). The confusion still remains with the server-side code.

Back to “http://www.other-domain.com/dynamic-js.php?id=5&name=Matt&jsoncallback=?”, the file being called is dynamic-js.php. Put this one line of code in that file:

<?php print_r($_GET); ?>

And check the Response output from firebug’s Net tab. It’ll be something like:

Array
(
    [id] => 5
    [name] => Matt
    [jsoncallback] => jsonp1277557614558
)

In Ajax when the dataType is json the response from server-side script is just the json string:

{
	// your json data
}

Here is the most important part, unlike ajax for JSONP the $.getJSON() expects the response like:

 jsonp1277557614558({
	// your json data here
})

So you must wrap the json output with jsonp1277557614558( ). If you don’t do it the callback will fail silently without any error, which makes it tough to detect the exact problem. Remember the jsonp1277557614558 is a random string. For php the code will be something like this:

<?php
// your code here
// get the output in an array say $output_array
$jc = $_GET['jsoncallback'];
echo $jc . '(' . json_encode($output_array) . ')';
/*
// For ajax response, simply
echo json_encode($output_array);
// is enough
*/
?>

This is the most crucial thing, most programmers do the mistake for their very first time as there is no clear elaboration on $.getJSON documentation page. FYI, json_encode() function is not available on older version of php. You can get the php class from json.org.

Hope your $.getJSON() is now working!

Comments, criticism are most welcome.

Tags | critical, easy, getJSON, issue, JavaScript, jQuery, json_encode, JSONP, PHP, problem, solution, tough, tutorial

CSS Equal Height Columns

Once upon a time people used tables for designing website layout. Definitely table tag has many advantages but it’s not that flexible & extensile. You can not use proper positioning or floating attributes css style for table based layout. It’s not that commodious to handle table width/height from Dreamweaver, the layout gets messy when you drag any border of table, td or tr as the dimensions automatically get changed. The most important incentive for the current web sphere is SEO (Search Engine Optimization) which is dramatically & automatically mended when DIV based layout is used where TABLE based layout is toilsome for search bots to crawl & takes much page loading time. And at some point it makes more sense to use table for displaying tabular formatted data only, for example gmail uses table for the email list, this could be done using UL/LI, but table is more appropriate in this case.

Lately most web designers use DIV for page layout designing for its flexibility and robustness. Unlike table div has a big problem (in fact it’s the nature of div) when you want to give same height to multi-columns div based page layout, you can not do that very easily. I always used javascript for this purpose, but wished if I could do it with css, cos when the javascript is disabled the page layout will be not as expected in most of the cases.

Yes it is possible to create equal height columns with css! You can make the height of multiple floated divs equal using CSS only and no javascript or invalid css. Before beginning I assume you have adequate knowledge on HTML, CSS, javascript and you have already Firebug add-on installed on your Firefox

Lemme start from the beginning:

Default three column layout

Link to the HTML page

When you apply float left and fixed width to multiple adjacent divs, by default the layout looks like the above screen shot. You can see it from browser or have a look at the source code (html/css) on the following link above. You see as the contents are not same in the 3 divs, the height is different.
The next example is making the height of the 3 divs same using javascript (jQuery).

Three column layout – equal height using jQuery

Link to the HTML page

This is mostly and widely used for making equal height columns using javascript. I’ve used jQuery here. You may have a look at the source code from the link above.

$(function(){
	var H = 0;
	$("div").each(function(i){
		var h = $("div").eq(i).height();
		if(h > H) H = h;
	});
	$("div").height(H);
});

Now here comes the css equal height technique! The mantra is to use a large amount of bottom padding and the same amount of negative bottom margin to the floated divs and keep them inside an overflow hidden div. That’s all, and the magic happens!

Three column layout – equal height using pure CSS

Link to the HTML page

Let me get into details on how to do it. At First have a look at this link. Here I’ve used a huge amount (9000px) of bottom padding and the same amount of negative bottom margin (-9000px). But this makes the columns look so long and still not equal height at bottom. Now on this link I’ve used a holder div with overflow:hidden and that’s it, it is doing the magic by hiding the overflow section.

body{margin-bottom:50px}
div.holder { overflow:hidden }
div.holder div { float:left; width:30%; background-color:#9C0; margin-right:5px; padding:10px; padding-bottom:9000px; margin-bottom:-9000px }

Hope it’s clear now.

There is another method which use a background image with 1px height and color matched with the div’s bg color and body’s bg color. Please have a look at the html link, it’s self-explanatory.

Three column layout – equal height using pure CSS with Background Image

Link to the HTML page

Now I’ll try border to the columns and we’ll see the problem and it’s solution.

Three column layout – equal height with border

Link to the HTML page

Here you can see bottom border is missing which is obvious as we’ve used a huge bottom padding, from Firebug if you turn off overflow:hidden to the holder div and scroll down at the bottom of the page you’ll see the bottom border there but not equal height.
So how to solve this issue? There are 2 ways to do it – using a bg image in a tricky way or another pure tricky css hack.

Three column layout – equal height with bottom border fix using bg image

Link to the HTML page

Here I’ve used a 1px bg image for the background image and placed it at left-bottom of the bottom-border div with no-repeat and also applied 1px bottom padding. The holder div is inside the bottom-border div. Please feel free to play around with firebug!

This is the last method for bottom border fix without any bg image, just pure css.

Three column layout – equal height with bottom border fix using pure css and no bg image

Link to the HTML page

I’m not gonna explain the details of this last method, find it out yourself!

Get professional testking 1z0-007 web designing training to learn how to create different web site layouts with css format. Become expert using testking 642-415 design tutorials and testking 642-631 css live demos.

Tags | column, css, div, equal, excellent, hack, height, JavaScript, jQuery, layout, magic, multi-columns, pure, table, table-less, tableless, tricky, useful

jQuery Drop down menu without setTimeout

I worked a lot with drop-down menus like most of you. There are many stable versions of DD menus using pure javascript & CSS or only CSS with cross-browser support and you’ll get them free from many menu maker websites or desktop applications. So I’m not going to reinvent the wheel.

I’m a freaking fan of jQuery and always use it for drop-down menus with my custom jQuery code. It’s a must to use a delay for javascript driven dd menus even for jQuery when you want to give it some effect like slideDown or slideUp (For CSS dropdown menus it’s not possible & thus no need to use delay). I always wished to use jQuery without any setTimeout function for the drop-down menus. And I did it which I’m gonna share with you.

$(function () {
    $("ul>li").hover(function () {
        $(this).find("ul.sub").slideDown('fast');
        $(this).addClass("hover");
        $(this).hover(
        function () {},
        function () {
            $(this).find("ul.sub").slideUp('fast');
        });
    },
    function () {
        $(this).removeClass("hover");
    })
})

Here it is in action

The main tricky part is using hover inside hover function:

$(this).hover(
function () {},
function () {
    $(this).find("ul.sub").slideUp('fast');
});

This removes the mouseover function (first function of hover) when mouse hover into the li so the slideDown does not happen again when the mouse enter into the inner ul/li. Hope that makes sense. You may like to add a delay and do some more fine tunes.

Happy Coding!

Tags | css, dd, dd menu, delay, drop-down, dropdown, exceptional, hover, JavaScript, jQuery, menu, setTimeout, solution, uncommon, unique

Advanced cycle plugin integration

On my another post I mentioned that cycle is a great jQuery plugin. I use it very often for slideshow. Recently I used it on a project where the slideshow had many(20+) wallpaper sized images. So loading time was a great issue.

The default cycle integration includes all the images during page loading which is okay for small images, but highly affects the page loading time for high resolution images. cycle plugin is highly flexible! I fixed the issue by loading images dynamically one after another at the end of each slide, literally before the beginning of each slide.

Here is how I did it:

<div id="slideshow"><!-- slides will be added here --></div>

var gallery = ["images/1.jpg", "images/2.jpg", "images/3.jpg", "images/4.jpg", "images/5.jpg", "images/6.jpg", "images/7.jpg", "images/8.jpg", "images/9.jpg", "images/10.jpg", "images/11.jpg", "images/12.jpg", "images/13.jpg", "images/14.jpg"]; // and so on.. array of images
// Array clone function.
Array.prototype.clone = function () {
    var arr = new Array();
    for (var property in this) {
        arr[property] = typeof(this[property]) == 'object' ? this[property].clone() : this[property];
    }
    return arr;
}
var gal = null; // gal should be global as I'll use it inside onBefore function
$(function () {
    gal = gallery.clone(); // cloning the array is not mandatory, but doing so will keep the main array unchanged.
    $('#slideshow').empty().append('<img src="' + gal.pop() + '" /><img src="' + gal.shift() + '" /><img src="' + gal.shift() + '" />') // adding the last, first and second element of the array to the slideshow div, then start the cycle plugin.
    .cycle({
        startingSlide: 1,
        // this is required (1 is the 2nd slide) as the first slide is the last element of the array. if you use manual next/prev button clicking on #prev will show the first element.
        before: onBefore, // loads the next image at the beginning of each slide. (NOT all at once)
        next: "#next",
        prev: "#prev"
    });
    var totalSlideCount = 1 + gal.length;
    function onBefore(curr, next, opts, fwd){
        // at first addSlide is not defined, so we should return.
	if (!opts.addSlide) return;
	// if all the elements of the array are added no need to add them again!
        if (opts.slideCount == totalSlideCount) return;
	// shift or pop from slide array
        var nextSlideSrc = fwd ? gal.shift() : gal.pop();
	// add next slide
        opts.addSlide('<img src="' + nextSlideSrc + '" />', fwd == false);
    }
});

In this code above, cloning the array is optional. I used it as I needed the main array for later use. Probably you know if you use the global array reference to a local variable and apply pop()/shift()/push() functions to the local variable, the global one will be affected. cos the local variable is just a reference to the address of the global array variable.

At first the last, 1st and 2nd elements of the array are added to the #slideshow div and the cycle is started from the 2nd slide. Before starting of each slide onBefore function is called. The onBefore function adds new slide to the slideshow and stops when all the array elements are added to the slide.

You may use it for small size images also if you need to improve the page loading duration.

Tags | cycle, efficient, fast, image, issue, JavaScript, jQuery, load, loading time, onBefore, once, one, plugin, preload, reduce page loading time, slide, slideshow, slow

Print button for Google Map API

You can easily print google map from maps.google.com. But what about printing the map from gmap api you use on your own website? One way is to print the whole page which is not a good idea. Users want to print only the location of your business in a larger size for later purposes. Google map api does not provide any function to print the map or view it in printer friendly mode.

The only solution I found is using a simple javascript code for this purpose. At first place an image/text/button anywhere (obviously easily available to visitors) on the page that contains your map api. I prefer to use a small printer icon image. Apply onclick(inline or unobtrusive) event to the button to popup a page say print.html.

<img src="images/print.png" class="print" alt="print" title="print" onclick="window.open('print.html')" />

Now create an empty html document, name it print.html and put it in the root folder of your site. Place this simple javascript code inside body tag of print.html

<script language="javascript">
var contents = window.opener.document.getElementById("map_container");
document.write(contents.innerHTML);
window.print();
</script>

Replace the “map_container” with the #id you are using for your map container. That’s all, you are done!

This method is good enough for printing static google map layout. But you can not print driving direction as that line is drawn using canvas element. In fact you can not print the exact driving direction even from maps.google.com.

This is more or less a better solution for printing the map from your own website’s gmap api. Please lemme know if you know any smarter way to do it.

Join testking 642-515 web development course and learn the different tips and techniques with testking 642-566 videos and testking E20-540 demos to create dynamic web pages.

Tags | business, button, gmap, google map, Google Map API, JavaScript, js, location, print, print button for google map api

IE6 fix for select box over absolute positioned element

IE6 sux. General css/javascript hover drop-down menu uses a div or ul with position:absolute. No matter how much you increase the value of z-index the select box (windowed element) will always remain on top most – yes only on a special browser, Internet Explorer 6. The reason is IE6 considers select element as windowed element and keeps it always on top layer.

Solution is using iframe on top of select element, as iframe is also a windowed element placing it on top of select box fix the problem.

Here is the typical HTML code for this drop-down menu:

<div class="top-menus" style="left: 221px; top: 127px;">
<iframe frameborder="0" scrolling="no" align="bottom" marginheight="0" marginwidth="0" src="javascript:'';" style="height: 200px;"></iframe>
    <ul>
      <li><a href="#">Bracelets</a></li>
      <li><a href="#">Rings</a></li>
      <li><a href="#">Earrings</a></li>
      <li><a href="#">Necklaces</a></li>
    </ul>
</div>

The inline css is calculated using jQuery offset() function. FYI, you can easily get the width,height,left,top position of any element using jQuery(“element”).offset(). Make sure the width and height of the iframe is exactly same of it’s overlying UL element. If you apply any border to the UL, you have to consider that during calculating the proper width/height of the iframe.

This is the sample jQuery code:

var timer = null; // global
$("#top-nav a").hover(function(){
	clearTimeout(timer);
	$("#top-nav a:not('.cur')").removeClass("selected");
	$(this).addClass("selected");

	var o = $(this).offset();
	var left = o.left + 1; // 1px extra for border
	var top = o.top + 32; // 32px for placing it just below the horizontal menu
	if($(".top-menus").length){
		if(left == $(".top-menus").offset().left)
			return;
		else $(".top-menus").remove();
	}

	$("body").prepend('<div style="left:'+left+'px;top:'+top+'px;" class="top-menus"><iframe src="javascript:\'\';" marginwidth="0" marginheight="0" align="bottom" scrolling="no" frameborder="0"></iframe><ul>'+html+'</ul></div>');
		$(".top-menus").find(".parent, .child").remove();
		var hi = $(".top-menus").find("ul").height();
		$("iframe").height(hi + 2); // extra 2px for border

}, function(){
	clearTimeout(timer);
	timer = setTimeout(function(){$("body").find("iframe,.top-menus").remove(); $("#top-nav a:not('.cur')").removeClass("selected");},300);
});

$(".top-menus").live("mouseover",function(){
	clearTimeout(timer);
}).live("mouseout",function(){
	clearTimeout(timer);
	timer = setTimeout(function(){$("body").find("iframe,.top-menus").remove(); $("#top-nav a:not('.cur')").removeClass("selected");},300);
});

I know this code won’t exactly fulfill your requirement, you can get the main idea from this and write your own code yourself. You can see it in action on www.trendtogo.com.

Tags | absolute, code, css, div, drop down menu, free, ie6, iframe, internet explorer 6, JavaScript, jQuery, position, ul, windowed element