My page transition is not working - javascript

I'm trying to create a full page transition using css animations. I've come to a fork in the road. I've placed a class on my link and have called it using JQuery to then apply the css class to the page to activate the transition. Now, when I assign the new window location, it wants to override the animation. It's like I can either have one or the other, not both, at least not how I'm doing it anyway...any tips?
Here's the code
$(document).ready(function() {
var linkLocation
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
redirectPage();
});
function redirectPage() {
$("body").attr('class', 'page-rotateSlideOut');
window.location = linkLocation;
}
});

window.location = linkLocation will refresh the page. That's why your transition doesn't work.
If your .page-rotateSlideOut style has a duration on it, you could do something like:
setTimeout(function() { window.location = linkLocation; }, duration);

Try using setTimeout.
Like
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").attr('class', 'page-rotateSlideOut');
setTimeout(redirectPage,5000);
});
Remove $("body").attr('class', 'page-rotateSlideOut'); in redirectPage

Related

How to change the page content without reloading

I want to know how can I change the content of a div (for example: <div id="MyDiv"></div>) when I click any link for an HTML file with PHP code?
Now, I tried to do this:
$(function(){
$("a").on("click", function () {
var href = $(this).attr('href');
$("#MyDiv").load(href);
});
});
But it replaces the content of the whole page.
Yeah, I need to prevent the default action, this will do what I want:
$(function(){
$("a").on("click", function () {
event.preventDefault();
var href = $(this).attr('href');
$("#MyDiv").load(href);
});
});

On click, Play HTML5 Video and then go to link

I have short HTML5 animations that I want to play and then go to a specific link.
I found code that is similar to what I need, I just don't know how to alter it for an HTML5 animation.
$('#menu a').click(function(event) {
event.preventDefault();
var href = this.href;
$('#whatever').animate({
top: '300px'
}, 500,
function() {
window.location = href;
});
});
Thanks in advance,
Brian
Give this a try:
$('#menu a').click(function(event) {
var href = this.href;
// This will play the video
document.getElementById("videoPlayerID").play();
// This will add an event listener that waits for the video to end.
// Once it does, it calls the goToLink function and feeds it the href
document.getElementById('videoPlayerID').addEventListener('ended', goToLink(href), false);
event.preventDefault();
});
function goToLink(href) {
window.location = href;
}

Open subpage with delay

I'm making a web page for my self. I have a welcome screen with big background wallpaper and just one link that you have to click to get to the index page. I have a sound on welcome page that plays when link is clicked, but as soon as the link is clicked it opens index page so the sound is not even heard. I want to make few seconds delay after the link is clicked so that the sound can play first to the end.
My jsfiddle http://jsfiddle.net/cs6yqawr/.
$('a[href*="/*html"]').each(function() {
$(this).on('click', function(event) {
event.preventDefault();
(function(h) {
setTimeout(function() {
window.location = h;
}, 5000);
})(this.href);
});
});
Tried this code but I can't get it working.
Any suggestions?
Tried and it'll play music before to new page.
$('.big-btn').click(function(e) {
e.preventDefault();
console.log(this);
var embed = $('<embed src="Kalimba.mp3" hidden="true">');
embed.appendTo($('#embed'));
embed.ready(function () {
setTimeout(function() {
window.location = 'index.html';
}, 2000);
});
});
You should replace my test mp3, target location, and delay ms for your usage.
I think it's just the selector on your event handler. Try:
$(document).on('click', 'a', function(event) {
event.preventDefault();
setTimeout(function(h) {
window.location = h;
}, 5000, this.href);
});
Or ideally just give the link an id and bind the handler to that.

Add fadeOut to current JS

$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn(1200);
});
});
This is for tabbed menu with contents (using jQuery, of course).
When I opening new tab, current contents fades out wery fast, but new tab contents opens slowly (as indicated 1200).
So, how can I edit this existing script to fade out contents slowly?
Example http://jsfiddle.net/2uts2kdt/7/
http://jsfiddle.net/2uts2kdt/9/
Check out the updated JSFiddle above. Basically you want to call the fadeIn once the fadeOut is complete. You need use promise().done() because the fadeOut is called on multiple elements. So once it is all done it will call the done code.
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).fadeOut(1200).promise().done(function() {
$(tab).fadeIn(1200);
});
});
});
If I understand correctly then you want to add a fadeOut call instead of just setting it to display:none
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).fadeOut(1200);
$(tab).fadeIn(1200);
});

2 Javascripts not working with each other... (smooth scrolling & fade body)

Dear stackoverflowers,
I have two javascript snippets that don't appear to be working properly together.
The first one is there to fade out the body on an click event in the navigation, then redirect to a different page. But this appears to be working only after I clicked a link that triggers 'JavaScript-2'.
Here's the code for the first one:
// JavaScript-1
<script type="text/javascript">
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
</script>
'JavaScript-2' is the second one, that works together with 'jquery.easing.1.3.js' and produces nice smooth scrolling to an anchor. The scrolling always works fine and it fires in all situations.
I don't know why, but it looks like, that the smooth scrolling javascript causes the other javascript to fail.
I'm really looking forward to an answer to this little mystery.
Here's the code for the second one:
// JavaScript-2
<script type="text/javascript">
$(function() {
$('ul.navscroll a, #test a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
</script>
Try to update your Javascript-1 code like this:
// JavaScript-1
<script type="text/javascript">
$(function() { // this fires the jQuery after load
var linkLocation = false; // define the linkLocation var
$("a.transition").click(function(event){
event.preventDefault();
linkLocation = this.href;
$("body").fadeOut(1000, redirectPage);
});
function redirectPage() {
window.location = linkLocation;
}
});
</script>
There are 2 main things corrected here:
$(function() {...}); will fire the jQuery-Events after the DOM is completely loaded
var linkLocation must be defined before you access on them in the redirectPage()-Method
For removing the error in Javascript-2 (where it breaks the Javascript) update them like this:
// JavaScript-2
<script type="text/javascript">
$(function() {
$('ul.navscroll a, #test a').bind('click',function(event){
target = $(this).attr('href'); // find the top of the target
offset = $(target).offset(); // this returns an object {top: y,left: x}
$('html, body').stop().animate({
scrollTop: offset.top
}, 1500,'easeInOutExpo');
event.preventDefault();
});
});
</script>
Now if you click on a link with href='#test' you will scroll to the element with the ID test for example your <footer id='test'>.

Categories

Resources