Geek Answers Handbook

JPanelMenu not working properly in IE (all versions)

I am using jPanelMenu jQuery plugin on one of my sites. I noticed a problem in IE (all versions).

When the menu starts, it moves as intended. After clicking on the menu item, the page scrolls to the desired section and closes again. When the menu closes, the right side of the website gets unwanted stock. When you open the menu again, it reduces its size and closes the space again.

Here is the fiddle: http://jsfiddle.net/huzLU/1/

And three screenshots showing the problem in IE:

Here is the code I use for the menu:

<script> $(document).on('touchend',jP.panel,function(e){ e.preventDefault(); if ( jP.menuIsOpen() ) jP.closeMenu(jP.options.animated); }); $(document).on('click',jP.panel,function(e){ e.preventDefault(); if ( jP.menuIsOpen() ) jP.closeMenu(jP.options.animated); }); </script> <script> $(document).ready(function(){ var jPM = $.jPanelMenu({ closeOnContentClick: false }); jPM.on(); $('a[href^="#"]').on('click',function (e) { e.preventDefault(); var target = this.hash, $target = $(target); $('html, body').stop().animate({ 'scrollTop': $target.offset().top-50 }, 900, 'swing', function () { window.location.hash = target; }); setTimeout(function() { jPM.close(true); }, 900, 'swing'); }); }); </script>

Also; here is a link to the site: www.didson.nl

I hope someone can help me, thanks in advance!

+7
javascript jquery css internet-explorer jpanelmenu
source share
1 answer

EDIT: try this new fiddle . I set setTimeout call to close. (In fact, you will not need to set a timeout at all)

Hi

The problem is with styles. It sets the div with class ".jPanelMenu-panel" to "position: relative"; which causes some problems.

In this Fiddle, you can see how, by setting an absolute position, fixes the problem. The transition looks awful, of course, but I brought it to you.

Your HTML Version:

 <div class="jPanelMenu-panel" style="position: relative; left: 0px;">

The line I added:

  $(".jPanelMenu-panel").css('position', 'absolute');

Hope this helps!

+1
source share

More articles:


All Articles