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

sonesay · December 18, 2007

Just add this thse two items to your home.htm page1

<title>Keego Nguyen's Official Site</title><link rel="stylesheet" href="myCSS.css" type="text/css" media="screen" /><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

style sheet link for your lightbox.css file.2

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;Lightbox.prototype.initialize();}

for this you just need to add 'Lightbox.prototype.initialize();' all this does is reload light box after your ajax call is finished. for the most part it does seem to work but sometimes i notice the light box borders for the image beind displayed is broken and sometimes its fine. I still am not sure why it probbaly has sometime to do with conflicts in css files. its just a guess though, but let me know if it works on your end.I tested the code out and it seems to work so far. I noticed a few things you should change to keep your code abit clean1. you have 2 copies of the ajax javascript function from dynamic drive I would suggest you delete one.2.

//Contents for menu 2, and so onvar menu2=new Array()menu2[0]='<a href="http://forums.xisto.com/no_longer_exists/ href="http://forums.xisto.com/no_longer_exists/ href="http://www.bbc.co.uk/news News</a>'

doesnt look like its being used you could delete it also.

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

keego · December 19, 2007

okay currently doesnt work because i dont know where to the put the second code.. you wrote put both of the 2 codes in home.htm right?so where do i post this one below? anywhere in home.htm? 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;Lightbox.prototype.initialize();}EDIT : im currently capped and can't access my cpanel.. and in my browser .. my home.htm doesnt load. so hopefully ill drop by someones place and see if i can sign in there. i currently can't upload the page that ive pasted the code in.. so yeahh u wont see it online just yet

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

sonesay · December 19, 2007

that function just got one line added to it. heres a copy I have if you just want to copy and paste that. Its got the second copy of ajax functions removed.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://forums.xisto.com/no_longer_exists/ xmlns="http://forums.xisto.com/no_longer_exists/ 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://www.dynamicdrive.com/"]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.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;Lightbox.prototype.initialize();}function loadobjs(){if (!document.getElementById)returnfor (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 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><style type="text/css">#dropmenudiv{position:absolute;border:0px solid black;border-bottom-width: 0;font:normal 12px Verdana;line-height:18px;z-index:100;}#dropmenudiv a{width: 100%;display: block;text-indent: 3px;border-bottom: 0px solid black;padding: 1px 0;text-decoration: none;font-weight: bold;color: black;}#dropmenudiv a:hover{ /*hover background color*/background-color: #ffccff;color: white;}</style><script type="text/javascript">/************************************************ AnyLink Drop Down Menu- © Dynamic Drive (http://www.dynamicdrive.com/)* This notice MUST stay intact for legal use* Visit [url="http://www.dynamicdrive.com/"]http://www.dynamicdrive.com/; for full source code***********************************************///Contents for menu 1var menu1=new Array()menu1[0]='<a href="java script:ajaxpage(\'photo.html\',\'content\');">Modelling Album</a>';menu1[1]='<a href="java script:ajaxpage(\'photo.html\',\'content\');">My Photos</a>';menu1[2]='<a href="java script:ajaxpage(\'multimedia.html\',\'content\');">Multimedia Portfolio</a>';		var menuwidth='165px' //default menu widthvar menubgcolor='lightyellow'  //menu bgcolorvar disappeardelay=250  //menu disappear speed onMouseout (in miliseconds)var hidemenu_onclick="yes" //hide menu when user clicks within menu?/////No further editting neededvar ie4=document.allvar ns6=document.getElementById&&!document.allif (ie4||ns6)document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')function getposOffset(what, offsettype){var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;var parentEl=what.offsetParent;while (parentEl!=null){totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;parentEl=parentEl.offsetParent;}return totaloffset;}function showhide(obj, e, visible, hidden, menuwidth){if (ie4||ns6)dropmenuobj.style.left=dropmenuobj.style.top="-500px"if (menuwidth!=""){dropmenuobj.widthobj=dropmenuobj.styledropmenuobj.widthobj.width=menuwidth}if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")obj.visibility=visibleelse if (e.type=="click")obj.visibility=hidden}function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body}function clearbrowseredge(obj, whichedge){var edgeoffset=0if (whichedge=="rightedge"){var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15dropmenuobj.contentmeasure=dropmenuobj.offsetWidthif (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth}else{var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffsetvar windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18dropmenuobj.contentmeasure=dropmenuobj.offsetHeightif (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeightif ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge}}return edgeoffset}function populatemenu(what){if (ie4||ns6)dropmenuobj.innerHTML=what.join("")}function dropdownmenu(obj, e, menucontents, menuwidth){if (window.event) event.cancelBubble=trueelse if (e.stopPropagation) e.stopPropagation()clearhidemenu()dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudivpopulatemenu(menucontents)if (ie4||ns6){showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)dropmenuobj.x=getposOffset(obj, "left")dropmenuobj.y=getposOffset(obj, "top")dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"}return clickreturnvalue()}function clickreturnvalue(){if (ie4||ns6) return falseelse return true}function contains_ns6(a,  {while (b.parentNode)if ((b = b.parentNode) == a)return true;return false;}function dynamichide(e){if (ie4&&!dropmenuobj.contains(e.toElement))delayhidemenu()else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))delayhidemenu()}function hidemenu(e){if (typeof dropmenuobj!="undefined"){if (ie4||ns6)dropmenuobj.style.visibility="hidden"}}function delayhidemenu(){if (ie4||ns6)delayhide=setTimeout("hidemenu()",disappeardelay)}function clearhidemenu(){if (typeof delayhide!="undefined")clearTimeout(delayhide)}if (hidemenu_onclick=="yes")document.onclick=hidemenu</script><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Keego Nguyen's Official Site</title><link rel="stylesheet" href="myCSS.css" type="text/css" media="screen" /><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script><script src="js/scriptaculous.js?load=effects" type="text/javascript"></script><script src="js/lightbox.js" type="text/javascript"></script><style type="text/css"><!--body {	background-color: #CCCCCC;	background-image: url();}.style1 {color: #CCCCCC}#Layer1 {	position:absolute;	width:200px;	height:115px;	z-index:1;}--></style></head><body><div align="center"><div id="banner">  <img src="banner.jpg" alt="http://forums.xisto.com/no_longer_exists/; width="750" height="210" /></div>		<div class="myCSS" id="navb script:ajaxpage('photo.html','content');">Photo</a> |  <a href="java script:ajaxpage('biography.html','content');">Biography</a> | <a href="gallery.htm" class="style1" onclick="return clickreturnvalue()" onmouseover="dropdownmenu(this, event, menu1, '150px')" onmouseout="delayhidemenu()">Gallery</a> | <a href="guesstbook.htm">Guestbook</a></div><div class="myCSS" id="main"> 	  <div id="content" align="left">Info goes here</div>	  <div class="myCSS" id="rightcontent">Content for  id "rightcontent" Goes Here</div>        <div align="right"></div></div><p> </p><p> </p><p> </p></body></html>

