Twitter bootstrap dropdown menu doesn't work properly - javascript

I trying to use this menu Bootstrap Collapsible Side Menu but something doesn't work properly. There is + sign and - for open and close. When I open first menu + become - as must be but when I click on second menu first must close and - must become +. I hope you get what I mean. This doesn't work properly. Also when I click on second menu the icon that is front of the name become - also.
I've tried to recreate this menu in jsfiddle but doesn't work there. Doesn't open the menu but you can see what happen with + and - signs. If you click on both links they are with -.
Here is the jsfiddle. I didn't work with jsfiddle before.

Looks like you just forgot to load jquery, or you are loading it after bootstrap. It works fine if you load it properly.
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
http://jsfiddle.net/acidrat/BP6Wh/2/
Check you browser console for error messages.
EDIT
Ok, now i get it. You will have to work with Bootstrap collapse events that are triggered after collapsing.
$('#menu-bar').on('shown.bs.collapse', function () {
var currentlySelectedElement = $(this).find('.collapse.in');
var targetAnchor = $('[data-target="#' + currentlySelectedElement.attr('id') + '"]');
$('[data-target="#' + currentlySelectedElement.attr('id') + '"]').find("i.fa-plus").removeClass("fa-plus").addClass("fa-minus");
});
$('#menu-bar').on('hidden.bs.collapse', function () {
var currentlyCollapsedElements = $(this).find('.collapsed');
currentlyCollapsedElements.each(function () {
$(this).find('i.fa-minus').removeClass('fa-minus').addClass('fa-plus');
});
});
Here the updated jsFiddle: http://jsfiddle.net/acidrat/BP6Wh/5/

Related

How to reuse my code for opening Accordions on click

I'm currently using the following JS to open an accordion when an <a> tag is clicked. It uses the data-trigger value to determine what <a> to use.
<script type="text/javascript">
$('[data-trigger="accordion"]').on('click', function(e) {
var obj = $(this),
accordionButtons = $('[href*="#"]', '[data-accordion] .accordion-navigation'),
accordionPanels = $('.content.1', '[data-accordion]');
if (obj.hasClass('toggle-open')) {
accordionButtons.removeClass('active');
accordionPanels.removeClass('active');
obj.removeClass('toggle-open');
} else {
accordionButtons.addClass('active');
accordionPanels.addClass('active');
obj.addClass('toggle-open');
}
$('[href*="#"]', '[data-accordion] .accordion-navigation').trigger('click.fndtn.accordion');
window.location.href = "#" + anchor;
e.preventDefault();
});
</script>
This above JS will open an accordion based on it's class. Below is an example of the link that is used to open the Accordion:
<a href="#protect-the-nhs" data-trigger="accordion">
An example of the code that it is referencing to open the accordion:
<div id="protect-the-nhs" class="content 1">
I was wondering if anyone can help me change this code so that I can reuse it for each Accordion on the page. Let me explain. The page has 5 different accordions, above I have used generic naming for the data-trigger and the accordion class "content 1".
I'd like to know if it is possible to somehow make it so I can use this code for each different accordion (So for example accordion 1 would have a class of "content 1", accordion 2 would have a class of "content 2" etc. However, for each accordion, there would also be a different link you have to click to open the accordion.
For example: Accordion one would rely on an <a> tag with data-trigger="accordion1" and it would open the accordion with class="content 1".
I hope someone understands my ask and might be able to help! I've tried looking for something for this but haven't found anything. I'm still learning JS so TIA.
Thanks.
My basic idea is to listen to the entire document, determine where got clicked and activate the correct accordion
PLEASE NOTE: I'm assuming that every accordion has a number right after it that corresponds to the content classes like accordion1 content 1
document.onclick=function(e) {
if(!e.path[0].dataset.trigger){return;} //i forgot that not every element has a data-trigger
if(!e.path[0].dataset.trigger.startsWith('accordion')){return;} //listening to the whole document needs you have to ensure you aren't activating when you don't need to
var n=e.path[0]["data-trigger"].split('accordion')[1]
alert(n)
var obj = e.path[0],
accordionButtons = $('[href*="#"]', '[data-accordion] .accordion-navigation'),
accordionPanels = $(`.content.${n}`, '[data-accordion]');
if (obj.hasClass('toggle-open')) {
accordionButtons.removeClass('active');
accordionPanels.removeClass('active');
obj.removeClass('toggle-open');
} else {
accordionButtons.addClass('active');
accordionPanels.addClass('active');
obj.addClass('toggle-open');
}
$('[href*="#"]', '[data-accordion] .accordion-navigation').trigger('click.fndtn.accordion');
window.location.href = "#" + anchor;
e.preventDefault();
}

