Trigger MDBootstrap side-nav with jQuery using custom hamburger button - javascript

This was working fine:
http://jsfiddle.net/musicformellons/ef76gud7/
Now I would like to use MDBootstrap instead of Bootstrap and so I have to alter this jQuery code:
$(document).ready(function () {
$('#navbar').on('show.bs.collapse', function () {
$('#nav-icon4').addClass('open');
});
$('#navbar').on('hide.bs.collapse', function () {
$('#nav-icon4').removeClass('open');
});
});
to work with this side-nav (using my own animated hamburger, see fiddle):
http://mdbootstrap.com/javascript/sidenav/
I can trigger the side-nav with my hamburger by adding these to my hamburger button:
data-activates="slide-out"
class="button-collapse"
But then I loose the animation, since obviously the bootstrap navbar collapse is no longer shown.
How can I have my hamburger animation together with the new side-nav? Probably the cited jQuery code needs to be adjusted completely?!
So following is needed: (1) trigger MD bootstrap sidenav from another CSS button then its default one (2) the hamburger animation should stay 'in sync' with the sidenav. For instance: just using toggle it would probably loose sync as I had similar experiences before: Bootstrap navbar toggle not in sync with dropdown menu
You could use this fiddle as a starting point:
http://jsfiddle.net/musicformellons/rto14vzp/2/
Comments regarding the fiddle:
ignore the JS and CSS resource panel message; i tried adding
mdbootstrap via the resource panel and it did not work whereas
current approach does.
the reference to mdbootstrap (via CDN url) refers to the free part
of mdbootstrap (the side-nav is part of the free package).

The most direct answer to your question is that you need to chain the button animation and sideNav() opening triggers together with one jQuery statement. If you add .nav-icon-line to your spans, that would look like this:
$("#nav-icon4, .nav-icon-line").click(function() {
$("#nav-icon4").addClass('open');
$(".button-collapse").sideNav();
});
There is a lot more going on here that I can't really get into because the source of sideNav() isn't freely available with the framework you are using.
Something else to consider:
You'd need to reset the hamburger animation in the same way by using removeClass(). I'm not really sure how that would work because sideNav() is a black box. From what I can see, sideNav() seems to hide the sidebar when you click outside of it; figure out what function controls that and put $("#nav-icon4").removeClass('open'); into the function.
Codepen example (not fully functional yet, depends on figuing out what's happening inside of sideNav).

Related

why Jquery not load when change route in angular 7?

I have a problem when navigate between routes with angular 7, for example... i have this code in my app-component.html
<app-navbar *ngIf="currentUser"></app-navbar>
<router-outlet></router-outlet>
<app-footer *ngIf="currentUser"></app-footer>
Everything in the page works, the <router-outlet></router-outlet> have the main component for the page, this component have inside another component, the <app-leftmenu></app-leftmenu> this is the sidebar; originally this was a html-bootstrap 3 template that i segmented for use in angular cli.
Ok the reason for this question is that the SIDEBAR uses jquery for the basic actions like collapse and expand using the next code:
//
// Sidebar categories
//
// Hide if collapsed by default
$('.category-collapsed').children('.category-content').hide();
// Rotate icon if collapsed by default
$('.category-collapsed').find('[data-action=collapse]').addClass('rotate-180');
// Collapse on click
$('.category-title [data-action=collapse]').click(function (e) {
e.preventDefault();
var $categoryCollapse = $(this).parent().parent().parent().nextAll();
$(this).parents('.category-title').toggleClass('category-collapsed');
$(this).toggleClass('rotate-180');
containerHeight(); // adjust page height
$categoryCollapse.slideToggle(150);
});
But not work in angular, only when i reload once time the component if i navigate to other route the sidebar ignore the jquery, but refreshing the page works... how i resolve this... with no refreshing? Thanks for the help!
Presumably because at the time your jQuery code is executed $('.category-collapsed'), there is no such element.
Try jQuery.on(), which allows for later binding: https://api.jquery.com/on/
So this
$('.category-title [data-action=collapse]').click(fn)
becomes (untested)
$(document).on('click', '.category-title [data-action=collapse]', fn)
I would strongly suggest using Angular-Bootstrap instead of a vanilla javascript/jquery solution.
https://ng-bootstrap.github.io/#/home
This library provides a variety of standard UI components - tabbed interfaces, dropdowns, accordion menus etc. all as native Angular components with full TypeScript support.

Responsive Multi-level Navigation bug

I have a small issue with Micah Godbolt's Responsive Multi-level Navigation with active parent links. It works great, except if the page loads slowly and you are hovering over the global nav, it can sometimes show two dropdowns. I'm guessing this is cause the javascript is not loading quick enough. Was wondering if anybody knew of an easy fix.
Here is the site I am using it on : http://library.buffalo.edu
If you refresh the page and hover over the links before the page fully loads, you see the problem screenshot of issue
I assume you are hiding your dropdowns with javascript so you could add style="display: none" on your divs or css and use hover function.
you havent post your html but here's example
$(".parent").mouseover(function() {
$(this).next("ul").show();
});
$(".parent").mouseleave(function() {
$(this).next("ul").hide();
})
or you can replace those with one click function and use jQuery toggleClass to toggle a class that have display: block on it
Below function will work. Try this
$(".nav-global li").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);

