Move to Hash Using JQuery – Three Cases

Sometimes we need to implement smooth jump for hash link click, we can do it in many ways using javascript or jquery. There are lots of jquery plugins to do that, here I am trying to write simple jquery tricks that handles some specific situation to handle jump or hash link click or tracking.

My Target:

  1. Jump based on window hash url
  2. Hash link click for same page
  3. Hash based external link

#1 Jump based on window hash url

First case: if user is visiting with a hash url , so our duty is to help the user jump to the hash id

#2 & 3# Jump based on click

Second and third case is user click on any user, it can be simple hash link or a link with hash at end, So, only hash as link should be for same page, but any valid link with hash at end should be another page or external page.

All three cases are handled in below code sample, Marked the 3 situation in code using #

I covered the situation when there is hash link or hash in url but the hash id or html element doesn’t exists

Another thing to consider, while we move the user to the hash id/html element without moving to screen to that vertical point, it’s better to move 90-100 px less so that user can see the html element more clear, in terms of ux.

How to Disable Scroll History Restoration in Browser using Javascript

It’s default feature of browser that it saves scroll history. Suppose you scroll half window, now refresh browser will load from the half window. But sometimes we need a custom arrangement for this behavior of browser and disable this scroll history. To manipulate history of browser there is history api. Also, there is a blog post in google developer blog to clear this. Mozila firefox’s MDN web docs says this is experimental feature in firefox now , see the doc here.

I found two polyfill that helps to make this work in all most all modern browser except IE Edge.


Just include the polyfil and override the history restore behavior of browser

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.

New installation instruction for tinybn in joomla1.5.14+

Here I am back with tinybn(bangla writing plugin for popular wysiwyw editor tinymce). Oh please don’t think that I am trying to show you smiley face with new version of tinybn but new installation instruction for joomla 1.5.14+. Today a new user informed that the raw installation instruction for joomla 1.5.x is not correct … code is not matching 🙁
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

Submit form of iframe from parent window

In phpxperts yahoo group there was a thread about how to submit a form in a iframe outside the iframe I mean from parent window. I replied my idea using js but the iframe should be in same domain. The js code is like
[code language=”php”];[/code]
let me give u whole code. make a new file named frame.html and write the bellow code in that file
[code language=”php”]
<form id="myformid" name="myformname" method="post" action="" target="_self" onSubmit="">
Name: <input type="text" size="20" name="name" value="" id="namefield" />

and open a new file again and save in same dir with name index.html and write the bellow code in it
[code language=”php”]
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<title>Iframe form submit from outside</title>


<div id="infodivid"></div>
<iframe src ="frame.html" width="auto" height="40px" frameborder="0" id="myframeid" name="myframename">
<p><input onClick="submitiframeform(); return false;" type="button" name="submit" value="Submit" /></p>
<script type="text/javascript">

function submitiframeform(){;

now open the index.html in browser and click the submit button and see the form is getting submitted. I think If you just check the code then I don’t need to explain ‘what is why’.


Tinybn for jce as a joomla plugin

Dear Friends,

I know there is no update on tinybn for many days and it has so many bugs but I am not gone yet ! heh heh. I think who are very familiar with joomla and it’s content editor tinymce, are also familiar with jce(joomla content editor), a joomla conent editor based on tinymce with lots of feature. You can get jce here. Please check their donwload section to download the jce component and jce plugin/mambot(editor).

hmm, please don’t get sleep … I just made a plugin for jce to use my tinybn plugin directly in jce. No manuall install needed , I mean editing files to work with default tinymce.
So , here is the download file of tinybn for jce.


[download id=”11″]

How to install

1. Install jce component (that will help you to modify or control jce editor and install new plugin and much more)
2. Install jce plugin
3. Now install tinybn plugin for jce. Go to Administrator-> Components-> JCE Administrations-> Install (see screenshot bellow)
4. Now browser the downloaded zip file and install it.


that’s it.
Install finish 🙂 . Ok now go to article manager and try to open/write any new article. I think you are intelligent enough to make your editor default to jce or even disabled tinymce from plugins. If jce is your current editor and you have install the tinybn for jce according to instruction then you should see like bellow. Select keyboard and type in diff bengali layout.


mu ha ha…waiting for your feedback.

Simple Ajax Tab for wordpress (Manchuwpajaxtab) v1.1

manchuajaxtabSimple Ajax Tab for wordpress or just Manchuwpajaxtab is a small plugin/widget for wordpress to show some important features of a blog in one place and make them ajax based so the loading time of blog is minimun. Here Recent Posts, Recent Comemnts, Tag clouds, Archives, Blogroll and Categories are packed together as tab..ajax based tab. I think it’s clear what the plugin does.

Demo: pls see the ajax tab in sidebar in my blog. Hope people using theme like me will like this plugin/widget.

How to install: Just download the attached file, unzip and upload to plugins folder. Activate the plugin from plugins  list , Now add the widget from Design->widgets. Continue reading

childNodes problem in FF !!!

I was working with js and got a peculiar problem (it’s was unknown to me 😛 😀 🙁 ) about childNodes count in firefox and opera. Internet explorer showed perfectly. suppose my html is like
[sourcecode language=’css’]

  • One
  • Two

Now the js:
[sourcecode language=’css’]
objFather = document.getElementById(‘ul_id’); //get the father ul’ ID
arrayChildren = objFather.childNodes; //geting array of children
childNum = arrayChildren.length;

Here childNum will give diff values for diff browser. FF, Opera counts the whitespaces . textnodes as child but IE is normal in this case.

Usefull link: One

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