I have several pages (including an 'include' php page which contains my menu links. And I also have a footer 'include' php page).
Basically, I thought of having this smooth animation, where my "pouch" as I call it, animates downwards. It's basically a slightly more fancy type of rectangle that has a width of 1000px. So, whenever I click on "Services" for example, it would animate slowly enough downwards.
Aside from the links on my pages, the order of what I currently have goes as follows: I have my scripts externalized, and I have text on each of my pages. So for the "Services" page for example, I have my text, followed by the "pouch". The "pouch" is on my footer 'include' php page.
This is the code I have for the animation. I have a similar code which works on another project which includes more coding. But, I assume this code here is correct. The question is, how can I make it that this code is triggered before loading the other page's text:
$('#services-fr-2').click(function(){
if ( $('#green-pouch-fr').height() == 580 ) {
$('#green-pouch-fr').animate({
'top':'800px',
'height':'500'
})
In other words, even though the text is on the next page, I would need the pouch to animate downwards, followed by the text appearing.
Try something like:
$.ajax(/* ajax stuff here */).done(function(data){
$('#green-pouch-fr').animate({
top: '800px',
height: '500'
}, 500, function(){
//run your text data here
}
});
});
The animate function accepts, as a parameter, a function to be invoked after the animation completes.
If this question is asking how to set the text only after the animation completes, you can do it like so:
$('#green-pouch-fr').animate({
'top':'800px',
'height':'500'
},
{
complete: function() {
$(this).text(pageContent);
}
}
);
Related
So i currently have a setup that allows for a button to be pressed, the current content is hidden, and more content scrolls in from the right. However my problem is that for the briefest of moments the footer, which sits below the content, moves up before moving back down below the content just loaded in.
This fiddle best illustrates the problem: http://jsfiddle.net/9Dubr/766/
My Code:
$('#rightButton').click(function(){
var toLoad = 'page.html #content';
$('#content').hide("fast", loadContent);
function loadContent() {
$('#content').load(toLoad,'',showNewContent);
}
function showNewContent() {
$('#content').show("slide", {direction: "right" }, 1000 );
}
return false;
});
Thanks for your help
The fiddle doesn't seem to work for me, but it sounds to me like your footer is simply trying to occupy the empty space left behind by the previous content. In which case, you can try giving the parent container of your content a fixed height just before hiding it. You can then unset the height once the next content is loaded, that way there isn't really any empty space for the footer to try and occupy.
Untested code:
$('#content').parent().css({height: $('#content').height()});
$('#content').hide("fast", loadContent);
...
function showNewContent() {
$('#content').show("slide", {direction: "right", complete: function() {
$('#content').parent().css({height: ''});
} }, 1000 );
}
If you'd like to make it more visually appealing, you can animate the height so the footer will get pushed/pulled more smoothly.
Hope this helps.
It may be because the page is allowed to resize the lengths of divs. A few suggestions that might work is:
Quick Fixes:
Hiding your footer until the person is at the bottom of the screen
Making your footer a static size and maybe even making the footer position final.
Adding a fixed size container around your objects as mentioned in a previous comment.
This way atleast it won;t bother the footer in any way.
Fix without changing footer:
It is obviously a load problem when the button itself is pressed. Because as I understand from your code when the button is pressed and then you are adding this new content to your page right before using the slide effect.
I would suggest you preload the content when first opening the page and then just use the .slide() when the button is pressed.
So I have some text on a page that is hidden and when I click a button the text is revealed with a "transition.slideDownIn' and when a button is clicked the text is hidden again using a "transition.slideDownOut". The problem is that the reader is left further down the page and I want them to be brought pack up to the parent div of the text which is slid down/up, ideally animated simultaneously with the slideDownOut. I have tried several different things (queues, etc) but I can't seem to figure out what I am doing wrong. Am I approaching to problem incorrectly or misusing the functions?
Below is my most recent attempt.
$read_close.velocity('transition.slideDownOut', 1000, function() {
$('#services').velocity("scroll", {duration:1000, easing: "spring"} );
});
If what you wish to accomplish is simply scroll back up after the transition then do something like:
$read_close.velocity(
'transition.slideDownOut',
{duration: 1000,
complete: function () {
$('#services').velocity('scroll', {duration:1000, easing: "spring"});
}});
Assuming your scroll call is correct.
I have a slight problem with the way my pages work and the back to top link I am using.
The back to top link works well on static pages but if I reveal more content (dynamically making the page longer) it doesn't recalculate the height of the window. This must be a common problem - I suspect?
Here is the javascript for the back to top link generation:
// Affixes the "back to top" button
if ( (jQuery(window).height() + 200) < jQuery(document).height() ) {
jQuery('#top-link-block').removeClass('hidden').affix({
// how far to scroll down before link "slides" into view
offset: {
top: 200
}
});
}
I have just realised that this method is a bit flawed. Instead I opted for some code that uses the scroll function rather than trying to determine the window/document height. Works much better:
http://www.developerdrive.com/2013/07/using-jquery-to-add-a-dynamic-back-to-top-floating-button-with-smooth-scroll/
I am using a mixture of jQueryTools overlay (lightbox type thing) and a scroll-bar called Perfect Scrollbar. The problem I have is that when the overlay is loaded the scroll-bar doesn't show until you scroll within that box. I need to be able to make it clearer so that everyone knows it is a scroll-able content box. One way this could be possible is to make the content box scroll up one pixel when the overlay is opened. I have found the following code
$(".scroll-content").load(function() {
window.scrollBy(0,-1);
}
which I have been told should work but no matter what I can't get it to scroll at all.. Is there something i'm doing wrong?
Since you have the scroll bar method bind to an element that is initially in a 'hide' status, in fact .BigSuperBlock .block_overlay is hidden by display:none; in Css, the plugin can not properly calculate the height of the overlay container.
So, when you call the function that show-up the 'overlay' container, you have to call the method on the scroll-content class:
$('.scroll-content').perfectScrollbar('update');
You can find the documentation of this in the author's page.
To make it works, you have to call the plugin 'update' method, again, in the jQueryTools modal function, as a callback.
$(".block_overlay").overlay({
onLoad: function(event) {
$('.scroll-content').perfectScrollbar('update');
// here you update the perfectScrollbar plugin
},
onClose: function(event) {
// other custom code
}
});
Try with this:
jQuery("container").animate({ scrollTop: 50 }, 800);
Give that you want to make clear that there is a scrollbar, you can have it on all the time if you change the perfect-scrollbar.css
.ps-container .ps-scrollbar-x-rail {
...
opacity: 0.6;
}
.ps-container .ps-scrollbar-y-rail {
...
opacity: 0.6;
}
I want to fade in an entire web page after all its elements finished loading. The web page includes the background image repeated left to right, and the main content area with some text and pictures. I assume I should set body opacity to 0 in CSS, and use JavaScript code to fade in the page.
I have to use MooTools, more specifically, version 1.2.6, because that library is already linked to the page (and shouldn't be upgraded to a more recent version, for a number of reasons).
One of the StackOverflow experts suggested this MooTools snippet as a solution:
window.addEvent('load', function() {
$$('body').set('morph', {duration: 300}).morph({'opacity': '1'});
});
PROBLEM: for some reason, instead of smoothly fading in the page, the snippet makes the background appear right away, and then, a second or so later, the page pops up, without any fade-in effect. Most likely it's me who's not doing things right.
I'd appreciate a bit of advice from a knowledgeable person.
The answer to your question is to do the following.
Remove the CSS opacity:0; in the stylesheet and use this code adjusted from yours
I increased from 300 to 3000 which in seconds is from .3seconds to 3seconds.
chained:
window.addEvent('load', function () {
$$('body').fade('hide').set('morph', {
duration: 3000
}).morph({
'opacity': '1'
});
});
expanded:
window.addEvent('load', function () {
var el = $$('body');
el.fade('hide'); // hide body tag
el.set('morph', {duration: 3000});
$$('body').morph({'opacity': '1'});
});
Notice:
I do agree with LifeInTheGrey about bad practice, but i said i would answer your question.