Loading whole pages with ajax in wordpress - javascript

Im having a problem loading pages in wordpress with ajax. I have to make animated page transition, so i decided to use ajax and put page content into a div which i will animate into view. I created this logic, that works 50% of the time. There are generally a lot of weird bugs.
So my question did anyone create ajax page loader in wordpress? I read a bit about using ajax with wordpress, and that i had to use wordpress built in features, but I didn't get why is that. Also I don't know how to get the back button to work properly.
$( links ).click(function(e) {
var link = $(this).get(0).href;
$('body').append('<div class="contain-all"></div>');
$('.contain-all').load(link);
if(link!=window.location){
window.history.pushState({path: link},'',link);
}
e.preventDefault();
});
Hope somebody has the anserws I need. :)

Okay i read a bit about ajax in wordpress and loading pages, and you can achieve this by creating template parts which you will fetch by a function in wordpress functions.php, by calling it with ajax. It sounds complicated, (and it partly is), but you can read more about it here:
https://premium.wpmudev.org/blog/load-posts-ajax/
Also if anybody have questions they can ask them here, so everyone will have access to them.

Related

Include code from jQuery load() onto page source code [duplicate]

Many aspects of my site are dynamic. I am using jquery.
I have a div which once the DOM is ready is populated using load().
Then if a button is clicked, using load() once again, this value is replaced by another value.
This kind of setup is common across my site. My homepage is essentially lots of dynamically loaded, refreshed, and changeable content.
What are the repercussions of this for SEO?
Ive seen sites where each page is loaded using load() and then displayed using the animation functions... It looks awesome !
People have posed this question before, but noone has answered it properly.
So any ideas? JQUERY AND SEO??
Thanks
EDIT
Very interesting points. I dont want to overdo my site with jaascript.. just where neccesary to make it look good - my homepage however is one place of concern.
So when the DOM is readY, it loads content into a div. On clicking a tab, this content is changed. I.E No JS, No content.
The beauty here for me is that, there is no duplicated code. Is the suggestion here that i should simply 'print' some default content, then have the tabs link to pages (with the same content) if JS is disabled. I.E sacrifice a little duplicate code for SEO?
As far as degrading goes, my only other place of concern is tabs on the same page.. I have 3 divs, all containing content. On this page two divs are hidden until a tab is clicked. I used this method first before i started playing with JS. Would it perhaps be best to load() these tabs, then have the tab buttons link to where the content is pulled from?
Thanks
None of the content loaded via JavaScript will be crawled.
The common and correct approach is to use Progressive Enhancement: all links should be normal <a href="..."> to actual pages so that your site "makes sense" to a search spider; and the click() event overrides the normal functionality with load() so normal users with JavaScript enabled will see the "enhanced" version of your site.
If your content is navigable when JavaScript is turned off, you'll be a good ways toward being visible to search engines.
Note that search engine crawlers won't be submitting any forms on your site, so if you have any or elements that are meant to be navigating between your site's content pages, that content is not navigable by search engines.
Here is a guidelines how to make Google to crawl content loaded with ajax: http://code.google.com/web/ajaxcrawling/docs/getting-started.html
I use jquery load() asynchronous page load. It greatly improves user experience, but not seo-friendly. Here's the only solution I have found so far:
On first load I do not use jquery load() and try to write cookie with javascript.document.cookie = 'checkjs=on';
On next page load if php script finds this cookie it means that javascript is enabled and jquery load() can be used. If there's no such cookie then javascript is off (probably spider came), so jquery load() is not used.
if (!$_COOKIE['checkjs'] || $_COOKIE['checkjs']!='on'){echo 'js is off, hello Google!'; } else {echo 'js is on, can use jquery load';}
This way I can be sure that most of users can benefit from asynchronous page blocks load, exept for the very first load. And spiders get all content too.
In your case you could just load the same page with new parameter that makes another tab active. Spider is gonna be happy.

Animation to changing HTML page

