Jquery ui menu issue - javascript

When you are leaving the parent item of a submenu in jquery menu,there is a slight delay closing the submenu.
any way to disable this and make it close instantly ?
*iknow its a EOL dead library but i'm asking just in case any of you guys remember something !
$(function() {
$("#menu").menu();
});
#menu{
width:150px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" />
</head>
<body>
<ul id="menu">
<li>
<div>W/O submenu</div>
</li>
<li>
<div>With submenu</div>
<ul><li><div>Submenu</div></li></ul>
</li>
</ul>
</body>
</html>

The menu widget does have a 300 millisecond delay.
So, if you download the non-minified version of the js file, from here:
https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js (based on the OP's URL)
Then use that file locally. Then, in the file, change the delay at line 4946 (in the menu widget, noted on line 4943):
4943 var widgetsMenu = $.widget( "ui.menu", {
4944 version: "1.12.1",
4945 defaultElement: "<ul>",
4946 delay: 300, // THIS delay
4947 options: {
...to a lower value, say 100 (or lower), and then save, reload the page, and check the behavior.
Note that I would not remove the delay entirely, as there are references to that attribute/property, but set it to a lower value as to be virtually unnoticeable.

Related

Responsive menu (mmenu) cause high CLS

I am using mmenu as responsive menu on my website. I noticed recently that in Googles search console I have errors due to high CLS (Cumulative Layout Shift). I checked and it's true, when I try to open my page in "slow" mode for a half sec I see the original menu structure, then mmenu loads (after jQuery is ready etc) and the page is showing correctly.
My simplified page structure is:
$(document).ready(function() {
$("#menu").mmenu({
"extensions": ["pageshadow"],
"header": {
"title": "Menu",
"add": true,
"update": true
}
}, {
// config
offCanvas: {
pageSelector: "#container"
}
});
});
<html>
<head>
</head>
<body>
<nav id="menu">
<ul>
<li><a>Categories</a>
<ul>
<li>
Link 1
</li>
<li>
Link 2
</li>
<li>
Link 3
</li>
</ul>
</nav>
<div class="content">This is content</div>
</body>
</html>
What do you think, is it possible to apply any quick fix here which will fix my CLS issue?
Without any experience with mmenu, shouldn't it be sufficient to hide #menu using CSS and only display it once the menu is initialized?
This seems to work for me:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.5.20/mmenu.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/8.5.20/mmenu.min.css" />
</head>
<script type="text/javascript" data-no-instant>
$(document).ready(function() {
$("#menu").mmenu({
"extensions": ["pageshadow"],
"header": {
"title": "Menu",
"add": true,
"update": true
}
}, {
// config
offCanvas: {
pageSelector: "#container"
}
}).css("display", "");
});
</script>
</head>
<body>
<nav id="menu" style="display: none">
<!-- <nav> content from your example -->
</nav>
open menu
<div class="content">This is content</div>
</body>
</html>
It's hard to answer without seeing the actual code, but to not have to wait for the entire page to be ready you could position your scripts in such a way that you don't need to use the ready call of jQuery.
Try the following:
1 - Load jQuery locally instead from a CDN
2 - Place jQuery script tag before your actual Body html data and place that mmenu call right after the body's html code, that way the content won't be shown before everything has loaded
Another alterantive is to have your body to display a loading animation until jQuery and other cdns have loaded, so you'll be able to fetch everything, run that mmenu call and only then display the content to the user, this method is a little more user-friendly then what I suggested because instead of a blank screen it'll actually show some feedback that the content is being loaded for users with a slower connection.
The way I would handle this is to have a dummy element that has the same size/shape/color of your problem element to act as a placeholder while having the problem element hidden. After jQuery is loaded, I would then remove/hide the dummy element and show the problem one.
To resolve such issue, you would require to change some code structure and ordering of java script and CSS and that would require some efforts/testing.
But you can try by showing a loader/progress bar until "mmenu" is loaded and that might resolve your issue.

fancybox undefined is not a function [duplicate]

Alright, I thought I implemented this correctly, but I guess I must've goofed somewhere.
Here's my code:
Jquery here:
jQuery(document).ready(function( $ ){
$(function() {
$( ".cta-nav-hover" ).tooltip({
show: null,
position: {
my: "right+40 bottom",
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top - 10 }, 75 );
}
});
});
$(function() {
$(".fancybox").fancybox();
});
});
Then The HTML:
<div id="cta-nav-wrapper">
<ul id="cta-nav">
<li class="bio">
<span></span>
</li>
</ul>
</div>
I thought that this would work, but when I click the link, it just brings me to the placeholder image instead of making a popup. What did I do wrong? It looks as though i have the files lined up properly, or at least when i inspect them through firebug it goes to the proper js.
Here's what I called in the head:
<!-- Add fancyBox -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/content/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.js"></script>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="/wp-content/themes/hustle-child/includes/js/magnific-popup.js"></script>
I also tried another plugin called Magnific Popup but it's also unresponsive. I'm thinking it has something to do with my wordpress theme's set up.
This href="http://placehold.it/350x125" doesn't say to fancybox that you are opening an image so you either :
1). add the fancybox.image special class to your link like
<a class="cta-nav-hover fancybox fancybox.image" href="http://placehold.it/350x125" title="Bio"><span></span></a>
2). add the (HTML5) data-fancybox-type attribute to your link like
<a data-fancybox-type="image" href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>
3). add the type option to your fancybox script like
$(".fancybox").fancybox({
type: "image"
});
whatever you think works better for your case.
NOTE: numbers 1). and 2). above work for fancybox v2.x only. Number 3). works for either v1.3.4 and v2.x
EDIT : included a JSFIDDLE with your code and jQuery v1.8.3.
There are two links :
one using "fancybox.image" class : working
other without : not working

