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.
Related
Trying to replicate the pre-loader page on load the SVG and a background image appears and as soon as the user scrolls the page scrolls to the content and the page-loader is not visible or can be reached again unless you refresh the page, not sure how to tackle this, any help to point me in the right direction would be great- I have tried diseminating the said page.
there are a few ways to accomplish this, a simple starting point could be something like this:
basic html outline:
<div id="loader">
LOADING Image/content
</div>
<div id="body">
website body
</div>
CSS
#body{display:none;}
jQuery
$(document).ready(function(){
$("#loader").hide();
$("#body").show();
});
noscript fallback
<noscript>
<style>#loader{display:none;}#body{display:block !important;}</style>
</noscript>
Basically, this code has two divs the loader and the body, the body is set as display none in the CSS. When the page is ready, jquery is triggered to hide the loader and show the body.
The noscript fall back will set body to visible when javascript is disabled.
There are multiple ways to accomplish, this is just one idea.
Out of one of a hundred different ways, my initial thoughts were along these lines:
Wrap your main content in a wrapper with position relative and give it an offset from the top by 100% of the window width
Make the page-loader 100% height and width and position fixed
Offset the wrapper before the page is fully loaded, and then just transition it to 0 offset once the page had loaded
See a working jsfiddle here
Create an element (Div) that covers the whole screen.
Behind it (smaller z-index) add a Div container that holds all the images.
Add in JavaScript a load event function to all images:
image.onload = function() {
//image was loaded
}
Hide the cover Div when all images was loaded.
How to know when all images were loaded? add a counter or use a Promise.
Add overflow: none to disable scrolling, and add click event or scroll event (using jQuery) and set overflow to auto.
There are a lot of ways to implement each of these sections.
I am trying to slide down and slide up a div.At the time of loading the div will be kept disappeared/hide.
In this regard I used .hide() to keep the div disappeared/hide at the time of loading and after that I used .slideDown() to slide down and .slideUp() slide up the div.
My problem is when the page loads that div appeared for a moment like 1 millisecond after that it disappears. But I would like to keep the div disappeared/hide at the time of loading.
How can I solve the problem ??
You want to hide a specific div at page load. You don't need any jQuery/JS to do so.
Therefore, as per my comment, use CSS only:
div {
display: none;
}
You can use the css method to do this. At the time of load, add a class called "hidden" then, after the page fully loaded, remove that class and use fade in/fade out.
something like this:
$(documnet).ready(function() {
$("#element").addClass("hidden");
$("#element").fadeIn();
$("element").fadeOut();
});
Use the addClass property, to add a class to hide your div, then fade it back into view.
First add display:none; in your CSS file.
div {
display:none;
}
And add this script
$('div').slideDown().delay(300).slideUp();
If your are getting the same problem again, then it means your CSS file is taking more time to load, in this case you can add in-line style.
<div style="display:none"></div>
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'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?
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);
}