jQuery-Page not loading correctly

I recently used accordion jquery to help me expand/collapse content ( like a drop-down menu )..I used this script and placed it in the <body>
Script:
jQuery(document).ready(function($)
{
$("#accordions-727.accordions").accordion({
active: "",
event: "click",
collapsible: true,
heightStyle: "content",
animated: "swing",
})
})
The script is working fine but the page is not loading correctly..When I view or refresh the page, all the contents inside the drop-down menu becomes visible but once the page finishes loading everything becomes fine..Now how can I fix this?..Should I place the script in the <head>?
This is using jQueryUI accordion implicitly #Stew.
You have a wrong attribute in your accordion setup code, use the animate in place of animated.
Take a look in this API documentation: http://api.jqueryui.com/accordion
And it's the original component demonstration: http://jqueryui.com/accordion/
I suggest you to take a look in your jQuery files too, if they are OK and in the correct order (in <header> section).
Another point is to put your JavaScript in <header> section of your HTML and be sure you have no conflict or using older jQuery files versions than the component needs.
Hope it helps.

Jquery accordion wont stay collasped

Maybe someone having the same problem - Im having a small issue with collapse. I have read this article already along with a couple of others How do I keep jQuery UI Accordion collapsed by default? , but i can't seem to get it to collapse by default - ive managed to do it to stay open, but can't get my head around the collapsible true and active false. I am aiming to have it so when you click the next accordion the previous one automatically shuts.
this is the accordion js fiddle link:
https://jsfiddle.net/limtu/gnhgdxrm/
$(document).ready(function(){
$('#original .head').click(function(e){
e.preventDefault();
$(this).closest('li').find('.content').slideToggle();
});
$('#improved .head').click(function(e){
e.preventDefault();
$(this).closest('li').find('.content').not(':animated').slideToggle();
});
});
Any suggestions or links to similar problems would be really kind!
Happy Friday!
jsFiddle
$(document).ready(function(){
var $contents = $("#improved").find(".content"); // Cache your slideable elements
$('#improved .head').click(function(e){
e.preventDefault();
$contents.stop().slideUp(); // Slide up all
$(this).closest('li').find('.content').stop().slideToggle(); // Toggle one
});
});
and fix all those things in HTML and move your inline styles to stylesheet

When using toggle on my checkout sections, they fold up then fold back down. Should only fold up once

When using toggle on my checkout sections, they fold up then fold back down. Should only fold up once.
I've made a test case in jsfiddle: (not done with styling, so dont worry!)
http://jsfiddle.net/Wd8Ty/
The code that does it, I believe, is from AMLRWDCustom.js:
$('.checkoutsteptitle').addClass('down').next('.checkoutstep').fadeIn()
$('.checkoutsteptitle').on('click', function () {
$("select, input:checkbox, input:radio, input:file").css('display', 'block');
$(this).toggleClass('down').next('.checkoutstep').slideToggle()
});
I just need it to fold up once, then fold down again if clicked. That's all. Any ideas?
I found the answer.
Two of my JS files had the slideToggle() JS that I posted above. I had mistakenly copied it. Thus, it was firing twice.

Categories