Responsive Multi-level Navigation bug - javascript

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");
}
);

Related

Trigger MDBootstrap side-nav with jQuery using custom hamburger button

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).

Disable Parent Menu Item Fails in Responsive

I'm self-taught when it comes to web design and so I really am stuck here because I don't have the framework for understanding the problem. My website (sealinesd.com) is OK EXCEPT the parent links should be disabled AT ALL TIMES. Right now it works like this:
-- when the regular non-responsive menu is up, the parent links are disabled thanks to the plugin I use (code below).
-- when you hover on the non-responsive menu and the parents are disabled, and THEN you make the browser smaller, the responsive items you hovered on before are still disabled.
-- when you go straight to the responsive menu without first hovering on the parents in non-responsive mode, the parent links are NOT disabled.
I have very little knowledge of jquery and DOM so I was unable to fix the plugin. I tried to target the mean-menu (used in responsive mode) and use document.ready to make sure it wasn't executing too early, or something, but neither worked for me. Please advise. I thank you kindly in advance.
The code for the plugin I use to disable parent links is right below.
Plugin Name: Advanced Disable Parent Menu Link
Description: A plugin which allows you to disable parent menu link.
Author: Kapil Chugh
Plugin URI: http://kapilchugh.wordpress.com/
Version: 1.0
add_action('wp_footer', 'advanced_disable_parent_menu_link');
function advanced_disable_parent_menu_link () {
wp_print_scripts('jquery'); ?>
<script type="text/javascript">
if (jQuery("ul li.page_item:has(ul.children)").length > 0) {
jQuery("ul li.page_item:has(ul.children)").hover(function () {
jQuery(this).children("a").removeAttr('href');
jQuery(this).children("a").css('cursor', 'default');
jQuery(this).children("a").click(function () {
return false;
});
});
} else if (jQuery("ul li.menu-item:has(ul.sub-menu)").length > 0) {
jQuery("ul li.menu-item:has(ul.sub-menu)").hover(function () {
jQuery(this).children("a").removeAttr('href');
jQuery(this).children("a").css('cursor', 'default');
jQuery(this).children("a").click(function () {
return false;
});
});
}
</script> <?php
}
I tried this code too and it didn't work. I'm frustrated. Don't know how to target that damn responsive menu.
wp_print_scripts('jQuery'); ?>
<script type="text/javascript">
jQuery(document).ready(function () {
if (jQuery("nav.mean-nav > li:has(ul.children)").length > 0) {
jQuery(".mean-nav > ul > li:has(ul.children)").hover(function () {
jQuery(this).children("a").click(function(evt) {
evt.preventDefault();
});
jQuery(this).children("a").css('cursor', 'default');
}
});
I took a look at your site. It appears to be built from a template that has created its own responsive functionality.
Personally, I would suggest that you look into using Bootstrap to build your own pages. Bootstrap is extremely easy to implement once you understand the 12 column grid system.
Bootstrap has responsive menus with dropdowns like this all rolled in out of the box and it works great, see this example
You could easily duplicate the look of your template using bootstrap in very little time and there are TONS of resources online to help you.
Anyway, that said, if you want to to stop a click on a link from navigating to the link's href location you can use .preventDefault(); like this:
// prevent navigation when clicking links with the class preventDefault
$(document).on('click', '.preventDefault', function(e){
e.preventDefault();
});
// just to show that other events still make it through
$('#test').click(function(){
$('#result').append('click detected<br>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Click this link<br>
<div id="result"></div>

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

How to FORCE a resize event that will run all resize functions

I am using Masonry.js to create a masonry style blog. The problem with this is, when I click 'Article' for example, my JS makes everything but an article disappear. Instead of all the articles filling in the gaps that were previously filled with other post types, they just stay in the same position.
Once I resize the window Masonry.js does its thing and every gap becomes filled with the articles. My question is how to FORCE this to happen without having to resize the window manually?
Note:
I have tried this link
Forcing windows resize to fire
This will not work.
$(window).resize(function(){
$('span').text('event fired!');
});
$('button').click(function(){
window.dispatchEvent(new Event('resize'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Fire event</button>
<span></span>
This must work (I'm using it right now)
$(window).trigger('resize');
Hope this helps.
EDIT
Note that's jQuery syntax.
EDIT 2
i make a research of masonry.js (I don't meet it before this post), and I think that you can solve this problem like this:
$(window).on('resize', function () {
$('#element').masonry('reloadItems');
});
$(window).trigger("resize");
Good luck
I managed to fix this.
$('#article-options li').on('click', function() {
setTimeout(function() {
var $grid = $('#blog-container').masonry({
columnWidth: 80
});
// change size of item by toggling gigante class
$(this).toggleClass('gigante');
// trigger layout after item size changes
$grid.masonry('layout');
}, 200);
});
Each 'section' of the blog of mine is in a ul called article options so when an option is clicked (therefore changed) it will run this function.
I have set a timeout as JS was running a bit behind and making me click twice for the code to run.
I defined a new masonry grid, I defined this as the overall blog container which holds all posts. I then had code in place which recognised the click function on a section and toggled a class which pops everything back into their correct positioning.
As for details, i'm not too sure as this is not my module. If anyone has any valuable information that might help others, comment and I will update my answer. Thanks everyone.

First toggle open by default

So have a block of toggles on my page and now I need to add another block of toggles on the same page but this one with the first toggle active/open by default.
I've been working around the JS but no luck so far so I need your precious help to get this to work.
Thanks!
Demo
Javascript
jQuery(window).load(function(){
$('.toggle-view li').click(function () {
var text = $(this).children('div.toggle-content');
if (text.is(':hidden')) {
text.slideDown('200');
$(this).children('span').html('<i class="icon-minus"></i>');
} else {
text.slideUp('200');
$(this).children('span').html('<i class="icon-plus"></i>');
}
$(this).toggleClass('activetoggle');
});
});
You can do it with something like:
$('.added_class_on_second li').eq(0).children('.toggle-content').show();
Just add another distinct class to the second, or target it with:
$('.toggle-view').eq(1).children('li').eq(0).children('.toggle-content').show();
if you don't want to change the html at all.
http://codepen.io/anon/pen/CDdlH
If you need the first section to be open when the page loads you could simply call click() on $('.toggle-view li').first(). However, this may have undesired side effects if you have other actions occur on click, and it will perform an animation, so consider creating a function open which does nothing but open the indicated section, and calling that on document load.

Categories