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

This post has been edited by keego: Dec 14 2007, 04:22 PM

for the drop down menu you can try this


your orginal code for photo link

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

try to modify your javascript code from this

[codebox]//Contents for menu 1
var 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>'[/codebox]

to this

[codebox]//Contents for menu 1
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>'[/codebox]

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.

This post has been edited by sonesay: Dec 14 2007, 09:54 PM

Yeah i tried that. but when i do... the drop down menu doesnt work.. and just acts like a normal link

and for the layout.. yeah i started from scratch. i guess ill try to figure that out later on.

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



[codebox]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>';[/codebox]

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

This post has been edited by sonesay: Dec 14 2007, 11:07 PM

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



EDIT :

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

www.keegonguyen.com/home.htm .. but still doesnt work.. is there a way i can get it to work even though it loads in a div box?

thanks

This post has been edited by keego: Dec 17 2007, 10:30 AM

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

1
[codebox]<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" />[/codebox]
style sheet link for your lightbox.css file.


2
[codebox]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();
}[/codebox]

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 clean
1. you have 2 copies of the ajax javascript function from dynamic drive I would suggest you delete one.
2.

[codebox]//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="http://cnn.com">CNN</a>'
menu2[1]='<a href="http://msnbc.com">MSNBC</a>'
menu2[2]='<a href="http://news.bbc.co.uk">BBC News</a>'[/codebox]

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

This post has been edited by sonesay: Dec 18 2007, 09:44 PM

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

This post has been edited by keego: Dec 19 2007, 05:57 AM

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.


[codebox]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

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

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>

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

&lt;script type="text/javascript">

/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 1
var 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 width
var menubgcolor='lightyellow' //menu bgcolor
var disappeardelay=250 //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick="yes" //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (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.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else 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=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((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=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(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 false
else 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" />

&lt;script src="js/prototype.js" type="text/javascript"></script>
&lt;script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
&lt;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="www.keegonguyen.com" 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>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>

</html>
[/codebox]


The original was just like this
[codebox]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;
}[/codebox]


I just added 'Lightbox.prototype.initialize();' to it
[codebox]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();
}[/codebox]


This post has been edited by sonesay: Dec 19 2007, 06:15 AM

it works.!!!! AHAHAHHAH YOU ARE SOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO COOOOOOOOOOOOL!!!!

lol thanks thanks!! woot woot!! lolz

arrg i was going crazy over that stupid thing... i learnt so much since i joint this forum. haha !!! so SMART!! damnit >.< lolz


Do 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

This post has been edited by keego: Dec 19 2007, 06:26 AM

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.