...

View Full Version : Custom Javascript Overriding GoLive Javascript



djbdjb
09-19-2005, 09:53 AM
I'm a designer so I use GoLive and the problem I am having is on my site I am using some dropdown menus which require an external stylesheet and a javascript to run. GoLive has a built in script library but when I link to the external javascript as well this seems to stop GoLive's from working - you can tell this by the validation icons at the bottom which should be rollovers.

The navigation is a PHP include file on the main index page at the moment, the external CSS and javascript are linked to the index page, not the include. The website is at:

http://www.davidjohnbennett.co.uk/fnr/index.php

The external javascript is as follows:

function IEHoverPseudo() {

var navItems = document.getElementById("nav").getElementsByTagName("li");

for (var i=0; i<navItems.length; i++) {
if(navItems[i].className == "menuparent") {
navItems[i].onmouseover=function() { this.className += " over"; }
navItems[i].onmouseout=function() { this.className = "menuparent"; }
}
}

}
window.onload = IEHoverPseudo;

--------------

And if your still following this, the GoLive Javascript library looks like this:

/* -- Adobe GoLive JavaScript Library */

CSStopExecution=false;
function CSAction(array) {return CSAction2(CSAct, array);}
function CSAction2(fct, array) {
var result;
for (var i=0;i<array.length;i++) {
if(CSStopExecution) return false;
var aa = fct[array[i]];
if (aa == null) return false;
var ta = new Array;
for(var j=1;j<aa.length;j++) {
if((aa[j]!=null)&&(typeof(aa[j])=="object")&&(aa[j].length==2)){
if(aa[j][0]=="VAR"){ta[j]=CSStateArray[aa[j][1]];}
else{if(aa[j][0]=="ACT"){ta[j]=CSAction(new Array(new String(aa[j][1])));}
else ta[j]=aa[j];}
} else ta[j]=aa[j];
}
result=aa[0](ta);
}
return result;
}
CSAct = new Object;
function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

userAgent = window.navigator.userAgent;
browserVers = parseInt(userAgent.charAt(userAgent.indexOf("/")+1),10);
mustInitImg = true;
function initImgID() {var di = document.images; if (mustInitImg && di) { for (var i=0; i<di.length; i++) { if (!di[i].id) di[i].id=di[i].name; } mustInitImg = false;}}

function findElement(n,ly) {
var d = document;
if (browserVers < 4) return d[n];
if ((browserVers >= 6) && (d.getElementById)) {initImgID; return(d.getElementById(n))};
var cd = ly ? ly.document : d;
var elem = cd[n];
if (!elem) {
for (var i=0;i<cd.layers.length;i++) {
elem = findElement(n,cd.layers[i]);
if (elem) return elem;
}
}
return elem;
}

function changeImagesArray(array) {
if (preloadFlag == true) {
var d = document; var img;
for (i=0;i<array.length;i+=2) {
img = null; var n = array[i];
if (d.images) {
if (d.layers) {img = findElement(n,0);}
else {img = d.images[n];}
}
if (!img && d.getElementById) {img = d.getElementById(n);}
if (!img && d.getElementsByName) {
var elms = d.getElementsByName(n);
if (elms) {
for (j=0;j<elms.length;j++) {
if (elms[j].src) {img = elms[j]; break;}
}
}
}
if (img) {img.src = array[i+1];}
}
}
}

function changeImages() {
changeImagesArray(changeImages.arguments);
}

function toggleImages() {
for (var i=0; i<toggleImages.arguments.length; i+=2) {
if (selected == toggleImages.arguments[i])
changeImagesArray(toggleImages.arguments[i+1]);
}
}

function CSClickReturn () {
var bAgent = window.navigator.userAgent;
var bAppName = window.navigator.appName;
if ((bAppName.indexOf("Explorer") >= 0) && (bAgent.indexOf("Mozilla/3") >= 0) && (bAgent.indexOf("Mac") >= 0))
return true; /* dont follow link */
else return false; /* dont follow link */
}
function CSURLPopupShow(formName, popupName, target) {
var form = (!IsIE()&&CSBVers>=5)?document.forms[formName]:CSFindElement(formName);
var popup = form.elements[popupName];
window.open(popup.options[popup.selectedIndex].value, target);
popup.selectedIndex = 0;
}

