Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Uncaught TypeError: Cannot read property 'sfTimer' of undefined #88

Closed
wojtech opened this Issue Jul 7, 2013 · 9 comments

Comments

Projects
None yet
4 participants

wojtech commented Jul 7, 2013

Hi,

I'm getting the following console error (despite the menu working fine)
Uncaught TypeError: Cannot read property 'sfTimer' of undefined
when moving mouse above dropdown part of the menu.

Best,
Wojciech

Owner

joeldbirch commented Jul 10, 2013

Thanks for the report. Are you experiencing this with Superfish v1.7.4? Do you have a test case for me to look at please?

Hi,

I'm having the same issue with v1.7.4. I'm pretty new to JS so not sure what you mean by a test case however below are snips of the html/js/css I have, note I've not amended any of the stock css of js files in the plugin :

HTML

<link href="css/superfish.css" rel="stylesheet" media="screen">
<script src="lib/superfish.js"></script>

<ul class="superFish-Menu sf-menu sf-js-enabled sf-arrows" id="topMenu">
    <li class="current">
        <a href="#">Storage</a>
        <ul>
            <li>
                <a id="health">Dashboard</a>
            </li>               
            <li>
                <a href="#">CERT</a>
                <ul>
                    <li><a id="certc1san01">certc1san01</a></li>
                </ul>
            </li>   
        </ul>
    </li>   
</ul>

CSS

.superFish-Menu {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
}

JS

$('#topMenu').superfish();

In Chrome Version 28.0.1500.71 m I get the error "Uncaught TypeError: Cannot read property 'sfTimer' of null" in superfish.js lines 95 and 105.

In Firefox Version 19 I get the error "TypeError: o is null" for the same lines.

As the previous poster said, the menu works great even with the console errors.

If this isn't want you're after or you need any more info please let me know.

Thanks in advance.

p.s. Love the plugin by the way :)

Owner

joeldbirch commented Jul 17, 2013

Thanks for the code, it should help me replicate the issue so I can debug it. Will let you know how I go.

Owner

joeldbirch commented Jul 17, 2013

I've found that the cause of this is that you should not be adding the sf-js-enabled sf-arrows classes to the HTML. Superfish needs to add those dynamically as it initialises. If they are present prior to Superfish initialisation then chaos ensues.

I think you will find that Superfish has not been working for you. What you have been seeing is the pure CSS fallback behaviour which ensures the submenus are still accessible if anything goes wrong with the JS. When Superfish is working correctly you should see triangles/arrows indicating submenus in addition to all the other (less immediately noticeable) features such as animations, hover delays, etc.

The only class you need on the parent ul for the base CSS to work is sf-menu. Please let me know if this resolves the issue for you.

wojtech commented Jul 17, 2013

It solved the problem for me! Thank you!
Sorry, for not getting back on this sooner, I was busy with another part of
the project.

On Wed, Jul 17, 2013 at 4:38 AM, joeldbirch notifications@github.comwrote:

I've found that the cause of this is that you should not be adding the sf-js-enabled
sf-arrows to the HTML. Superfish needs to add those dynamically as it
initialises. If they are there prior to Superfish initialisation then chaos
ensues.

I think you will find that Superfish has not been working for you. What
you have been seeing is the pure CSS fallback behaviour which ensures the
submenus are still accessible if anything goes wrong with the JS. When
Superfish is working correctly you should see triangles/arrows indicating
submenus in addition to all the other (less immediately noticeable)
features such as animations, hover delays, etc.

The only class you need on the parent ul for the base CSS to work is
sf-menu. Please let me know if this resolves the issue for you.


Reply to this email directly or view it on GitHubhttps://github.com/joeldbirch/superfish/issues/88#issuecomment-21088662
.

Great !!! Many thanks for your response, all working nicely now.

And the plugin works and looks even better now I know how to use it a bit :)

@joeldbirch joeldbirch closed this Jul 17, 2013

alel890 commented Mar 3, 2016

Hi, i have the same issue.
The error in console: Uncaught TypeError: Cannot read property 'sfTimer' of null
The lines of the plugin that send the error:

clearTimeout(o.sfTimer), s.siblings().superfish("hide").end().superfish("show")
o ? e.proxy(f, s, n)() : (clearTimeout(n.sfTimer), n.sfTimer = setTimeout(e.proxy(f, s, n), n.delay))

My code:
I'm getting this menu from a file named 'menu.html' with ajax/jquery

menu.html:

