SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Nov 2002
    Location
    Maryland
    Posts
    307
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Need Help with Flickering Nav button In IE using Mega drop downs.

    Hello,
    In all IE versions the attorneys nav button starts to flicker when the user selects form items on the attorney's mega drop down menus.

    http://obe.herrmanneasyedit.com/temp...ns/index3.html

    I am pretty sure we can use jQuery to fix the problem, but not sure where to start.

    Any help is greatly appreciated.

  2. #2
    SitePoint Zealot Sogo7's Avatar
    Join Date
    May 2011
    Posts
    129
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Check out Stu Nicholls site CSS Play he has done a lot of experimenting with menus and has some flicker free solutions.
    Lovelogic.net Personal Projects Pit - Spammers welcome

  3. #3
    SitePoint Addict
    Join Date
    Nov 2002
    Location
    Maryland
    Posts
    307
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, I added this code:

    Code:
    $(".col_attorneys_select").click(function(){
      $("#selectDiv").css("background-color","#b5b7b4");
    });
    ....but now the attorneys activate state stays active even if the mouse is moved to another menu. Any ideas?

  4. #4
    SitePoint Addict
    Join Date
    Nov 2002
    Location
    Maryland
    Posts
    307
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here is the full code:

    Code:
     <script language="javascript" type="text/javascript">
    
    
            //don't hide the menu if a mega menu input has focus
    
    
            var megaNavImg = new Array();
    
    
            var megaNavCount = 0;
    
    
    
    
    
    
            $(document).ready(function() {
                
       $(".col_attorneys_select").click(function(){
      $("#selectDiv").css("background-color","#b5b7b4");
    });
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
              
    
    
                //preload mouseover images?
    
    
                $('#ctl00_xprLayout_header_mainLeftQ_navShower').find("div.navitem a img").each(function(i, domelement) {
    
    
                    var imgon = "";
    
    
                    var imgoff = "";
    
    
                    try {
    
    
                        if ($(domelement).attr("onmouseover") != null) {
    
    
                            imgon = $(domelement).attr("onmouseover").toString();
    
    
                            var qtIndex = imgon.indexOf("'");
    
    
                            var endqtIndex = imgon.lastIndexOf("'");
    
    
                            imgon = imgon.substring(qtIndex + 1, endqtIndex);
    
    
    
    
    
    
                            var img = new Image();
    
    
                            img.src = imgon;
    
    
                            megaNavImg[megaNavCount] = img;
    
    
                            megaNavCount++;
    
    
                        }
    
    
                        if ($(domelement).attr("onmouseout") != null) {
    
    
                            imgoff = $(domelement).attr("onmouseout").toString();
    
    
                            var qtIndex = imgoff.indexOf("'");
    
    
                            var endqtIndex = imgoff.lastIndexOf("'");
    
    
                            imgoff = imgoff.substring(qtIndex + 1, endqtIndex);
    
    
    
    
    
    
                            var img = new Image();
    
    
                            img.src = imgoff;
    
    
                            megaNavImg[megaNavCount] = img;
    
    
                            megaNavCount++;
    
    
                        }
    
    
                    } catch (ex) {
    
    
                    }
    
    
                });
    
    
                $('#ctl00_xprLayout_header_mainLeftQ_navShower').data("closeable", true);
    
    
    
    
    
    
                //show and hide mega menus
    
    
                var focusedObj = null;
    
    
                $('#ctl00_xprLayout_header_mainLeftQ_navShower .navitem').closest("li")
    
    
                .mouseenter(function() {
    
    
                    $(this).data("mouseon", true);
    
    
                    if (!$(this).hasClass("hovering")) {
    
    
                        //new menu showing
    
    
                        if (focusedObj)
    
    
                            focusedObj.blur();
    
    
    
    
    
    
                        $(this).addClass("hovering").siblings().removeClass("hovering").end()
    
    
    						.find("select,input")
    
    
    							.focus(function() {
    
    
    							    $("#ctl00_xprLayout_header_mainLeftQ_navShower").data("closeable", false);
    
    
    							    focusedObj = this;
    
    
    							})
    
    
    							.blur(function() {
    
    
    							    $("#ctl00_xprLayout_header_mainLeftQ_navShower").data("closeable", true);
    
    
    							    if ($(this).parents("li.mega").data("mouseon") == false) {
    
    
    							        $(this).parents("li.mega").removeClass("hovering");
    
    
    							    }
    
    
    							});
    
    
                    }
    
    
                })
    
    
                .mouseleave(function(e) {
    
    
                    $(this).data("mouseon", false);
    
    
                    if ($("#ctl00_xprLayout_header_mainLeftQ_navShower").data("closeable"))
    
    
                        $(this).removeClass("hovering");
    
    
                });
    
    
    
    
    
    
                //workaround for a webkit bug (chrome 9.x) that hides the menu
    
    
                $('#ctl00_xprLayout_header_mainLeftQ_navShower div.menu input').hover(function(event) {
    
    
                    $(this).closest('li.mega').addClass('hovering');
    
    
                }, $.noop);
    
    
    
    
    
    
    
    
    
    
                //keep menu image on while in the menu
    
    
                $('#ctl00_xprLayout_header_mainLeftQ_navShower .navitem').closest("li")
    
    
    			.each(function(index) {
    
    
    			    $img = $(this).find(".navitem A IMG");
    
    
    			    if ($img.length > 0) {
    
    
    			        var func = $img[0].onmouseover;
    
    
    			        if (func != null) {
    
    
    			            $img[0].mymouseenter = func;
    
    
    			            $img[0].onmouseover = function() { };
    
    
    
    
    
    
    			            $(this).mouseenter(function() {
    
    
    			                $(this).find("DIV.navitem A IMG")[0].mymouseenter();
    
    
    			            });
    
    
    			        }
    
    
    
    
    
    
    			        func = $img[0].onmouseout;
    
    
    			        if (func != null) {
    
    
    			            $img[0].mymouseleave = func;
    
    
    			            $img[0].onmouseout = function() { };
    
    
    
    
    
    
    			            $(this).mouseleave(function() {
    
    
    			                $(this).find("DIV.navitem A IMG")[0].mymouseleave();
    
    
    			            });
    
    
    			        }
    
    
    			    }
    
    
    			});
    
    
            });
    
    
        </script>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •