Multiple AJAX Requests on WordPress Site

[afferennen]

Here I come for help O wise and über experienced peeps.

I have designed a theme that, from the home page, fades out and fades in (via AJAX) a page in wordpress. However, I also have a plugin I just bought called Thumbnail Gallery, which loads the images in jQuery via AJAX. How do I makes them both work, since I can’t use an iframe for the plugin I bought?

Here is the JS code for calling the wordpress pages:

$(function() {



var newHash      = "",

$mainContent = $("#main-content"),

$pageWrap    = $("#container"),

$el;





$("nav#top-nav ul li a, nav#main-left-nav ul li a, nav#main-right-nav ul li a").click(function() {

window.location.hash = $(this).attr("href");

return false;

});



$(window).bind('hashchange', function(){



newHash = window.location.hash.substring(1);



if (newHash) {

$mainContent

.find("#content")

.fadeOut(500, function() {

$mainContent.hide().load(newHash + " #content", function() {

$mainContent.fadeIn(500, function() {

$('header').animate({'top':'0px'},500);

});



$("nav a").removeClass("current");

$("nav a[href='"+newHash+"']").addClass("current");

});

});

};



});



$(window).trigger('hashchange');



});

Thoughts?

[chipperson]

Hi afferennen,

I know you just mentioned that you can’t use an iFrame, but I figured I’d share a test i created, in case it offers a new way of approaching the challenge.

The main issue I ran into with using iFrames is the rigid pixel-specified size of the content box (and 100% height not working as expected in FireFox).

The file I found uses some javascript to make an element a specified width and height relative to the window (100% height and width). inside that element, you can place an iframe, and set it to whatever size you want (relative to the browser window).

-this is almost like a frameset-type thing, but only with more control and flexibility… because the iframe is in a element, it’s not so difficult to then mush it around and do crazy things with it usiing jQuery

here are the qucick tests I messed around with:

100% fluid vertical / horizontal (full page) iFrame as background layer – Mocked up in WYSIWYG Web Builder

Based on the file found at:
Fluid iframe

and another test
Based on a file purchased at codecanyon

(these examples are still kinda wonky, and would need some refinement for mobile browsers, etc.)

Revolver jQuery Plugin (definitely worth the $4)

Any luck with you mission?

[Author]

Posts