External URL in nav bar doesn't work in bootstrap

Recently set up a theme running bootstrap to run as our website. Everything works fine, including external URLs that have been placed in the HTML.
The thing is, the actual navigation bar does not register the external URLs and will not open them when you click. It's being stopped by the JS "Magnific Popup" but I do not know why specifically. Any help would be greatly appreciated.
Here is a link to the website, and the navigation bar with the error is top-right.
Rustoria Website
This is usually caused by preventDefault() method inside the javascript. I believe the navigation originally intended for anchor scrolls. Inside the main.js file, you will find the following code in line 62.
// Page Nav
var clickMenu = function() {
$('#navbar a:not([class="external"])').click(function(event){
var section = $(this).data('nav-section'),
navbar = $('#navbar');
if ( $('[data-section="' + section + '"]').length ) {
$('html, body').animate({
scrollTop: $('[data-section="' + section + '"]').offset().top
}, 500);
}
if ( navbar.is(':visible')) {
navbar.removeClass('in');
navbar.attr('aria-expanded', 'false');
$('.js-fh5co-nav-toggle').removeClass('active');
}
event.preventDefault();
return false;
});
};
As you can see the function is preventing the default action. After reading this function, you can see the jquery selector is looking for the a tags without "external" class. Simply adding "external" class to the a tag will fix the issue.

How to trigger JPanelMenu with Hammer.js

I got JPanelMenu working on a button click, using the methodology described in the manual.
I am using two Hammer.JS actions on my mobile webapp, swipe right to return to the index page, and would like to use swipeleft to show the menu.
Here is the Hammer code, with the JPanelMenu trigger.
This does activate the menu, however, once the menu is closed, and then reopened with another swipe, the width of the menu appears to have doubled and filled with whitespace, the width increases with each subsequent activation.... Any ideas?
<script type="text/javascript">
var hammer = $('body').hammer();
hammer.on('swipeleft', function(event) {
var jPMx = $.jPanelMenu();
jPMx.on();
jPMx.trigger(true);
});
</script>
Commenting out the jPmx.on() seemed to fix this, to allow both swipe and click a button to activate the menu.
<script type="text/javascript">
var hammer = $('body').hammer();
hammer.on('swipeleft', function(event) {
var jPMx = $.jPanelMenu();
// jPMx.on();
jPMx.trigger(true);
});
</script>

Jquery .ClickOut Event

