Google +1, share, javascript callback

Google plus button, you can set a callback attribute to a js function,

<g:plusone href="http://youtubeplaylist.net" 
   callback="plusClick"></g:plusone>

In the callback js function, you can check the state, if they have clicked +1 or removed +1.

    function plusClick(data) {
        if (data.state == "on") {
            alert("+1");
            // +1
        } else if (data.state == "off") {
            // -1 (user took their +1 Away)
            alert("-1");
        }
    }
    (function () {
        var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
        po.src = 'https://apis.google.com/js/plusone.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();

There are some other js callback as well, such as onstartinteraction (when the +1 dialog popups up), onendinteraction (when +1 dialog close).

For more information, check out this google page, https://developers.google.com/+/plugins/share/#sharetag-parameters

Twitter, tweet button with javascript callback

Here is an example of using Twitter Web intents with js events callback.  This is the html anchor tag.

<a href="https://twitter.com/intent/tweet?text=&amp;url=http://youtubeplaylist.net&amp;via=ytubeplaylist" class="twitter-share-button">Tweet</a>

To allow the js events, you must include the widget.js to make it working. Here is the code in below,

    window.twttr = (function (d, s, id) {
        var t, js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return; js = d.createElement(s); js.id = id;
        js.src = "//platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
        return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } });
    }(document, "script", "twitter-wjs"));


Next, we use twttr.ready() to to bind events in this method, we can bind several events like, tweet, follow, retweet, favorite, click,

twttr.ready(function (twttr) {
        twttr.events.bind('tweet', function (event) {
            // Do something there
            alert("callback");
        });
		twttr.events.bind('follow', function(event) {
    		var followed_user_id = event.data.user_id;
    		var followed_screen_name = event.data.screen_name;
		});

		twttr.events.bind('retweet', function(event) {
		    var retweeted_tweet_id = event.data.source_tweet_id;
		});

		twttr.events.bind('favorite', function(event) {
		    var favorited_tweet_id = event.data.tweet_id;
		});
});

For more information, check out the twitter documentation, https://dev.twitter.com/docs/intents/events#waiting-for-asynchronous-resources

JQuery ajax request not working in IE9

I have some ajax get request on the web page and it works perfectly fine in Firefox and Chrome. But it is not working with IE at all. After some research, I found out I need to specify the dataType and allow cross domain.

Before I have,

            $.ajax({
                type: "GET",
                url: 'http://example.com/abc',
                error: function (xhr, statusText) {
						//log error                    
                },
                success: function (data) {                    
						//process data
                }
            });
        }

After I have specify the dataType, contentType and crossDomain, it works straight away.

            $.ajax({
                dataType: "jsonp",
                contentType: "text/json; charset=utf-8",
                crossDomain: true,
                type: "GET",
                url: 'http://example.com/abc',
                error: function (xhr, statusText) {
						//log error                    
                },
                success: function (data) {                    
						//process data
                }
            });
        }

This little tip saved my day!

Using twitter bootstrap with bottom sticky footer

Nowadays, more website comprises 3 components. header, body and footer. With bootstrap, you can get it done even quicker. Here I created a sample start up project with most common layout in the world: Top fixed header, body and bottom sticked footer.

Here are some codes of the _layout.cshtml (if you are using MVC) or masterpages (asp.net) or any other languages whatever you call it.

For header section, use the bootstrap default “navbar” classes, you can set it to “navbar-fixed-top” or not, it is your choice. Set to top fixed, the header bar is always visible when you scrolling down.

    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a href="/" class="brand">Brand name</a>
                <ul class="nav">
                    <li><a href="">Home</a></li>
                    <li class="divider-vertical"></li>  
                    <li><a href="">Products</a></li>
                    <li class="divider-vertical"></li>
                    <li><a href="">FAQ</a></li>
                </ul>
                <ul class="nav pull-right">
                    <li><a href="">Register</a></li>
                    <li><a href="">Login</a></li>
                </ul>
            </div>
        </div>
    </div>

For body section, I created a “wrap” div outside the “main” div, this is to make sure the footer stays after it. You will know what I mean after I show you the CSS

    <div id="wrap">
    <div id="main" class="container clear-top">
        <div class="row"> 
            <div class="span12">
                @RenderBody()        
            </div>
        </div>
    </div>
    </div>

For footer section, using <footer> is completely ok with modernizer, and I created a 3 columns with same size for your footer navigation links.

    <footer class="footer" style="background-color:#c2c2c2;">
        <div class="container" style="margin:0 auto;">
            <div class="row">
                <div class="span2 offset2">
                    <h4>Company</h4>
                    <ul>
                        <li><a href="">About Us</a></li>
                        <li><a href="">Contact</a></li>
                    </ul>
                </div>
                <div class="span2 offset1">
                    <h4>Resource</h4>
                    <ul>
                        <li><a href="">Get help</a></li>
                        <li><a href="">FAQ</a></li>
                        <li><a href="">Support</a></li>
                    </ul>
                </div>
                <div class="span2 offset1">
                    <h4>Connect</h4>
                    <ul>
                        <li><a href="" title="Facebook">Facebook</a></li>
                        <li><a href="" title="Twitter">Twitter</a></li>
                        <li><a href="" title="LinkedIn">LinkedIn</a></li>
                        <li><a href="" title="Google+">Google+</a></li>
                        <li><a href="" title="RSS">RSS</a></li>
                        <li><a href="" title="Blogs">Blogs</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </footer>

