Category: Javascript

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.

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

  1. https://github.com/bfred-it/scroll-restoration-polyfill
  2. https://github.com/brigade/delayed-scroll-restoration-polyfill

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 ?

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.

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

window.top.myframename.document.myformname.submit();

let me give u whole code. make a new file named frame.html and write the bellow code in that file

<form id="myformid" name="myformname" method="post" action="" target="_self" onSubmit="">
	Name: <input type="text" size="20" name="name" value="" id="namefield" />
</form>

and open a new file again and save in same dir with name index.html and write the bellow code in it

< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

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

<body>

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

function submitiframeform(){
	window.top.myframename.document.myformname.submit();
}
</script>
</body>
</html>

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’.

thanks

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

  Tinybn JCE Editor (12.1 KiB, 9,115 hits)

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.

tinybnjce1

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.

tinybnjce2

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

<ul id="ul_id">
<li id="id1"> One</li>
<li id="id2"> Two</li>
</ul>

Now the js:

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. 😀

Continue reading