PDA

View Full Version : Dynamically creating glidecontentwrapper div?



BrandonATL
03-15-2008, 04:37 PM
1) Script Title: Featured Content Glider

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/featuredcontentglider.htm

3) Describe problem: So, this is sort of a follow-up to my last post. The situation is thus: I am using the Featured Content Glider to load content only on certain parts of a website that is essentially being driven by AJAX and the aim is for there to be no page refreshes - only content loading.

So, with that in mind, I have tried to create some of the markup for the Glider dynamically like this (note: I am using some YUI stuff as well here to accomplish a few of my tasks):

gliderDiv = document.createElement("div");
gliderDiv.id = "gliderish";
gliderDiv.style.width = '913px';
gliderDiv.style.height = '365px';
gliderDiv.style.border = '1px solid #b2b2b2';
gliderDiv.style.position = "relative";
gliderDiv.style.zIndex = 5;
gliderDiv.style.overflow = "hidden";
YAHOO.util.Dom.addClass(gliderDiv,"glidecontentwrapper");
YAHOO.util.Dom.get("mainContent").appendChild(gliderDiv);
var page = String(section + ".html");
myparameters.remotecontent=page;
featuredcontentglider.init(myparameters);

This block is wrapped in an If statement that checks to see if the glidecontentwrapperdiv already exists, and if not, it executes the above code.

What happens when I run this scenario is that the div gets created (I added the border only so I could see visual evidence that the div exists.) and I see the "loading content.." message from the Glider, but then it goes away and doesn't load. It almost seems to loops for a second or two, trying to load but ultimately nothing loads.

To see this in action, visit here: http://brandonwinslow.com/EIDD/index2-3.html?section=profile_history#subNavBar=profile_accomplishments

First, you should see the glider load correctly (w/ only the forward button working right now).

Then, try clicking the "Services" link,

THEN click "Accomplishments again, and you will see the behavior I described

(right now this only looks right in Firefox - so if you're in IE, the whole thing will likely be a debacle - lol)

Anyway, the core issue here is why the glider content isn't loading into the dynamically created div. Any suggestions would be great. Sorry for the lengthy message - just wanted to fully explain the scenario etc.

Thanks,

-Brandon

ddadmin
03-16-2008, 04:20 AM
It's hard to follow what's occurring by looking at your demo link above, since so much of it is dynamically added. But in general, a few questions first:

1) Is the if statement called synchronously as the page is loading, or dynamically after the page has already loaded (ie: click a button to load the Glider)?

2) Instead of using YUI to dynamically generate the Glider's container DIV, is it feasible for you to simply use document.write()? This would simply require that the if statement be added where you want the Glider to appear.