We Keep Coding

Main Page Button is missing after user clicks on PageBack button

Functionality:
When user clicks on a button from page 1, it will bring them to page 2. During the page transition, I have included in a few animation:
1.) Button will explode.
2.) Page 1 will slideout and fade out while page 2 will slidein and fade in and bounce a lil.
What has been done:
I have made use of .animate & .toggle jQuery to achieve the following animation during page transition.
Issue:
Working fine:
Page transition: when user clicks from page 1 to page 2 and when user navigates from page 2 to page 1.
Animation: Button exploding when user clicks on the button and page sliding and fading.
what is not working fine is that when user navigates back from page2 to page 1, the button that performs the explosion animation has disappeared and is not displayed in the original position.
What has happened?
**Code:
function PageTransit() {
$('#Button1').toggle("explode", {
duration: slideDuration
}, {
easing: 'easeOutElastic',
queue: false
});
$('#Page1').fadeOut({
duration: slideDuration,
queue: false
});
$('#Page1').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
//Method call to slide and fade in second page to the left padding
$('#Page2').fadeIn({
duration: slideDuration,
queue: false
});
$('#Page2').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
}
function Page() {
console.log("Page");
$('#Page2').fadeOut({
duration: slideDuration,
queue: false
});
$('#Page2').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
$('#Page1').fadeIn({
duration: slideDuration,
queue: false
});
$('#Page1').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
}
<div id="Page1" align="center" style="position:absolute; width:1920px; height:1080px; z-index=1; top:0px; left:0px;">
<img src="lib/img/Background.png" />
<button id="Button1" onclick="PageTransit()">
<img src="lib/img/Button.png">
</button>
<button id="Back" onclick="Home()">
<img src="lib/img/HomeButton.png">
</button>
</div>
<div id="Page2" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=2; top:0px; left:1921px; ">
<button id="PageBack" onclick="Page()">
<img src="lib/img/VideoBackButton.png">
</button>
</div>
**

As Pointed out by user cske, that you will need to put back the .toggle'explode' at the page back function.
function PageTransit() {
$('#Button1').toggle("explode", {
duration: slideDuration
}, {
easing: 'easeOutElastic',
queue: false
});
$('#Page1').fadeOut({
duration: slideDuration,
queue: false
});
$('#Page1').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
//Method call to slide and fade in second page to the left padding
$('#Page2').fadeIn({
duration: slideDuration,
queue: false
});
$('#Page2').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
}
function Page() {
console.log("Page");
$('#Button1').toggle("explode", {
duration: slideDuration
}, {
easing: 'easeOutElastic',
queue: false
});
$('#Page2').fadeOut({
duration: slideDuration,
queue: false
});
$('#Page2').animate({
'left': '1921px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
$('#Page1').fadeIn({
duration: slideDuration,
queue: false
});
$('#Page1').animate({
'left': '0px'
}, {
duration: slideDuration,
easing: 'easeOutElastic',
queue: false
});
}

side slide menu not creating push effect in ipad and phone

I am using the following side slide menu for my project :-
http://www.mywork.com.au/blog/demos/facebook-sidebar-menu/
I've changed the left slide-in to right slide-in. It works very well for me on the desktop but in ipad and phone the page wrapper has a lagging-behind/scrolling effect. It seems like that the page wrapper scrolls from right to the left under the side menu container after the menu has appeared.
I've tried using "fast", "slow" and other properties of animate but don't seem to figure out what exactly needs to be done.
$(".m-menu").toggle(function() {
$('#mobile-menu-bg').animate(
{ right: '0', speed: '1500' },
1500
//{ duration: 500, queue: false },
);
$('#page-wrapper').animate(
{ 'margin-left': '-80%', speed: '1000' },
1000
//{ duration: 500, queue: false }
);
}, function() {
$('#mobile-menu-bg').animate(
{ right: '-80%' }
//{ duration: 500, queue: false }
);
$('#page-wrapper').animate(
{ 'margin-left': '0' }
//{ duration: 500, queue: false }
);
}
);
Please help

Merging two "(document).ready(function()"s

I have two jquery/javascript codes but I couldn't merge them. Everytime one of the functions was disable. How can I merge the codes. Please help me, thanks.
First file:
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
//first ready function
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
});
second file:
function checkCopyRight(/*string*/url){
var copyrightLinks = $("a[href='" + url + "']");
return copyrightLinks.length > 0;
}
// second ready function
$().ready(function(){
if(!(checkCopyRight("http://e1.com")&&
checkCopyRight("http://e2.com")&&
checkCopyRight("http://e3.com"))){
alert("...");
}
});
I get a "Your post does not have much context to explain the code sections; please explain your scenario more clearly." message. There any character limit?