I've been trying, for a few days, to add an animation between two different HTML pages/files (index.html -> about.html). My idea is to animate/have a transition when going from one page to the other: in my case from the index.html to the about.html page.
I found a lot of answers on Google and on StackOverflow, but the problem is that the transition happens on the same page which means that the HTML code for both pages is in the same file and my index.html becomes unreadable, especially if I am working on a project that's quite big.
I saw that Google Photos had something quite similar to what I want to achieve. Just open Google Photos and click on an image, and as you might notice, the URL changes from https://photos.google.com to https://photos.google.com/photo/PHOTO_ID and an animation occurs.
Any idea on how Google does this or how I can do it? :)
Any help would be greatly appreciated!
The solutions I'd rather avoid are:
AJAX (but it's ok if Google uses it, and I doubt they do)
Having the HTML for both pages in a single, one file.
AngularJS (I'd prefer pure JS)
( this isn't a duplicate, I'd like to know how Google did it ;) )
You could use jQuery to load an HTML file into the body. Here is some very untested pseudo code to make this boneless, single-page-app work:
jQuery
//disable link action and load HTML inside the body tag
$('a').on('click', function(){
e.preventDefault();
$('body').load($(this).attr('href'));
}
HTML
<body>
<h1>title</h1>
link
</body>
If you wish to add an animation effect, you can prepend new HTML to the body, fade the previous HTML, then remove the hidden content.
While I'm not exactly sure of the method Google uses to achieve this, I do know that many of the solutions you would like to avoid are definitely some of your greater options.
Anyhow, a hack to achieve this would be splitting the code up amongst the two pages. Set up a fade out/any animation after a link is clicked on one page and make the other page fade in/any animation after load on the destination page. This is somewhat similar to how I would do it using an XML request, it's just a bit out of general practice.
Again this is a very 'hacky' method, but it gets the job done with very minimal JavaScript code, depending on how you go about it.

Load sections of a website at specific times

Hello stack overflow community,
I am struggling to get this website to load quickly. It is a one page portfolio site running off the 'Simply' Theme available at Themeforest:
http://themeforest.net/item/simply-one-page-multipurpose-html-template/7788220?WT.ac=search_item&WT.oss_phrase=simply&WT.oss_rank=5&WT.z_author=AliA
With a video header and all of the other content below the header, we are looking at a 5 second load time.
What I am looking for is a way to load just the video header and navigation at first load, and after the video finishes loading and starts playing, the remaining content will start to load.
I am not all too familiar with Ajax or writing Javascript, but if I could get pointed in the right direction it would be greatly appreciated!
From what I've read so far, possibly the .load javascript might do the trick, but I have not found much information on it or where to start.
.load() includes a callback (see here) - so, assuming your content is all on the same domain, you just need to do something like this:
$(document).ready(function() {
$('#div_where_you_want_to_load_the_video').load(
'/path_to_video',
'#video_container',
function() {
//load the rest
}
);
});
Make sure you have jQuery loaded first.

Load a page from within an already loaded page

It seems like this should be a pretty obvious answer but I'm under pressure for portfolio and I think I may be confusing myself here. I couldn't quite find the answer that I was looking for (which I usually am able to on this site).
Basically I want to load an external page with an image into my gallery. The only catch is that the gallery itself is loaded from an external page.
I was able to successfully implement this when I put the gallery code into its own individually loading window. But when I try it with the original setup, of course, I have to delegate. I know how to set that up, it's just defining the function itself that's giving me problems (where "window" calls the div that contains the gallery on its external page):
function showPiece(show) {
window.load(show);
}
How do I "delegate" here?
Also, I wanted to make sure I figured out how to click back to the gallery as well. That wasn't working for me either for some reason. Here's what I was using (you can see on the guitar page on the portfolio2.html page):
window.on('click',"#back", function(e){
e.preventDefault();
showPage('portfolio.html');
manageNavState($(this));
});
Here's my site so you can see in detail what's going on:
Portfolio Site
And here's the other gallery page I made:
Second Gallery Page
Sorry if this is a dumb question. Thanks in advance everyone!
===EDIT===
Nevermind, my code was perfectly fine. I found out I just had to open and close with html tags in the linked image pages, which I didn't expect because I didn't have to do it elsewhere. One image is still not working, but I'll figure it out.

tooltip which brings external page in it

m looking for a tooltip which can dispaly external php page in to it and which can adjust itself up and down with respext to screen size,can some one suggest me jquery or javascript code.It should work on ajax page also.if i delete something by using ajax then tooltip should appear on ajax
have you tried jquery.cluetip
look at basic ajax,
Since you are not saying which JavaScript library you are using, I am suggesting a prototype-based solution:
Prototip
It has many awesome features you can see on the demo page, including loading tooltips via AJAX.

Categories