Tips and Tricks

There are 66 posts filed in Tips and Tricks (this is page 3 of 7).

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

[code language=”javascript”]
oViewport[ options.axis ] = oViewport.obj[0][ ‘offset’+ sSize ];
oContent[ options.axis ] = oContent.obj[0][ ‘scroll’+ sSize ];
[/code]

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
[code language=”javascript”]
oContent.ratio = oViewport[ options.axis ] / oContent[ options.axis ];
[/code]

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

[code language=”javascript”]
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;

[/code]

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”

[code language=”javascript”]
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();

});
[/code]

Thanks for reading.

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:

[code language=”php”]

//$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);
}

[/code]

For joomla 1.6 we do the same thing in following way

[code language=”php”]
$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);
[/code]

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

[code language=”php”]
$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);
}
}
[/code]

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
[code language=”css”]
.box{
white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;
}
[/code]

thanks

Detect User type in joomla 1.6 or later

In Joomla1.5.x we can detect user type easily or check if a user is admin type.
[code language=”php”]
$isadmin = false;
$user =&JFactory::getUser();
if($user->usertype == "Super Administrator" || $user->usertype == "Administrator"){
$isadmin = true;
}
[/code]

But from joomla 1.6 as the user group architecture is changed the above way will not work.
From j1.6 we can do this in this way, here actually I was trying to detect if the user is super user or not like admin user in j1.5

[code language=”php”]
$isadmin = false;
$user =&JFactory::getUser();
$db = JFactory::getDbo();
//var_dump($user->getAuthorisedGroups());
$userid = intval($user->get( ‘id’ ));
if($userid > 0){
$query = $db->getQuery(true);
$query->select(‘g.title AS group_name’)
->from(‘#__usergroups AS g’)
->leftJoin(‘#__user_usergroup_map AS map ON map.group_id = g.id’)
->where(‘map.user_id = ‘.(int) $userid);
$db->setQuery($query);
$ugp = $db->loadObject();
$usertype = $ugp->group_name;
if(is_string($usertype)) $usertype = array($usertype);
if(in_array(‘Super Users’, $usertype)){
$isadmin = true;
}
//var_dump($usertype);
}
[/code]

thanks

My trouble story about ‘onContentPrepare’ hook for joomla

1. I was developing a content plugin for joomla, currently I was working with joomla1.6 or earlier.
2. My target was skip some specific or used defined category for the plugin execution as this is very useful feature.
3. It works in article details page but doesn’t work in other view of com_content component. Why
4. Here is the function that get’s hooked in content plugin for onContentPrepare
Continue reading →