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.
Related
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.
I want to add onepagescroll on my website, I find it difficult to solve this problem, maybe because I am still learning stage.
You have to structure your page like so:
<body>
<div class="main">
<section>...</section>
<section>...</section>
</div>
</body>
Each of those section tags represent a "page", so when you scroll it just scrolls to the next section.
You also have to add jquery, the onepagescroll plugin and a script that calls the plugin on your main element
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> //embed jquery
<script src="path/to/the/plugin/file.js"></script> //embed plugin
<script>
$( document ).ready(function() { //wait for jquery
$('#main').onepage_scroll(); //start the plugin
});
</script>
You may also check the plugins documentation, which was mentioned by Barmar or follow a tutorial to create a demo page.
Not quite sure how to define this issue. I just started working with jQuery and Javascript and pretty much everything is fine, except for when the page initially loads. I have the page fade in, but it looks like all the CSS isn't being applied until the jQuery loads.
I tried this script in my Head tag, but it doesn't work. Help?
<script type="text/javascript">
$(function(){
$('#box-container').hide();
});
$(window).load(function() {
$("#box-container").show();
});
</script>
Whoops: site: http://www.elijahish.com
You should use a Javascript console like Chrome Console or Firefox Firebug to debug your code.
First, you are placing your script block which requires jQuery before jQuery is defined:
<head>
<script type="text/javascript">
$(function(){
$('#box-container').hide();
});
$(window).load(function() {
$("#box-container").show();
});
</script>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
...
So you would see the following (in Chrome Console):
ReferenceError: $ is not defined
$(function(){
Second, you seem to be trying to run a script which is accessing (in the first block) an element (#box-container) before it has been seen in the DOM itself. You could use jQuery.ready on that first block, but that could be messy. I would instead suggest you place this right after <div id="box-container"> is defined:
<body ...>
<div id="box-container" ...>
...
</div>
<script type="text/javascript">
(function($){
$('#box-container').hide();
$(window).load(function() {
$("#box-container").show();
});
})(jQuery);
</script>
Demo: http://jsfiddle.net/5JpVB/4 (I use a setTimeout for dramatic effect.)
Or put it directly after the <div ...> is opened:
<div id="box-container">
<script type="text/javascript">
(function($){
$('#box-container').hide();
$(window).load(function() {
setTimeout(function(){
$("#box-container").show();
}, 2000);
});
})(jQuery);
</script>
Box Container shown on window.onload.
</div>
http://jsfiddle.net/5JpVB/5/
And the coup de grâce (document.write nothwithstanding):
<head>
...
<script>
document.write('<style>#box-container{display: none;}</style>');
</script>
...
</head>
http://jsfiddle.net/5JpVB/2/
Yes, that is a script that "puts" the style display: none into the header, which "neatly" bypasses some of the conjecture that's been thrown around (there's downsides for each method, more or less). There's an elegance to this method (except, of course, using document.write, which is icky).
And yet another way, using the CSS display: none method:
<head>
...
<style>
#box-container {
display: none;
}
</style>
...
<div id="box-container">
<noscript><style>#box-container{display: block;}</style></noscript>
Box Container shown on window.onload.
</div>
http://jsfiddle.net/5JpVB/3/ (Just the Result page, disable Javascript to see it work.)
You are getting a case of FOUC : http://www.bluerobot.com/web/css/fouc.asp/
And, years later we are still plauged! http://paulirish.com/2009/avoiding-the-fouc-v3/
A variety of solutions are included on this link.
You could also set the style of your content to be hidden before running the javascript that shows the content. Jared shows you a nice way to do this.
Might I make a suggestion that you use combination of CSS and JavaScript, rather than one or the other. I had the same issue using jQueryUI on a site I'm building and found that a lot of these solutions out there would make the contact unavailable to those without JavaScript.
So here is what I did:
CSS:
.flash #wrapper {
display: none;
}
What this does is set the <div id="wrapper"> to hidden only if it is a decendent of the class flash. So to keep it from being hidden from those with out javascript I add the class flash to the <html> element. So it can only be physically hidden if the end user has JavaScript enabled, otherwise they'll at least have access via the unstylized content.
JavaScript:
$('html').addClass('flash');
$(doctument).ready(function() {
/* Do all your stuff */
/* When done show the wrapper with the content stylized */
$(#wrapper).show();
});
Depending on your pages time to load you might get a little flash, but it wont be a flash of unstylized content, which is rather ugly. In my case I had a jQueryUI menu item that would flash the normal <ul> element first then the menuUI item, and my <div> elements are resized with jQuery so that each <div> column is equal hight, but it would flash the different heights first. This fixed it while still giving accessability to none Script enabled browsers.
Thanks in advance for your help.
So I have a fully functioning page, but when I make the following changes, my jQuery accordion stops working on rollover and all of my navigation links (which point to #sections as it's a single-page scrolling site) stop working completely. Here is the deadly code:
<script type="text/javascript">
$(document).ready(function(){
$(document).ready(function () {
$('#fadeDiv').fadeIn(3000);
});
});
</script>
</head>
<body>
<DIV ID="fadeDiv" style="display:none;">
... page here ...
</div>
</body>
All functionality which breaks is WITHIN the fadeDiv. It's worth noting that the links (a href="#section") can be IN a div that fades in and will work fine, but will break if, rather, I fade in the containing div of #section.
Weird.
why are you calling the document ready 2?
Does the jquery file pulled in?
your code should look like this
<script type="text/javascript">
$(document).ready(function() {
$('#fadeDiv').fadeIn(3000);
});
</script>
and add this to your header
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
and i would recomend putting the display none in css
I've done a simple menu using some HTML, CSS and Javascript. The main idea is that it should be hided until the user click on it, but the problem is that it won't start the page hidden and nothing happens when I click, just like if the Javascript won't active. Here is part of my files:
index.html
<head>
<link rel="stylesheet" type="text/css" href="style/sample.css" />
</head>
<body>
<script src="js/menu.js" type="text/javascript"></script>
<div id="container">
<div id="header">
<center>
<div class="leftMenu" onclick="toggleMenu()">Menu</div>
<h1>Test</h1>
</center>
<ul>
<li>About</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
menu.js
$(document).ready(function() {
$('#header ul').addClass('hide');
$('#header').append('<div class="leftMenu" onclick="toggleMenu()">Menu</div>');
});
function toggleClass() {
$('#header ul').toggleClass('hide');
$('#header .leftMenu').toggleClass('pressed');
}
sample.css
#header ul.hide {
display: none;
}
#header div.pressed {
-webkit-border-image: url(graphics/button_clicked.png) 0 8 0 8;
}
What I'm making wrong and how I can correct it?
I think at least part of the problem is that the menu toggle div you're creating is using the function toggleMenu() and not toggleClass().
EDIT: I made a jsfiddle that shows the changes I would propose to make it work properly: http://jsfiddle.net/avidal/dDDKz/
The key is to remove the onclick attributes, and use jQuery to handle the event binding for all current, and future matching elements:
$(document).ready(function() {
$('#header ul').addClass('hide');
$('#header').append('<div class="leftMenu">Menu</div>');
$('#header div.leftMenu').live('click', toggleClass);
});
function toggleClass() {
$('#header ul').toggleClass('hide');
$('#header .leftMenu').toggleClass('pressed');
}
Ok, a few things:
Make sure you have a doctype. You said this was just part of your code, so perhaps you do, but just to be sure, I'll point this out anyway. You can just use the html5 doctype (it is compatible with IE6 if that's a worry):
<!DOCTYPE html>
<html>
<head>...head stuff here </head>
<body> ...Body stuff here</body>
</html>
Make sure you are loading the jquery library. Again, maybe you already are, but just making sure your bases are covered here. I'd suggest putting it in your HEAD. You should also move menu.js out of the head and just below the closing BODY tag.
If you want the UL to start off hidden, you should have the default CSS for it display none. Otherwise, even if your script was working, you would see the ul for a moment before it became hidden as the page would first load and then the JS would apply the class. In that gap between page loading and JS applying your class, the UL will be visible.
Your scripts could really be optimized, and I apologize for not being more specific (shouldn't write these when I'm trying to get ready for bed), but I'll at least point out the most obvious fix here - make sure that you are calling the correct method. I see that in the HTML snippet you are appending, you are calling toggleMenu(), but in your actual JS, your function is called toggleClass. Change one of those so they match.