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 ?


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 ];

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 ];

What we tried is we used another jquery plugin named jquery Actual which helps to get actual attributes of hidden element.


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;


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”]
//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>’);

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>’);




Thanks for reading.

Facebook fanbox wordpress plugin

It’s just a simple fanbox widget as wordpress plugin, nothing to explain. But I made my own version ?


  • iframe method
  • auto detect ie(internet explorer), because sometimes it’s make problem for ie and option to use as iframe only for ie !
  • jquery based document ready facebook load ! Not clear ? see bellow

One thing to note that I used a way to load the facebook js script after loading jquery as normally in wordpress site front end we use jquery and many plugin uses this… so we can take that jquery is using default. So I loaded the fb js using wp_enqueue function and then called the fb init function after the document is loaded using jquery dom ready function 😛 … It’s just an experiment about slow loading of facebook fanbox widget in wordpress 😀


[download id=”23″]

If you just download with no comment and no recommendation to others, then I am planning to hate you 😛
Man at least share in social network and give me traffic so that I can have more money from ads 🙁

Good morning. It’s just morning after working whole night and I am feeling too hungry 🙂
Continue reading

Using wordpress native thickbox

To know about what is thickbox please check this link. WordPress use this a main popup window or modal view. Thickbox is a jquery plugin and it’s available with wordpress with jquery. So my tips is how to use that in front end , using the thickbox available with it, no need to use externally.

ThickBox is a webpage UI dialog widget written in JavaScript on top of the jQuery library. Its function is to show a single image, multiple images, inline content, iframed content, or content served through AJAX in a hybrid modal.

At first let me tell you where you can get it if u search wordpress directory manually. Just check in wp-includes\js where you will get all the js library and plugins used with wordpress or available for use with plugin and theme. And here is every thing you need for thickbox
Continue reading

RSS news ticker using jquery and Slick RSS module in joomla

newstickerLet me clear first about what is Slick RSS

Slick RSS is a joomla module that Parse and Display RSS Feed News with DHTML Teaser Tooltip. For details pls visit this link.

ok , let me tell what I am going to do next. That module is great to show rss feed from another site and I want to use it as a news ticker and it can be named as rss news ticker. ok then let’s make it done.

I am going to use js library jQuery and it’s plugin BBCNewsTicker. Please download latest version of jquery and that plugin this the given link.

Now, install the module Slick RSS in your joomla site and publish in any module position. Now I am going to make little change in the module code so that it can be configured for newsticker.

open the file default.php from modules\mod_slick_rss\tmpl and check link near 39

Continue reading

Detect browser name and version using js

I was trying to detect browser version and browser name using java script. I got so many techniques but I am happy with jquery’s one. It’s pretty simple and small block of code. Just check the bellow code that I got from jquery. As it is not possible to use the whole js library all the time but I like to use some part of it or follow the techniques for cross browser tasks. 😀
[sourcecode language=’css’]
//Detect browser version
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
var browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent )
alert(‘Browser Version=’+browser.version.toString()+ ‘ Safari=’+(browser.safari? ‘Yes’: ‘No’)+’ Opera=’+(browser.opera? ‘Yes’: ‘No’)+’ IE=’+(browser.msie? ‘Yes’: ‘No’)+’ FF=’+(browser.mozilla? ‘Yes’: ‘No’));
//end browser detection

Edit: Here one thing you may be confused about the test() method. It’s a builtin function in js. The test() method is used to search for a match of a regular expression in a string.

Here’s some links about Test();

  1. Email Address valiadtion
  2. W3 school link