The original was just like this

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;}

I just added 'Lightbox.prototype.initialize();' to it

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;Lightbox.prototype.initialize();}

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

keego · December 19, 2007

it works.!!!! AHAHAHHAH YOU ARE SOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO COOOOOOOOOOOOL!!!!lol thanks thanks!! woot woot!! lolzarrg i was going crazy over that stupid thing... i learnt so much since i joint this forum. haha !!! so SMART!! damnit >.< lolzDo you mind checking it though? cause i think it breaks. if it does.. is there anyway at all to fix it? or i guess you can't?EDIT: u know what i notice.. it works on IE with no breaks.. im guessing its still that margin problem. you know how firefox for some reason is not letting me have a scroll bar... so i can scroll down and see the rest of my page.. well yeah >.<still dnt know how to fix that Edited December 19, 2007 by keego (see edit history)

sonesay · December 19, 2007

yeah it does break under fire fox if you view the picture from home.htm but if you load it by it self on photo.html it works fine under fire fox. I think its because of the CSS files. There is probably some conflicts between myCSS.css and lightbox.css so I guess one way would be to start going through them and removing any duplicates on the myCSS.css side.I know its kinda messy lol i've looked through it and didnt even want to touch them but if you wanna keep this layout and want to fix it I guess it has to be done. Atleast you know it works or should work.by the way it works fine under safari also, just firefox messes up, Are you still going to keep building with this layout? I'm sure you can find a similar already built CSS layout which might event not have any break problems. I found a good site for layouts before but cant seem to find the link anymore.

keego · December 19, 2007

yeah i love the layout.. unless there is one like it. though i dont know where to get one from... ^^ and yeah.. my friend told me to do a validation check.. so much crap that i dont understand.. lol

stuff like

Line 142, Column 184: end tag for element "DIV" which is not open.

onMouseout="dynamichide(event)"></div>')

✉

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

>.<

this is what i used to check

http://validator.w3.org/

sonesay · December 19, 2007

that 1 header, plus horizontal navigation, plus 2 column is pretty generic and I'm sure you can find one easy from these 2 links

http://ww38.code-sucks.com/css%20layouts/fith-css-layouts/

http://ww38.code-sucks.com/css%20layouts/faux-css-layouts/

I'm using one from here also. If you build your site off any of these layouts your site layout shouldnt break as easy. They are reasonibly plain yet you can still add on it easy enough. Once you start adding alot of content in your code can get messy fast so finding errors to correct can be difficult.

Dont worry too much you do what most people do, just paste a whole lot of code in there. But the proper way is to start from scratch and correct any mistakes before adding more things in.

Heres how i would do it and suggest you do it

1. pick a template you like, download it and load it on your computer
2. change any colors / fonts / margins in the css file (You can always modify later if needed or if you change your mind)
3. add navigation in there and test it out.
4. add your ajax functions and any other javascript and test it out
5. load your lightbox gallery in.

you should check for any errors during each stage/when you add new things in. I hope this helps abit if you dont understand fully dont worry not everyone does. I still get confused my self about what CSS is actually doing. The only way you will pick it up is if you keep learning. I've only started working with CSS myself and javascript in the last 4 months on and off of course. I've done javascript before a few years back but I dont remember lol so that dont count. Any way you get the points keep at it.

As a last resort if you really need to get a move on building your site which is understandable and get a solid layout builted to use instead of building one from scratch I can help. it shouldnt take too long, on the other hand if you want to build it your self and try and learn along the way thats cool too.

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

keego · December 19, 2007

Hey thanks for the helpI got one of the templates.. and yeh fully changed it... seeing how they were so wide lol..Looks good now :PThe stupid lightbox still doesnt work properly though.. you know whats funny.If you click on modelling photo under Gallery it shows it in the div box right.. and then you click on the photo .. the lightbox breaks.. and then if you click on modelling photo again... and click on the photo. it loads properly.. thats so wierd >.<i dont know what to do with that.

iGuest · May 11, 2011

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 _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://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.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=arguments[i]var 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

sorry but it can't work, the page show "File Not Found" and in address bar : file:///C:/Documents%20and%20Settings/miftah/My%20Documents/Downloads/Compressed/web_programing%202a-d4/java%20script:ajaxpage%28%27foto.html%27,%27main%27%29;.

can you hel me ?

Sign In

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

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information