Hover function does not work in Google Chrome when using jQuery-1.7.2.min.js

Question

I currently use AdminLTE template to create a admin page. But I encounter problems with the included jquery source. I have a part of function which is nested sort where it refer to the jquery-1.7.2.min.js to work. It runs okay in Firefox, but when I try to run it in Google Chrome, my sidebar hover function does not work. However I tried to replace the original template jQuery which is jQyery-2.0.2.min.js, after that my hover function work, but my nested sort function no longer works. Is there anything I can do to differentiate the 2 jQuery functions?

Here is my sample code. I have to do my nested sort function :

<!-- Nested Sequence Reference-->
    <script type="text/javascript" src="js2/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="js2/jquery-ui-1.8.16.custom.min.js"></script>
    <script type="text/javascript" src="js2/jquery.ui.touch-punch.js"></script>
    <script type="text/javascript" src="js2/jquery.mjs.nestedSortable.js"></script>
      <!-- Sequence Script-->
      <script>
        $(document).ready(function(){

            $('ol.sortable').nestedSortable({
                forcePlaceholderSize: true,
                handle: 'div',
                helper: 'clone',
                items: 'li',
                opacity: .6,
                placeholder: 'placeholder',
                revert: 250,
                tabSize: 25,
                tolerance: 'pointer',
                toleranceElement: '> div',
                maxLevels: 1,

                isTree: false,
                expandOnHover: 700,
                startCollapsed: true
            });


            //Independent Content Sequence
            $('#toIndependentHierarchy').click(function(e){
                //hiered = $('ol.sortable').nestedSortable('toHierarchy', {startDepthCount: 0});
                //hiered = dump(hiered);
                //(typeof($('#toHierarchyOutput')[0].textContent) != 'undefined') ?
                //$('#toHierarchyOutput')[0].textContent = hiered : $('#toHierarchyOutput')[0].innerText = hiered;


                //Add to try the update the database function with jquery 
                serialized = $('ol.sortable').nestedSortable('serialize');
                  $.post( "independentBannerSequence.php", serialized, function( data ) {
                    alert( data );
                    });
                return false;   
            })

            //Master Content Sequence
            $('#toMasterHierarchy').click(function(e){
                //hiered = $('ol.sortable').nestedSortable('toHierarchy', {startDepthCount: 0});
                //hiered = dump(hiered);
                //(typeof($('#toHierarchyOutput')[0].textContent) != 'undefined') ?
                //$('#toHierarchyOutput')[0].textContent = hiered : $('#toHierarchyOutput')[0].innerText = hiered;


                //Add to try the update the database function with jquery 
                serialized = $('ol.sortable').nestedSortable('serialize');
                  $.post( "masterBannerSequence.php", serialized, function( data ) {
                    alert( data );
                    });
                return false;   
            })

            $('#toArray').click(function(e){
                //arraied = $('ol.sortable').nestedSortable('toArray', {startDepthCount: 0});
                arraied = $('ol.sortable').nestedSortable('toArray', {startDepthCount: 0});
                arraied = dump(arraied);
                (typeof($('#toArrayOutput')[0].textContent) != 'undefined') ?
                $('#toArrayOutput')[0].textContent = arraied : $('#toArrayOutput')[0].innerText = arraied;
            })

        });

        function dump(arr,level) {
            var dumped_text = "";
            if(!level) level = 0;

            //The padding given at the beginning of the line.
            var level_padding = "";
            for(var j=0;j<level+1;j++) level_padding += "    ";

            if(typeof(arr) == 'object') { //Array/Hashes/Objects
                for(var item in arr) {
                    var value = arr[item];

                    if(typeof(value) == 'object') { //If it is an array,
                        dumped_text += level_padding + "'" + item + "' ...\n";
                        dumped_text += dump(value,level+1);
                    } else {
                        dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
                    }
                }
            } else { //Strings/Chars/Numbers etc.
                dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
            }
            return dumped_text;
        }

    </script>

Where is the hover function? – Bram Vanroy May 12 '15 at 08:17 — Bram Vanroy, May 12 '15 at 08:17

score 1 · Answer 1 · edited May 23 '17 at 10:26

Try to use load the older jquery library dynamic just if you use firefox, and load the newest jquery library just if using chrome.

var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6

How to detect Safari, Chrome, IE, Firefox and Opera browser?

This doesn't solve the actual problem but rather moves around it. — Bram Vanroy, May 12 '15 at 08:17

score 0 · Accepted Answer · answered May 12 '15 at 08:45

0

i had solve the problem by using the jQuery-1.11.0.min.js version where both google chrome and firefox are workable on both my hover and sort nested function. And don't forget to paste the

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>

Thanks for all the help. Much appreciate.

answered May 12 '15 at 08:45

Marcus Tan

407
1
9
26

pure and nicely solution – ofir_aghai May 12 '15 at 08:59

Hover function does not work in Google Chrome when using jQuery-1.7.2.min.js

2 Answers2