Welcome Guest ( Log In | Register)



3 Pages V   1 2 3 >  
 Reply to this topicStart new topic
> Target Links To A Div Layer, Is there such code that allows you to change ur link target so that it
keego
post Dec 13 2007, 05:40 PM
Post #1


Advanced Member
*******

Group: [HOSTED]
Posts: 127
Joined: 7-December 07
Member No.: 54,372
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
CODE
<a href="www.example.com">Example</a>
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

(list)

Go to the top of the page
 
+Quote Post
truefusion
post Dec 13 2007, 10:50 PM
Post #2


Ephesians 6:10-17
Group Icon

Group: [MODERATOR]
Posts: 1,868
Joined: 22-June 05
From: The World of Gentoo
Member No.: 8,528
T17 GFX Crew
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.

(list)

Go to the top of the page
 
+Quote Post
keego
post Dec 14 2007, 03:24 AM
Post #3


Advanced Member
*******

Group: [HOSTED]
Posts: 127
Joined: 7-December 07
Member No.: 54,372
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?

(list)

Go to the top of the page
 
+Quote Post
Saint_Michael
post Dec 14 2007, 03:37 AM
Post #4


$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3
*********************

Group: [HOSTED]
Posts: 6,308
Joined: 21-September 04
From: 9r33|\| 399$ 4|\|D 5P4/\/\
Member No.: 1,218
T17 GFX Crew
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

CODE
<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

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

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

(list)

Go to the top of the page
 
+Quote Post
sonesay
post Dec 14 2007, 03:45 AM
Post #5


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 643
Joined: 20-June 07
From: Auckland
Member No.: 45,102
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.

(list)

Go to the top of the page
 
+Quote Post
keego
post Dec 14 2007, 07:56 AM
Post #6


Advanced Member
*******

Group: [HOSTED]
Posts: 127
Joined: 7-December 07
Member No.: 54,372
QUOTE(Saint_Michael @ Dec 14 2007, 02:37 PM) *
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://www.keegonguyen.com/home.html

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



CODE
&lt;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>





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



CODE
<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


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



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 sad.gif

Notice from truefusion:
Put all coding into the CODE bbcode


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

(list)

Go to the top of the page
 
+Quote Post
sonesay
post Dec 14 2007, 09:07 AM
Post #7


|||[ n00b King ]|||
*********

Group: [HOSTED]
Posts: 643
Joined: 20-June 07
From: Auckland
Member No.: 45,102
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.

CODE
img {
margin: 0px;
}


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

(list)

Go to the top of the page
 
+Quote Post
keego
post Dec 14 2007, 09:30 AM
Post #8


Advanced Member
*******

Group: [HOSTED]
Posts: 127
Joined: 7-December 07
Member No.: 54,372
sad.gif 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?

(list)

Go to the top of the page
 
+Quote Post
sonesay