`

<div class="nicdark_menu_boxed">

    <div class="nicdark_section nicdark_bg_greydark nicdark_displaynone_responsive">
        <div class="nicdark_container nicdark_clearfix">
            <div class="grid grid_6">
                <div class="nicdark_focus">
                    <h6 class="white">
                        <i class="icon-calendar-outlilne"></i>&nbsp;&nbsp;<a class="white" href="">EVENTOS</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="grey">·</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <i class="icon-pencil-1"></i>&nbsp;&nbsp;<a class="white" href="">NOVEDADES</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="grey">·</span>&nbsp;&nbsp;&nbsp;&nbsp;
                        <i class="icon-phone-outline"></i>&nbsp;&nbsp;(+54) 02214251307
                    </h6>
                </div>
            </div>
            <div class="grid grid_6 right">
                <div class="nicdark_focus right">
                    <h6 class="white">
                        <i class="icon-globe-alt-outline"></i>&nbsp;&nbsp;<a class="white nicdark_mpopup_window" href="#nicdark_window">IDIOMAS</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;<span class="grey">·</span>&nbsp;&nbsp;&nbsp;&nbsp;

                </div>
            </div>

            <!--info window for languages-->
            <div id="nicdark_window" class="nicdark_bg_white nicdark_radius zoom-anim-dialog mfp-hide">

                <div class="nicdark_textevidence nicdark_bg_red nicdark_radius_top">
                    <div class="nicdark_margin20">
                        <h4 class="white">IDIOMAS</h4>
                    </div>
                </div>

                <div class="nicdark_margin20">

                    <ul class="nicdark_list border">

                        <li class="nicdark_border_grey">
                            <p><a class="grey" href="">ESPAÑOL</a><a href="" class="nicdark_btn right nicdark_opacity"><img alt="" width="30" src="img/flag/img1.png"></a></p>
                            <div class="nicdark_space15"></div>
                        </li>



                        <li class="nicdark_border_grey">
                            <div class="nicdark_space15"></div>
                            <p><a class="grey" href="">ITALIANO</a><a href="" class="nicdark_btn right nicdark_opacity"><img alt="" width="30" src="img/flag/img4.png"></a></p>    
                        </li>

                    </ul>

                </div>
            </div>
            <!--end window-->

        </div>
    </div>

    <div class="nicdark_space3 nicdark_bg_gradient"></div>

    <div class="nicdark_section nicdark_bg_grey nicdark_bg_greyheight  nicdark_shadow nicdark_radius_bottom">
        <div id="containNavResponsive" class="nicdark_container nicdark_clearfix">

            <div class="grid grid_12 percentage">

                    <div class="nicdark_logo">
                        <a href="index.php">
                            <img alt="isotipo" src="img/marca.png">
                        </a>
                    </div>
                    <div class="nicdark_logo2 nicdark_marginleft10">
                        <img alt="logotipo" src="img/logo.png">
                    </div>



                    <nav>
                        <ul class="nicdark_menu nicdark_margin010 nicdark_padding50">


                            <li class="red">
                                <a href="#">INSTITUCIONAL</a>
                                <ul class="sub-menu">
                                    <li><a href="">Historia</a></li>
                                    <li>
                                        <a href="">Comisión Directiva</a>
                                    </li>
                                     <li>
                                        <a href="">Equipo de trabajo</a>
                                    </li>


                                </ul>
                            </li>

                            <li class="green nicdark_megamenu">
                                <a href="#">PROPUESTA EDUCATIVA</a>
                                <ul class="sub-menu">
                                    <li class="mm_grid mm_grid_3">
                                        <a href="#">Nivel Inicial</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Propuesta Educactiva</a></li>
                                            <li><a href="#">Objetivos</a></li>
                                            <li><a href="#">Diseño curricular</a></li>
                                        </ul>
                                    </li>
                                    <li class="mm_grid mm_grid_3">
                                        <a href="#">Nivel Primario</a>
                                        <ul class="sub-menu">
                                            <li><a href="#">Propuesta Educactiva</a></li>
                                            <li><a href="#">Objetivos</a></li>
                                            <li><a href="#">Diseño curricular</a></li>
                                        </ul>
                                    </li>
                                    <li class="mm_grid mm_grid_3">
                                        <a href="#">Nivel Secundario</a>
                                        <ul class="sub-menu">
                                           <li><a href="#">Propuesta Educactiva</a></li>
                                            <li><a href="#">Objetivos</a></li>
                                            <li><a href="#">Diseño curricular</a></li>
                                        </ul>
                                    </li>
                                    <li class="mm_grid mm_grid_3">
                                        <a href="#">Educación Terciaria</a>
                                        <ul class="sub-menu">
                                          <li><a href="#">Objetivos</a></li>
                                            <li><a href="#">Profesorado de Educación Física</a></li>
                                            <li><a href="#">Profesorado de Italiano</a></li>

                                        </ul>
                                    </li>
                                </ul>
                            </li>

                            <li class="red">
                                <a href="">ACTIVIDADES</a>
                                <ul class="sub-menu">
                                    <li><a href="">Proyectos</a></li>
                                    <li><a href="">Salidas Educativas</a></li>
                                     <li><a href="">Trabajos de Alumnos</a></li>
                                      <li><a href="">Torneos</a></li>
                                       <li><a href="">Olimpíadas</a></li>
                                        <li><a href="">Conferencias</a></li>
                                </ul>
                            </li>
                            <li class="green">
                                <a href="">CONTACTO</a>
                            </li>
                        </ul>
                    </nav>

                    <div class="nicdark_space20"></div>

            </div>

        </div>
        <!--end container-->

    </div>
    <!--end header-->

</div>
`

In the main html my code:

Code JS:

jQuery(document).ready(function() { // Get menu y footer a traves de ajax // --------------------------------------------- var divmenu = $("#div-menu"); $.getScript("js/settings.js",function(){ $.get("menu.html",function(infoMenu){ divmenu.html(infoMenu); }); }); });

The file settings.js have:

## Code JS
(function($) { "use strict"; $('.nicdark_menu').superfish({ delay: 1200 }); //megamenu $('.nicdark_megamenu ul a').removeClass('sf-with-ul'); $($('.nicdark_megamenu ul li').find('ul').get().reverse()).each(function(){ $(this).replaceWith($('<ol>'+$(this).html()+'</ol>')) }); }

I can't find the solution and i've been trying for a long time.

Help mee!

Thanks a lot!

Owner

joeldbirch commented Mar 4, 2016

Please see this page for your support options. You will also need to provide a live example of your problem page so someone can help you debug it.

alel890 commented Mar 4, 2016

I fix it! It was an error in html! Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment