Category: Tips and Tricks

Self Help+Push+Pull = Success

Problem: A man wants to climb a high wall, let see how he can do this 🙂

Step 1: Self Help + Passion + Self Motivation , yes I must do it, I just need to do it 😀

Step 2: Take help from a Friend 1 who can push from land, there may be someone , just search a bit 😛

Step 3: Take help from a Friend 2 who can pull from top of wall, and you are done.

BTW, I tried to help myself with pen & paper to draw the pictures, so don’t laugh if they looks funny 😛

jQuery Masonry doesn’t work with Bootstrap Hidden Tab

Ref: jQuery Masonry
I think many of you face issue with bootstrap hidden. After a hidden tab is made visible many things doesn’t work for the new visible content as it’s container was hidden, jquery or other js library fails to get various property, example: height, width etc and even some common issues like scrollbar, masonry etc script doesn’t work. So I have a solution for this.

Here is the common declaration about a bootstrap based tab.

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
      <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Howdy, I'm in Section 2.</p>
    </div>
  </div>
</div>

The above code will make a tabber based on BT. So now suppose in tab content pane we added Jquery Masonry. On first load the first tab will be visible and it’s masonry will work properly and 2nd tab will not as it should be actually but you will be unhappy about it and tear … 🙂 So here I am trying to how we can make this possible to work properly.

Let For adding masonry the html code for tab here.

<div class="tabbable"> <!-- Only required for left/right tabs -->
  <ul class="nav nav-tabs">
    <li class="active"><a masonid="mymasontabcon1" href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a masonid="mymasontabcon1" href="#tab2" data-toggle="tab">Section 2</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab1">
           <div id="mymasontabcon1">
               <div class="itembox">hi there</div>
               <div class="itembox">hi there</div>
               <div class="itembox">hi there</div>
           </div>
    </div>
    <div class="tab-pane" id="tab2">
           <div id="mymasontabcon1">
               <div class="itembox">hi there</div>
               <div class="itembox">hi there</div>
               <div class="itembox">hi there</div>
           </div>

    </div>
  </div>
</div>

Check in the above code for each anchor in li(tab) I added something like
masonid=”mymasontabcon1″ here attribute masonid is the div id of the div which we want to apply masonry. So suppose on dom ready we added masonry once.

Here we I did is calling the reload method of jquery masonry script but that need to be done after the tab’s container is shown. Otherwise we will not get proper output. I did this for each toggle of any tab, same thing is coded in the tab’s plugin included with BT.

 jQuery(document).ready(function(){     
    //this will certain happen when tab show method is done, that means we reload the masonry after the tab container is shown.
    jQuery('body').on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      e.preventDefault();     
      var mytarget = jQuery(this).attr('cbmasonid');      
      //it is taken that already masonry is added in each tab.  
      jQuery("#"+mytarget).masonry('reload' );  //here we call the reload method.
    })      
 });

Linkify url and hashtag for linkedin Status and share api

IF you are working with linkedin api and parsing status and share items for any user or company page then this small code will help to parse the status or share text (comes from api) to 1. linkify 2. Tagging 3. Linkify hashtag
Please note that linkedin doesn’t support any native @ handle for it’s own user based but all @ handle are for twitter user.

/**
 * Linkify url and hashtag
 * 
 * @param type string $status_text 
 * @return type string
 */
function linkify_linkedin_status($status_text){

    // linkify URLs
    $status_text = preg_replace(
        '/(https?:\/\/\S+)/',
        '<a href="\1">\1</a>',
        $status_text
    );


    // linkify twitter users
    //please note that any thing tagged using @ in linkedin takes to twitter
    $status_text = preg_replace(
        '/(^|\s)@(\w+)/',
        '\1@<a target="_blank" href="http://twitter.com/\2">\2</a>',
        $status_text
    );


    // linkify hash tags
    $status_text = preg_replace(
        '/(^|\s)#(\w+)/',
        '\1#<a target="_blank" href="http://www.linkedin.com/signal/?keywords=%23\2">\2</a>',
        $status_text
    );

    return $status_text;
}

jQuery TinyScrollbar doesn’t work in hidden container or tab or div : Why ?

Q: jQuery TinyScrollbar doesn’t work in hidden container or tab or div : Why ?

Answer:

I think this is problem  with jquery or as how the DOM works. When any parent div is hidden using css property display:block;  jquery can not determine the width, height etc for any child element (example div)  and this also happens for jquery tinyscrollbar plugin. I wasted almost 4/5 hours to get what the hell is happening as I was trying to add custom scrollbar in a tabber, tab tab tab … pa pa pa. But it was not working for inactive tabs (divs)

Solutions: After debuging jquerytinyscrollbar plugin’s js code I found

for method “update” it had code like