CSAg = window.navigator.userAgent; CSBVers = parseInt(CSAg.charAt(CSAg.indexOf("/")+1),10);
CSIsW3CDOM = ((document.getElementById) && !(IsIE()&&CSBVers<6)) ? true : false;
function IsIE() { return CSAg.indexOf("MSIE") > 0;}
function CSIEStyl(s) { return document.all.tags("div")[s].style; }
function CSNSStyl(s) { if (CSIsW3CDOM) return document.getElementById(s).style; else return CSFindElement(s,0); }
CSIImg=false;
function CSInitImgID() {if (!CSIImg && document.images) { for (var i=0; i<document.images.length; i++) { if (!document.images[i].id) document.images[i].id=document.images[i].name; } CSIImg = true;}}
function CSFindElement(n,ly) { if (CSBVers<4) return document[n];
if (CSIsW3CDOM) {CSInitImgID();return(document.getElementById(n));}
var curDoc = ly?ly.document:document; var elem = curDoc[n];
if (!elem) {for (var i=0;i<curDoc.layers.length;i++) {elem=CSFindElement(n,curDoc.layers[i]); if (elem) return elem; }}
return elem;
}
function CSGetImage(n) {if(document.images) {return ((!IsIE()&&CSBVers<5)?CSFindElement(n,0):document.images[n]);} else {return null;}}
CSDInit=false;
function CSIDOM() { if (CSDInit)return; CSDInit=true; if(document.getElementsByTagName) {var n = document.getElementsByTagName('DIV'); for (var i=0;i<n.length;i++) {CSICSS2Prop(n[i].id);}}}
function CSICSS2Prop(id) { var n = document.getElementsByTagName('STYLE');for (var i=0;i<n.length;i++) { var cn = n[i].childNodes; for (var j=0;j<cn.length;j++) { CSSetCSS2Props(CSFetchStyle(cn[j].data, id),id); }}}
function CSFetchStyle(sc, id) {
var s=sc; while(s.indexOf("#")!=-1) { s=s.substring(s.indexOf("#")+1,sc.length); if (s.substring(0,s.indexOf("{")).toUpperCase().indexOf(id.toUpperCase())!=-1) return(s.substring(s.indexOf("{")+1,s.indexOf("}")));}
return "";
}
function CSGetStyleAttrValue (si, id, st) {
var s=si.toUpperCase();
var myID=id.toUpperCase()+":";
var id1=s.indexOf(myID,st);
if (id1==-1) return "";
var ch=s.charAt(id1-1);
if (ch!=" " && ch!="\t" && ch!="\n" && ch!=";" && ch!="{")
return CSGetStyleAttrValue (si, id, id1+1);
var start=id1+myID.length;
ch=s.charAt(start);
while(ch==" " || ch=="\t" || ch=="\n") {start++; ch=s.charAt(start);}
s=s.substring(start,si.length);
var id2=s.indexOf(";");
return ((id2==-1)?s:s.substring(0,id2));
}
function CSSetCSS2Props(si, id) {
var el=document.getElementById(id);
if (el==null) return;
var style=document.getElementById(id).style;
if (style) {
if (style.left=="") style.left=CSGetStyleAttrValue(si,"left",0);
if (style.top=="") style.top=CSGetStyleAttrValue(si,"top",0);
if (style.width=="") style.width=CSGetStyleAttrValue(si,"width",0);
if (style.height=="") style.height=CSGetStyleAttrValue(si,"height",0);
if (style.visibility=="") style.visibility=CSGetStyleAttrValue(si,"visibility",0);
if (style.zIndex=="") style.zIndex=CSGetStyleAttrValue(si,"z-index",0);
}
}

function CSOpenWindow(action) {
var wf = "";
wf = wf + "width=" + action[3];
wf = wf + ",height=" + action[4];
wf = wf + ",resizable=" + (action[5] ? "yes" : "no");
wf = wf + ",scrollbars=" + (action[6] ? "yes" : "no");
wf = wf + ",menubar=" + (action[7] ? "yes" : "no");
wf = wf + ",toolbar=" + (action[8] ? "yes" : "no");
wf = wf + ",directories=" + (action[9] ? "yes" : "no");
wf = wf + ",location=" + (action[10] ? "yes" : "no");
wf = wf + ",status=" + (action[11] ? "yes" : "no");
window.open(action[1],action[2],wf);
}

function CSCloseWindow() {
if (self.parent.frames.length != 0) {
self.parent.close()
} else {
window.close()
}
}

webby
09-19-2005, 10:22 AM
I'm no expert on javascript so I could be wrong, but at first glance it looks like they're fighting over control of variable "i".

External JS: for (var i=0; i<navItems.length; i++)
GoLive: for (var i=0;i<array.length;i++)

glenngv
09-19-2005, 11:08 AM
If they are both local variables (as in the case here), then they will not clash.

djbdjb, you can make :hover and :active CSS pseudo-classes work in any element in IE by employing this fix (http://www.vladdy.net/demos/iepseudoclassesfix.html). This might also fix the script conflict.

djbdjb
09-19-2005, 04:53 PM
Thanks, will give this a go when my brains a bit more in gear!

:thumbsup:

djbdjb
09-20-2005, 11:59 AM
OK, wasn't the variables and I tried the fix above but couldn't get my head round it. What got it working in the end was altering this line in my GoLive code:


<body onload="preloadImages()">
to

<body onload="preloadImages();IEHoverPseudo()">

although what was strange was that when I took the window.onload command out of my navigation.js it all stopped working. I thought I would have to take this out as it seemed to be a duplicate to the body onload function.


function IEHoverPseudo() {

var navItems = document.getElementById("nav").getElementsByTagName("li");

for (var i=0; i<navItems.length; i++) {
if(navItems[i].className == "menuparent") {
navItems[i].onmouseover=function() { this.className += " over"; }
navItems[i].onmouseout=function() { this.className = "menuparent"; }
}
}

}
window.onload = IEHoverPseudo;

For the record, this is the 1st bit of Javascript I have ever done, it took me about a day of mucking around and I never want to see Javascript again.

:(

Greg-J
09-20-2005, 07:01 PM
Since external files such as .js are cached, You might consider having a sitewide include.js that you simply link to from every page. It keeps things more organized as well. In that case, you just need to keep all your functions inside a function that you initialize onload. Or you can do something like this:


function init() {
preloadImages();
IEHoverPseudo();
}

Your functions here

window.onload = init;

This way you have a single javascript file to keep track of. You also won't need to initialize every function in the body tag anymore. I'm no javascript master, but it works very well for me.

glenngv
09-21-2005, 04:43 AM
djbdjb, have you tried my suggestion? It doesn't require you to have the IEHoverPseudo() function and call it onload. You just need the htc file and normal :hover and :active CSS declarations. No onload function calls. This might also solve script conflicts as you don't need the IEHoverPseudo() function anymore.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum