PDA

View Full Version : Dynamic Ajax Content and Onload Events



momo1892
02-26-2007, 07:23 AM
1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): Dynamic Ajax Content (http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm)

3) Describe problem: I'm a bit new to javascript so please bear with me. I am trying to use the above mentioned script to load a page into my top page (for a portfolio site). The page I'm trying to load has the SmoothGallery (http://smoothgallery.jondesign.net/what/) script on it, and I still can't quite figure out how to get it to load properly using the Dynamic Ajax Content script.

I have read the thread "Simplified Ajax Loaded Content w/scripts requiring onload events" (http://www.dynamicdrive.com/forums/showthread.php?t=17426), but still can't seem to figure it out.

The external page would have links to 1 style sheet (in this case page-style.css) and 2 .js files (jd.gallery.js and mootools.js). It also has the following in the body:

<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false,
showArrows: true,
embedLinks: false
});
}
window.onDomReady(startGallery);
</script>

Any help on this matter would be greatly appreciated.

jscheuer1
02-26-2007, 08:14 AM
After looking at the scripts involved it seems most likely that your onload Function Call is:


startGallery()

So, you would link your scripts and css to the top page and also place the code:


<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false,
showArrows: true,
embedLinks: false
});
}
window.onDomReady(startGallery);
</script>

On the top page, just as though it were the page with the gallery on it. You may need to remove this line:


window.onDomReady(startGallery);

Use this type of syntax on the top page to load the gallery content onto the top page:


<a href="javascript:ajaxpage('some.htm' 'someloadarea');" onmousedown="window.acInit=false;">Link Text</a>

Change some.htm and someloadarea to the page and id that you are using. Then on your external page we need to find something to add our other event to. I'd vote for each of these:


<div class="imageElement">

example:


<div class="imageElement" onmouseover="if(!window.acInit){startGallery();window.acInit=true;};">

But it would be easier and, perhaps better to use one of these two elements:


<div class="content">
<div id="myGallery">

So, that would be either:


<div class="content" onmouseover="if(!window.acInit){startGallery();window.acInit=true;};">
<div id="myGallery">

or:


<div class="content">
<div id="myGallery" onmouseover="if(!window.acInit){startGallery();window.acInit=true;};">

momo1892
02-26-2007, 09:05 AM
Thanks John, I'll give it a go and let you know how it goes...

momo1892
02-26-2007, 10:18 AM
Nope. Still no joy. I'm not sure what's best so here are all the files (don't worry it's only 169k), I'd appreciate it if you could take a look and see what I'm doing wrong...

Files (http://rapidshare.com/files/18350069/____TEST_FOLDER.zip.html)

Just a quick note to let you know I forgot a comma on line 147 of index.htm (the one here - 'demo.htm', 'rightcolumn'), but that didn't really help...

momo1892
02-28-2007, 02:24 AM
Anyone?

jscheuer1
02-28-2007, 06:01 AM
Your setup requires more than the "Simplified Ajax Loaded Content w/scripts requiring onload events" it needs:

Ajax Loaded Content w/scripts requiring onload events - Principles and Practices (http://www.dynamicdrive.com/forums/showthread.php?t=13003)

I've adapted your supplied code to that method:

823

I'm not including the images directory and its sub folders to save space as, I changed nothing in them. You will need to grab your images directory and sub folders from your original archive. In fact, all I changed were the two HTML files and one item in the css:


h3
{
color: #000;
font-size: 1.25em;
}

And, that css change is just so that the text "Choose a page to load." shows up.

Edit/Added:

Notes: DD Ajax scripts generally will not work locally in IE 7. So, either publish to test it or use a different browser to test it locally. Due to the inevitable load time required for the images in the gallery, additional code may be required to avoid broken image icons or other problems when this is taken live.

momo1892
02-28-2007, 08:02 AM
Edit: I've just read the above post, thanks for the zip, having a look at it now. will keep in mind the bit about IE7, thanks again.

I'm an idiot! I got it to work, I've looked at what I'd done before and the only logical explanation is that I must've been smoking at the time.

Anyway, thanks again for all your help and for the script...ciao for now.