oViewport[ options.axis ] = oViewport.obj[0][ 'offset'+ sSize ];
oContent[ options.axis ]  = oContent.obj[0][ 'scroll'+ sSize ];

and for hidden tab those oViewport.obj[0][ ‘offset’+ sSize ] and oContent.obj[0][ ‘scroll’+ sSize ] gives wrong height or width or just 0. So tha scrolling ratio doesn’t work which is calculated just after that like

 oContent.ratio            = oViewport[ options.axis ] / oContent[ options.axis ];

What we tried is we used another jquery plugin named jquery Actual which helps to get actual attributes of hidden element.
http://dreamerslab.com/blog/en/get-hidden-elements-width-and-height-with-jquery/

https://github.com/dreamerslab/jquery.actual/blob/master/jquery.actual.js

So add the jquery actual plugin first then include the jquery tinyscrollbar plugin. Now you need to be little brave to modify the jquery tinyscrollbar plugin.
So now update the update method like this

oViewport[ options.axis ] = oViewport.obj[0][ 'offset'+ sSize ];
            oContent[ options.axis ]  = oContent.obj[0][ 'scroll'+ sSize ];

            sSizecb                       = sAxis ? 'width' : 'height'; 
            var oViewportaxis             = $(oWrapper).children('div.viewport').actual(sSizecb) ;
            var oContentaxis              = $(oWrapper).children('div.viewport').children('div.overview').actual(sSizecb) ;                        
            
            oViewport[ options.axis ]     = oViewportaxis;
            oContent[ options.axis ]      = oContentaxis;

Download the full source code from here.

Also while adding tinyscrollbar I used some extra care, for inactive tabs more careeeeeeeeeeee.

Here are more sample codes if that helps ,
Please note that for making the scrollbar compatible with tinyscrollbar we need to add some extra div like “overview”

jQuery(document).ready(function(){                           
            //height is asumed 200px
            //for scrollbar one, element id scrollbar1
            jQuery('#scrollbar1').children().wrapAll('<div class="viewport"><div class="overview"></div></div>');
            jQuery('#scrollbar1').prepend('<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>');
            jQuery('#scrollbar1').tinyscrollbarcb();
           
            for scrollbar two , element id scrollbar2,
            jQuery('#scrollbar2').children().wrapAll('<div class="viewport"><div class="overview"></div></div>');
            jQuery('#scrollbar2').prepend('<div class="scrollbar"><div class="track"><div class="thumb"><div class="end"></div></div></div></div>');

            jQuery('#scrollbar2').children('div.viewport').css({height:"200px"});
            jQuery('#scrollbar2').children('div.scrollbar').css({height:"200px"});
            
            jQuery('#scrollbar2').children('div.scrollbar').children('div.track').css({height:"200px"});
            jQuery('#scrollbar2').tinyscrollbarcb();                                                                
                                                                                                                                                                        
                                                                                                                                                                                                                        
    });  

Thanks for reading.

Fixing ‘DS’ error in joomla 3.0 alpha

I was checking the Joomla! 3.0.0_Alpha1 version and got an error after installing one of extension that shows Directory separator constant DS error. So if you get such error for any of your extension try this code

if(!defined('DS')){
    define('DS',DIRECTORY_SEPARATOR);
}

May be making a system plugin can solve this problem. I developed one 😛

  Fix DS error in joomla 3.0 (1.3 KiB, 1,415 hits)

BTW, we develop custom joomla extension at codeboxr.com

Quick tips to work with joomla caching in different joomla versions

Here just some quick tips about how to use joomla caching in joomla extensions , here for module and component.

For joomla 1.5 module caching:


//$params, $module are global parameter here , can be used in default.php or have to pass in helper method.
$enable_cache 		=   $params->get('cache',0);
$cachetime		=   $params->get('cache_time',0);
//for 1.5
if($enable_cache == 1) {
    $conf =& JFactory::getConfig();
    $cache = &JFactory::getCache($module->module);
    $cache->setLifeTime( $params->get( 'cache_time', $conf->getValue( 'config.cachetime' ) * 60 ) );
    $cache->setCaching(true);
    $cache->setCacheValidation(true);
    $output =  $cache->get( array('modClassname', 'getMethod'), array($params, $module));
} else {
    $output = modClassname::getMethod($params,$module);
}

For joomla 1.6 we do the same thing in following way

$cacheparams = new stdClass;
$cacheparams->cachemode = 'safeuri';
$cacheparams->class = 'modClassname';
$cacheparams->method = 'getMethod';
$cacheparams->methodparams = array($params,$module);
$cacheparams->modeparams = array('id'=>'int','Itemid'=>'int');
$output = JModuleHelper::moduleCache ($module, $params, $cacheparams);

For joomla 1.5 and 1.6 compatibility we can code like this which will work for both joomla version

