I am working on PJAX powered website.
Problem is that I want to create animated website, when we animate content out of the view and then animate new content into the view.
You can see example here: http://ventguru.infoaleja.lt/
As you can see there's initial animation and after you select anything from top menu everything just disappears and new content is animated in.
What I want to do is that after you click menu item new content is not shown until we animate out old content.
What kind of way to archieve this you could offer?
You can use PJAX callback events, more info at https://github.com/defunkt/jquery-pjax#events!
Example:
$("body").on("click", ".menu li a", function() {
$(document).on('pjax:end', function() {
// Here comes the fade out animation
$('#container').fade( function(){
//Callback after animation has finished
});
});
});
Related
The overall goal of this task is to animate scroll the user to a certain div lower down on the page, depending on whatever #hashName is appended to url.
The html I am working with does not have the correct div id added, so I am adding that via javascript on document ready. Once the div id is added, then I have script that determines the hash passed in, then pass the user to the hash. This following code works:
jQuery(document).ready(function($){
//append new div id to current FAQ class
document.querySelector('.press-24_tab').id = 'faq';
//now that we have correct div id, animate user to this div
var target = window.location.hash;
$('html, body').animate({scrollTop: $(window.location.hash).offset().top}, 'slow', function() {
//in animate callback, attempt to keep user focused here
$('#faq').focus();
});
});
I am calling jQuery etc in the code so I can use this in WordPress.
This code works fine. My problem is, this script fires while the page is loading. And the page keeps loading. And as a result, the page focus goes back to the top of the page!
I was thinking of wrapping the animate to hash code inside $(window).on('load', function(){}); but this does not seem to work. Note my existing animate callback trying to keep user focused - but this is not sticking. Page still loads. Page takes a loooooooong time to load, so I am fighting against this.
So at this point I have hit a brick wall. I am reaching out to those smarter than me in javascript and jQuery to see what I have to do here. Any help would be greatly appreciated.
jquery(document).ready() will fire as soon as the DOM is ready so this is actually working as expected by the looks of things as the DOM isn't the same thing as the document itself.
If you need to wait for external content like web-fonts, images, videos etc you should use the window.load() event
jquery(window).load(function() {
//append new div id to current FAQ class
document.querySelector('.press-24_tab').id = 'faq';
//now that we have correct div id, animate user to this div
var target = window.location.hash;
$('html, body').animate({
scrollTop: $(window.location.hash).offset().top
}, 'slow', function() {
//in animate callback, attempt to keep user focused here
$('#faq').focus();
});
});
Have a look through the documentation for DOM here.
I have an existing jQuery colorbox gallery that works fine when I click any of the 4 images which is initialized on document ready with:
$(document).ready(function () {
if ($('.gallery-thumbnail').length > 0) {
$('.gallery-thumbnail').colorbox({ rel: 'gallery-thumbnail', transition: 'fade' });
}
});
I also have a link in the page, which I would like to also open this same gallery of images. I thought I would be cute and try to just replicate a user clicking one of the images with $('.gallery-image').first().find('a').click(); which works perfectly and opens the image gallery when I type it in the Chrome Inline Console and hit Enter, but when it is run from the code, it just pops the gallery open with the orange loading GIF which spins endlessly. After that I tried having an onclick handler directly on the HTML anchor which had the code $('.gallery-thumbnail').colorbox({rel: 'gallery-thumb', transition: 'fade' }); which resulted in the same endless loading GIF as before. To ensure that I wasn't going crazy, I hooked the OnClick event handler to a function which runs this code:
function showColorbox() {
$('.gallery-thumbnail').each(function () {
$(this).addClass('test');
});
$('.test').colorbox({rel: 'gallery-thumb', transition: 'fade' });
}
Unfortunately, I still end up with the endless loading colorbox, but I verified that my image anchors all had the class 'test'. Throughout this whole thing - I have also verified that there are no JS errors in the console. Any help would be greatly appreciated.
There's an FAQ entry for this:
http://www.jacklmoore.com/colorbox/faq/#faq-click
Create a separate link for opening a gallery
Lets say you've assigned Colorbox to a set of links in your document,
but you also want to have an "Open Gallery" link that opens the first
item in your set. When "Open Gallery" is clicked, you want to prevent
the default action, then trigger a click event on that first set item.
var $gallery = $("a[rel=gallery]").colorbox();
$("a#openGallery").click(function(e){
e.preventDefault();
$gallery.eq(0).click();
});
In a simple plugin for my wordpress site, I wrote code that sets up click events as follows:
$(document).ready(function() {
$("#myButton").click(function() {
//do stuff
});
});
This code works as expected when I load the relevant page directly. However, the way users are expected to access the page is through a link in the theme header. I am not really sure how page transitions in the theme work, but the end effect is that whenever a link is clicked, some animation happens, the page fades out, and the new page fades in. The problem is that $(document).ready() does not fire when the new page fades in, so the click handlers do not function.
How can I change the code so that the click handlers are registered at the time the new page fades in?
If it's necessary to see how the theme works, I am using the Bridge Theme. A demo version of the theme is available here.
UPDATE:
After playing with the theme page transitions a bit, I am suspecting that the theme is using ajax to get the new page content, fading out old page content, fading in new page content, then "artificially" modifying the url to show the new pages url.
If you bind your click event to the document it will apply to elements which are loaded or created after the document has loaded.
This can be done like so:
$(document).on('click', '#myButton', function() { /* ... */ });
you can use one of these methods:
The DOM way
window.onload = function() { // do stuff with the DOM }
The direct jQuery translation
$(document).ready(function() { // do stuff with the DOM });
The jQuery way
$(function() { // do stuff with the DOM });
So i'm using pjax so when a user clicks a link instead of loading a new page it will drag the content in. The content has a navigation bar at the top with the content underneath. Upon click the navigation bar it hides and displays certain contents.. that is working fine.
My problem. When the content is dragged in, I want the page to scroll straight to the navigation bar instead of sticking at the top of the page and the user needs to scroll to it. I've used:
$(function() {
$('html, body').animate({
scrollTop: $('#in-page-nav').offset().top}, 1000);
});
To scroll to the div on the page load, and it works fine when I refresh the page. But doesn't work when pjax pulls the content into the page.
Any help i'd be really grateful, thank you!
You could do your animation in the pjax:success event. pjax:success is fired:
after replacing HTML content loaded from the server
Example
$(document).on('pjax:success', function() {
// Your scroll animation here.
})
See Pjax events for more details.
FIXED
Okay so I'm not sure if anyone has/had this problem but just for reference sake and if anyone comes across this problem heres what I did:
I looked at pjax documentation;
complete - When AJAX request has completed
success - When AJAX request has completed successfully
are two of the callbacks which can be used.
pjax.connect({
'success': function(e){
window.location.hash = $('#in-page-nav a').eq(0).attr('href');
// $(function() {
$('html, body').animate({
scrollTop: $('#in-page-nav').offset().top}, 1000);
},
});
So my previous code which animate scroll to a div on page load copied that and placed this within the pjax.connent and used the success callback. This works perfectly. I kept the code to animate on page load as well so if a user bookmarks the link or sends it and uses the link directly. Then the page will load the same.
Thanks for the quick responses!
The first images of my slider are loading after page load. I want the page viewed with the first slides displayed. I have written a function that creates a div overlay that hides the page initially. I need a function (can be in Jquery) that will hide the div overlay when triggered by an event that will result in the hiding of the div overlay when the first images of my slider are displayed. Site in question: applaudvideo.com password: goonies
Javascript (this is in the header.php of my WP site. It creates the div that hides the page.)
if (document.getElementById) {
document.write('<style type="text/css" media="screen">#overlay
{display:block;height:100%;width:100%;background:#2E0854;position:fixed;z-index:99999}
</style>');
}
CSS: (in body)
<div id=overlay></div>
The above function works. I just need a function that will hide the div overlay by binding or listening to an event. The function would be triggered, hide the overlay div, and the slider's images would already be rendered/displayed.
The following are functions I think I can bind or listen or attach to to hide the div overlay:
Copy and Paste the Below listed API Functions into your Functions for Event Listening.
revapi10.bind("revolution.slide.onloaded",function (e) {
//alert("slider loaded");
});
revapi10.bind("revolution.slide.onbeforeswap",function (e) {
//alert("before swap");
});
revapi10.bind("revolution.slide.onchange",function (e,data) {
//alert("slide changed to: "+data.slideIndex);