You actually have 3 Ready functions and one wannabe ready function. I've rewritten your code as it should be in one ready call. Give it a try:
function checkCopyRight(/*string*/url){
var copyrightLinks = jQuery("a[href='" + url + "']");
return copyrightLinks.length > 0;
}
jQuery.noConflict();
jQuery(function() {
jQuery('.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
jQuery('.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
if(!(checkCopyRight("http://e1.com") && checkCopyRight("http://e2.com") && checkCopyRight("http://e3.com"))) {
alert("...");
}
})
$().ready(handler) (this is not recommended) [1]
Also, keep in mind, You dont really need noConflict unless you are using another JavaScript Library like MooTools or Prototype. A Plugin like Superfish is not relly a reason to call no Conflict. If there is no conflict, you can use $ as shorthand for jQuery instead of constantly rewriting jQuery.
$(document).ready is the same as JavaScript's .load function and since jQuery 1.0 you can use the shorthand version jQuery(function() { /* do work */ }) or $(function() { /* do work */ })
For more information:
.ready() (also info on noConflict)
.noConflict() (API Page)
My Blog on using jQuery (needs work, hoping to edit it this weekend, sorry)

jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
if(!(checkCopyRight("http://e1.com")&&
checkCopyRight("http://e2.com")&&
checkCopyRight("http://e3.com"))){
alert("...");
}
});
You need to import the second file first since the first file uses a function inside second file.

jquery animation - when do they finish?

I have two jquery animations one by other:
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing,
complete: complete
});
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing,
complete: complete
});
I want the animations to run simultanusly so I use {queue: false}:
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false,
complete: complete
});
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false,
complete: complete
});
But now the completed callback called twice! How can I know exactly when does the both animations are done?

Using jQuery deferred methods try
$.when(
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing
}),
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing
})
).done( function( ) {
alert("done!");
});
Fiddle here

Why not remove the complete handler from one of the animations?
From the extract of code that you've posted, it looks as though you're using the same duration and easing methods on both animations. Therefore it's inherently true that they will complete at the same time, so long as they're being called at the same time...

this may sounds like something complicated, but why not Deferred Objects ?
http://api.jquery.com/category/deferred-object/
you may investigate more here
jQuery animation with deferred pipes?

According to http://darcyclarke.me/development/using-jquery-deferreds-with-animations/:
books.animate({ left: left1 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false
});
laptops.animate({ left: left2 }, {
duration: this.slideDuration,
easing: this.easing,
queue: false
});
$.when(books, laptops).done(complete);

How can I make this a better recursive animated jQuery script?

The idea is to animate a cloud div and to have it animate back and forth horizontally in perpetuity. This works, but unfortunately I think it's prone to memory leaks and UI lag. Any advice would be appreciate, thanks.
function animateCloud() {
$('#cloud').animate({ right: '+=500' }, { duration: 35000, easing: "linear", queue: true });
animateOpposite();
}
function animateOpposite() {
$('#cloud').animate({ right: '-=500' }, { duration: 35000, easing: "linear", queue: true });
animateCloud();
}
$(document).ready(function() {
animateCloud();
});

I don't think that your code leaks memory at all, but you can create the call shorter.
function animateCloud() {
$('#cloud').animate({ right: '+=500' }, { duration: 35000, easing: "linear" })
.animate({ right: '-=500' }, { duration: 35000, easing: "linear", complete: animateCloud });
}
example: http://www.jsfiddle.net/bh3f4/

http://api.jquery.com/animate/
Use the optional callback argument. When an animation finishes, jquery will call your function. Perfect time to animate other direction.