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);
I am currently developing a calendar where activities can be drag&dropped to other days.
When an activity is dropped into a different day, I show a custom modal using durandal's dialog plugin. The problem is when an user closes the modal, the activity has to revert to its original position. When an activity is dropped the following code is called:
function showDroppedActivityModal(obj) {
require(['modals/droppedActivityModal/droppedActivityModal', 'moment'], function(droppedActivityModal, moment) {
droppedActivityModal.show(obj).then(function(response) {
if(response !== false) {
...
}
// dialog closes
else {
calendarView.revertActivity.notify({ revert: true})
}
});
});
}
In my calendarView I implemented the revertActivity event to set revert to true but the function never re-evaluates itself but i'm able to receive the new revert value (true).
$(activity).draggable({
revert: function() {
var revert = false;
self.revertActivity.attach(function(sender, args) {
revert = args.revert;
});
return revert;
}
});
Custom event code:
function CalendarEvent(sender) {
this._sender = sender;
this._listeners = [];
}
CalendarEvent.prototype = {
attach : function (listener) {
this._listeners.push(listener);
},
notify : function (args) {
var index;
for (index = 0; index < this._listeners.length; index += 1) {
this._listeners[index](this._sender, args);
}
},
remove : function (listener){
this._listeners.remove(listener);
}
};
this.revertActivity = new CalendarEvent(this);
Im working with some JS code, since Im not front developer im having some issues to figuring out how to trigger an event on JS that normally fires when a link is clicked.
This is the link:
Demo
And the JS function that intercept the click on that link is:
(function (global) {
'use strict';
// Storage variable
var modal = {};
// Store for currently active element
modal.lastActive = undefined;
modal.activeElement = undefined;
// Polyfill addEventListener for IE8 (only very basic)
modal._addEventListener = function (element, event, callback) {
if (element.addEventListener) {
element.addEventListener(event, callback, false);
} else {
element.attachEvent('on' + event, callback);
}
};
// Hide overlay when ESC is pressed
modal._addEventListener(document, 'keyup', function (event) {
var hash = window.location.hash.replace('#', '');
// If hash is not set
if (hash === '' || hash === '!') {
return;
}
// If key ESC is pressed
if (event.keyCode === 27) {
window.location.hash = '!';
if (modal.lastActive) {
return false;
}
// Unfocus
modal.removeFocus();
}
}, false);
// Convenience function to trigger event
modal._dispatchEvent = function (event, modal) {
var eventTigger;
if (!document.createEvent) {
return;
}
eventTigger = document.createEvent('Event');
eventTigger.initEvent(event, true, true);
eventTigger.customData = { 'modal': modal };
document.dispatchEvent(eventTigger);
};
// When showing overlay, prevent background from scrolling
modal.mainHandler = function () {
var hash = window.location.hash.replace('#', '');
var modalElement = document.getElementById(hash);
var htmlClasses = document.documentElement.className;
var modalChild;
// If the hash element exists
if (modalElement) {
// Get first element in selected element
modalChild = modalElement.children[0];
// When we deal with a modal and body-class `has-overlay` is not set
if (modalChild && modalChild.className.match(/modal-inner/) &&
!htmlClasses.match(/has-overlay/)) {
// Set an html class to prevent scrolling
//document.documentElement.className += ' has-overlay';
// Mark modal as active
modalElement.className += ' is-active';
modal.activeElement = modalElement;
// Set the focus to the modal
modal.setFocus(hash);
// Fire an event
modal._dispatchEvent('cssmodal:show', modal.activeElement);
}
} else {
document.documentElement.className =
htmlClasses.replace(' has-overlay', '');
// If activeElement is already defined, delete it
if (modal.activeElement) {
modal.activeElement.className =
modal.activeElement.className.replace(' is-active', '');
// Fire an event
modal._dispatchEvent('cssmodal:hide', modal.activeElement);
// Reset active element
modal.activeElement = null;
// Unfocus
modal.removeFocus();
}
}
};
modal._addEventListener(window, 'hashchange', modal.mainHandler);
modal._addEventListener(window, 'load', modal.mainHandler);
/*
* Accessibility
*/
// Focus modal
modal.setFocus = function () {
if (modal.activeElement) {
// Set element with last focus
modal.lastActive = document.activeElement;
// New focussing
modal.activeElement.focus();
}
};
// Unfocus
modal.removeFocus = function () {
if (modal.lastActive) {
modal.lastActive.focus();
}
};
// Export CSSModal into global space
global.CSSModal = modal;
}(window));
How can i call the function that gets called when the user clicks the link but manually on my page, something like <script>firelightbox(parameters);</script>
Using jQuery will solve this easily
$('.selector').click();
but plain old JavaScript may also have a solution for you
Let's just give your anchor element an Id (to keep things simple)
<a id="anchorToBeClicked" href="#modal-text" class="call-modal" title="Clicking this link shows the modal">Demo</a>
Let's create a function that simulates the click
function simulateClick() {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window,
0, 0, 0, 0, 0, false, false, false, false, 0, null);
var cb = document.getElementById("anchorToBeClicked");
cb.dispatchEvent(evt);
}
Now call this function on window.onload
window.onload = function() {
simulateClick();
};
EDIT:
Actually, the code you are using is not working on actual click event of the anchor tag, instead it relies on hash change of Url in your browser window. You can simply invoke that functionality by using
window.onload = function() {
location.hash = '#modal-text'
};
If you are using jQuery, you can trigger the clicking of a link on page load using this code:
$(document).ready(function(){
$('.call-modal').click();
});
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.
I have a lightbox with jwplayer inside of it and i also have links along with it, problem is that when I click one of the links it closes the light box and never goes to the link, almost as if there is a eventprevent function on the light box when there isnt... Any how this is my code I apprecaite any help I can get to to fixing this problem.
Thanks
jQuery.fn.center = function () {
this.css("position","fixed");
this.css("top", ( $(window).height() - this.outerHeight() ) / 2 + "px");
this.css("left", ( $(window).width() - this.outerWidth() ) / 2 + "px");
return this;
}
jQuery.jwbox = {
lightbox : null,
player : null,
toggle : function(context) {
if (!$.jwbox.lightbox) {
$.jwbox.lightbox = $(".jwbox_hidden", context);
$.jwbox.center();
$("#jwbox_background").fadeIn("fast");
$.jwbox.lightbox.css("display","block")
$.jwbox.center();
$("#jwbox_background").fadeTo(0, 0.8);
$("object", context).each(function(){
$.jwbox.player = document.getElementById(this.id);
});
} else if ((context.className == 'jwbox_content')) {
} else {
try {
$.jwbox.player.sendEvent("STOP");
$.jwbox.player = null;
} catch (err) {
}
$.jwbox.lightbox.css("display","none");
$.jwbox.lightbox = null;
$("#jwbox_background").fadeOut("fast");
}
},
center : function() {
if ($.jwbox.lightbox) {
$.jwbox.lightbox.center();
}
}
}
$(document).ready(function () {
$("body").append('<div id="jwbox_background"> </div>');
$(".jwbox").click(function () {$.jwbox.toggle(this); return false;});
$("#jwbox_background").click(function () {$.jwbox.toggle(this); return false;});
$(window).resize(function() {$.jwbox.center();});
});
I ran into a similar issue. I resolved it by switching to jQuery colorbox. See: http://jacklmoore.com/colorbox/#setting-overlayclose
Solution :
Use jquery.lightbox-0.5 file from the download package
Then in this file search for
// Assigning click events in elements to close overlay
$('#jquery-overlay,#jquery-lightbox').click(function() {
_finish();
});
and remove it all.