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.
Related
I have jsp/javascript page which shows some of the content based on some business logic. This page loads some data that being pulled from database. Sometimes Page Load can take more time. So there is no specific time.
Things to do:
Show a popup/messagebox/dialogbox in the middle of screen after the entire page is loaded. should have close or "X" button to close.
Popup/messagebox/dialogbox is sequence of 4-5 screens/content messages. Meaning as soon as popup comes it shows 1st content, then there should be "next" or ">" sort of icon within that popup screen. clicking on that it should proceed to next screen or content. When you arrive at last content or screen, you should be able to scroll back to first message.
I have tried using https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
and https://www.w3schools.com/w3css/w3css_modal.asp.
With that I am having difficulty showing modal or carousel inside messagebox/popup/dialogbox at the middle of screen after entire page is loaded
I followed some of the questions here on stackoverflow. They cover all basic things, but not exactly this specific scenario.
If you use the W3.CSS modal, there's a little hint in their first example on this page. In the onclick attribute on the button, there's a little Javascript snippet:
document.getElementById('id01').style.display='block'
To get that behavior when the page is finished loading, you can put it into an event listener on the window object that waits for the load event MDN doc.
Here's a small example using the boilerplate from the W3.CSS modal page:
<!-- In your HTML -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span
onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">
×
</span>
<p>Where your carousel goes</p>
</div>
</div>
</div>
/*
In a <script/> tag below the rest of your imported scripts
or in a separate, linked .js file.
*/
window.addEventListener('load', function() {
document.getElementById('id01').style.display = 'block';
});
As far as the carousel, you can just replace the <p /> element inside the modal with the relevant code. I'd start by just copy/pasting the W3Schools slideshow example. Make sure you include the <link /> and <script /> required to use Bootstrap and don't forget to replace their images with yours.
If you need any more help, please include some of your code as so folks have better insight into your problem.
Take care!
My manager asked me to try replicating the sliding feature here at this website:
https://insight.bakermckenzie.com/blockchains-and-laws
The navigator arrows at the right and left of the page direct the user to other pages of the site, but do so much like a carousel rather than simply opening the link in the traditional way. Even hitting the browser's "back/forward" buttons makes the site slide between the pages rather than opening them normally.
I've dug through the source code and used the developer tools, but can't find out how exactly the site is pulling this off. Any ideas? Seems like it could be JavaScript, but I'm not too sure.
I couldn't find the library that the site uses, but I'll try to explain it.
When you request a 'new page', by clicking on the arrows or the menu, all the content is loaded async. If you pay attention to the .page-container div, you can see that when you 'change' the page, the div with the content you are currently seeing moves to the side and then is completed removed from the page.
Step-by-step:
Request a page
New content loads into a div that is not visible yet.
The page you currently are moves to the side and then its content is removed when is completely hidden from the view (the whole html is deleted) .
The 'new page' that was requested follows the 'old' page movement.
It is like a carousel, but the new content is loaded async and the old one is removed.
Div responsible for the content
I am using Jquery jNavigate plugin and everything works well. Except at some point from my other part of the JS code I want to be able to refresh content that is currently displayed in the container. How can I achieve this?
Here is what I've done.
I have one container for content that should be displayed via AJAX:
<div id="container">
</div>
Then I initialize jNavigate plugin on it
$('#container').jNavigate({
spinner: 'img/loading_icon.gif',
extTrigger: '.jnav-ext',
intTrigger: '.jnav-int'});
And I have several links that work with jNavigate:
Home
About
So everything works well except I can't refresh current content. Plugin itself has navigate() method inside. So how can I call that method from outside to refresh the contents in the container (refresh same page)?
I figured out it myself. Here is correct answer:
$('#container').jNavigate("navigate", {url: window.location.href});
Invoke this from whenever you want to reload current page in #container which is initially loaded via jNavigate.
I'm working inside a Facebook tab iframe content page and since it takes a few seconds to appears the iframe content of my site I'm wondering If I can place a loading gif inside the iframe to show first (maybe as a body background image) while its loading the rest of the content.
I see that the iframe ussually cames with all the images. So I'm wondering If there's any way to do this or the content of the iframe loads and is displayed all together.
I tried the image as body background and it didn't work. Both came together.
You can't modify the contents of an iframe that comes from a different domain.
But, you can use absolute positioning from your main window to put an image over the top of the embedded iframe which can probably accomplish what you want without a lot of complication or change of your main page design.
Here's an example: http://jsfiddle.net/jfriend00/DajS4
If your code is in the iframe and you want something displayed before your page loads into the iframe and you don't control the parent, then there is nothing to do. You can't do anything dynamically until your code is loaded and by then the page will already be starting to show.
All you can do is to make something on your page load very, very quickly (perhaps like a small image in the first tag of the page) that should be one of the first things to show and then when your page successfully finishes loading, you would hide that small image. Other than making something show quickly, you can't do anything until you load so you can't show anything before you load. It would have to be the parent window that created you that did something earlier.
Umm,
I understand what you are trying to achieve. but the only way i know to achieve this would be to use ajax to load all your content.
Set the ajax function to run on page load. And in the body of the page place one of those gif loaders..
hope u understand what im trying to say!
You can use AJAX to load your page.
<div id="loading">loading..</div>
<div id="content" style="display:none"></div>
$(function() {
$('#content').load('http://url', function() {
$('#loading').hide();
$(this).show();
}
});
note: the location of all your javascript should be at the bottom of the page to improve load speed.
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).