View Full Version : Loading Content into a Div Dynamically from an image link

John Michael Kinsella
01-07-2008, 05:06 PM
hi there,

i am an studying web development through the asp.net pathway. i have covered the basic to intermediate html/css but have not been shown above the very basic javascript.

* I am using the CMotion Image Gallery Script kindly provided by dynamic drive (and friends of.)


* I can put hyperlinks on the images to open up other web pages but was looking for a way to perhaps dynamically fill a div box with a section of preformatted html.

* Just to clarify; if i had a gallery of friends faces, could i load (on clicking the picture) a small profile including, picture, email address etc into a designated div box?

Im sure it would also be posible to create these profiles in XML and then use javascript to display them.

any advice, or examples welcome..

many thanks in advance...

John Kinsella

01-07-2008, 05:30 PM
Why not use the DD script Dynamic Ajax Content found at: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Works great for me.

01-07-2008, 07:18 PM
I have something here (http://dynamicdrive.com/forums/showthread.php?t=28179) that does what you want. No Ajax, but a straightforward DOM method. (Link 5 loads a Porsche).

Arie Molendijk

John Michael Kinsella
01-09-2008, 02:08 PM
Hi, thanks for the response.

i tried downloading the demo for the ajax thing, and it wont work.. at the bottom of my browser it keeps displaying a "script error"..

any ideas?

do i need anything installed to run the script?

id love to sort out the issue because the result would be perfect

John Michael Kinsella
01-09-2008, 02:17 PM
molendijk, thanks for the response,

i dont understand how the link that you gave me could help. could you perhaps give a small explanation?

many thanks, John

01-09-2008, 04:41 PM
Regarding the Dynamic Ajax Content script - it sounds as though its not installed correctly. Read the instruction page again. Post your code and then people can look at it to help your implementation. And, for development on your local computer, use FF, not IE. With FF, you can install Firebug which will help you find and fix script errors.

01-09-2008, 07:28 PM
Hello Johm Michael

One way to do it is as follows:

1. Put this script in the head of your document:

<script type="text/javascript">
var d=document
function remove_from_dom(tag,className) {
var els = document.getElementsByTagName(tag)
for (i=0;i<els.length; i++) {
if (els.item(i).className == className){
/* This would add style to a TextNode
while (els.item(i).firstChild)


2. Put the following div at the very end of the body section:
<div id="SomeDiv" class="HideMe" ></div/>
3. Put this in the 'Gallery Contents':

<a href="#" onClick="remove_from_dom('div','HideMe');eIFR =
d.createElement('iframe');eIFR.setAttribute('src','document1.html'); d.getElementById('SomeDiv').appendChild(eIFR);eIFR.style.position='absolute'; eIFR.style.left='130px';eIFR.setAttribute('frameBorder','No');eIFR.style.width='70%'; eIFR.style.top='20%';eIFR.style.backgroundColor='#dedede'; "><img src="dynamicbook1.gif" border=1></a><br />
4.Create another document ('document1.html') with your content and a possibility to hide the document. Your could use this (in the new document):
<button onClick="top.remove_from_dom('div','HideMe')">Hide</button><br>

(This is all rather clumsy, but it works and will help you to get on your way. Try it).

Good luck,
Arie M.

John Michael Kinsella
01-12-2008, 12:13 PM
Your last reply was very useful, thank you.

i have been toying with the code and it all seems to be working great, it is exactly what i was looking for.

the one issue that i am facing is that despite attempts to change all sorts of lines of code, and searching google for iframe properties, i cant get rid of the frame border... is there anyway to do this...

i was also thinking that i could use css to align empty div boxes above the border, covering it up, but i cant seem to get anything to appear above despite setting the "z-index:" property to numerous values.

thanks in advance. John

01-12-2008, 03:34 PM
John Micheal,

I guess you are using Internet Explorer? The frameborder (of the iframe) is an IE-problem. To get rid of the border, put this in the head each iframed document:

<!--[if IE]>
<style type="text/css">html, body, {border:0;overflow:visible;}</style>

That should help. (That piece of code should not be surrounded by style tags).

Arie M.

John Michael Kinsella
01-14-2008, 11:55 AM
fantastic!! thank you so much.


05-12-2008, 10:05 PM
I have used the DOM method described above and it works much easier than ajax since i don't know ajax coding. But there are 2 issues I'm having. first is in the DOM demo page the pics that pop up automatically move the stuff under it down the page when it loads the pic. and i can't get that to happen. Second which i think is a CMotion issue is when the age first loads the CMotion will be where i want it but after you click on it it moves down the page a little and i don't know why. if anyone has answers please help!

05-12-2008, 10:28 PM
in the DOM demo page the pics that pop up automatically move the stuff under it down the page when it loads the pic. and i can't get that to happen.
Do you have a link? Anyhow, the thing that pops up must have 'position: relative' in order to move the text under it.

05-13-2008, 08:51 PM
here's a demo page www.bzcaraudio.com/test.html and thanks i'll try the position thing.