I have a page with a form and when I submit it I want to fade it out. When I load the page the form goes to I want to fade it in. So I actually want to simulate ajax and make it look like the page doesn't redirect.
What would be the best way to do this?
Fading out is easy, you just fade out all your content when a user pressed submit and once the animations finishes you load the new page. But fading in a new page is a problem, afaik you need to have the page loaded to perform animations like that. I might be wrong however.
I do have a somewhat hacky solutions for you. You could load each page with a screen filling container, set it's background color to white for example so the screen renders completely white. When the document is ready you just fade that container away with Jquery. This should work the way you want i believe.
Out of my head so just take it as a guideline, there are many more ways to animate things with css and jquery
$(document).ready(function()
{
//Fade out container div
$("#overlay").animate({
visibility: hidden;
});
});
function onSubmit()
{
e.preventDefault(); //Prevents the form from submitting.
$("#overlay").animate({
visibility: visible;
},
{
complete: function()
{
$("#form").submit();
}
}
});
Important! When a user has java disabled he won't see anything at all.
Related
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.
I need to transition effect for between the html pages, when clicking menu or submenu's, page will be opened with transition effect.
Please guide me, how to do that, Thanks in advance.
The below link is only have div transition not a page transition. it is possible to the same transition between html pages?
How I can add transitions between two HTML pages?
Here is a solution that requires some knowledge of CSS and Javascript:
In your DOM, where you put your links to the other pages, instead of using <a> tags, use an ordinary <span> and attach an onclick attribute, like this:
<span onclick="transitionToPage('https://www.google.com')"></span>
(You can use <a> and href, but you need to parse out the target href and prevent the default event.)
Then in your Javascript, put this code:
window.transitionToPage = function(href) {
document.querySelector('body').style.opacity = 0
setTimeout(function() {
window.location.href = href
}, 500)
}
document.addEventListener('DOMContentLoaded', function(event) {
document.querySelector('body').style.opacity = 1
})
Finally, in your CSS code:
body {
opacity: 0;
transition: opacity .5s;
}
This will have the following effect:
When page loads, the body will fade in over half a second
When you click on a link, the body will fade out and after half a second the browser will go to the next page
Happy coding!
You can always hide content of body and then fade it via JQuery. But that will work only in the case of entering page. If you want to add animation to leaving page then you have to go with Single Page Application, where you can add transitions at both levels.
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'm looking to achieve a page transition whereby a link to another page will, instead of loading the page, slide the next page in over the next one. Something like the MOVE transitions on this demo site: http://tympanus.net/Development/PageTransitions/
Although this isn't quite right as this is all one page (i.e. the url doesn't change), they need to be transitions between separate pages.I got as far as something like this:
HTML:
<body>
<div class="container">
Link
TEXT GOES HERE
</div>
</body>
jQuery:
$(function(){
// hide the div on page load and use a slidedown effect
$('div.container').fadeOut(0, function(){
$(this).slideDown(500);
});
// capture link clicks and slide up then go to the links href attribute
$('a.slide_page').click(function(e){
e.preventDefault();
var $href = $(this).attr('href');
$('div.container').slideUp(500, function(){
window.location = $href;
});
});
});
But this isn't quite right as this method slides the current page upwards, before sliding the next page downwards, but the url change here is good. Any suggestions would be greatly appreciated!
If I get this correctly, you want to slide something, but instead of just sliding an arbitrary div, you want to slide in a whole new web page?
What you could do is use AJAX. So basically, make an ajax request then when you receive the data, change your #next-page.html() to the data you received.
You'll have to cycle them now though, so setting an '#active-page' is probably better.
Here is the site where I used that. http://cs75.heliohost.org/ When you click a link, a slide animation is shown, but if I edited my slide's html I could have put the new page on that sliding rectangle.
Here are the things you need:
Two 'Pages'. You will be reusing these as you go.
When a user clicks a link, make an ajax call, then replace the
'inactive-Page' with the data you receive.
Make the 'inactive-Page' active and then apply your animation.
Turn the replaced page as 'inactive-Page'
Feel free to ask if there was anything vague in my answer.
You can set the query string to ?animate=true and animate downwards in next-page.html
$(function() {
if (location.search.match(/animate=true/)) {
$('body').hide().slideDown();
}
});
You can also hide the body using html so it will be hidden before DOM ready.
and the link would be
Link
Regarding the animation:
If you want both to slide up, you have to tell both to slide up. So instead of your "slideDown", use "slideUp".
If you look at the page's source, you'll see they're actually using CSS animations to do most of the work. This allows them to easily run two animations at once and allows the browser to use hardware acceleration to handle the animation (jQuery, and JS in general, tend to queue them by default, but you can add queue:false to make them run at the same time, and JavaScript doesn't yet have access to hardware acceleration).
The keystone of these animations are in the animations.css file. Notice the named keyframes at the bottom and how they work:
#-webkit-keyframes moveToTop {
to { -webkit-transform: translateY(-100%); }
}
#-moz-keyframes moveToTop {
to { -moz-transform: translateY(-100%); }
}
#keyframes moveToTop {
to { transform: translateY(-100%); }
}
You don't need to make them keyframes like that, you can just build them into the elements (or classes) themselves. I think they use named keyframes because they use a lot of the same animations over and over again. The transforms, though, are what makes them move up (or any other direction you want).
Regarding the URL changes:
Instead of trying to write the functionality yourself, you might want to look into Pjax. It's the library that makes GitHub do the page slide thing that you're looking for. If nothing else, you can look at the source and see how they do it.
How it works is by combining AJAX with PushState (hence the name). When you click a link, the JavaScript overrides the default click behavior and makes an AJAX call to get the new content. It then activates a PushState call, which updates the browser's URL (this is the key to the "different pages" thing), and animates in the new content. In browsers that don't support PushState, the pages just load like any other site.
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.