Hi everybody,
I have some issue with one of my project. I'm currently developing a toolbar for Google Chrome. The concept is that my extension insert by using a content script an iframe in every page i visit. Materialized in Red on my Printscreen.
After that i've created another iframe who appear when i click on the "Menu" Button. This iframe appear like a dropMenu. Materialized in orange in the printscreen.
Well now let me explain my problem :
When i click on the "dropMenuButton" i execute this code :
$( "#dM1").click( function() {
dropMenu('dropMenu1', $(this).position().left);
});
To be clear the function "dropMenu" will call my background page (by messaging exchange) to show or hide the dropMenu, in function if it's allready activated or not.
Here is the executed code by the "dropMenu function"
if(document.getElementById("dropMenu"))
{
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
}
else
{
var body = $('body'),
MenuURL = chrome.extension.getURL(dropMenuPage + ".html"),
iframe = $('<iframe id="dropMenu" scrolling="no" src="'+MenuURL+'">');
body.append(iframe);
$("#dropMenu").hide().slideDown(800);
// Shift the menu (Left)
$("#dropMenu").css({left: marginLeft+'px'});
}
So the event on dropMenuButton work perfectly but i want to provide some ameliorations like a .ClickOut event. What i want is that when somebody click outside the dropMenu (in orange) the menu will be hide.
I've tried a lot of things but nothing work...
Hope somebody will provide me some help !
Thanks in advance.
Edit (Injection) :
I've tried to inject the javascript like this :
var injectJs = $('<script type=text/javascript>' +
'$(document).click(function() {' +
'dropMenu("dropMenu1", 0);' +
'});');
body.append(injectJs);
injectJs = $('$("#dropMenu").click( function(e) {' +
'e.stopPropagation();' +
'});' +
'</script>');
body.append(injectJs);
But it didn't seems to inject on the page. It should have a problem somewhere...
Can't you just add a click event on the document? Then on the actual drop down menu (or any other events where you don't want to hide the drop down) prevent any clicks from bubbling up:
$(document).click(function(){
// hide drop down clicking anywhere on page:
$("#dropMenu").slideUp(800, function() {
$(this).remove();
});
});
$("#dropMenu").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
});
It works great but like this :
$(document).click(function(){
// hide drop down clicking anywhere on page:
dropMenu('slideUp', 0);
});
$("#dM1").click( function(e) {
e.stopPropagation(); // prevent click on drop menu from removing the drop down.
dropMenu('dropMenu1', $(this).position().left);
});
Now i have to insert the similar code on the global page, someone have an idea how i can insert dynamically a js code ?

How to close jQuery Tools Overlay on click, no matter where?

I've added the Overlay effect of jQuery Tools to my site, using the "Minimum Setup". Unfortunately when the user wants to close it, he must target this tiny circle on the upper right. Usability suffers this way. It would be far better if the user could simply click anywhere to close it.
Can I modify or add some code so it would close the overlay no matter where to user clicks? Or maybe when he clicks outside of the overlay? I couldn't find any notes on that in the docs.
Or maybe when he clicks outside of the overlay?
Check the docs ('Configuration' part):
closeOnClick (default: true)
By default, overlays are closed when the mouse is clicked outside the overlay area. Setting this property to false suppresses this behaviour which is suitable for modal dialogs.
I.e., this functionality is already enabled by default. If it's not working, you might want to show us your overlay configuration.
#NikitaRybak The closeOnClick only works when you're using a expose/mask. I've modified the overlay code to work without a expose/mask..
Tidy the minified javascript..
locate this in the minified code:
b.closeOnClick && a(document).bind("click." + n, function(l) {
and insert this to the function instead
if (!a(l.target).hasClass('overlay') && !a(l.target).hasClass('apple') && !a(l.target).parents('.overlay', f).length && !a(l.target).parents('[rel="#' + a(f).attr('id') + '"]').length && !(a(l.target).attr('rel') == '#' + a(f).attr('id'))) { c.close(l); }
Now if you're using the apple effect, find this in the apple effect code:
b = h('<img src="' + b + '"/>');
and insert class="apple" so it becomes:
b = h('<img class="apple" src="' + b + '"/>');
Hope this helps if anyone needs it..
Try (quick and dirty):
$(document).click(function(){
$('.simple_overlay:visible .close').click();
});
During my experiments I found out that even official jQuery Tools standalone demo doesn't close overlay correctly. For example when I click under the overlayed image it closes but when I click on the right or left side outside of the overlay it doesn't close.
So, in my case I used next solution to close overlay on click anywhere on the document:
<script type="text/javascript">
function closeOverlay(){
$('.overlay:visible .close').click();
}
document.addEventListener('click',closeOverlay,true);
</script>
May be it's dirty too but it works for me.

Categories