Loading Content into a Div Dynamically from an image link

[John Michael Kinsella]

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.)

http://www.dynamicdrive.com/dynamicindex4/cmotiongallery2.htm

* 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

[Strangeplant]

Why not use the DD script Dynamic Ajax Content found at: http://www.dynamicdrive.com/dynamici...jaxcontent.htm

Works great for me.

[molendijk]

I have something here that does what you want. No Ajax, but a straightforward DOM method. (Link 5 loads a Porsche).

Arie Molendijk

[John Michael Kinsella]

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]

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

[Strangeplant]

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.

[molendijk]

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 
		els.item(i).style.color="red";*/
		while (els.item(i).firstChild)
		els.item(i).removeChild(els.item(i).firstChild);
	}
       }
      }

</script>

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]

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

[molendijk]

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>
<![endif]-->

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

Arie M.

[John Michael Kinsella]

fantastic!! thank you so much.

John