Jump to content
xisto Community
Sign in to follow this  
keego

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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 by Saint_Michael (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 :P

 

Notice from truefusion:
Put all coding into the CODE bbcode
Edited by truefusion (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
:P 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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

BUT THE BACKGROUND IS SHOWING! help :P

What browser are you testing this in?

Share this post


Link to post
Share on other sites

What browser are you testing this in?



:D i use firefox.. but it works now :D


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 :P

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 by keego (see edit history)

Share this post


Link to post
Share on other sites

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 by sonesay (see edit history)

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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 by sonesay (see edit history)

Share this post


Link to post
Share on other sites

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 by keego (see edit history)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.