Now let’s see the CSS,

/* styles for layout */
html,body
{
    height:100%;
}

#wrap
{
  min-height: 100%;  
}

#main
{
    overflow:auto;
    padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer 
{
    position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;
    padding-top:20px;
    color:#fff;
} 

Your footer is sticked to the bottom always.

To download the project sample, go to codeplex

http://bootstrapfooter.codeplex.com/

Bootstrap from Twitter is missing a date-picker

Bootstrap is awesome, light weight. I think it is a great replacement of JQuery UI. But there are still a few elements missing from Bootstrap. Such as the very important one: date picker.

I found someone has done a plugin for it. It is pretty cool.

Here it is. http://www.eyecon.ro/bootstrap-datepicker/

To create a date picker, write the markups as follow,

    <div class="input-append date" id="dp3">
    
    <span class="add-on"><i class="icon-th"></i></span>
    </div>

image

Call the javascripts,

$('.datepicker').datepicker()

There are a few events that you can register as well,

show

This event fires immediately when the date picker is displayed.

hide

This event is fired immediately when the date picker is hidden.

changeDate

This event is fired when the date is changed.

    $('#dp5').datepicker()
    .on('changeDate', function(ev){
    if (ev.date.valueOf() < startDate.valueOf()){
    ....
    }
    });

————————-

Good stuff!

Mr. Data Converter, converting csv to other formatted strings

This is a pretty cool JS plugin to convert csv formatted string to other formats.

It supports XML – Properties, XML – Nodes, JSON – Properties, JSON – Column arrays, JSON – Row arrays, Html tables, and others.

I found it very helpful for xml, JSON and html formats.

for example, a csv string as below,

ProviderName, ProviderID, OrganizationName
"Microsoft","jamcracker","Telstra"

The converted JSON – properties looks like,

[{"ProviderName":"Microsoft"," ProviderID":"jamcracker"," OrganizationName":"Telstra"}]

The converted JSON – Column array looks like,

{
  "ProviderName":["Microsoft"],
  " ProviderID":["jamcracker"],
  " OrganizationName":["Telstra"]
}

The converted JSON – Row array looks like,

[
  ["Microsoft","jamcracker","Telstra"]
]

The converted XML – Properties look like,

<?xml version="1.0" encoding="UTF-8"?>
<rows>
  <row ProviderName="Microsoft"  ProviderID="jamcracker"  OrganizationName="Telstra" ></row>
</rows>

The converted XML – Nodes look like,

<?xml version="1.0" encoding="UTF-8"?>
<rows>
  <row>
    <ProviderName>Microsoft</ProviderName>
    < ProviderID>jamcracker</ ProviderID>
    < OrganizationName>Telstra</ OrganizationName>
  </row>
</rows>

The converted Html tables look like,

<table>
  <thead>
    <tr>
      <th class="ProviderName-cell">ProviderName</th>
      <th class=" ProviderID-cell"> ProviderID</th>
      <th class=" OrganizationName-cell"> OrganizationName</th>
    </tr>
  </thead>
  <tbody>
    <tr class="lastRow">
      <td class="ProviderName-cell">Microsoft</td>
      <td class=" ProviderID-cell">jamcracker</td>
      <td class=" OrganizationName-cell">Telstra</td>
    </tr>
  </tbody>
</table>

So cool, isn’t it. Save tons of time for my development.

It is from the website, http://www.shancarter.com/data_converter/index.html

And to download from Github, https://github.com/shancarter/Mr-Data-Converter

Create a JQuery plugin for twitter-bootstrap “Confirm Modal popup”

There is a situation that we need user to confirm before they proceed their action. You don’t want to accidently delete very important information. So I come up the idea to extend the bootstrap modal popup to create a confirm modal before calling the function to delete some stuff.

(function ($) {
    $.fn.extend({
        //pass the options variable to the function
        confirmModal: function (options) {
            var html = '<div class="modal" id="confirmContainer"><div class="modal-header"><a class="close" data-dismiss="modal">×</a>' +
            '<h3>#Heading#</h3></div><div class="modal-body">' +
            '#Body#</div><div class="modal-footer">' +
            '<a href="#" class="btn btn-primary" id="confirmYesBtn">Confirm</a>' +
            '<a href="#" class="btn" data-dismiss="modal">Close</a></div></div>';

            var defaults = {
                heading: 'Please confirm',
                body:'Body contents',
                callback : null
            };

            var options = $.extend(defaults, options);
            html = html.replace('#Heading#',options.heading).replace('#Body#',options.body);
            $(this).html(html);
            $(this).modal('show');
            var context = $(this);
            $('#confirmYesBtn',this).click(function(){
                if(options.callback!=null)
                    options.callback();
                $(context).modal('hide');
            });
        }
    });

})(jQuery);

Basically,  all you need to do in the UI, is to create a link to activate the confirm modal, and a empty div for my plugin to work with. With options, you can pass in modal heading and modal content body. With callback method, is your logic to delete stuff or something you want to do originally.


<script type="text/javascript">
$(function () {
$("#openConfirmModal").click(function () {
$("#confirmDiv").confirmModal({
heading: 'Confirm to delete',
body: 'Are you sure you want to delete this record?',
callback: function () {
alert('callback test');
}
});
});
</script>
<a href="#" id="openConfirmModal">Open Confirm Modal</a>
<div id="confirmDiv"></div>