[admin]

Np, cheer! 🙂

[admin]

Thanks for sharing the demo, really helped a lot. It’s not related to the SmartMenus script. It’s caused by the following line:

$('#header-menu').not('.wproto-hidden').hide();

in the window resize handler you have:

			// Init Responsive Tabs
			$( window ).resize(function() {
				self.initResponsiveTabs();
				
				if( $(window).width() > 995 ) {
					$('#header-menu').not('.wproto-hidden').show();
					$('#wproto-mobile-menu').hide();
				} else {
					$('#header-menu').not('.wproto-hidden').hide();
					if( ! $('#primary-nav-menu').hasClass('wproto-search-displayed') ) {
						$('#wproto-mobile-menu').css('display', 'inline-block');
					}
				}
				
			});

in:

http://821.8d7.myftpupload.com/wp-content/themes/wpl-exe/js/front.js?ver=300820152142

If you are sure you need that line, I would suggest using a variable that saves the viewport width on every resize event and only processing the code in the handler if the width has changed since the previous resize because on iPhone the window resize event is fired on every page scroll too.

[admin]

The only solution I can think of is leaving it as is but having the SmartMenu so that it doesn’t go all the way to the top and bottom of the browser but rather to the bottom of the header and top of the footer. Is there a way of altering the position and placement of the SmartMeun dropdown submenus?

Nope, this is not possible because the sub menus are real nested UL elements and we cannot use CSS clip for the long sub menus scrolling feature – just the whole browser viewport can be used as a clipping container.

But, actually, I believe, it shouldn’t be too difficult to fix the issue. It would really help very much if you could share a code sample but, on theory, I believe this should work – try not setting specific z-index for your Header, Directory Menu Bar and Footer containers but instead set a z-index just to your header and directory menu UL elements. Also if your directory menu UL element is producing the white bar below your header and this causes an issue, then instead you could float it to the left and wrap in it some other full width container that would represent the white bar.

If you can’t cope on your own, please post some kind of live demo and I will try to tweak it.

Cheers!

[admin]

Hi, normally you should be able to scroll the page without reseting the sub menus. They should be reset only on single tap.

Does this happen for you on some of the default demos? If not, please post an URL to a live demo where I could see the issue and also mention what iPhone/iOS version you are using.

Thanks!

[admin]

I believe it’s quite obvious by now that estimates are not my strength 😳 but I’ve been in the final stages of preparing everything for the 1.0.0 release the past 3 weeks and if everything goes as planned, it will be out at the beginning of next week.

A WordPress plugin is definitely something to think about although it’s really pretty simple to initialize the script for any generic WordPress menu. Also the native WordPress menu editor already does a good job so a proper plugin would need to do something really cool to be useful enough. So, yep, it’s possible but not necessarily certain that we’ll have an official plugin at some point of time in the future.

[admin]

Np, cheers!

[admin]

The problem is that you have some data-toggle="dropdown" attributes in your menu HTML structure (which are normally required by Bootstrap but are not needed by the SmartMenus script). I am not sure how exactly you output the menu structure in your WordPress setup but if it’s not easy for you to edit your PHP code to not output these attributes, then you could use something like this as a JS fix:

jQuery(function() {
	jQuery('.navbar-nav [data-toggle="dropdown"]').removeAttr('data-toggle');
});

BTW, this issue will be fixed in v1.0.0 final and a completely standard Bootstrap 3 structure would then work without any issues.

[admin]

OK, a quick status report. I did some additional research the past few days.

The bad news is that it turns out it is actually not possible to implement a sensible workaround for this in the SmartMenus code without losing some important functionality – and that is hiding the sub menus on touch devices (like iPad, etc.) when you tap elsewhere on the page. There is just no way to do it without listening to some touch* events on the document. I guess this is why the issue affects many other scripts and even popular frameworks like jQuery mobile.

The good news is that I actually found an existing open WebKit bug report:

https://bugs.webkit.org/show_bug.cgi?id=138816

and I posted a comment in the hope that it will be taken more seriously and fixed soon.

So, unfortunately, and I really hate to say it, there doesn’t seem to be anything else I could do about it right now.

[admin]

Np at all!

[admin]

Sure, I’ve added a note and will post again in this thread as soon as there is any news. I will try to investigate the issue again the coming week.

Cheers!

[admin]

Thanks for the follow up! I did some thorough testing and found out this seems to be an iOS issue (not sure if we could call it a bug) and indeed it is caused by the SmartMenus script but could well be caused by many other scripts.

It seems to be triggered if an event listener is added on the document for any touch event (touchstart, touchmove, touchend…). And the SmartMenus script does that for a couple of features:

1) the runtime mouse/touch input detection code;
2) for more reliable reseting of the sub menus on touch devices when hideOnClick: true is used (since clicks on the document are not always fired in some browsers if we tap outside the menu tree).

Unfortunately, it’s not very simple to fix these quickly. For 1) the code could be refactored but for 2) there just isn’t any workaround I am aware of right now so I will need to do further investigation of the issue before figuring out a proper fix.

BTW, the cause for this seems to be so generic that I guess many many other websites have the same behavior. I noticed even http://www.google.com has it so I guess it’s not that serious concern for end users. But, in any case, I will try to figure out a way to avoid this.

Thanks again for your input!

[admin]

Np, cheers!

[admin]

Hi, you can use the following additional code:

