We Keep Coding

$ionicposition only setting correct values on a modal the first time a modal is opened

I have created a custom select directive and within this directive when you tap into the options it should use $ionicposition to locate the selected option based on the HTML element ID, and then scroll to it using $ionicscroll delegate.
This is the function which locates the option, and then scrolls to it:
private scrollToOption(selectedCode: activeh.objects.ICode): void {
this.$timeout(() => {
let item: HTMLElement = document.getElementById("code-" + selectedCode.CodeID);
if(item){
var itemPosition = this.$ionicPosition.offset(angular.element(item));
this.$ionicScrollDelegate.$getByHandle('modalContent').scrollTo(0, itemPosition.top + 40, false);
}
}, 200);
}
This is where the scrollTo function is called:
private createModal(): void {
this.$ionicModal.fromTemplateUrl('app/shared/directives/selectoption/selectoption.modal.html', {
scope: this.$scope,
hardwareBackButtonClose: false
}).then((modal) => {
this.selectModal = modal;
this.selectModal.show();
if (this.selectedVal !== undefined) {
this.scrollToOption(this.selectedVal);
}
});
}
So like mentioned in the title, this code works perfectly but only the first time that the modal is opened. After the modal has been closed and opened again the $ionicposition.offset is returning values of only 0.

I found a (probably partial) solution to this, wherein instead of using .hide() to hide the modal I use .remove() to completely remove it forcing a complete rebuild.
This mimics the behaviour where it worked the first time as now every time the modal is opened is the 'first' time.

jQuery mmenu - On opening a submenu how to close all others?

we are using mmenu (v4.7.5), that is really great by the way, together with jQuery v1.11.1.
I initialise it with these options / configuration:
IwAG.$('nav#menu').mmenu({
"slidingSubmenus": false
}, {
clone: true
});
When opening a submenu, I want that all other open submenues close automatically.

i found a solution ;)
$('nav#menu ul.first_level').on("open.mm", function (e) {
var parent = IwAG.$(e.target).closest('li');
var siblings = parent.siblings('li.mm-opened');
if (siblings) {
siblings.find('.mm-opened').removeClass('mm-opened');
siblings.removeClass('mm-opened');
}
});

Open specific accordion tab using external link and hash

hi to all I'm new in js sorry for what I ask here now I know its a basic one, I'm working now with accordion plugin that collects all the article that users want to put in accordion and view it in accordion my question is how to open specific tab when is have dynamic id per article inside a item of accordion.. im trying to hook the item using link, http//:example.com#id to open specific tab in accordion here s the plugin code.
hook inside the code and trigger the click event to open the specific the in the accordion plugin
!(function($){
$.fn.spAccordion = function(options){
var settings = $.extend({
hidefirst: 0
}, options);
return this.each(function(){
var $items = $(this).find('>div');
var $handlers = $items.find('.toggler');
var $panels = $items.find('.sp-accordion-container');
if( settings.hidefirst === 1 )
{
$panels.hide().first();
}
else
{
$handlers.first().addClass('active');
$panels.hide().first().slideDown();
}
$handlers.on('click', function(){
if( $(this).hasClass('active') )
{
$(this).removeClass('active');
$panels.slideUp();
}
else
{
$handlers.removeClass('active');
$panels.slideUp();
$(this).addClass('active').parent().find('.sp-accordion-container').slideDown();
}
event.preventDefault();
});
});
};
})(jQuery);

A little thing is, you can use .children('div') instead of .find('>div').
But if you want to get what the hash is set to you can use window.location.hash. By default this is used to identify element IDs. So ideally you could get the element you want to show by doing
if (window.location.hash) {
var $selected = $('#'+window.location.hash);
if ($selected.length) {
// Do what you need to show this element
}
}

Exclude ID in Twitter Bootstrap Scrollspy

I have a Twitter Bootstrap site with a main menu full of links. I have Scrollspy setup to target that menu and works great.
However, I need scrollspy to exclude the last link in the menu. Is there any easy option or attribute to do this? Each link has an ID.
To note, the last menu item is called, "Login" has an ID and clicking it opens a Twitter Modal. However since the modal is in the code even when not loaded it's affecting the scrollspy.
So just need a way to tell exclude an ID so something hypothetically like:

