popUp appearing on page load - javascript

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

Related

How do I avoid Layout Shift in HTML?

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.

Show the page only after all the javascript is executed

I am using Jquery tabs in my project, and it all works fine.
However when the user opens the page, the page displays all the material in all the tabs for a second first, then it executes the javascript and the screen comes back to normal.
It's an ugly sight, how can I prevent this? Is there a way to show the page after all the loading is done only?
You could try hiding your content when the page loads and using JQuery to reveal it.
HTML:
<div id="contentDiv" style="display: none;">....</div>
JavaScript:
jQuery(document).ready(function ($) {$('#orderContentsInfoBox').css('display','block');});
This jQuery function fires when the document is fully loaded. If you are still seeing a flicker of content before it is hidden in tabs, then I would recommend finding the function that sets up the tabs and inserting the code to reveal the content div there. That way the content will only appear after all tabs are setup.

Tab Names Included in Scrollbar

I have a problem on my website using JavaScript tabs where the tab names are included in the scrollbar, rather than just the content of the tabs, and so when the user scrolls down, the tab names disappear. I've put the code I have on JSFiddle linked below. If it's relevant, I'm embedding this in my site's main page by using:
<iframe class='demo' src='tabs.html' style='height:350px; width:700px' frameborder='0'></iframe>
http://jsfiddle.net/08ghjmnv/
Can someone please show me how to change my code so that the tab names/headers are not included in the scrollbar, so they're always visible for the user to click to change tabs?
Thanks in advance :) .
Try this.
.tabs {
position: fixed;
}
Demo here

divs not displaying with js disabled

My website all seems to work fine when I have javascript enabled but as soon as I disable it, the main page background renders fine but the actual content doesn't display at all. I thought I had designed it in a gracefully degrading manner. Can anyone shed some light on why the content does not display with JS disabled?
Website link
Your CSS on #main_content (and other elements) have display:none; set which hides the content by default.
You then use javascript to display it. Without javascript, it stays hidden.

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