My drop down menu opens in mobile view, but when clicking to close, nothing happens.
I've looked at the JS and examples online on what could be wrong but still cant figure it out. Also not sure which js query needs to be udpated as there are 3 different ones; accordion, collapse and 1.112.min.
Screenshot of dropdown menu error
Code:
<!-- navbar menu -->
<div class="collapse navbar-collapse" id="navbar-menu">
<ul class="nav navbar-nav navbar-right">
<li>Our Story</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Solutions</a>
<ul class="dropdown-menu" id="menu">
<li>Point of Sale (POS)</li>
<li>Business Intelligence & Reporting </li>
<li>Integrations</li>
</ul>
</li>
<li>Our Customers</li>
<li>What's New</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
jquery collapse
(function($) {
// Constructor
function Collapse (el, options) {
options = options || {};
var _this = this,
query = options.query || "> :even";
$.extend(_this, {
$el: el,
options : options,
sections: [],
isAccordion : options.accordion || false,
db : options.persist ? jQueryCollapseStorage(el.get(0).id) : false
});
// Figure out what sections are open if storage is used
_this.states = _this.db ? _this.db.read() : [];
// For every pair of elements in given
// element, create a section
_this.$el.find(query).each(function() {
new jQueryCollapseSection($(this), _this);
});
// Capute ALL the clicks!
(function(scope) {
_this.$el.on("click", "[data-collapse-summary] " + (scope.options.clickQuery || ""),
$.proxy(_this.handleClick, scope));
_this.$el.bind("toggle close open",
$.proxy(_this.handleEvent, scope));
}(_this));
}
Collapse.prototype = {
handleClick: function(e, state) {
e.preventDefault();
var state = state || "toggle"
var sections = this.sections,
l = sections.length;
while(l--) {
if($.contains(sections[l].$summary[0], e.target)) {
sections[l][state]();
break;
}
}
},
handleEvent: function(e) {
if(e.target == this.$el.get(0)) return this[e.type]();
this.handleClick(e, e.type);
},
open: function(eq) {
if(isFinite(eq)) return this.sections[eq].open();
$.each(this.sections, function(i, section) {
section.open();
})
},
close: function(eq) {
if(isFinite(eq)) return this.sections[eq].close();
$.each(this.sections, function(i, section) {
section.close();
})
},
toggle: function(eq) {
if(isFinite(eq)) return this.sections[eq].toggle();
$.each(this.sections, function(i, section) {
section.toggle();
})
}
};
// Section constructor
function Section($el, parent) {
if(!parent.options.clickQuery) $el.wrapInner('<a href="#"/>');
$.extend(this, {
isOpen : false,
$summary : $el.attr("data-collapse-summary",""),
$details : $el.next(),
options: parent.options,
parent: parent
});
parent.sections.push(this);
// Check current state of section
var state = parent.states[this._index()];
if(state === 0) {
this.close(true)
}
else if(this.$summary.is(".open") || state === 1) {
this.open(true);
} else {
this.close(true)
}
}
Section.prototype = {
toggle : function() {
this.isOpen ? this.close() : this.open();
},
close: function(bypass) {
this._changeState("close", bypass);
},
open: function(bypass) {
var _this = this;
if(_this.options.accordion && !bypass) {
$.each(_this.parent.sections, function(i, section) {
section.close()
});
}
_this._changeState("open", bypass);
},
_index: function() {
return $.inArray(this, this.parent.sections);
},
_changeState: function(state, bypass) {
var _this = this;
_this.isOpen = state == "open";
if($.isFunction(_this.options[state]) && !bypass) {
_this.options[state].apply(_this.$details);
} else {
_this.$details[_this.isOpen ? "show" : "hide"]();
}
_this.$summary.toggleClass("open", state != "close")
_this.$details.attr("aria-hidden", state == "close");
_this.$summary.attr("aria-expanded", state == "open");
_this.$summary.trigger(state == "open" ? "opened" : "closed", _this);
if(_this.parent.db) {
_this.parent.db.write(_this._index(), _this.isOpen);
}
}
};
// Expose in jQuery API
$.fn.extend({
collapse: function(options, scan) {
var nodes = (scan) ? $("body").find("[data-collapse]") : $(this);
return nodes.each(function() {
var settings = (scan) ? {} : options,
values = $(this).attr("data-collapse") || "";
$.each(values.split(" "), function(i,v) {
if(v) settings[v] = true;
});
new Collapse($(this), settings);
});
}
});
//jQuery DOM Ready
$(function() {
$.fn.collapse(false, true);
});
// Expose constructor to
// global namespace
jQueryCollapse = Collapse;
jQueryCollapseSection = Section;
})(window.jQuery);
jquery accordion
(function ($) {
$.fn.accordion = function (options) {
//firewalling
if (!this || this.length < 1) {
return this;
}
initialize(this, options);
};
//create the initial accordion
function initialize(obj, options) {
//build main options before element iteration
var opts = $.extend({}, $.fn.accordion.defaults, options);
//store any opened default values to set cookie later
var opened = '';
//iterate each matched object, bind, and open/close
obj.each(function () {
var $this = $(this);
saveOpts($this, opts);
//bind it to the event
if (opts.bind == 'mouseenter') {
$this.bind('mouseenter', function (e) {
e.preventDefault();
toggle($this, opts);
});
}
//bind it to the event
if (opts.bind == 'mouseover') {
$this.bind('mouseover', function (e) {
e.preventDefault();
toggle($this, opts);
});
}
//bind it to the event
if (opts.bind == 'click') {
$this.bind('click', function (e) {
e.preventDefault();
toggle($this, opts);
});
}
//bind it to the event
if (opts.bind == 'dblclick') {
$this.bind('dblclick', function (e) {
e.preventDefault();
toggle($this, opts);
});
}
//initialize the panels
//get the id for this element
id = $this.attr('id');
//if not using cookies, open defaults
if (!useCookies(opts)) {
//close it if not defaulted to open
if (id != opts.defaultOpen) {
$this.addClass(opts.cssClose);
opts.loadClose($this, opts);
} else { //its a default open, open it
$this.addClass(opts.cssOpen);
opts.loadOpen($this, opts);
opened = id;
}
} else { //can use cookies, use them now
//has a cookie been set, this overrides default open
if (issetCookie(opts)) {
if (inCookie(id, opts) === false) {
$this.addClass(opts.cssClose);
opts.loadClose($this, opts);
} else {
$this.addClass(opts.cssOpen);
opts.loadOpen($this, opts);
opened = id;
}
} else { //a cookie hasn't been set open defaults
if (id != opts.defaultOpen) {
$this.addClass(opts.cssClose);
opts.loadClose($this, opts);
} else { //its a default open, open it
$this.addClass(opts.cssOpen);
opts.loadOpen($this, opts);
opened = id;
}
}
}
});
//now that the loop is done, set the cookie
if (opened.length > 0 && useCookies(opts)) {
setCookie(opened, opts);
} else { //there are none open, set cookie
setCookie('', opts);
}
return obj;
}
;
//load opts from object
function loadOpts($this) {
return $this.data('accordion-opts');
}
//save opts into object
function saveOpts($this, opts) {
return $this.data('accordion-opts', opts);
}
//hides a accordion panel
function close(opts) {
opened = $(document).find('.' + opts.cssOpen);
$.each(opened, function () {
//give the proper class to the linked element
$(this).addClass(opts.cssClose).removeClass(opts.cssOpen);
opts.animateClose($(this), opts);
});
}
//opens a accordion panel
function open($this, opts) {
close(opts);
//give the proper class to the linked element
$this.removeClass(opts.cssClose).addClass(opts.cssOpen);
//open the element
opts.animateOpen($this, opts);
//do cookies if plugin available
if (useCookies(opts)) {
// split the cookieOpen string by ","
id = $this.attr('id');
setCookie(id, opts);
}
}
//toggle a accordion on an event
function toggle($this, opts) {
// close the only open item
if ($this.hasClass(opts.cssOpen))
{
close(opts);
//do cookies if plugin available
if (useCookies(opts)) {
// split the cookieOpen string by ","
setCookie('', opts);
}
return false;
}
close(opts);
//open a closed element
open($this, opts);
return false;
}
//use cookies?
function useCookies(opts) {
//return false if cookie plugin not present or if a cookie name is not provided
if (!$.cookie || opts.cookieName == '') {
return false;
}
//we can use cookies
return true;
}
//set a cookie
function setCookie(value, opts)
{
//can use the cookie plugin
if (!useCookies(opts)) { //no, quit here
return false;
}
//cookie plugin is available, lets set the cookie
$.cookie(opts.cookieName, value, opts.cookieOptions);
}
//check if a accordion is in the cookie
function inCookie(value, opts)
{
//can use the cookie plugin
if (!useCookies(opts)) {
return false;
}
//if its not there we don't need to remove from it
if (!issetCookie(opts)) { //quit here, don't have a cookie
return false;
}
//unescape it
cookie = unescape($.cookie(opts.cookieName));
//is this value in the cookie arrray
if (cookie != value) { //no, quit here
return false;
}
return true;
}
//check if a cookie is set
function issetCookie(opts)
{
//can we use the cookie plugin
if (!useCookies(opts)) { //no, quit here
return false;
}
//is the cookie set
if ($.cookie(opts.cookieName) == null) { //no, quit here
return false;
}
return true;
}
// settings
$.fn.accordion.defaults = {
cssClose: 'accordion-close', //class you want to assign to a closed accordion header
cssOpen: 'accordion-open', //class you want to assign an opened accordion header
cookieName: 'accordion', //name of the cookie you want to set for this accordion
cookieOptions: {//cookie options, see cookie plugin for details
path: '/',
expires: 7,
domain: '',
secure: ''
},
defaultOpen: '', //id that you want opened by default
speed: 'slow', //speed of the slide effect
bind: 'click', //event to bind to, supports click, dblclick, mouseover and mouseenter
animateOpen: function (elem, opts) { //replace the standard slideDown with custom function
elem.next().stop(true, true).slideDown(opts.speed);
},
animateClose: function (elem, opts) { //replace the standard slideUp with custom function
elem.next().stop(true, true).slideUp(opts.speed);
},
loadOpen: function (elem, opts) { //replace the default open state with custom function
elem.next().show();
},
loadClose: function (elem, opts) { //replace the default close state with custom function
elem.next().hide();
}
};
})(jQuery);
Am trying to create a simple jquery plugin for my web page the problem am facing here here is handling the click even for dynamic content.
I have tried using document on click selector but it doesn't work and but using select on click works fine when page load but on dynamic content it doesn't. When i use $(document).on("click", clickedElement, function(event) for the click event consoling $(this).data("object-id") will show undefined.
<span class="openModalTemplate" data-object-id="item100">Open 1</span>
<span class="openModalTemplate" data-object-id="item101">Open 2</span>
<span class="openModalTemplate" data-object-id="item103">Open 3</span>
<script>
$(function(){
$(".openModalTemplate").Template({
element: "#newOpen"
type: "product"
});
});
</script>
My function
(function($){
$.fn.Template = function(options) {
var clickedElement = $(this);
if(typeof options === "object") {
options = $.extend(true, options, {
/*Locals*/
element: '#createObjectElement',
type: "product",
action: null,
apiURL: null,
object: null,
categoryType: "ITEM"
});
}
$(document).on("click", clickedElement, function(event){
//clickedElement.on("click", function(event){
var currentElemnt = $(this);
var action_id = $(this).data("object-id");
//if(action_id === undefined){action_id = options.action;}
if(options.type =="close"){
}
console.log("action_id", action_id);
console.log("element", options.element);
if (options.onAfterOpen !== undefined) {
options.onAfterOpen(event);
}
if (options.onAfterClose !== undefined) {
options.onAfterClose(event);
}
if (options.onError !== undefined) {
options.onError(event);
}
event.preventDefault();
});
};
})(jQuery);
unfortunately from searching there is no way to do this from inside the plugin .. the plugin set for the present elements not the new one .. so you need to run the plugin again for the new created elements
And when you refresh the plugin the events fires multiple times and to avoid that You can add class to the elements then remove the class inside the plugin ..
see changes below
(function($){
$.fn.Template = function(settings) { //<<< here
var clickedElement = $(this);
clickedElement.removeClass('ToPlugin'); //<<<< remove ToPlugin class
if(typeof settings === "object") { //<<<<<< here
var options = $.extend({
/*Locals*/
element: '#createObjectElement',
type: "product",
action: null,
apiURL: null,
object: null,
categoryType: "ITEM"
} , settings); //<<<<< here
}
clickedElement.on("click", function(event){
var currentElemnt = $(this);
var action_id = $(this).data("object-id");
//if(action_id === undefined){action_id = options.action;}
if(options.type =="close"){
}
console.log("action_id", action_id);
console.log("element", options.element);
if (options.onAfterOpen !== undefined) {
options.onAfterOpen(event);
}
if (options.onAfterClose !== undefined) {
options.onAfterClose(event);
}
if (options.onError !== undefined) {
options.onError(event);
}
event.preventDefault();
});
};
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>Add Span</button>
<span class="openModalTemplate ToPlugin" data-object-id="item100">Open 1</span>
<span class="openModalTemplate ToPlugin" data-object-id="item101">Open 2</span>
<span class="openModalTemplate ToPlugin" data-object-id="item103">Open 3</span>
<script>
$(function(){
refresh_Template(); // use the function onload
var i = 4;
$('button').on('click' , function(){
$('body').append('<span class="openModalTemplate ToPlugin" data-object-id="item10'+i+'">Open '+i+'</span>');
i++;
refresh_Template(); // use the function on click
});
});
// create a function to refresh the plugin instead of repeat it every time
function refresh_Template(){
$(".openModalTemplate.ToPlugin").Template({
element: "#newOpen",
type: "product"
});
}
</script>
Note: don't forget to add the class ToPlugin to any element you need to use the plugin with (both static and dynamic elements)
Ok, this is a bit special. We are using UIkit in our XPages application. We also use the tabs and switcher component (http://getuikit.com/docs/tab.html and http://getuikit.com/docs/switcher.html).
They work fine until we do a partial refresh of the page. The reason is that those components are initiliazed only once after the pages is loaded. This happens directly in the lib we bind to the page - no own init script etc.
After the refresh I must re-init the whole stuff - but I am not familiar with the syntax or even the possibilities.
I searched the UIkit lib though and found something like this:
(function(UI) {
"use strict";
UI.component('tab', {
defaults: {
'target' : '>li:not(.uk-tab-responsive, .uk-disabled)',
'connect' : false,
'active' : 0,
'animation' : false,
'duration' : 200
},
boot: function() {
// init code
UI.ready(function(context) {
UI.$("[data-uk-tab]", context).each(function() {
var tab = UI.$(this);
if (!tab.data("tab")) {
var obj = UI.tab(tab, UI.Utils.options(tab.attr("data-uk-tab")));
}
});
});
},
init: function() {
var $this = this;
this.current = false;
this.on("click.uikit.tab", this.options.target, function(e) {
e.preventDefault();
if ($this.switcher && $this.switcher.animating) {
return;
}
var current = $this.find($this.options.target).not(this);
current.removeClass("uk-active").blur();
$this.trigger("change.uk.tab", [UI.$(this).addClass("uk-active"), $this.current]);
$this.current = UI.$(this);
// Update ARIA
if (!$this.options.connect) {
current.attr('aria-expanded', 'false');
UI.$(this).attr('aria-expanded', 'true');
}
});
if (this.options.connect) {
this.connect = UI.$(this.options.connect);
}
// init responsive tab
this.responsivetab = UI.$('<li class="uk-tab-responsive uk-active"><a></a></li>').append('<div class="uk-dropdown uk-dropdown-small"><ul class="uk-nav uk-nav-dropdown"></ul><div>');
this.responsivetab.dropdown = this.responsivetab.find('.uk-dropdown');
this.responsivetab.lst = this.responsivetab.dropdown.find('ul');
this.responsivetab.caption = this.responsivetab.find('a:first');
if (this.element.hasClass("uk-tab-bottom")) this.responsivetab.dropdown.addClass("uk-dropdown-up");
// handle click
this.responsivetab.lst.on('click.uikit.tab', 'a', function(e) {
e.preventDefault();
e.stopPropagation();
var link = UI.$(this);
$this.element.children('li:not(.uk-tab-responsive)').eq(link.data('index')).trigger('click');
});
this.on('show.uk.switcher change.uk.tab', function(e, tab) {
$this.responsivetab.caption.html(tab.text());
});
this.element.append(this.responsivetab);
// init UIkit components
if (this.options.connect) {
this.switcher = UI.switcher(this.element, {
"toggle" : ">li:not(.uk-tab-responsive)",
"connect" : this.options.connect,
"active" : this.options.active,
"animation" : this.options.animation,
"duration" : this.options.duration
});
}
UI.dropdown(this.responsivetab, {"mode": "click"});
// init
$this.trigger("change.uk.tab", [this.element.find(this.options.target).filter('.uk-active')]);
this.check();
UI.$win.on('resize orientationchange', UI.Utils.debounce(function(){
if ($this.element.is(":visible")) $this.check();
}, 100));
this.on('display.uk.check', function(){
if ($this.element.is(":visible")) $this.check();
});
},
check: function() {
var children = this.element.children('li:not(.uk-tab-responsive)').removeClass('uk-hidden');
if (!children.length) return;
var top = (children.eq(0).offset().top + Math.ceil(children.eq(0).height()/2)),
doresponsive = false,
item, link;
this.responsivetab.lst.empty();
children.each(function(){
if (UI.$(this).offset().top > top) {
doresponsive = true;
}
});
if (doresponsive) {
for (var i = 0; i < children.length; i++) {
item = UI.$(children.eq(i));
link = item.find('a');
if (item.css('float') != 'none' && !item.attr('uk-dropdown')) {
item.addClass('uk-hidden');
if (!item.hasClass('uk-disabled')) {
this.responsivetab.lst.append('<li>'+link.html()+'</li>');
}
}
}
}
this.responsivetab[this.responsivetab.lst.children('li').length ? 'removeClass':'addClass']('uk-hidden');
}
});
})(UIkit);
Similar code is created for the connected switcher component.
You can see a demo of my problem here: http://notesx.net/customrenderer.nsf/demo.xsp
Source code here: https://github.com/zeromancer1972/CustomRendererDemo/blob/master/ODP/XPages/demo.xsp
As this is part of the library itself I'd like to find a way to call this from outside the library.
Any ideas are highly appreciated!
Newer versions of uikit have an init method, upgrade and call it from the onComplete event of the combo box.
<xp:comboBox
id="comboBox1">
<xp:selectItems>
<xp:this.value><![CDATA[#{javascript:return ["value 1", "value 2"];}]]></xp:this.value>
</xp:selectItems>
<xp:eventHandler
event="onchange"
submit="true"
refreshMode="partial"
refreshId="page"
onComplete="$.UIkit.init();">
</xp:eventHandler>
</xp:comboBox>
Given the jQuery dropdown plugin below. Is there a way to add a method that would allow for a separate function outside of the dropdown to 'hideMenu'? Thanks
For example, if I applied the plugin to a div with an ID like so:
$('#settings.dropdown').dropDownMenu();
How could I then call to close the dropDownMenu w hideMenu from outside of the plugin? Thanks
jQuery.fn.dropDownMenu = function() {
// Apply the Dropdown
return this.each(function() {
var dropdown = $(this),
menu = dropdown.next('div.dropdown-menu'),
parent = dropdown.parent();
// For keeping track of what's "open"
var activeClass = 'dropdown-active',
showingDropdown = false,
showingMenu,
showingParent,
opening;
// Dropdown Click to Open
dropdown.click(function(e) {
opening = true; // Track opening so that the body click doesn't close. This allows other js views to bind to the click
e.preventDefault();
if (showingDropdown) {
dropdown.removeClass(activeClass);
parent.removeClass(activeClass);
showingMenu.hide();
showingDropdown = false;
} else {
showingDropdown = true;
showingMenu = menu;
showingParent = parent;
menu.show();
dropdown.addClass(activeClass);
parent.addClass(activeClass);
}
});
// When you click anywhere on the page, we detect if we need to blur the Dropdown Menu
$('body').click(function(e) {
if (!opening && showingParent) {
var parentElement = showingParent[0];
if (!$.contains(parentElement, e.target) || !parentElement == e.target) {
hideMenu();
}
}
opening = false;
});
// hides the current menu
var hideMenu = function() {
if(showingDropdown) {
showingDropdown = false;
dropdown.removeClass(activeClass);
parent.removeClass(activeClass);
showingMenu.hide();
}
};
});
};
jQuery advises making multiple methods available through the plugin itself:
jQuery.fn.dropDownMenu = function(method) {
var methods = {
init: function() {
// Put all your init code here
},
hide: function() {
hideMenu();
}
};
if ( methods[method] ) {
return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof method === 'object' || ! method ) {
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + method + ' does not exist on jQuery.tooltip' );
}
function hideMenu() {
// ...
}
};
See http://docs.jquery.com/Plugins/Authoring#Plugin_Methods
Update: Use like this:
// Use the plugin normally to run the init method
$('#settings.dropdown').dropDownMenu();
// Call the hide method
$('#settings.dropdown').dropDownMenu('hide');
Sure. Give hideMenu to the global window object, like this:
window["hideMenu"] = function() {
if(showingDropdown) {
showingDropdown = false;
dropdown.removeClass(activeClass);
parent.removeClass(activeClass);
showingMenu.hide();
}
};
You can then call it as usual anywhere you need to.
Have the following JS included in my HTML:
document.observe('dom:loaded', function() {
Event.addBehavior( {
'a.move-up:click': function(event) {
moveUp(this);
event.stop();
},
'a.move-down:click': function(event) {
moveDown(this);
event.stop();
}
});
});
function moveUp(element) {
var questionElement = $(element).up('div.question');
var preQuestionElement = questionElement.previous('div.question');
moveElments('up', questionElement , preQuestionElement);
}
function moveDown(element) {
var questionElement = $(element).up('.question');
var postQuestionElement = questionElement.next('.question');
moveElllments('down', questionElement , postQuestionElement);
}
function moveElments(direction, targRow, sibling) {
var targetParent = targRow.up('div.questions');
if(direction == 'up'){
targRow.remove();
targetParent.insertBefore(targRow, sibling);
}
if(direction == 'down'){
sibling.remove();
targetParent.insertBefore(sibling, targRow);
}
}
I then have a link that, when clicked, should move a question (enclosed in div.question) up within a parent (div.questions).
<a class="move-up" href="#" style="">Move Up</a>
However it does not seem to work. Appears that the Event handler does not see the "click" event...
What is wrong with that code?
Thanks!
Im not familiar with lowpro, but here's a solution using vanilla Prototype, and attaches your event listeners using observe:
document.observe('dom:loaded', function() {
$$('a.move-up').observe('click', function(event) {
moveUp(this);
event.stop();
});
$$('a.move-down').observe('click', function(event) {
moveDown(this);
event.stop();
});
});