Target Links To A Div Layer

Hey i need help

I was wondering if there is a code that allows you to target ur link to a div layer..

lets say eg.. i got i want that page to show in the div layer below on the same page.

Is there a way i can do that? . im tryin to avoid using frames.


thanks

You're either looking for AJAX or PHP's include function. If you don't mind the page reloading, then go with PHP's include function. But if you do, then AJAX is what you want.

thanks for that.. ive tried it out and yeah it works..
now the problem is .. what if the external link had css attached to it.. cause i wanted the gallery page to load onto the div layer, now it loads but the lighbox doesnt work. do i have to attach something or do something to it?

Well we would need to see how you have the pages set up before we know how to fix the problem, so if you can load a demo page to your account or post the code to the gallery page to take a look and see what it looks like.

Just remember although your loading an external page that page needs to have the proper coding, and so make sure your gallery page has this in your header



and of course have this connected to your pics as well



If you need more help I know lightbox pretty well, and enough ajax and php to fix the problem, but before that just post a demo or the code your working with and we can fix it right up.

Also let us know what method your using since you didn't mention in the post which way you went.

This post has been edited by Saint_Michael: Dec 14 2007, 03:40 AM

I know the problem here .. the external pages you are loading even though it has CSS styles attached to it dont render all properly when its fetched from outside the parent document.

THe only way I've found out a fix is to have the javascripts and CSS on the parent document then when the ajaxed document is pulled in it should work.

I found this out when working on my own project.

thanks guys... okay this is the page im working on http://www.keegonguyen.com/home.html

this is what i used in the head of the html cause i got it on dynamic drive



[codebox]<script type="text/javascript">

/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>[/codebox]




and below is what it told me to do to my link





the content, i want it to appear in the Div Id = Main


this is my div for the main content





The link to my test photo is

www.keegonguyen.com/photo.html


and that photo.html is located in /public_html folder of mine


The layout are all Div layers..

The top one .. is #banner , the navigation i gave it the ID #navbar and the main content #main


all i did was added 3 div layers , i hope thats enough information.. let me know if you need more.

thanks again guys.



EDIT : IT WORKS NOW. IT LOADS ONTO THE DIV BUT THE BACKGROUND IS SHOWING! help

[note=truefusion]Put all coding into the CODE bbcode[/note]

This post has been edited by truefusion: Dec 14 2007, 10:59 AM

I think the background showing is because of a default margin effect on image tags <img> you can try set margins for all images to zero. I think that should fix it.

so try adding this line into your css file.

[codebox]img {
margin: 0px;
}
[/codebox]

This should set margins to all image tags to 0 value.

it didnt work. it jst moved my image all the way to the top of the div... is there a specific are where im suppose to paste that code. or it doesnt matter as long as its in my css file?

it shouldnt matter where it is but if there is 2 img styles the bottom one should over write I think. your css file dosent have it though i checked. I know the problem has to be margins because thats the only thing it looks like. you could try

[codebox]* {
margin 0px;
}[/codebox]

it might work. I should really try and copy the page/site over to try out myself

[hr=noshade] [/hr]
oh I think I see it now. it looks like you have a <p> tag around the image thats whats probably causing the margins.

you could do

[codebox]p {
margin: 0px;
}[/codebox]

edit: Dont do the previous suggestion of * { margin: 0px} its crazy it will apply 0 margins to everything. You probably only want to apply 0 margins to things you want to have zero margins not everything.

What browser are you testing this in?