// don't show the sub menus in collapsible mode unless the sub arrow is clicked
$categories_menu.on('click', 'span.sub-arrow', function(e) {
		var obj = $categories_menu.data('smartmenus');
		if (obj.isCollapsible()) {
			var $item = $(this).parent(),
				$sub = $item.parent().dataSM('sub');
			$sub.dataSM('arrowClicked', true);
		}
	}).bind({
		'beforeshow.smapi': function(e, menu) {
			var obj = $categories_menu.data('smartmenus');
			if (obj.isCollapsible()) {
				var $menu = $(menu);
				if (!$menu.dataSM('arrowClicked')) {
					return false;
				}
				$menu.removeDataSM('arrowClicked');
			}
		}
	});

Let me know if you have any troubles.

Cheers!

[admin]

But in general the following should work fine (simplified example):

var $menu = $('#main-menu'),
	$overlay = $('#menu-overlay');
$menu.bind({
	'beforeshow.smapi': function(e, menu) {
		$overlay.show();
	},
	'hide.smapi': function(e, menu) {
		var obj = $(this).data('smartmenus');
		if (obj.visibleSubMenus.length == 0) {
			$overlay.hide();
		}
	}
});

[admin]

Hi, do you have a live demo? As far as I can see, http://www.marksandspencer.com/ does not use the SmartMenus plugin.

[admin]

Hi, can you see the same effect on the following page:

http://getbootstrap.com/

I guess – yes?

There isn’t anything in the SmartMenus script that could alter this default browser behavior. If there are any :hover and :active styles defined in your CSS, then it’s normal to get this behavior (in most if not all) mobile browsers on your pages.

[admin]

Np at all! Cheers!

[admin]

You need to set position: fixed; either to the root UL element, or to some of its parent containers. What is the problem of setting a specific width as well? If it causes any issues, you can also try experimenting with setting left and right instead of width.

If you are still having troubles, please post some kind of demo URL and explain what exactly you are trying to achieve and I will check it.

Cheers!

[admin]

Yep, as I mentioned before, if the menu is available in the DOM ondomready the script will initialize it (and thus $.SmartMenus.Bootstrap.init(); will have no effect after that since the menu is already initialized). So if the menu items, sub menus, etc. are updated by some other script after that (what seems to happen in your case), you will need to call $('#navBarMenu').smartmenus('refresh'); after the DOM update (or alternatively $('#navBarMenu').smartmenus('destroy'); + $.SmartMenus.Bootstrap.init();).

As for your suggestion to not auto initialize ondomready by default – I get your point but the addon is designed so that it requires zero configuration efforts for most users so that they’d just need to link the script files and it all works in the generic case.

[admin]

Hi,

The breakpoint relies purely on Bootstrap. So you have a couple of options:

1) Either downloading a customized Bootstrap version from here:

http://getbootstrap.com/customize/

you need to edit the media query here:

http://getbootstrap.com/customize/#media-queries-breakpoints

* Note that this solution will affect all Bootstrap components on your page, not just your navbar.

2) Or manually editing “bootstrap.css”. I have posted an example of all the media queries that need to be edited in the default Bootstrap CSS if you would like to change just the navbar breakpoint from 768px to 991px here:

http://www.smartmenus.org/forums/topic/adjusting-the-navbar-breakpoint-bootstrap-3/#post-1765

Please let me know if you have any questions.

[admin]

Hi,

Seems like a pure CSS issue. First, make sure you have included “sm-core-css.css” properly on your page. If the issue remains, you may check if the issue persist if you use some of the default themes instead of your theme (which seems to be customized). If the issue remains with the default themes, then it’s most probably caused by some of your other page unordered list styles which override the SmartMenus defaults in “sm-core-css.css”.

In any case if you like, please post some kind of demo URL and I will check what exactly causes the issue and how you could fix it.

Happy Holidays!

[admin]

By default the sub menus should be reset when an item is clicked and activated (this is controlled via the hideOnClick: true option). Not sure why you might be having troubles with this. Could you please post some kind of demo URL? Or are you having the issue just in some specific browser?

Happy Holidays!

[admin]

Hi again and sorry for the long delay of this answer during the holidays!

What comes to my mind right now is to use hideOnClick: true and the following mod in addition (this should be added after “jquery.smartmenus.js” in your page source but before your main menu init code):

// SmartMenus mod - hide the menus on document click just in collapsible mode
$.SmartMenus.prototype._docClick = $.SmartMenus.prototype.docClick;
$.SmartMenus.prototype._docTouchEnd = $.SmartMenus.prototype.docTouchEnd;
$.SmartMenus.prototype.docClick = function(e) {
	if (this.isCollapsible()) {
		this._docClick(e);
	}
}
$.SmartMenus.prototype.docTouchEnd = function(e) {
	if (this.isCollapsible()) {
		this._docTouchEnd(e);
	}
}

This isn’t the most elegant solution but should work fine for now (in the future I may think of some generic way to allow using different options in mobile and desktop view).

Happy Holidays!

[admin]

OK, I see, sorry maybe I didn’t explain well enough that you need to use specifically the latest dev version from https://github.com/vadikom/smartmenus. The Bootstrap addon’s latest dev version is 0.2.0+ i.e.:

https://raw.githubusercontent.com/vadikom/smartmenus/master/src/addons/bootstrap/jquery.smartmenus.bootstrap.js

So if you like, just grab the latest dev version from GitHub https://github.com/vadikom/smartmenus/archive/master.zip and it should work out of the box with $.SmartMenus.Bootstrap.init()

Cheers!

[admin]

Hi, check how it works with the hideOnClick: false option and let me know if you still have any concerns.

Cheers!

[Author]

Posts