Responsive drop down menu not rendering

I'm trying to create a responsive drop down navigation menu for my webpage. I already have a working drop down menu, but I want to make it so that when the screen reaches a certain size, I get a ☰ icon with my menu items. However, when I test this (by re-sizing my browser), I only see my drop down menu displayed as a block element, and the ☰ icon doesn't show. Here is a fiddle with my code:
http://jsfiddle.net/Lwdc4/
My JavaScript code is in an external file. This is what the file looks like:
$("#nav").addClass("js").before('<div id="menu">☰ </div>');
$("#menu").click(function(){
$("#nav").toggle();
});
$(window).resize(function(){
if(window.innerWidth > 768){
$("#nav").removeAttr("style");
}
});
And my import to HTML:
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="nav-menu.css"
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="nav-menu.js"></script>
</head>
What is wrong with my code? Any help is appreciated. Thanks in advance.
You need to add the jquery library to use the $ object
Add this line in your HTML to use it
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
Or choose your version directly on the jQuery website http://jquery.com/download/
Updated fiddle :
http://jsfiddle.net/Lwdc4/1/

Cufon and JQUERY conflict (can't get both fancybox and "drop down menu" to work together)

So excuse me for being really new to this....but I shall try my best to detail the prob.
I have a script running on page for fancybox which is this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<!-- Add fancyBox -->
<link rel="stylesheet" href="css/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox.pack.js?v=2.0.4"></script>
<!-- Optionaly add button and/or thumbnail helpers -->
<link rel="stylesheet" href="css/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-buttons.js?v=2.0.4"></script>
<link rel="stylesheet" href="css/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery.fancybox-thumbs.js?v=2.0.4"></script
ul class="list">
<li>
<a class="various fancybox.iframe" href="http://www.topholidayrecipes.com">Iframe</a>
</li>
</ul>
<script type="text/javascript">
$(document).ready(function() {
$(".various").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '70%',
height : '70%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
});
</script>
NOW PROB IS THIS SCRIPT -->
* This script causes my drop down menu (that uses cufon replace function) to be static. And I need this script for the fancy box, but adding this disables the animation affect of the drop down.
The buttons located at the top right of the page works originally at: www.topholidayrecipes.com
And here is a page that uses the fancy box (link located in the recipes box named "iframe") but here the menu is static: http://topholidayrecipes.com/artichokes-recipes.html
Please help me with this.....I will be very grateful : )
You have a little bug in your js code:
._shadowBox()
that is creating this error:
Error:
shadowBox is not a function
Source File: http://topholidayrecipes.com/artichokes-recipes.html
Line: 717
and that breaks the rest of your js code (the animation affect of the drop down included).
Maybe you forgot to delete that line after unloading shadowbox and moving to fancybox
yes i tried by removing those lines of codes, but i discovered i dont need those codes anyways. what i discovered is this line of code in particular that seems to cause problems directly with the drop down:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
i have even downloaded the javascript from google directly and called it in my page another way using:
<script type="text/javascript" src="js/jquery.google.js"></script>
they both run the same thing and the fancy box works as it should. but i noticed that it is this particular line used for the fancybox that's causing problem with my dropdown menu. as soon as i remove this line of code the drop down works!

jQuery UI tabs positioned about 50% of their height below eachother

This is quite odd, and I can't get it to stop happening.
Here's the relevant code. I'm using a Google CDN host for the UI-lightness theme.
<div id="prof_div">
<ul>
<li>Profile</li><br/>
<li>Details</li><br/>
<li>Settings</li><br/>
</ul>
That's the only relevant HTML. Here's jQuery/JavaScript
$(document).ready(function() {
$('#prof_div').tabs({
fx: { height: 'toggle', opacity: 'toggle' }
});
});
And it's displaying like this:
TAB 1
TAB 2
TAB 3
Instead of like this:
TAB 1 - TAB 2 - TAB 3
I have no custom CSS acting on them at all (I even blanked my stylesheets to check).
Any idea why this is happening? I'll post a screenshot if necessary.
Thanks! :)
EDIT
Here's my CDN requests
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
<script type="text/javascript" src="https://www.google.com/jsapi?key=very long string"></script>
<script type="text/javascript" src="/JSFunctions.js"></script>
<script type="text/javascript">
google.load("jquery", "1.6.4");
google.load("jqueryui", "1.8.16");
....
</script>
Remove those ending <br/>s from your <li>s. They shouldn't be there.
<div id="prof_div">
<ul>
<li>Profile</li><br/>
<li>Details</li><br/>
<li>Settings</li><br/>
</ul>
Here's a fiddle.

Categories