Target Links To A Div Layer Is there such code that allows you to change ur link target so that it

[keego 0]

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

<a href="http://www.example.com/;

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

[truefusion 3]

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.

[keego 0]

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?

[Saint_Michael 3]

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

<script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects"></script><script type="text/javascript" src="js/lightbox.js"></script>

and of course have this connected to your pics as well

rel="lightbox"

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.
Edited December 14, 2007 by Saint_Michael (see edit history)

[sonesay 7]

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.

[keego 0]

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.

 

 

thanks guys... okay this is the page im working on http://forums.xisto.com/no_longer_exists/

 

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

 

 

 

http://www.dynamicdrive.com/)

* This notice MUST stay intact for legal use

* Visit Dynamic Drive at [url="http://forums.xisto.com/no_longer_exists/ _linenums:0'><script type="text/javascript">/************************************************ Dynamic Ajax Content- © Dynamic Drive DHTML code library (http://www.dynamicdrive.com/)* This notice MUST stay intact for legal use* Visit Dynamic Drive at [url="http://forums.xisto.com/no_longer_exists/; 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.hostnamevar bustcacheparameter=""function ajaxpage(url, containerid){var page_request = falseif (window.XMLHttpRequest) // if Mozilla, Safari etcpage_request = new XMLHttpRequest()else if (window.ActiveXObject){ // if IEtry {page_request = new ActiveXObject("Msxml2.XMLHTTP")} catch (e){try{page_request = new ActiveXObject("Microsoft.XMLHTTP")}catch (e){}}}elsereturn falsepage_request.onreadystatechange=function(){loadpage(page_request, containerid)}if (bustcachevar) //if bust caching of external pagebustcacheparameter=(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)returnfor (i=0; i<arguments.length; i++){var file=argumentsvar fileref=""if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceedingif (file.indexOf(".js")!=-1){ //If object is a js filefileref=document.createElement('script')fileref.setAttribute("type","text/javascript");fileref.setAttribute("src", file);}else if (file.indexOf(".css")!=-1){ //If object is a css filefileref=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>

 

 

 

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

 

 

 

<a href="java script:ajaxpage('photo.htm','main');">Photo</a>

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

 

 

this is my div for the main content

 

 

<div class="myCSS" id="main">Content goes here</div>

 

The link to my test photo is

 

http://forums.xisto.com/no_longer_exists/

 

 

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

 

Notice from truefusion:

Put all coding into the CODE bbcode

Edited December 14, 2007 by truefusion (see edit history)

[sonesay 7]

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.

img {margin: 0px;}

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

[keego 0]

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?

[sonesay 7]

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

* {margin 0px;}

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

p {margin: 0px;}

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.

[truefusion 3]

BUT THE BACKGROUND IS SHOWING! help

What browser are you testing this in?

[keego 0]

What browser are you testing this in?

i use firefox.. but it works now


EDIT:

So now the photo link works. it shows in the div layer below.. But do you guys know how to do the same thing but with the Dynamic navigation?

The one that is dynamic is the link that says Gallery , scroll over it

Oh and for some reason in firefox .. it cuts off my page at the bottom. but with IE it shows the entire thing... >.< is there a way i can fix that?

Thanks again
Edited December 14, 2007 by keego (see edit history)

[sonesay 7]

for the drop down menu you can try this your orginal code for photo link

<a href="java script:ajaxpage('photo.html','content');">Photo</a>

try to modify your javascript code from this

//Contents for menu 1var menu1=new Array()menu1[0]='<a href="Modelling.htm">Modelling Album</a>'menu1[1]='<a href="myphotos.htm">My Photos</a>'menu1[2]='<a href="multimedia.htm">Multimedia Portfolio</a>'

to this

//Contents for menu 1var menu1=new Array()menu1[0]='<a href="java script:ajaxpage('Modelling.html','content');">Modelling Album</a>'menu1[1]='<a href="java script:ajaxpage('myphotos.html','content');">My Photos</a>'menu1[2]='<a href="java script:ajaxpage('multimedia.html','content');">Multimedia Portfolio</a>'

as for the layout problem I'm not sure yet. did you build that whole layout from scratch? I usally find it best to find a template I like and copy or modify it as I still dont know how to build proper 100% height auto spanning div layouts off by heart and from scratch. There usally is alot of nested divs inside each other to achieve this which can be very consfusing.

Edited December 14, 2007 by sonesay (see edit history)

[keego 0]

Yeah i tried that. but when i do... the drop down menu doesnt work.. and just acts like a normal linkand for the layout.. yeah i started from scratch. i guess ill try to figure that out later on.

[sonesay 7]

sorry i keep giving out bad code i dont check properly reason code breaks is ' ' are closing instead of being escaped with \'

var menu1=new Array();menu1[0]='<a href="java script:ajaxpage(\'Modelling.html\',\'content\');">Modelling Album</a>';menu1[1]='<a href="java script:ajaxpage(\'myphotos.html\',\'content\');">My Photos</a>';menu1[2]='<a href="java script:ajaxpage(\'multimedia.html\',\'content\');">Multimedia Portfolio</a>';

should work. edit: java script should just be one word 'javascript'. I dont know why it renders with a space in the code box. either way might work but i dunno

Edited December 14, 2007 by sonesay (see edit history)

[keego 0]

hahahahha YOU ARE SO COOL!!!! lol... ^^ thanks so much for the help. i hope it hasn't been a bother. cause i know for sure ill be posting in this thread alot more until the day i finally finish the site LOL...!!! thank you thank you... prob take me a million years to figure it out. LOLEDIT :You know how currently my content loads in a div box below.. i can't get the lightbox working though... i tried adding the javascript codes into the main home.. page... http://forums.xisto.com/no_longer_exists/ .. but still doesnt work.. is there a way i can get it to work even though it loads in a div box? :Pthanks

Edited December 17, 2007 by keego (see edit history)