Develop Reference

WordPress jQuery.load() pagination link gives 404

I'm trying to build a jQuery-based next/previous navigation but ran into a roadblock of a weird error. Here's a very much simplified version of what I'm trying to do:
$('.next').click(function(ev) {
ev.preventDefault();
$('main').fadeOut();
$('main').load('/page/2/ main .content', function() {
$('main').fadeIn();
});
});
The next page link is usually generated dynamically of course.
Clicking on the link gives a 404 error in the Chrome developer tools and the content never loads into the main tag. Changing it to a rewrite-less /?paged=2 also 404's. When inserting a link to a page however (like /contact/) works without without a problem. Directly entering the link works as well, so rewriting is working correctly.
This is driving me nuts. Anyone has an idea how to make this work?

Can anyone detect why my jQuery is firing on my homepage, but isn't firing on a different page within the same domain?

I have been having some issues getting jQuery to work on some parts of my website. To test if the jQuery would fire I prepared a bit of jQuery that launches everytime my header file is included.
When I am at the home page the jQuery fires properly and the pop-up comes up. As soon as I move to a different section of the site. The same jQuery code included in the header isn't firing. I have checked the console for errors or faults and couldn't find anything.
A test location of the website would be at this location
That is the homepage of the site, if you visit it a pop-up will appear. If you browse to this link the jQuery doesn't fire even though it's still there in the code.
The jQuery code I'm trying to launch is as follows
<script type="text/javascript">
$(function(){
$('#overlay').fadeIn(200,function(){
$('#box2').fadeIn(400)
});
return false;
});
</script>
I'm not very experienced in debugging jQuery and have tried consulting some other questions and forums thought these solutions or attempts didn't seem to work for me. I was hoping I could get a hint in the right direction here.

Your code
$(document).ready(function() {
$('#slider2').s3Slider({
timeOut: 4000
});
});
appears to be raising an error which causes the javascript processing to stop. The element '#slider2' element does not exist on this page. Either remove this code or add a guard condition such as,
$(document).ready(function() {
if ($('#slider2').length) {
$('#slider2').s3Slider({
timeOut: 4000
});
}
});

Jquery boxslider is not working on website

I am fixing just a few minor issues and adding a few pictures and recipes to a friend's website http://mariorizzotti.com who a couple of years ago had it made by a webdesigner. Anyhow, I have been adding a few pictures and changing some of the css, the only problem I am having is getting the jquery bxslider to work on the homepage correctly. It is working on the media page but not on the homepage. The images that are being called are all in the correct folders. Any suggestions by looking at the source code? The only thing I have been able to come up with is that the click handler isn't being called in the homepage. I checked it in chrome's console but not sure if this is correct.

Welcome to StackOverflow. There is a JavaScript error during page load on line 31 of index.php:
Uncaught TypeError: Object [object Object] has no method 'tweet'
This prevents subsequent scripts from executing, so the slider initialization on line 87 doesn't run and the click handlers for changing slides aren't registered. Fixing the error should be as simple as including the jquery.tweet.js script on index.php as it is on videos.php.

Running jquery gallery makes links unclickable

I'm trying to build responsive webpage based on Zurb Foundation framework. Everything worked fine until I tried to add nanoGallery which uses jQuery too. When I add gallery scripts, top menu generated by Foundation script becomes unclickable, :hover works fine but if you click on it, nothing happens. Fell free to visit the exact page at http://emfoto.filipsvoboda.net/presentation.html.
This is how I'm trying to call each script:
<script src="js/jquery.js"></script>
<script src="/js/foundation.min.js"></script>
<script>
jQuery(document).foundation();
</script>
<script src="third.party/transit/jquery.transit.min.js"></script>
<script src="third.party/hammer.js/hammer.min.js"></script>
<script src="third.party/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="jquery.nanogallery.js"></script>
<script>
jQuery("#nanoGallery").nanoGallery({
kind:'flickr',
(..)
thumbnailHoverEffect:[{'name':'borderLighter'}],
thumbnailLabel:{display:false},
});
</script>
I've already tried changing order of those scripts, but that does not seem to help.
EDIT: It does seem to work properly in IE10, however in Chrome-based browsers it still does not work.
EDIT2: After continual fiddling with the code it seems obvious that the presence of the gallery itself on that page causes the bug. Order of scripts doesn't seem to make any difference, as long as the gallery is not displayed, Foundation works correctly and links does work.
EDIT3: Updated the code, stripped it down and changed the order of scripts. I've added simple "a" link to the sample page and it doesn't work either.
EDIT4: I've searched for event.preventDefault() and it is present in one of the *.js files for the gallery. I've contacted the author and if we get to any solution I will post it here.
Thank you for your help.

This issue has been fixed in nanoGALLERY v4.2.1:
https://github.com/Kris-B/nanoGALLERY/releases/tag/4.2.1

I compared chrome and firefox requests and responses using Developer Extensions (chrome) and Firebug (firefox) for the info shown in Net panel. I'm not sure if the file that chrome doesn't find can be the cause of the problem but wanted to point out that difference.
chrome
http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.map (Not found)
http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.js
firefox http://emfoto.filipsvoboda.net/third.party/hammer.js/hammer.min.js

Atleast for time being, you can have a workaround for this by having a click handler which will read the url and take the page to that url.
$(function () {
$("a").click(function () {
var url = $(this).attr("href");
window.location.href = url;
});
});

jQuery page pre-loader appears after page is loaded

So on one of my websites I added a jQuery pre loader which works perfectly fine on all pages except my main page.
The page that is causing issues also has a slider jQuery plugin which doesn't seem to work (at first) as well. Basically it seems that for some reason jQuery plugins are only kicking in after page is fully loaded. It happens once, once page gets loaded at least one time (cached) everything works fine.
I experimented with placing scripts in head tag and before closing body tag, no difference.
You can see issue here (click left red button, after that you'll be redirected to /main.php page which is the one causing issues.)
http://freshbeer.lv
I don't think That I'll need to post any code here as I am almost certain it is something to do with positioning of jQuery files (which you can see by inspecting page), but if you think it is something different and you'd like me to post code here, please feel free to ask and I will update my question.

You have these:
<script src="js/placeholder.js"></script>
<script> $('input[placeholder], textarea[placeholder]').placeholder(); </script>
before this:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
resulting in these
Uncaught ReferenceError: jQuery is not defined
Uncaught ReferenceError: $ is not defined
forgot about this one
GET http://freshbeer.lv/img/loading.gif 404 (Not Found)
These are all in the dev tools console. In chrome in this case, but other browsers have one too.