I'm working on a Wordpress theme for my blog and I have a kind of overlay-container. If you klick on a button it slides in from the top and pushes the whole page down.
I use jQuery for it, with this little code:
$(document).ready(function () {
// variables
var overlay = $('#layout-overlay'); // Overlay ID
// hide overlay-container
overlay.css({
display: 'block',
marginTop: -overlay.height()
});
...and more code...
As you can see, I just hide the container by assigning a negative margin-top depending on height of the container which itself depends on the content.
As long as I put together the layout, everything worked fine. Now that I started to put it into an actual Wordpress theme, the overlay-container is visible on page-load and page-reload on every page it is included. It may be just for some milliseconds, but it is clearly noticeable. It is there for the blink of an eye and then it is gone as it is supposed to be from the very beginning.
Any ideas how I can retime the whole thing?
I put the JS in the <head> tag and I made sure it is the first code to be fired.
If you want to get rid of the glitch, first set the overlay's regular CSS to display: none. If the problem occurs, try displaying it after the page is fully loaded using load.
Bit more about ready vs load:
jQuery - What are differences between $(document).ready and $(window).load?
Related
So, I am just creating a new eLearning website but the issue is that it has a bit slow loading speed so I would like to display a loading animation similar to this but it works only for images. Is it possible to calculate and display how much percentage of the whole document is loaded as a loading animation using normal Javascript or with any of its libraries/frameworks?
I believe it should be similar to this:
<head>
<script src="path/to/loading.js"></script>
</head>
The webpage has many nested div elements like any normal website. So, is it possible to convert the code given in the link to somehow check the number of div tags that are loaded instead of the number of img tags that are loaded?
Or maybe make something like if the page is opened, loading animation reaches a random integer between 30% and 60%, and for the first second and then for every 0.5 seconds or so, it increases by a random amount (say 3% to 10%), and then if the page is still not loaded the animation is paused at 99% and remains there till page gets loaded? After it loads, it can disappear and the content can be displayed. However, if the page gets loaded while animation is going on, animation should reach 100% immediately and end and the page content should be displayed.
I haven't implemented any loading animation which shows percentage but I'm not sure doing such thing is a good idea or not. Check this video: https://www.youtube.com/watch?v=iZnLZFRylbs
You can implement a default loader(so called spinner in bootstrap) for whole page and remove the loader when document is ready with
document.addEventListener('DOMContentLoaded', () => {
//REMOVE THE LOADER HERE
});
or jquery
$( document ).ready(function() {
//REMOVE THE LOADER HERE
});
Check document.readyState for more: https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
I think what you are looking for is "window.onload"
It will wait all is loaded(image script style) trigger
Or you can send header and footer on first,then ajax content
but if you want "show progress" is imprecise,i think it just hint user now is load
$(()=>{
//Create loader
})
$(window).on("load",()=>{
//Remove loader
})
I made a splash page using jQuery by appending a div on the page load. After a set amount of time, the body of the page fades in, though the appended div still displays itself at the end of the page. Tried to add .remove() at the end of the function to see if that would help, nothing though. I'd like to have it disappear as the rest of the page loads. Let me know if i'm going about this the wrong way.
https://swaybs.github.io/jdphotography/
$(document).ready(function() {
$('html').append('<h1 class="onLoad">loading...</h1>');
/*! Fades in page on load */
$('body').css('display', 'none');
$('body').delay(4000).fadeIn(1000);
$('html').remove('.onload');
You can use the complete callback function of fadeIn() to remove (or fade out the loading message).
Note: Instead of hiding the body, and adding the h1 to the html, it's better to add a use a main element (div or main), you can hide/show.
$('html')
.append('<h1 class="onLoad">loading...</h1>');
$('body').css('display', 'none')
.delay(4000).fadeIn(1000, function() {
$('.onLoad').fadeOut(1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I'm part of the body
You need to work on the CSS. The loading div should have an absolute positioning (and its container should have a relative one), otherwise it will always be pushed down by other elements as they appear.
So I'm trying to have a div slide in on pageload. It has an id of "#crazyslide" and is absolutely positioned to the right -800px in the css.
So I used this code in the head:
<script type="text/javascript">
$(document).ready(function() {
$("#crazyslide").animate( { right: '0px' }, 2000 );
});
</script>
Shouldn't this work?
No, you can't hide it off the edge of the screen. Devices like mobiles will let people scroll past the edge and it will look bad.
I recommend using this example of hiding and showing it with javascript.
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show
Yes it should. I just tested with your exact code, and it worked fine. There are ways to prevent a parent element from showing scroll bars for offscreen content.
Check to be sure your div is properly named: (console.log($("#crazyslide"));
Be sure a parent element's css isn't preventing the div from being
shown at all, such as a strange body width or something.
Be sure the div has content, and a set width.
*This turned out to be a load order issue where jquery was not yet defined when the animation code was called.
I installed jScrollPane on my website and can't make it work.
My website works as follows: from the main page, pages are loaded dynamically using jQuery's load() method. In the page I load I have the following script to launch jScrollPane:
$(function(){
$('.scroll-pane').jScrollPane();
});
Which seems to be called. No problems so far I guess. The problem is that the page, at the beginning, is not long enough to need a scrollbar. I have hidden content that shows up only on specific actions (i.e. clicking on a button shows the content of a certain paragraph), and when I click to show the content of a hidden div, the scrollbar doesn't appear.
I also tried to call $('.scroll-pane').jScrollPane(); as I show the new content (i.e. in the event that triggers .show() on the hidden div I also call $('.scroll-pane').jScrollPane();) but I had no success with that either.
Can anyone help me?
Thanks
EDIT:
I forgot to mention the structure of the page: I have a div which has class="scroll-pane" and is loaded with the page load and it contains small hidden divs that show up when clicking on particular areas. I would like to add a scroll bar to the div with the class scroll-pane in order to make the content of the showed div scrollable (right now the content stays in the size of the div but it's not scrollable since no jScrollPane scroll bar is shown).
Update:
I tried to put $('.scroll-pane').jScrollPane(); in the callback of the .show() method of my divs and tried to put class="scroll-pane" to those divs that appear, but again nothing is shown (the scroll bar doesn't appear and the div is not scrollable).
Check this demo provided by the developer of the plugin
http://jscrollpane.kelvinluck.com/examples/invisibles.html
When the element is first shown you simply have to (re)initialise the
scrollpane (or you could even use autoReinitialise if you like) and
its width and height will be calculated correctly.
All that you need is
$(function(){
$('.scroll-pane').jScrollPane({autoReinitialise: true});
});
and may be the recent version of the plugin
I suggest to use css visibility property instead auto reinitialising. Each time you call show() method, jScrollPane reinitialises itself. This takes time and has impact on animation.
If you use, say, slide..() methods, then animation starts properly, but scrollable container (and its elements) appears little bit later, and that looks bad.
var wrapper = jQuery('#gallery-album-preview-wrapper');
if (wrapper.css("visibility") == "hidden") {
wrapper.css("visibility", "visible").css("display", "none");
}
if (wrapper.is(":hidden")) {
wrapper.slideDown(1000);
} else {
wrapper.slideUp(1000);
}
I am hidding a Flash component when my page is loading (I want it to load in the background), and then display it when it is fully loaded.
For that purpose, I have the following JavaScript code to hide it once the DOM has loaded:
$(document).ready(function()
{
$("#test").hide();
});
At this point, the flash is hidden. Then later on, I call a method that calls:
$("#test").show();
But at this point, the flash does not reappear. I tried also in the console in Firebug, and it did not work. I tried to do the same thing with a div, and it does not work as well.
If I do not hide the div/flash when it loads, but later on hide and show it in Firebug's console, then it works fine.
Does anyone please know why I do get this behavior?
EDIT:
Thank you very much,
Rudy
To hide a flash element and still have it load, you can position it outside of the visible area, instead of hiding it. Use CSS to do this so that the element is already hidden before the onload event is fired. Then, when you are ready to show the flash element, just remove the loading class.
CSS
#flash-container { position: absolute; top: ... }
#flash-container.loading { top: -1000px; }
HTML
<div id="flash-container" class="loading">
<object ...></object>
</div>
JavaScript
$("#flash-container").removeClass("loading");
Also, as part of your #flash-container CSS definition, you'll need to define positioning for when the element is visible.