Programming

qtip2 is very handy to show/hide additional information on websites. The qtip content is by default cached to minimize unnecessary fetching. However though, sometimes it’s desirable to fetch for new content every time the tooltip comes up. In that case, use the once : false attribute to force re-fetching of new content. $('#my_dom_element').qtip({ content: { text: 'loading...', ajax: { url: 'my_content.php', once: false // need to re-fetch every time }, title: { text: 'My title', button: true } }, position: { at: 'left center', // Position the tooltip above the link my: 'right bottom', viewport: $(window), // Keep the tooltip on-screen at all times effect: false // Disable positioning animation }, show: { event: 'mouseenter', solo: true // Only show one tooltip at a time }, hide: 'unfocus', style: { classes: 'ui-tooltip-wiki ui-tooltip-light ui-tooltip-shadow', width: '800px' } });

For some reasons the default highcharts pie chart has no url links. Or at least that feature is not being demo’ed. See their example here: http://www.highcharts.com/demo/pie-basic. After tweaking the code for a while, here is the code that enables URL links in a pie chart. var chart; $(document).ready(function() { chart = new Highcharts.Chart({ chart: { renderTo: 'my_chart_id', plotBackgroundColor: null, plotBorderWidth: null, plotShadow: false }, title: { text: 'my_title' }, tooltip: { formatter: function() { var y = this.y; var p = Math.round(this.percentage*100)/100; return ''+ this.point.name +': ' + y + ' (' + p + '%)'; } }, plotOptions: { pie: { allowPointSelect: true, cursor: 'pointer', dataLabels: { enabled: false }, showInLegend: true } }, series: [{ type: 'pie', name: 'overall', point: { events: { click: function(e) { //this.slice(); //console.log(e); location.href = e.point.url; e.preventDefault(); } } }, data: [ {name: 'Not Tested', color: '#FFA850', y: 87, url: 'http://my_site1.com'}, {name: 'Fail', color: '#FF2929', y: 2, url: 'http://my_site2.com'}, {name: 'Pass', color: '#31FF4F', y: 32, url: 'http://my_site3.com'} ] }] }); }); The part that enables the clicking is the new url key in data, and the event handling. ...

Say you wrote some code below for projectA. function do_task(){ // init my_init(); // calling a class function $v = class_A::some_method($p1, $p2, $p3, $p4, $p5, $p6, $p7); // return return $v; } Now, your boss loves it. Then he asks you to do a very similar thing for projectB. Naively, you may do: function do_task($project_type){ // init my_init(); // calling a class function if ($project_type == "projectA"){ $v = class_A::some_method($p1, $p2, $p3, $p4, $p5, $p6, $p7); }elseif ($project_type == "projectB"){ $v = class_B::some_method($p1, $p2, $p3, $p4, $p5, $p6, $p7); } // return return $v; } Um… it would work, but imagine if you will soon have projectC, and D, and on… and what if you need to add one more parameter to the some_method function? ...

Sometimes I have a long continuing string inside a table that messes up my table width. For example, SDFSDFDGFHDGREFGFGSDFGFGHGDSFGHJTYRGHTYYEGHJTRTWEGRTYEGFHERGHRETERHRTTWERHGEWGERGW That will give you a very wide column… Just how to squeeze the column to the width we specify? “Easy,” you might say, “just set the td width!” SDFSDFDGFHDGREFGFGSDFGFGHGDSFGHJTYRGHTYYEGHJTRTWEGRTYEGFHERGHRETERHRTTWERHGEWGERGW Nope. It turns out the same, one long continuous string. The root problem here is that, the table width is determined by the content, but not the width we specify! ...

When we have stats, often times the timestamp is involved. So, say we have a table like the following CREATE TABLE IF NOT EXISTS `my_stats_table` ( `id` int(11) NOT NULL AUTO_INCREMENT, `created_datetime` datetime NOT NULL, `value1` int(11) NOT NULL, PRIMARY KEY (`id`) ) Now, all I want is to grab data for each day. Of course, there could be many rows in a day, and there are many ways to handle that. In my case, I need to grab the last row since it’s most accurate. How to do that? ...

So now I assumed you already got memcache running. If not, check out my previous tutorial on how to do that. Now in your php project, include the following code somewhere in your init.php file. Or you can always make it object oriented if you like. # Connect to memcache: global $memcache; global $memcache_server_up; $memcache = new Memcache; $memcache_server_up = $memcache->connect('127.0.0.1', 11211); # check to see if memcache server is up function memcache_server_is_up(){ global $memcache_server_up; return $memcache_server_up; } # Gets key / value pair into memcache function getCache($key) { global $memcache; if (memcache_server_is_up()) { return $memcache->get($key); }else{ return ""; } } # Puts key / value pair into memcache function setCache($key, &$object, $timeout = 600) { global $memcache; if (memcache_server_is_up()) { return $memcache->set($key,$object,MEMCACHE_COMPRESSED,$timeout); } } My setup will work if you have only one memcache daemon running. If you have a few, then make your changes accordingly. ...

Finally got memcache working! I am compiling the steps here in case I need to do it again. First install libevent. This is a dependency to memcached, so need to get it. cd /tmp curl -OL https://github.com/downloads/libevent/libevent/libevent-2.0.17-stable.tar.gz tar -xvzf libevent-2.0.17-stable.tar.gz cd libevent-2.0.17-stable* ./configure make sudo make install Then install memcached. # Compile memcached utility cd /tmp curl -O http://memcached.googlecode.com/files/memcached-1.4.13.tar.gz tar -xvzf memcached-1.4.13.tar.gz cd memcached-1.4.13* ./configure make sudo make install At this point, if everything goes well, the memcache daemon should be ready to run. You can try the following to see if memcached returns anything to you. ...

Sometimes when you click on a qtip2 popup, you may want to close the popup somehow. For example, if your qtip2 popup contains a list of links, and clicking on the links will open up more popups. In that case, you would really want to close the previous qtip2 popup upon each link click. Well, here is how you can do that programmatically. $('.qtip:visible').qtip('hide'); Yeah, that’s it. Clean screen. Yeah~~~

My datatable was acting cool and all until I added a link to each integer element of a particular column. All of a sudden the sorting feature was acting weird. Before I had something like this 23 After adding a link, I have 23 It turns out after I added the links, the default sorting function is treating everything as string. So to fix that I will need to add custom sort function to explicitly tell datatable how I want to do my sorting. ...

Sometimes after working on a few TextMate windows, one of them will have its file directory tree drawer missing. I don’t know why this happens but to bring back the drawer, just go to the menu bar and click View -> Show Project Drawer. Also another tip is, if you prefer the drawer to come out from the right side but it always comes out from the left, all you need to do is 1. Hide the drawer 2. Move your TextMate window to the left side of your screen so there is not much space to display the drawer on the left 3. Show the drawer ...