How do I avoid Layout Shift in HTML? - javascript

I have a nav element with my navigation in it. The nav is displayed by default. The idea behind this is that the menu should be visible (also in case the user has JavaScript deactivated).
However, if the user has activated JavaScript, then the navigation should not be visible. To achieve this, I use the document-ready handler
$(function () {
$("html").addClass("js");
}
to add the class js to html element. If this class is there, my CSS kicks in and the navigation is no longer displayed with .js nav { display: none; }. At the same time, a button is displayed instead, which the user can use to display the navigation again.
And this causes the following problem:
When the page is loading, the navigation is shown for a few moments before JavaScript hides it. Because the navigation appears and then disappears, the entire layout visibly shifts. Google PageSpeed Insights also complains that a large Cumulative Layout Shift is taking place in the page.
How do I prevent this layout shift?

Use visibility: hidden instead of display: none.

Related

popUp appearing on page load

Asp.net, Using a Jquery popUp when a button is clicked on the page works fine. However the popUp appears for a brief second on the inital load of the page and I can't seem to see why. Is it css? is it some attribute im not setting?
any advice helpful ta.
Since the HTML of popup is not hidden on page load, it flashes for a second and then it is hidden by Javascript/jQuery library/plugin using the popup common class.
Hide the popup by CSS.
.myPopup {
display: none;
}
some javascript is loading your popup disable it with a css code.
css is loaded first in loading of page. you need to find the popup class and disable showing.
.myPopup {
display: none;
}

How to show a page when mouse over on a menu?

I'm trying to understand how this kind of menu works : www.dantobinsmith.com/
How do you make the page associated with one of the menu items appear when you put your mouse over it?
Looking at the code base of the website I see that the developer has created the website primarily in JavaScript/JQuery where there is a full screen navigation that fades in the content when hovering on the correct navigation.
On clicking of the navigation item, the whole navigation is removed and the content appears at 100% opacity.
The website IS build oddly on Wordpress for backend editing, BootStrapper (getbootstrap.com) and JQuery and any additional javascript can be found here http://www.dantobinsmith.com/wp-content/themes/dts/app.min.js to inspect yourself.
you could do it with css:
#input:hover { background-coler:blue; /*additional css for #input on hover */}
or javascript:
<div onmouseover="document.getElementById('input').style.backgroundColor='Blue';">
<input id="input">
</div>

Removing a particular Javascript action from a responsive theme

I have a responsive theme. When viewing the website on small screen, it shows "menu" and you have to tap it to see the menu items. What I want to do is show the menu items straight without the user having to tap "menu" before seeing them. I tried using Firebug to see what triggers it and tried removing that. But that messes up my whole site in desktop view as well.
Here is the link. If someone could point me in the right direction by telling me what code to remove that'd be great. Your help is really appreciated.
I believe it is hidden via css. So to initially show that menu when the browser is mobile go into the bootstrap-responsive.css file on line :1424 and change 'display:none' to 'display:block'. Just to be clear this is the code your looking for.
nav#main_menu.smooth_menu ul {
display: none;
background:#fff;
}
It is in the #media (max-width: 767px) media query.
That should initially show the menu when a user is on a mobile browser while keeping the toggle functionality.
Add the below <script> in your page inside <head>. What it does is simulate a click on "menu" at startup.
<script>
$(document).ready(function() {
jQuery('.zn_menu_trigger a:visible').click();
});
</script>

javascript entire page fly in and out effect?

Recently I came across a site that had an interesting effect, I can't remember which site it was. The effect is that on navigation click, the entire current page fly away to the top-right corner and disappear, and the new page flys in from the bottom-left and occupy the browser window.
Does anyone know where I can obtain a example code of this effect? Thanks.
Try this
effects
Instead of divs you can do this for your whole page (body element).
First you have to define a class for all links () tags. When the user clicks any link you can call the effect for the whole page.(i.e first on the current page and then when the new page loads you again call the effect)
that's called single/one page theme. see this demo:
http://themeforest.net/item/stratum-html-single-page-template/full_screen_preview/1668778
http://themeforest.net/item/volemo-html-one-page-template/full_screen_preview/1359429
try jquery .scroll()
the key concept is you create a single large page (eg. height: 2500px) then assign anchor-link scroll to fix position.
You can acheive Similar effect on normal site by doing the following to the main body tag
add a click event on the navigation links which uses jQuery effects to slide your page out fast
add an onload($(document).ready();) event to all the pages which slides in the body as you want

Can I use jquery-ui button without flickering?

When I use jquery-ui button to make an <input type='checkbox'> element behave like a button, I get a nice looking button, but it flickers when loading the page.
Before the $("#checkbout").button() runs, I see a normal, unstyled checkout, that turns into a styled button a few milliseconds afterwards.
What's the correct way to use Button without this flickering effect?
It's not so much that you're using the button widget incorrectly--you're experiencing a FOUC (Flash Of Unstyled Content). This occurs when your page has lots of elements and JavaScript that runs when the page is ready. You can see the page unstyled for a few seconds because the page takes so long to load.
There are several strategies for avoiding this, but one simple one is to add styles for the button that hide it (using JavaScript) outside of $(document).ready, then remove the styles when the document is ready:
<head>
<script type="text/javascript">
document.write("<style type='text/css'>.button { display: none; }</style>");
$(document).ready(function () {
/* Remove the class hiding the button and call the widget: */
$(".button").removeClass("button").button();
});
</script>
</head>
Example: http://jsfiddle.net/andrewwhitaker/gdbB5/ (uses setTimeout to simulate a page loading)
You could also apply this technique to an entire content element that's experiencing the problem (like a div that contains most of your content that 's heavily modified by JavaScript).

Categories