I suggest you extend ScrollSpy with that desired functionality, like this https://stackoverflow.com/a/13460392/1407478
ScrollSpy extension with excludeable ID's :
// save the original function object
var _superScrollSpy = $.fn.scrollspy;
// add a array of id's that need to be excluded
$.extend( _superScrollSpy.defaults, {
excluded_ids : []
});
// create a new constructor
var ScrollSpy = function(element, options) {
_superScrollSpy.Constructor.apply( this, arguments )
}
// extend prototypes and add a super function
ScrollSpy.prototype = $.extend({}, _superScrollSpy.Constructor.prototype, {
constructor: ScrollSpy
, _super: function() {
var args = $.makeArray(arguments)
// call bootstrap core
_superScrollSpy.Constructor.prototype[args.shift()].apply(this, args)
}
, activate: function (target) {
//if target is on our exclusion list, prevent the scrollspy to activate
if ($.inArray(target, this.options.excluded_ids)>-1) {
return
}
this._super('activate', target)
}
});
// override the old initialization with the new constructor
$.fn.scrollspy = $.extend(function(option) {
var args = $.makeArray(arguments),
option = args.shift()
//this runs everytime element.scrollspy() is called
return this.each(function() {
var $this = $(this)
var data = $this.data('scrollspy'),
options = $.extend({}, _superScrollSpy.defaults, $this.data(), typeof option == 'object' && option)
if (!data) {
$this.data('scrollspy', (data = new ScrollSpy(this, options)))
}
if (typeof option == 'string') {
data[option].apply( data, args )
}
});
}, $.fn.scrollspy);
For the example at http://twitter.github.com/bootstrap/javascript.html#scrollspy, and if you want the ScrollSpy to prevent showing #mdo, it should be initialized like this
$(".scrollspy-example").scrollspy({
excluded_ids : ['#mdo']
});
you could try to place the code in a separate file, scrollspy-addon.js, include it and initialize your scrollspy with
$("#your-scrollspy-id").scrollspy({
excluded_ids : ['#login']
});

I'm not aware of any "easy" fix for your situation. However you can use the "activate" event to check for the ID and act upon it:
$('#myscrollspyID li').on('activate', function(){
var id = $(this).find("a").attr("href");
if (id === "#yourlastID"){
//do something, i.e. remove all active classes from your scrollspy object, so none are shown as active
}
}
P.S: this i pretty rough code, but I modified some code I am using myself. I use the active event to check the ID of the active item, and change the background color of the navigator bar to the color corresponding to the active item :-)

Close menu with click off menu itself

I'm not the best when it comes to JavaScript, and stuck with finding a solution. I have seen similar questions asked here, but when I try to implement it in my case it either breaks the menu or just makes no difference.
I'm trying to get a menu (which opens on a click), to close not only with a repeated click on parent menu tab, but with a click outside the menu, i.e., anywhere.
My code is:
var toggleUpdatesPulldown = function(event, element, user_id) {
if( element.className=='updates_pulldown' ) {
element.className= 'updates_pulldown_active';
showNotifications();
} else {
element.className='updates_pulldown';
}
}
This snippet is in the middle of a lot more JavaScript and this is the default working version. The click from user changes the class name of the menu container which determines if it's displayed or not. From another post on here, I tried implementing the following to no avail to try and allow the click off to alter the class name as well:
var toggleUpdatesPulldown = function(event, element, user_id) {
if( element.className=='updates_pulldown' ) {
element.className= 'updates_pulldown_active';
showNotifications();
} else {
element.className='updates_pulldown';
}
ev.stopPropagation();
$(document).one('click', function() {
element.className='updates_pulldown';
});
}
Any advice on tackling this? I'd like to learn more JavaScript as I seem to be working with it more and more.

I hope you are still looking for a solution. Here's a working demo of this http://jsfiddle.net/sU9ZJ/6/
(function(win, doc) {
var lis = $('#menu>ul>li>a').on('click', function(e) {
e.preventDefault();
var a = $(this);
var li = $(this).parent();
function close(dev) {
if (!(dev && li.has(dev.target)[0])) {
li.addClass('inactive').removeClass('active');
doc.off('click', close);
a.trigger('close');
}
}
function open(dev) {
li.addClass('active');
doc.on('click', close);
a.trigger('open');
}
if (li.hasClass('active')) { close() }
else { open(); }
})
})(this, $(document))
I have also added a couple of events that you can use when it opens or closes
$('#menu>ul>li>a').on('open', function(e) {
console.log('menu open', this)
}).on('close', function(e) {
console.log('menu closed', this)
})
Sorry, this depends on jQuery. too lazy to write a native version :). Also this is not tested in IE, but shouldn't be too hard to make it work on those if it doesn't.