$enable_cache 		=   $params->get('cache',0);
$cachetime		=   $params->get('cache_time',0);
if(version_compare(JVERSION,'1.6.0','ge')) {
    $cacheparams = new stdClass;
    $cacheparams->cachemode = 'safeuri';
    $cacheparams->class = 'modClassname';
    $cacheparams->method = 'getMethod';
    $cacheparams->methodparams = array($params,$module);
    $cacheparams->modeparams = array('id'=>'int','Itemid'=>'int');
    $output = JModuleHelper::moduleCache ($module, $params, $cacheparams);
}
else{
    //for 1.5
    if($enable_cache == 1) {
            $conf =& JFactory::getConfig();
            $cache = &JFactory::getCache($module->module);
            $cache->setLifeTime( $params->get( 'cache_time', $conf->getValue( 'config.cachetime' ) * 60 ) );
            $cache->setCaching(true);
            $cache->setCacheValidation(true);
            $output =  $cache->get( array('modClassname', 'getMethod'), array($params, $module));
    } else {
            $output = modClassname::getMethod($params,$module);
    }
}

Note: here I assumed the modClassname is the class name of the helper and modMethod is the method used to handle the caching part. In next post I will write something about the component caching and in 3rd one post about how to caching when we are not doing any function call or how about handle caching in plugin. Let me have time for the next post.

কপাল ! লোকজন কেমনে বুঝল আমি বড় মনিদের ভিডিও দেখছি অমুক সাইটে !!

“কপাল ! লোকজন কেমনে বুঝল আমি বড় মনিদের ভিডিও দেখছি অমুক সাইটে !!”  এই রকম অনুভূতি যে কারো হতে পারে। তবে কেন  এবং কিভাবে অন্য কেউ বুঝে ফেলছে থলের বিড়াল 🙂 এমন প্রশ্ন মনে আসতেই পারে।

যাই হোক এতক্ষন মজা করছিলাম। তবে ঘটনা হচ্ছে অনেকেই অনেক সাইটে একটা নিউজ পড়ছে বা ভিডিও দেখছে বা ব্লগ পড়ছে তা আবার অন্য ফেসবুক বন্ধুরা জেনে যাচ্ছে। যেমন একটা উদাহরণ দেওয়া যাক। হঠাৎ আপনার ফেসবুকের হোম পাতায় দেখলেন একটা পোস্ট

“Mr. X watched a video on Dailymotion”

Continue reading

সম্ভাবনাময় নতুন তিনটি সোস্যাল নেটওয়ার্ক

ফেসবুক কিংবা টুইটার দীর্ঘদিন ধরে রাজত্ব করে যাচ্ছে আর সেই সাথে গুগল প্লাস এসে নিজের ব্যর্থ অবস্থান তৈরির চেস্টা করে যাচ্ছে। এতোদিন আমরা একটা সোস্যাল নেটওয়ার্কেই ক্ষুদ্র/বড় বার্তা শেয়ার(স্ট্যাটাস আপডেট), ছবি শেয়ার, ভিডিও শেয়ার ইত্যাদি করতাম… যেমন ফেসবুকে একই সাথে স্ট্যাটাস আপডেট, ছবি, ওডিও, ভিডিও, নোট লেখা, গেম খেলাসহ অনেককিছু করা যাচ্ছে। কিন্তু আমার মনে হচ্ছে আগামীতে এই ধারা অচিরেই এলোমেলো হয়ে যাবে… শুরু হবে ছবি শেয়ার নেটওয়ার্ক, ভিডিও শেয়ারিং নেটওয়ার্ক … একটা ব্যাপার হচ্ছে এই ধরনের সাইট কিন্তু আছে যেমন ফ্লিকার কিংবা ইউটিউব তবে এখানে যতনা বেশি শেয়ার হয় তার থেকে নেটওয়ার্কিং বা ফলোয়িং-ফলোয়ার সম্পর্ক এর টানাপোড়েন নিতান্তই কমই হয়। আর তাই খুব কম সময়ে তিনটি সোস্যাল নেটওয়ার্ক নতুন করে জায়গা করে নিচ্ছে যারা যথাক্রমে ছবি, ভিডিও এবং ওডিও শেয়ারিং সোস্যাল নেটওয়ার্ক …

পিন্টারেস্ট(http://pinterest.com/)

চিল(http://chill.com)

দিজইজমাইজ্যাম(http://www.thisismyjam.com/)

Break long url or word using css to prevent overflow of div container

First of all I am not design expert, not a designer but I learnt many thing about design I mean css, html while working with website projects. Something gave me pain when I found a long url is getting outside of a box(div) in google chrome. After a google search I found a solution… need to use word break though it doesn’t support all browser.

See how a long url go outside of a div box

I found a solution

.box{
white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap;    word-wrap: break-word;
}

thanks