...

View Full Version : Can someone suggest the proper method for passing variables across pages



canadianjameson
08-22-2007, 08:46 PM
Hi,

I just changed my underlying navigation system to use server-side includes, and now a bunch of my scripts that are onclick, event-based functions are now not working properly because the page is being reloaded every time.

The types of events I need to pass from page to page are not too complex... for ex:


<div id="navcontainer" onclick="zxcResetImages('links_BW'); zxcOnceClick('nav_helper')">
<ul id="navlist">
<li><a href="infoInclude.php" id="about" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">About Us</a></li>
<li><a href="YPPInclude.php" id="people" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">People:<br>Past and Present</a></li>
<li><a href="socialInclude.php" id="media" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Media / Press</a></li>
<li><a href="medicalInclude.php" id="getinvolded" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Get Involved</a></li>
<li><a id="donate" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Donate</a></li>
<li><a id="forums" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Forums</a></li>
<li><a id="extraLinks" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Links</a></li>
</ul>
</div>
<div id="emailSection"></div>


<!--

LastID = ""
function mOver(obj){
if(LastID != obj.id){
if (obj.id == "people") { document.getElementById(obj.id).className="mOverTwoLine" }
else {document.getElementById(obj.id).className="mOver" }
}
}

function mOut(obj){
if(LastID != obj.id){
document.getElementById(obj.id).className="default"
}
}

function mClick(obj){
if (obj.id == "people") { document.getElementById(obj.id).className="mDownTwoLine" }
else {document.getElementById(obj.id).className="mDown" }
if (LastID != obj.id && LastID != ""){
document.getElementById(LastID).className="default"
}

LastID = obj.id

}

function mClear(){

if(LastID!=""){
document.getElementById(LastID).className="default"
LastID=""
}

}



// -->



How do people usually get around issues like this?

canadianjameson
08-22-2007, 09:29 PM
a visual example of this is:
if you go to www.enviromark.ca/head/index.htm and click on a link on the right nav, it turns blue.

if you go to www.enviromark.ca/head/indexInclude.php and do the same... because the page reloads it doesnt stay blue

---------
edit:
I basically think that now, since i'm using server-side includes, that the script will need to assign the classes onload as opposed to changing the inline class state... is this an accurate assumption... or how is this usually worked-around?

felgall
08-23-2007, 03:32 AM
Server Side Includes have no effect on JavaScript whatsoever as all the javaScript sees is the page with the included code inserted. Your must have therefore changed something else that is causing the problem.

canadianjameson
08-23-2007, 11:46 AM
Right but as far as I see it the problem is that the page is being reloaded onclick right (or have i missed something?). This script changes the class of an object, but since the change is being made to the html it is nullified when then new link opens.

am i wrong about how this works?

vwphillips
08-23-2007, 01:20 PM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<link rel="stylesheet" href="http://www.enviromark.ca/head/css/rightNav.css" type="text/css">
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var LastID = ""

function mOver(obj){
if(LastID != obj.id){
if (obj.id == "people") { document.getElementById(obj.id).className="mOverTwoLine" }
else {document.getElementById(obj.id).className="mOver" }
}
}

function mOut(obj){
if(LastID != obj.id){
document.getElementById(obj.id).className="default"
}
}

function mClick(obj){
if (obj.id == "people") { document.getElementById(obj.id).className="mDownTwoLine" }
else {document.getElementById(obj.id).className="mDown" }
if (LastID != obj.id && LastID != ""){
document.getElementById(LastID).className="default"
}
LastID = obj.id
zxcSetCookie(obj,'default');
}

function mClear(){
if(LastID!=""){
document.getElementById(LastID).className="default"
LastID=""
}
}



/*]]>*/
</script>

<script language="JavaScript" type="text/javascript">
<!--
// Remove/Replace Rows zxcPart2 (30-Jan-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// Functional Code - NO NEED to Change
var zxcCookie='fred';

var zxcDays=1;

var zxcExp=new Date(new Date().getTime()+zxcDays*86400000).toGMTString();
function zxcUseCookie(){
var zxcargs=zxcUseCookie.arguments;
for (var zxc0=2;zxc0<zxcargs.length;zxc0++){
document.getElementById(zxcargs[zxc0]).usecookie=true;
}
zxcCookie=zxcargs[0];
zxcGetCookieValue();
}

function zxcSetCookie(zxcobj,zxccls){
var zxcp=zxcobj.parentNode.parentNode.parentNode;
var zxcas=zxcp.getElementsByTagName('A');
for (var zxc0=0;zxc0<zxcas.length;zxc0++){
if (zxcas[zxc0].className!=zxccls) break;
}
document.cookie=zxcCookie+'='+escape(zxc0+':'+zxcas[zxc0].className)+';expires='+zxcExp+';path=/;';
}

function zxcGetCookieValue(zxcid){
var zxcval=zxcGetCookie(zxcCookie);
if(!zxcval){ return; }
var zxcas=document.getElementById(zxcid).getElementsByTagName('A');
zxcas[zxcval.split(':')[0]].className=zxcval.split(':')[1];
LastID=zxcas[zxcval.split(':')[0]].id;
}

function zxcGetCookie(zxcnme) {
var zxcst=document.cookie.indexOf(zxcnme+"=");
var zxclen=zxcst+zxcnme.length+1;
if ((!zxcst)&&(zxcnme != document.cookie.substring(0,zxcnme.length))) return null;
if (zxcst==-1) return null;
var zxcend=document.cookie.indexOf(";",zxclen);
if (zxcend==-1) zxcend=document.cookie.length;
return unescape(document.cookie.substring(zxclen,zxcend));
}

//-->
</script>
</head>

<body onload="zxcGetCookieValue('navcontainer');">zxcResetImages('links_BW'); zxcOnceClick('nav_helper')
<div id="navcontainer" onclick="">
<ul id="navlist">
<li><a href="infoInclude.php" id="about" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);return false">About Us</a></li>
<li><a href="YPPInclude.php" id="people" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);return false;">People:<br>Past and Present</a></li>
<li><a href="socialInclude.php" id="media" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);return false;">Media / Press</a></li>
<li><a href="medicalInclude.php" id="getinvolded" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);return false;">Get Involved</a></li>

<li><a id="donate" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);return false;">Donate</a></li>
<li><a id="forums" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);return false;">Forums</a></li>
<li><a id="extraLinks" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);return false;">Links</a></li>
</ul>
</div>

</body>

</html>

PS remove the return false on the link onclick

canadianjameson
08-23-2007, 05:45 PM
Vic this is perfect!

I was wondering if you could explain to me how exactly this works (as it seems that there are no variables to alter in the actual code -- which i saved as setCookie.js

I ask because in the future I will need to throw this into other functions and I don't want to have to bug you every time :)

for example, on the current page I need to apply this to the onload event for setTimeout(assignMouseOver,5000); as well as for zxcInitImages('logoC','links_BW')... but i dont know where in the actual body of the js to put it... or even if the setCookie script can be used for more than one function, or if I need a second instance of the script just to use it a second time. I ask because I noticed that it set the cookie called 'fred', which if called twice might conflict (?)

lol, atleast i'm trying to learn :D

this is the assignMouseOver() function


/*<![CDATA[*/
function assignMouseOver(){
var olinks_BW = document.getElementById("links_BW");
var oldOnMouseOver = olinks_BW.onmouseover;
if (typeof oldOnMouseOver != 'function') {//If onmouseover is not a function we can safely overwrite it.
olinks_BW.onmouseover = function(){zxcOnce('nav_helper');}
}
else {//Otherwise create a new function that calls the old onmouseover function plus our new function.
olinks_BW.onmouseover = function() {
if (oldOnMouseOver) {
oldOnMouseOver();
}
zxcOnce('nav_helper');
}
}
}


function zxcOnce(zxcid){
if (!document.getElementById(zxcid)['opacityoop']) zxcAnimator('opacity',zxcid,100,0,'linear',1000)
}

function zxcOnceClick(zxcid){
if (!document.getElementById(zxcid)['opacityoop']) zxcAnimator('opacity',zxcid,100,0,'linear',1000);
}

/*]]>*/

vwphillips
08-23-2007, 08:46 PM
Cant think too clear at the moment but

There may be as many function calls as required from a <BODY> or window onload event

easiest is to have a function that includes all the required calls and call that function from the onload event.

the site cookies can contain up to 4k of data on the users machine.
This can be in one cookie name or in multiple cookies each with a unique name.

The only global variables in the posted example are two customising varibles for the cookie name and the number of day to expiry and one with the expiry time in milli seconds.

Hopes this answers your some of your questions.

BTW ment to ask before why you are not using an IFRAME instead of reloading new pages our using ajax for the dynamic content.

You will need to explain again what you want doing with the assignMouseOver() function.

canadianjameson
08-23-2007, 08:46 PM
I spoke a wee bit too soon

We need to make two modifications to the script -- one minor and one... i dunno i guess not too hard :o

1) the function mClear() no longer works. This is called when any of the links in 'Links_BW are clicked and it resets the classes to 'default'

2) if a person leaves the page, and comes back a bit later the same day, the class from the link they were last on is still in the cookie and shows that button as being active.

What i think we need to do now, because people can bookmark / link directly to whatever section of the page they want (instead of being forced to go to index.htm), is have a way for onload the script to verify what page it is and set that that button as 'active' (unless they are on the index page at which point no button is 'active' -- this applies to both the right navigator and to the links_BW script.

Can this be done?

:( Sorry for all the hassles Vic... every page I make from now on will use server-side includes so we wont have to go through this again

edit: we cross posted so i will now answer your questions in the next post

canadianjameson
08-23-2007, 09:05 PM
Hey Vic,

I'm using the server-side includes because the ajax script I had before wasn't DOM compliant and was throwing all kinds of errors with the slide-show I was / am using. I chose includes over iframes mainly because iframes are depreciated and being phased out in the coming years, and I don't think this organization will have a budget to recode the page in a few years because i chose iframes over includes now. The explanation i was given for why the ajax script should be removed was this:

(by toggler he meant the ajax script)
HI Jay,

The entire issue is that the paradigm is flawed, since the toggler simply
copies the html markup, and does not address any dom-related objects that
may have been instantiated by the scripts on the page that was loaded in,
the toggler must never re-copy. Unlike a frames-based page, or even an
iframe, the new page is not under it's own DOM, it is acting on and getting
data from the same original parent page all of the time. This means hat the
DOM and related objects can, and will, become corrupt. Since the toggler
simply copies the raw markup into the div, none of the DOM-related objects
are removed when toggling takes place, so in essence, when the toggler
copies the markup a second time the now new SSM system is attempting to deal
with an already DOM initialized slide show whose parameters are still that
of the previous slide show. Jay, this technique is an exercise in futility,
it will never work correctly... the toggler can never re-copy an SSM system,
however, since the toggler is working with only one content div, when you
toggle to other content the SSM markup has been removed from the page, but
when re-copied it will not work correctly because the DOM objects from the
previous SSM are still in the pages DOM, causing the new SSM to not work
correctly because it cannot be re-initialized.

Regards,
Gerry Jacobsen
http://www.projectseven.com


As for the AssignMouseOver function

It acts on the nav_heper.jpg (http://www.enviromark.ca/head/images/nav_helper.jpg) file. What it does is, because users may not know that the black & white vertical icons are links, it tells the users to use those buttons... but once they know what to do, it doesnt need to be there anymore... so i use your fade script to fade it out when they onmouseover the links. the 5 second part is as a precaution to prevent them from accidentally onmouseovering before they get a chance to read it.

I understand if you're tired, please take all the time you need to reply. I will be (edit: done) posting one other thread (http://www.codingforums.com/showthread.php?p=603645#post603645) regarding a bug in the borderFade.js script, so also keep an eye out for that if you can. This only has to be functional by next Friday (when they want to release the site), so take your time :)

vwphillips
08-23-2007, 11:30 PM
1) the function mClear() no longer works. This is called when any of the links in 'Links_BW are clicked and it resets the classes to 'default'


As far as I can see the clear still works(think I catered for it in function zxcGetCookieValue)


<!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" xml:lang="en" lang="en">

<head>
<title></title>
<link rel="stylesheet" href="http://www.enviromark.ca/head/css/rightNav.css" type="text/css">
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
var LastID = ""

function mOver(obj){
if(LastID != obj.id){
if (obj.id == "people") { document.getElementById(obj.id).className="mOverTwoLine" }
else {document.getElementById(obj.id).className="mOver" }
}
}

function mOut(obj){
if(LastID != obj.id){
document.getElementById(obj.id).className="default"
}
}

function mClick(obj){
if (obj.id == "people") { document.getElementById(obj.id).className="mDownTwoLine" }
else {document.getElementById(obj.id).className="mDown" }
if (LastID != obj.id && LastID != ""){
document.getElementById(LastID).className="default"
}
LastID = obj.id
zxcSetCookie(obj,'default');
}

function mClear(){
if(LastID!=""){
document.getElementById(LastID).className="default"
LastID=""
}
}



/*]]>*/
</script>

<script language="JavaScript" type="text/javascript">
<!--
// Remove/Replace Rows zxcPart2 (30-Jan-2005)
// by Vic Phillips http://www.vicsjavascripts.org.uk/

// Functional Code - NO NEED to Change
var zxcCookie='fred';

var zxcDays=1;

var zxcExp=new Date(new Date().getTime()+zxcDays*86400000).toGMTString();
function zxcUseCookie(){
var zxcargs=zxcUseCookie.arguments;
for (var zxc0=2;zxc0<zxcargs.length;zxc0++){
document.getElementById(zxcargs[zxc0]).usecookie=true;
}
zxcCookie=zxcargs[0];
zxcGetCookieValue();
}

function zxcSetCookie(zxcobj,zxccls){
var zxcp=zxcobj.parentNode.parentNode.parentNode;
var zxcas=zxcp.getElementsByTagName('A');
for (var zxc0=0;zxc0<zxcas.length;zxc0++){
if (zxcas[zxc0].className!=zxccls) break;
}
document.cookie=zxcCookie+'='+escape(zxc0+':'+zxcas[zxc0].className)+';expires='+zxcExp+';path=/;';
}

function zxcGetCookieValue(zxcid){
var zxcval=zxcGetCookie(zxcCookie);
if(!zxcval){ return; }
var zxcas=document.getElementById(zxcid).getElementsByTagName('A');
zxcas[zxcval.split(':')[0]].className=zxcval.split(':')[1];
LastID=zxcas[zxcval.split(':')[0]].id;
}

function zxcGetCookie(zxcnme) {
var zxcst=document.cookie.indexOf(zxcnme+"=");
var zxclen=zxcst+zxcnme.length+1;
if ((!zxcst)&&(zxcnme != document.cookie.substring(0,zxcnme.length))) return null;
if (zxcst==-1) return null;
var zxcend=document.cookie.indexOf(";",zxclen);
if (zxcend==-1) zxcend=document.cookie.length;
return unescape(document.cookie.substring(zxclen,zxcend));
}

//-->
</script>
</head>

<body onload="zxcGetCookieValue('navcontainer');">zxcResetImages('links_BW'); zxcOnceClick('nav_helper')
<div id="navcontainer" onclick="">
<ul id="navlist">
<li><a href="infoInclude.php" id="about" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);return false">About Us</a></li>
<li><a href="YPPInclude.php" id="people" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);return false;">People:<br>Past and Present</a></li>
<li><a href="socialInclude.php" id="media" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);return false;">Media / Press</a></li>
<li><a href="medicalInclude.php" id="getinvolded" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);return false;">Get Involved</a></li>

<li><a id="donate" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);return false;">Donate</a></li>
<li><a id="forums" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);return false;">Forums</a></li>
<li><a id="extraLinks" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);return false;">Links</a></li>
</ul>
</div>
<input type="button" name="" value="Clear" onclick="mClear();" />
</body>

</html>



2) if a person leaves the page, and comes back a bit later the same day, the class from the link they were last on is still in the cookie and shows that button as being active.


this can be catered for by secifying a few seconds for the Expiry time(.0001 of a day)



What i think we need to do now, because people can bookmark / link directly to whatever section of the page they want (instead of being forced to go to index.htm), is have a way for onload the script to verify what page it is and set that that button as 'active' (unless they are on the index page at which point no button is 'active' -- this applies to both the right navigator and to the links_BW script.


Opps as each page has a different location there is no need for cookies, just interrogate the location and set the required conditions.

You will need to identify what conditions need to be established for each page.


Still cant stop thinking that if not an IFRAME a frameset would be easier.

canadianjameson
08-23-2007, 11:58 PM
As far as I can see the clear still works(think I catered for it in function zxcGetCookieValue)

odd, because when i go here (http://www.enviromark.ca/head/YPPInclude.php) for example, click one of the right buttons, then click a left nav button, the right one which has the blue background keeps it instead of going back to having class="default"

(i havent checked the code you posted just below, so if you fixed it there then leave it and i'll test it tomorrow)


this can be catered for by secifying a few seconds for the Expiry time(.0001 of a day) okay i see, I'll do that.




What i think we need to do now, because people can bookmark / link directly to whatever section of the page they want (instead of being forced to go to index.htm), is have a way for onload the script to verify what page it is and set that that button as 'active' (unless they are on the index page at which point no button is 'active' -- this applies to both the right navigator and to the links_BW script.


Opps as each page has a different location there is no need for cookies, just interrogate the location and set the required conditions.

You will need to identify what conditions need to be established for each page.

basically each link (button) will be linked to it's own page, so we can just have something onclick as it is and then when the page loads have it contact the script and verify that it's associated button action (fade for the links_bw and class for the rightNav has been activated, and if not activate it.

would that work?



Still cant stop thinking that if not an IFRAME a frameset would be easier.

I know... but the depreciated nature of it scares me for the future of the page :/

vwphillips
08-24-2007, 04:09 AM
odd, because when i go here (http://www.enviromark.ca/head/YPPInclude.php) for example, click one of the right buttons, then click a left nav button, the right one which has the blue background keeps it instead of going back to having class="default"



function mClear(){
if(LastID!=""){
document.getElementById(LastID).className="default"
LastID=""
zxcCancelCookie();
}
}

function zxcCancelCookie(){
if (zxcCookie){
var zxcc=new Date(new Date().getTime()-zxcDays*86400000).toGMTString();
document.cookie=zxcCookie+'='+escape(' ')+';expires='+zxcc+';path=/;';
}
}




basically each link (button) will be linked to it's own page, so we can just have something onclick as it is and then when the page loads have it contact the script and verify that it's associated button action (fade for the links_bw and class for the rightNav has been activated, and if not activate it.


Think we are getting at crossed purposes

see if the expiry time meets your requirement, if not we can come back to it.

canadianjameson
08-24-2007, 08:07 PM
Hey Vic,

The cancelCookie worked for the mClear function :) Thanks

The second point regarding the user re-opening the page and the class still being set to the last link opened is still happening. I tested it by going to http://www.enviromark.ca/head/indexInclude.php, clicking on "Media /Press", and then opening a fresh browser window and pasting in http://www.enviromark.ca/head/indexInclude.php into it. 'Media / Press' is still Blue (has a class other than 'default' applied to it) even if the link opened doesn't correspond.

I tried playing with the expiry delay but all this does is have me guessing the average time between visits... which is in principle not a good coding / design avenue to go down.

It almost seems like we're over-complicating this... should we even be using cookies for something like this? I mean essentially the page is reloading to a new url every time, so why not just have an onload="setClass('divID','class')" function on the actual .php page being loaded instead of an onclick mClick() function?

vwphillips
08-25-2007, 09:45 AM
It almost seems like we're over-complicating this... should we even be using cookies for something like this? I mean essentially the page is reloading to a new url every time, so why not just have an onload="setClass('divID','class')" function on the actual .php page being loaded instead of an onclick mClick() function?
08-24-2007 04:09 AM

this is what I was referring to in post 10


Opps as each page has a different location there is no need for cookies, just interrogate the location and set the required conditions.


I must have miss understood your response to the suggestion.

I am finding the different threads on this project confusing can we use this thread to address all outstanding project elements?

glenngv
08-26-2007, 04:15 AM
Just would like to point out that this code is unnecessary long.

document.getElementById(obj.id).className="whatever";

This could be simplified to:

obj.className="whatever";

canadianjameson
08-28-2007, 03:59 AM
Hey Vic, sorry for the long absence but I am back now and will be here all week :D

Alright, this thread is now the official "Head and Hands / Vic's Scripts" thread.

Lets address point # 1:

Opps as each page has a different location there is no need for cookies, just interrogate the location and set the required conditions.
I agree with this approach. Sorry for the confusion with my response. I think that the only part of this page that will require a cookie will be the nav_helper function (or "assignMouseOver()")... because that has to be seen once and then never seen again. The code i have for it now is overcomplicated because it was from before you put the onmouseover/out/click functions into the fadeImages.js file

This is what it is:

/*<![CDATA[*/
function assignMouseOver(){
var olinks_BW = document.getElementById("links_BW");
var oldOnMouseOver = olinks_BW.onmouseover;
if (typeof oldOnMouseOver != 'function') {//If onmouseover is not a function we can safely overwrite it.
olinks_BW.onmouseover = function(){zxcOnce('nav_helper');}
}
else {//Otherwise create a new function that calls the old onmouseover function plus our new function.
olinks_BW.onmouseover = function() {
if (oldOnMouseOver) {
oldOnMouseOver();
}
zxcOnce('nav_helper');
}
}
}


function zxcOnce(zxcid){
if (!document.getElementById(zxcid)['opacityoop']) zxcAnimator('opacity',zxcid,100,0,'linear',1000)
}

function zxcOnceClick(zxcid){
if (!document.getElementById(zxcid)['opacityoop']) zxcAnimator('opacity',zxcid,100,0,'linear',1000);
}// regardless of the 5 second setTimeout, if the user clicks it then it fades away

/*]]>*/

is called by:
onload="... setTimeout(assignMouseOver,5000);"

and acts on
<div id="links_BW" onclick="mClear(); zxcOnceClick('nav_helper')">
<img name="infoButton" src="/head/images/logoButtons/info_BW.gif">
<img name="YPPButton" src="/head/images/logoButtons/YPP_BW.gif">
<img name="socialButton" src="/head/images/logoButtons/social_BW.gif">
<img name="healthButton" src="/head/images/logoButtons/health_BW.gif">
<img name="legalButton" src="/head/images/logoButtons/legal_BW.gif">
<img name="J2KButton" src="/head/images/logoButtons/J2K_BW.gif">
<img name="streetworkButton" src="/head/images/logoButtons/streetwork_BW.gif">
</div>
<img src="/head/images/nav_helper.jpg" id="nav_helper">



We'll have to set a cookie with no timeout (or maybe I'll put 20 days or something), so that once either zxcOnce() or zxcOnceClick() are called then the image nav_helper doesn't show.

Point 2: from this (http://www.codingforums.com/showthread.php?p=604098#post604098) thread

if (zxcels[zxc0].className&&zxcels[zxc0].className.match('zxcFB')){ almost perfect, i just need the reverse :) so 'if != className.match('zxcNoBorder'), then apply border. Also if you could add the same line to the
function zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder,zxcgrp,zxclevel){ function for future use

Point 3: from the same thread as the last point

can we apply the same logic to the links_BW fades? I ask because if you click on any of the B&W vertical images they no longer fade out and stay that way like they used to because the page is being reloaded every time.
--
can you make absolutely sure that the cookie method meets the requirement before I put more work into this
I though that the cookie method was overcomplicated for what we need to do, as discussed in Point 1... but I might be wrong here... what method do you think would be best to achieve the same results as we had before I started using Includes? Would it be simpler to use use some sort of onload function to control this, or do cookies work? Keep in mind that if a user bookmarks a particular page, when it loads that page's button has to fade out (which is why I thought an onload function would be best)

Thanks for all your help, and sorry for the delay I was gone this weekend and had no internet today :(
everything is up at www.enviromark.ca/head/indexInclude.php

canadianjameson
08-28-2007, 07:01 AM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
var Contacts=new Array()
//Specify text and corresponding email address.
//Use [at] and [dot] in place of "@" and "." for anti spam purpose:
Contacts[0]=['Chris Timber', 'chris[at]whatever[dot]com']
Contacts[1]=['John Doe', 'johndoe[at]whatever2[dot]com']
Contacts[2]=['Jannet Low', 'janet[at]whatever3[dot]com']
Contacts[3]=['Albert Good', 'albertgood[at]whatever4[dot]com']


function zxcConvertEmail(zxctag,zxcary,zxccngtxt){
var zxctags=document.getElementsByTagName(zxctag);
for (var zxc0=0;zxc0<zxctags.length;zxc0++){
for (var zxc0a=0;zxc0a<zxcary.length;zxc0a++){
if (zxctag.toUpperCase()=='A'&&zxctags[zxc0].href){
var zxchref=decodeURI(zxctags[zxc0].href);
if (zxchref.match(zxcary[zxc0a][0])){
var zxcaddress=zxcary[zxc0a][1].replace('[at]','@').replace('[dot]','.');
zxctags[zxc0].href='mailto:'+zxcaddress;
if (zxccngtxt) zxctags[zxc0].innerHTML=zxctags[zxc0].innerHTML.replace(zxcary[zxc0a][0],zxcaddress);
}
}
}
}
}

//-->
</script>

</head>

<body onload="zxcConvertEmail('A',Contacts,true);">
<a ></a>
<a href="mailto:Chris Timber" >Chris Timber</a>

</body>

</html>

I think it will offer the same protection as the other one. To my knowledge harvesters are only programmed to scoop 'something@something.com, so as long as that never appears in the html / js, we're fine.

Just for future reference, how would I go about listing several e-mails in a dropdown form?

[edit]]]
I was implementing the script and realized that it in fact doesnt work like the other one because this one doesn't allow me to display the link as an e-mail address without hard coding the address into the <a href... which is what i wanted to avoid. Just to make things simpler instead of having you recode the whole script, would it be easier to figure out why it says that emailarray has no properties?

it said it was in line 28... being this:
if (typeof emailarray[0]=="object"){ //if array passed consists of multiple elements -- maybe when you changed the one line it affected how this is ran

vwphillips
08-31-2007, 03:36 PM
point # 1:

for activating the correct image group when linking to a page


function zxcEvtCalls(zxcevt){
var zxcp=this.parentNode;
var zxcdivs=zxcp.childNodes;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==this) break;
}
if (zxcp.id=='links_BW'){
zxcMseOverOut(this,zxcevt);
if (zxcevt.type=='click'){ // replace 070824C.htm with the required URLs
if (zxc0==0){ location.href='070824C.htm?BW?0'; email('info'); }
if (zxc0==1){ location.href='070824C.htm?BW?1'; email('YPP'); }
if (zxc0==2){ location.href='070824C.htm?BW?2'; email('social'); }
if (zxc0==3){ location.href='070824C.htm?BW?3'; email('medical'); }
if (zxc0==4){ location.href='070824C.htm?BW?4'; email('legal'); }
if (zxc0==5){ location.href='070824C.htm?BW?5'; email('j2000'); }
if (zxc0==6){ location.href='070824C.htm?BW?6'; email('streetwork'); }
}
else if (zxcevt.type=='mouseover'){
if (zxc0==0){ on1();
}
if (zxc0==1){ on2();
}
if (zxc0==2){ on3();
}
if (zxc0==3){ on4();
}
if (zxc0==4){ on5();
}
if (zxc0==5){ on6();
}
if (zxc0==6){ on7();
}
}
else if (zxcevt.type=='mouseout'){
if (zxc0==0){ off1();
}
if (zxc0==1){ off2();
}
if (zxc0==2){ off3();
}
if (zxc0==3){ off4();
}
if (zxc0==4){ off5();
}
if (zxc0==5){ off6();
}
if (zxc0==6){ off7();
}
}
}
if (zxcp.id=='logoC'){
if (zxcevt.type=='click'){
if (zxc0==0){
}
if (zxc0==1){
}
if (zxc0==2){
}
if (zxc0==3){
}
if (zxc0==4){
}
if (zxc0==5){
}
if (zxc0==6){
}
}
else if (zxcevt.type=='mouseover'){
if (zxc0==0){
}
if (zxc0==1){
}
if (zxc0==2){
}
if (zxc0==3){
}
if (zxc0==4){
}
if (zxc0==5){
}
if (zxc0==6){
}
}
else if (zxcevt.type=='mouseout'){
if (zxc0==0){
}
if (zxc0==1){
}
if (zxc0==2){
}
if (zxc0==3){
}
if (zxc0==4){
}
if (zxc0==5){
}
if (zxc0==6){
}
}
}
}

// call this function as the last onload event call
function zxcInitPage(){
var zxcloc=window.location.toString().split('?');
if (zxcloc.length!=3) return;
if (zxcloc[1]=='BW'){
var zxcp=document.getElementById('links_BW');
zxcp.hold=zxcp.childNodes(parseInt(zxcloc[2]));
zxcFadeDo(zxcp.hold,'mouseover');
}
}


if this is ok I will do the other menu

I'm now looking at the nnav_helper

vwphillips
08-31-2007, 04:38 PM
the nav helper ?


<script language="JavaScript" type="text/javascript">
<!--
/*<![CDATA[*/

var zxcLok=true;

// will hide the 'nav_helper' if there is two ? in the location and unlock the mouseover fade after 5 sec
function zxcNavHelper(){
var zxcnh=document.getElementById('nav_helper');
var zxcloc=window.location.toString().split('?');
if (zxcloc.length>1) zxcnh.style.visibility='hidden';
setTimeout('zxcLok=false;',5000);
}

// execute from a mouseover event, will only work after 5 sec
function zxcOnce(zxcid){
if (!zxcLok){
zxcAnimator('opacity',zxcid,100,0,'linear',1000);
zxcLok=true;
}
}


/*]]>*/
//-->
</script>
<link rel="stylesheet" href="http://www.enviromark.cacss/medical.css" type="text/css">

</head>

<body onload="zxcInitImages('logoC','links_BW');zxcNavHelper();zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px');zxcInitPage();">

vwphillips
08-31-2007, 04:46 PM
forgot the mirror


function zxcInitPage(){
var zxcloc=window.location.toString().split('?');
if (zxcloc.length!=3) return;
if (zxcloc[1]=='BW'){
var zxcp=document.getElementById('links_BW');
zxcp.hold=zxcp.childNodes(parseInt(zxcloc[2]));
zxcFadeDo(zxcp.hold,'mouseover');
zxcp.holdmirror=zxcp.mirror[zxcloc[2]][2];
zxcFadeDo(zxcp.holdmirror,'mouseover');
}
}

vwphillips
08-31-2007, 05:08 PM
not sure I understand the border requirements but


function zxcInitBorderGrp(zxcid,zxcmde,zxctag,zxctimeover,zxctimeout,zxcsrt,zxcfin,zxcborder){
var zxcp=document.getElementById(zxcid);
var zxcels=document.getElementById(zxcid).getElementsByTagName(zxctag);
for (var zxc0=0;zxc0<zxcels.length;zxc0++){
if (zxcels[zxc0].className&&!zxcels[zxc0].className.match('zxcNoBorder')){
zxcels[zxc0].onmouseover=function(){ zxcBorder(zxcmde,this,zxctimeover,zxcsrt,zxcfin,zxcborder); }
zxcels[zxc0].onmouseout=function(){ zxcBorder(zxcmde,this,zxctimeout,zxcfin,zxcsrt); }
}
}
zxcp.onmouseover=null;
}

function zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder,zxcgrp,zxclevel){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
var zxcevt=window.event||arguments.callee.caller.arguments[0];
if (zxcobj.className.match('zxcNoBorder') return;
if (zxcevt.type!='click'){
if (!zxcobj.srtfin) zxcobj.srtfin=[zxcsrt,zxcfin];
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (!zxcoop) zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,'sin',zxctime,zxcborder);
else if (zxcoop.data) zxcAnimator(zxcmde,zxcobj,(zxcobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],(zxcevt.type=='mouseout')?zxcobj.srtfin[0]:zxcobj.srtfin[1],'sin',zxctime);
}
// section for use with div toggle
if (zxcevt.type=='click'&&zxcgrp){
if (!zxcobj.srtfin1) zxcobj.srtfin1=[zxcsrt,zxcfin];
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (!zxcoop) zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,'sin',zxctime,zxcborder);
else if (zxcobj.srtfin1) zxcAnimator(zxcmde,zxcobj,(zxcobj.srtfin1[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],(zxcevt.type=='mouseout')?zxcobj.srtfin1[0]:zxcobj.srtfin1[1],'sin',zxctime)
else return;
if (!zxcTBAry[zxcgrp]) zxcTBAry[zxcgrp]=[];
for (var zxc0=0;zxc0<zxcTBAry[zxcgrp].length;zxc0++){
if (zxcTBAry[zxcgrp][zxc0][0]==zxcobj) zxcTBAry[zxcgrp].splice(zxc0,1);
}
zxcTBAry[zxcgrp].push([zxcobj,zxclevel]);
for (var zxc0=1;zxc0<zxcTBAry.length;zxc0++){
if (zxcTBAry[zxc0]){
for (var zxc0a=0;zxc0a<zxcTBAry[zxc0].length;zxc0a++){
if (zxc0!=zxcgrp||(zxcTBAry[zxc0][zxc0a][1]>=zxclevel&&zxcTBAry[zxc0][zxc0a][0]!=zxcobj)){
var zxcnobj=zxcTBAry[zxc0][zxc0a][0];
var zxcoop=zxcnobj[zxcmde.replace('-','')+'oop'];
zxcAnimator(zxcmde,zxcnobj,(zxcnobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],zxcsrt,'sin',zxctime)
}
}
}
}
}
// end section for use with div toggle
}


Also could you post an implementation of the email script as it works for me

vwphillips
08-31-2007, 05:15 PM
not sure I understand the border requirements but


function zxcInitBorderGrp(zxcid,zxcmde,zxctag,zxctimeover,zxctimeout,zxcsrt,zxcfin,zxcborder){
var zxcp=document.getElementById(zxcid);
var zxcels=document.getElementById(zxcid).getElementsByTagName(zxctag);
for (var zxc0=0;zxc0<zxcels.length;zxc0++){
if (zxcels[zxc0].className&&!zxcels[zxc0].className.match('zxcNoBorder')){
zxcels[zxc0].onmouseover=function(){ zxcBorder(zxcmde,this,zxctimeover,zxcsrt,zxcfin,zxcborder); }
zxcels[zxc0].onmouseout=function(){ zxcBorder(zxcmde,this,zxctimeout,zxcfin,zxcsrt); }
}
}
zxcp.onmouseover=null;
}

function zxcBorder(zxcmde,zxcobj,zxctime,zxcsrt,zxcfin,zxcborder,zxcgrp,zxclevel){
if (typeof(zxcobj)=='string'){ zxcobj=document.getElementById(zxcobj); }
var zxcevt=window.event||arguments.callee.caller.arguments[0];
if (zxcobj.className.match('zxcNoBorder') return;
if (zxcevt.type!='click'){
if (!zxcobj.srtfin) zxcobj.srtfin=[zxcsrt,zxcfin];
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (!zxcoop) zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,'sin',zxctime,zxcborder);
else if (zxcoop.data) zxcAnimator(zxcmde,zxcobj,(zxcobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],(zxcevt.type=='mouseout')?zxcobj.srtfin[0]:zxcobj.srtfin[1],'sin',zxctime);
}
// section for use with div toggle
if (zxcevt.type=='click'&&zxcgrp){
if (!zxcobj.srtfin1) zxcobj.srtfin1=[zxcsrt,zxcfin];
var zxcoop=zxcobj[zxcmde.replace('-','')+'oop'];
if (!zxcoop) zxcAnimator(zxcmde,zxcobj,zxcsrt,zxcfin,'sin',zxctime,zxcborder);
else if (zxcobj.srtfin1) zxcAnimator(zxcmde,zxcobj,(zxcobj.srtfin1[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],(zxcevt.type=='mouseout')?zxcobj.srtfin1[0]:zxcobj.srtfin1[1],'sin',zxctime)
else return;
if (!zxcTBAry[zxcgrp]) zxcTBAry[zxcgrp]=[];
for (var zxc0=0;zxc0<zxcTBAry[zxcgrp].length;zxc0++){
if (zxcTBAry[zxcgrp][zxc0][0]==zxcobj) zxcTBAry[zxcgrp].splice(zxc0,1);
}
zxcTBAry[zxcgrp].push([zxcobj,zxclevel]);
for (var zxc0=1;zxc0<zxcTBAry.length;zxc0++){
if (zxcTBAry[zxc0]){
for (var zxc0a=0;zxc0a<zxcTBAry[zxc0].length;zxc0a++){
if (zxc0!=zxcgrp||(zxcTBAry[zxc0][zxc0a][1]>=zxclevel&&zxcTBAry[zxc0][zxc0a][0]!=zxcobj)){
var zxcnobj=zxcTBAry[zxc0][zxc0a][0];
var zxcoop=zxcnobj[zxcmde.replace('-','')+'oop'];
zxcAnimator(zxcmde,zxcnobj,(zxcnobj.srtfin[0].match('#'))?zxcRGBtoHex(zxcoop.data[2][0],zxcoop.data[2][1],zxcoop.data[2][2]):zxcoop.data[2],zxcsrt,'sin',zxctime)
}
}
}
}
}
// end section for use with div toggle
}


please post an example or the email script implementation as it works for me.

canadianjameson
08-31-2007, 08:17 PM
Hey Vic :)

You're amazing :D

Point 1
No luck with this one. perhaps I implemented it wrong :o
I bolded the changed parts -- and I am changing them in post order, so if you fixed it in a subsequent part then I haven't gotten there yet :)

EDIT I applied the code you forgot for the mirror and still no change :( (just a thought: is the check for the existence of the pageHolder div still needed since we are using includes and not the ajax script? (i don't know i'm just asking)



/*<![CDATA[*/
// By Vic Phillips (22-August-2007) http://www.vicsjavascripts.org.uk


// This function allows onclick/mouseover/mouseout event calls to be added for each
// image pairs(numbered 0 to 6) in links_BW && logoC
// These event calls replace inline event calls.
function zxcEvtCalls(zxcevt){
var zxcp=this.parentNode;
var zxcdivs=zxcp.childNodes;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==this) break;
}
if (zxcp.id=='links_BW'){
zxcMseOverOut(this,zxcevt);
if (zxcevt.type=='click'){
if (zxc0==0){ location.href='infoInclude.php'; email('info'); }
if (zxc0==1){ location.href='YPPInclude.php'; email('YPP'); }
if (zxc0==2){ location.href='socialInclude.php'; email('social'); }
if (zxc0==3){ location.href='medicalInclude.php'; email('medical'); }
if (zxc0==4){ location.href='legalInclude.php'; email('legal'); }
if (zxc0==5){ location.href='J2KInclude.php'; email('j2000'); }
if (zxc0==6){ location.href='streetworkInclude.php'; email('streetwork'); }
}
else if (zxcevt.type=='mouseover'){
if (zxc0==0){ on1();
}
if (zxc0==1){ on2();
}
if (zxc0==2){ on3();
}
if (zxc0==3){ on4();
}
if (zxc0==4){ on5();
}
if (zxc0==5){ on6();
}
if (zxc0==6){ on7();
}
}
else if (zxcevt.type=='mouseout'){
if (zxc0==0){ off1();
}
if (zxc0==1){ off2();
}
if (zxc0==2){ off3();
}
if (zxc0==3){ off4();
}
if (zxc0==4){ off5();
}
if (zxc0==5){ off6();
}
if (zxc0==6){ off7();
}
}
}
if (zxcp.id=='logoC'){
if (zxcevt.type=='click'){
if (zxc0==0){
}
if (zxc0==1){
}
if (zxc0==2){
}
if (zxc0==3){
}
if (zxc0==4){
}
if (zxc0==5){
}
if (zxc0==6){
}
}
else if (zxcevt.type=='mouseover'){
if (zxc0==0){
}
if (zxc0==1){
}
if (zxc0==2){
}
if (zxc0==3){
}
if (zxc0==4){
}
if (zxc0==5){
}
if (zxc0==6){
}
}
else if (zxcevt.type=='mouseout'){
if (zxc0==0){
}
if (zxc0==1){
}
if (zxc0==2){
}
if (zxc0==3){
}
if (zxc0==4){
}
if (zxc0==5){
}
if (zxc0==6){
}
}
}
}
function zxcInitImages(zxcid1,zxcid2){
var zxcp1=document.getElementById(zxcid1);
var zxcp2=document.getElementById(zxcid2);
zxcES(zxcp2,{cursor:(document.all)?'hand':'pointer'});
zxcNoTxtNodes(zxcp1);
zxcNoTxtNodes(zxcp2);
var zxcimgs1=zxcp1.getElementsByTagName('IMG');
var zxcimgs2=zxcp2.getElementsByTagName('IMG');
zxcp2.mirror=[];
zxcp2.ary=[];
for (var zxc1=0;zxc1<zxcimgs1.length;zxc1++) zxcp2.mirror[zxc1]=[zxcimgs1[zxc1],zxcimgs2[zxc1],zxcES('DIV',{position:'absolute',left:(zxcimgs1[zxc1].offsetLeft)+'px',top:zxcimgs1[zxc1].offsetTop+'px',width:zxcimgs1[zxc1].width+'px',height:zxcimgs1[zxc1].height+'px',border:'solid black 0px'},zxcp1)];
for (var zxc3=0;zxc3<zxcimgs2.length;zxc3++) zxcp2.ary[zxc3]=[zxcimgs2[zxc3],zxcimgs1[zxc3],zxcES('DIV',{position:'absolute',left:(zxcimgs2[zxc3].offsetLeft)+'px',top:zxcimgs2[zxc3].offsetTop+'px',width:zxcimgs2[zxc3].width+'px',height:zxcimgs2[zxc3].height+'px',border:'solid black 0px'},zxcp2)];
for (var zxc2=0;zxc2<zxcp2.mirror.length;zxc2++){
zxcES(zxcp2.mirror[zxc2][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.mirror[zxc2][2]);
var zxcdiv=zxcES(zxcp2.mirror[zxc2][2].cloneNode(false),{left:'0px',top:'0px'},zxcp2.mirror[zxc2][2])
zxcES(zxcp2.mirror[zxc2][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
zxcAddEvt(zxcp2.mirror[zxc2][2],'zxcEvtCalls','mouseover');
zxcAddEvt(zxcp2.mirror[zxc2][2],'zxcEvtCalls','mouseout');
zxcAddEvt(zxcp2.mirror[zxc2][2],'zxcEvtCalls','click');
}
for (var zxc4=0;zxc4<zxcp2.ary.length;zxc4++){
zxcES(zxcp2.ary[zxc4][0],{position:'absolute',zIndex:'2',left:'0px',top:'0px'},zxcp2.ary[zxc4][2]);
var zxcdiv=zxcES(zxcp2.ary[zxc4][2].cloneNode(false),{position:'absolute',zIndex:'1',left:'0px',top:'0px'},zxcp2.ary[zxc4][2])
zxcES(zxcp2.ary[zxc4][1].cloneNode(false),{position:'absolute',left:'0px',top:'0px'},zxcdiv);
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcEvtCalls','mouseover');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcEvtCalls','mouseout');
zxcAddEvt(zxcp2.ary[zxc4][2],'zxcEvtCalls','click');
}
zxcp2.hold=null;
zxcp2.holdmirror=null;
}

function zxcMseOverOut(zxcobj,zxcevt){
var zxcp=zxcobj.parentNode;
var zxcdivs=zxcp.childNodes;
for (var zxc0=0;zxc0<zxcdivs.length;zxc0++){
if (zxcdivs[zxc0]==zxcobj) break;
}
if (zxcevt.type=='click'){
if (zxcp.hold&&zxcp.hold!=zxcobj) zxcFadeDo(zxcp.hold,'mouseout');
zxcp.hold=zxcobj;
if (zxcp.holdmirror) zxcFadeDo(zxcp.holdmirror,'mouseout');
zxcp.holdmirror=zxcp.mirror[zxc0][2];
zxcFadeDo(zxcp.holdmirror,'mouseover');
}
else if (zxcobj!=zxcp.hold){
zxcFadeDo(zxcobj,zxcevt.type);
// zxcFadeDo(zxcp.mirror[zxc0][2],zxcevt.type); // add horizontal onmouseover fade
}
}

function zxcResetImages(zxcid2){
var zxcp=document.getElementById(zxcid2);
zxcp.hold=null;
if (zxcp.ary){
for (var zxc0=0;zxc0<zxcp.ary.length;zxc0++){
if (zxcp.mirror[zxc0][2].oop){
if (zxcp.mirror[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.mirror[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.mirror[zxc0][2])) zxcES(zxcp.mirror[zxc0][2].childNodes[0],{zIndex:'2'});
if (zxcp.ary[zxc0][2].oop){
if (zxcp.ary[zxc0][2].oop.inc>0) zxcFadeDo(zxcp.ary[zxc0][2],'mouseout');
}
if (!zxcCkOpactiy(zxcp.ary[zxc0][2])) zxcES(zxcp.ary[zxc0][2].childNodes[0],{zIndex:'2'});
}
}
}

function zxcFadeDo(zxcobj,zxcmde){
if (!zxcCkOpactiy(zxcobj)) zxcES(zxcobj.childNodes[0],{zIndex:(zxcevt.type=='mouseover')?'0':'2'});
if (!zxcobj.oop) zxcobj.oop=new zxcFadeOOP(zxcobj);
clearTimeout(zxcobj.oop.to);
zxcobj.oop.ud=(zxcmde=='mouseover')?2:-2; // adjust speed here
if (zxcobj.oop.ud<0&&zxcobj.oop.inc<50) zxcobj.oop.cont();
else zxcobj.oop.swap();
}

function zxcCkOpactiy(zxcobj){
if (zxcobj.style.MozOpacity!=null&&zxcobj.style.opacity!=null&&zxcobj.style.filter!=null&&zxcobj.KHTMLOpacity!=null) return false;
return true;
}

var zxcOOPCnt=0;

function zxcFadeOOP(zxcobj,zxcident){
this.to=null;
this.ref='oop'+zxcOOPCnt++;
window[this.ref]=this;
this.obj=zxcobj.childNodes[1];
zxcES(zxcobj.childNodes[0],{zIndex:'0'});
this.ud=0;
this.inc=0;
this.opacity(0);
}

zxcFadeOOP.prototype.swap=function(){
if ((this.ud>0&&this.inc<=100-this.ud)||(this.ud<0&&this.inc>=0-this.ud)){
this.opacity(this.inc+=this.ud);
this.setTimeOut('swap()',10);
}
}

zxcFadeOOP.prototype.cont=function(){
if ((this.ud<0&&this.inc<50)||(this.ud>0&&this.inc>0)){ // change the '50' to change the min-fade delay
this.opacity(this.inc-=this.ud);
this.setTimeOut('cont()',10);
}
else if (this.ud<0&&this.inc>0){
this.ud=-this.ud
this.setTimeOut('cont()',10);
}
}

zxcFadeOOP.prototype.opacity=function(zxcopc){
if (zxcopc<0||zxcopc>100) return;
if (this.obj.style.MozOpacity!=null) this.obj.style.MozOpacity=(zxcopc/100)-.001;
else if (this.obj.style.opacity!=null) this.obj.style.opacity=(zxcopc/100)-.001;
else if (this.obj.style.filter!=null) this.obj.style.filter='alpha(opacity='+zxcopc+')';
else if (this.obj.KHTMLOpacity!=null) this.obj.KHTMLOpacity=(zxcopc/100)-.001;
}

zxcFadeOOP.prototype.setTimeOut=function(zxcf,zxcd){
this.to=setTimeout('window.'+this.ref+'.'+zxcf,zxcd);
}

var zxcEvt=0;

function zxcES(zxcele,zxcstyle,zxcp,zxctxt){
if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
if (zxcp){ zxcp.appendChild(zxcele); }
if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
return zxcele;
}

function zxcNoTxtNodes(zxcp){
var zxcclds=zxcp.childNodes,zxcary=[];
for (var zxca=0;zxca<zxcclds.length;zxca++){ if (zxcclds[zxca].nodeType!=1) zxcary.push(zxcclds[zxca]); }
for (var zxcb=0;zxcb<zxcary.length;zxcb++){ zxcp.removeChild(zxcary[zxcb]); }
return zxcclds;
}

function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}

function zxcAddEvt(zxc,zxcfun,zxcevt){
zxc['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxcEventAdd(zxc,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}
function zxcWatchDog(){
if (document.getElementById('pageHolder')) zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px');
else setTimeout('zxcWatchDog()',20);
}
// call this function as the last onload event call
function zxcInitPage(){
var zxcloc=window.location.toString().split('?');
if (zxcloc.length!=3) return;
if (zxcloc[1]=='BW'){
var zxcp=document.getElementById('links_BW');
zxcp.hold=zxcp.childNodes(parseInt(zxcloc[2]));
zxcFadeDo(zxcp.hold,'mouseover');
zxcp.holdmirror=zxcp.mirror[zxcloc[2]][2];
zxcFadeDo(zxcp.holdmirror,'mouseover');
}
}
/*]]>*/

on every page
<body onload="zxcGetCookieValue('navcontainer'); zxcInitImages('logoC','links_BW'); zxcNavHelper(); zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px'); zxcInitPage()">

Perhaps it is a problem of the var zxcloc=window.location.toString().split('?'); part, as the actual url is longer than just the something.php part

www.enviromark.ca/head/indexInclude.php

canadianjameson
08-31-2007, 09:06 PM
point 2

It works, but not exactly as needed :o

www.enviromark.ca/head/indexInclude.php

it works for the 5 seconds if the page stays the same, but as with Point 1 the effect isn't transferred to subsequent pages... so when a link is clicked the nav_helper appears again.

I modified the script slightly: if a user clicks a button before the 5 seconds is up, it sets zxcLok=true; -- so that it wont pop up. you can probably code it more efficiently, but I thought I would try none the less :)

// will hide the 'nav_helper' if there is two ? in the location and unlock the mouseover fade after 5 sec --> this means that every time a link is clicked it adds a '?' to the script, and if there is more than one '?' it does not display the script? Good thinking :):D


<!--
/*<![CDATA[*/

var zxcLok=true;

// will hide the 'nav_helper' if there is two ? in the location and unlock the mouseover fade after 5 sec
function zxcNavHelper(){
var zxcnh=document.getElementById('nav_helper');
var zxcloc=window.location.toString().split('?');
if (zxcloc.length>1) zxcnh.style.visibility='hidden';
setTimeout('zxcLok=false;',5000);
}

// execute from a mouseover event, will only work after 5 sec
function zxcOnce(zxcid){
if (!zxcLok){
zxcAnimator('opacity',zxcid,100,0,'linear',1000);
zxcLok=true;
}
}

function zxcOnceClick(zxcid){
zxcLok=true;
}


/*]]>*/
//-->



<div id="bottomText"><img src="/head/images/logoButtons/bottom_text.gif"></div>
<img src="/head/images/logoButtons/titles/blank_title.gif" id="blank_title" name="title_display">
<div id="links_BW" onclick="mClear(); zxcOnceClick('nav_helper')" onmouseover="zxcOnce('nav_helper')">
<img name="infoButton" src="/head/images/logoButtons/info_BW.gif">
<img name="YPPButton" src="/head/images/logoButtons/YPP_BW.gif">
<img name="socialButton" src="/head/images/logoButtons/social_BW.gif">
<img name="healthButton" src="/head/images/logoButtons/health_BW.gif">
<img name="legalButton" src="/head/images/logoButtons/legal_BW.gif">
<img name="J2KButton" src="/head/images/logoButtons/J2K_BW.gif">
<img name="streetworkButton" src="/head/images/logoButtons/streetwork_BW.gif">
</div>
<img src="/head/images/nav_helper.jpg" id="nav_helper">




<body onload="zxcGetCookieValue('navcontainer'); zxcInitImages('logoC','links_BW'); zxcNavHelper(); zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px'); zxcInitPage()">

canadianjameson
08-31-2007, 09:30 PM
Point about the border

because zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px') is applied to every 'A' within pageHolder, I wanted a way to tell the script 'do not apply the border to X link within pageHolder; this is why now if i have <a class="zxcNoBorder" href=...> the zxcBorder will not be applied to it.

I fixed a minor error -- missing ')' on line 42 and all is well

{SWEET, IT WORKS!} :D

canadianjameson
08-31-2007, 09:59 PM
for the email script:

I figured out what was wrong --- it was an error on my end :)

vwphillips
08-31-2007, 10:52 PM
seem to have lost contact with my site

please try the zip

all links use the same page but different ?

see what location is displayed in Show0 (the ? bit should change and activate the required images)

Uploaded it now, see

http://www.vicsjavascripts.org.uk/Demos/070824C.htm

canadianjameson
09-03-2007, 06:41 PM
Hi Vic,

I'm having trouble with something:

The way you coded the script indicates that you want me to put all of the different pages in the main .htm file and then use the div toggler to display them instead of using server-side includes... is this what you had in mind, or did i mis-understand?

did you want me to do this:


zxcMseOverOut(this,zxcevt);
if (zxcevt.type=='click'){ // replace 070824C.htm with the required URLs
if (zxc0==0){ location.href='infoInclude.php?BW?0'; email('info'); }
if (zxc0==1){ location.href='YPPInclude.php?BW?1'; email('YPP'); }
if (zxc0==2){ location.href='socialInclude.php?BW?2'; email('social'); }
if (zxc0==3){ location.href='medicalInclude.php?BW?3'; email('medical'); }
if (zxc0==4){ location.href='legalInclude.php?BW?4'; email('legal'); }
if (zxc0==5){ location.href='J2KInclude.php?BW?5'; email('j2000'); }
if (zxc0==6){ location.href='streetworkInclude.php?BW?6'; email('streetwork'); }
}

or this:


if (zxcp.id=='links_BW'){
zxcMseOverOut(this,zxcevt);
if (zxcevt.type=='click'){ // replace 070824C.htm with the required URLs
if (zxc0==0){ zxcToggle('Info',1,0)?BW?0; email('info'); }
if (zxc0==1){ zxcToggle('YPP',2,0)?BW?1; email('YPP'); }
if (zxc0==2){ zxcToggle('Social',3,0)?BW?2; email('social'); }
if (zxc0==3){ zxcToggle('Medical',4,0)?BW?3; email('medical'); }
if (zxc0==4){ zxcToggle('Legal',5,0)?BW?4; email('legal'); }
if (zxc0==5){ zxcToggle('J2K',6,0)?BW?5; email('j2000'); }
if (zxc0==6){ zxcToggle('Streetwork',7,0)?BW?6; email('streetwork'); }
}

vwphillips
09-03-2007, 10:28 PM
zxcMseOverOut(this,zxcevt);
if (zxcevt.type=='click'){ // replace 070824C.htm with the required URLs
if (zxc0==0){ location.href='infoInclude.php?BW?0'; email('info'); }
if (zxc0==1){ location.href='YPPInclude.php?BW?1'; email('YPP'); }
if (zxc0==2){ location.href='socialInclude.php?BW?2'; email('social'); }
if (zxc0==3){ location.href='medicalInclude.php?BW?3'; email('medical'); }
if (zxc0==4){ location.href='legalInclude.php?BW?4'; email('legal'); }
if (zxc0==5){ location.href='J2KInclude.php?BW?5'; email('j2000'); }
if (zxc0==6){ location.href='streetworkInclude.php?BW?6'; email('streetwork'); }
}

is what it is intended

I just had one html file for concept and debug

canadianjameson
09-03-2007, 11:27 PM
Hey Vic,

I implemented it as you did (except I used external .js) and i get the error (in Firebug) document.Show has no properties on line 195 of FadeImages.js

Maybe it's something i'm doing? www.enviromark.ca/head/indexInclude.php

I attached all of the files in a .zip -- a quick find & replace with absolute paths will make it functional without me needing to attach the files :) www.enviromark.ca/head/files.zip

Sorry about this... i think we almost have it :)

vwphillips
09-04-2007, 12:32 AM
in your link you have not changed the urls
replace 070824C.htm with the required URLs

document.Show is a debug tool, if I leave these in please remove them.

You have removed the required form was in the link I provided. I left the debug tools in so you could see what was going on.

I will look at the zip tomorrow I hope but have things going on.

canadianjameson
09-04-2007, 02:23 AM
Hey Vic,

I believe that if you hitm refresh you will see the updated links. I'm, sure i did it :o

I will handle the document.show problem; sorry for that, but it's good to know for next time:)

I will be updating content in the mean time, so if you cant get to it early, thats fine.

Thanks again :)

Jay

p.s: I had to go back to the other version of the border-fading script because the one you just used in your zip was giving me the srtfin errors again. Oh, and it doesn't work on the first-level menus in IE, but it does in FF (check www.enviromark.ca/head/YPPInclude.php in both browsers and click 'Info' -- sometime the border-bottom works, other times the border top... any ideas on why it works in IE and not FF?)

canadianjameson
09-05-2007, 06:42 PM
Hey Vic,

I fixed one of my own little bugs:



if (zxcevt.type=='click'){
if (zxc0==0){ location.href='infoInclude.php?0'; email('info'); }
if (zxc0==1){ location.href='YPPInclude.php?1'; email('YPP'); }
if (zxc0==2){ location.href='socialInclude.php?2'; email('social'); }
if (zxc0==3){ location.href='medicalInclude.php?3'; email('medical'); }
if (zxc0==4){ location.href='legalInclude.php?4'; email('legal'); }
if (zxc0==5){ location.href='J2KInclude.php?5'; email('j2000'); }
if (zxc0==6){ location.href='streetworkInclude.php?6'; email('streetwork'); }
}

Now the nav_helper hides... although whenever a new link is pressed the image displays for a second and then hides (i'm guessing the image is rendered before the script can set it's properties to 'hidden'.

I was thinking, to avoid this could we change the script to alter the source of the image from /head/images/nav_helper_blank.jpg (http://www.enviromark.ca/head/images/nav_helper_blank.jpg) to /head/images/nav_helper.jpg (http://www.enviromark.ca/head/images/nav_helper.jpg) if there is no ? in the title.

Would that work?

I still can't get the buttons to fade / stay faded when a link is clicked though :( www.enviromark.ca/head/indexInclude.php

What did i do wrong?

vwphillips
09-11-2007, 11:50 PM
I have been attempting to work through the files in the zip you posted

Quite a job!

url referencing is all over the place and a number of redundant files.

If you zip the corrected files it will give me a chance.

canadianjameson
09-11-2007, 11:57 PM
Hi Vic,

I'll do that right now :)

Stay tuned :)

canadianjameson
09-12-2007, 12:13 AM
Okay, I have stripped out everything I could while giving you a 100% functional copy of the entire site. The zip is located at www.enviromark.ca/head/full.zip and is ~2.2megs.

It is the most current version of everything and can be seen on the server at www.enviromark.ca/head/index.php

in my next post (comming in a few mins) I will give a point form list of the few last things that need fixing (i'm basically repeating myself but clearer)

Thanks again Vic :)

canadianjameson
09-12-2007, 12:50 AM
Thank you again for all of your help :)


When a user clicks a button on the left side, it no longer stays faded when the page reloads
I think the easiest way around this, because each page now has it's own URL, is to simply use an onload function
This can be done by having

onload:
keep the button on the left nav faded in, and make it's mirror on the top fade out
I don't know if it is possible, if not it's okay, but if the left vertical button was only (for ex: ) 60% faded in when it was clicked, it should continue to fade from that point when page loads (it will look good)... else if the page is loaded directly (ex: from bookmark), it should fade in from 0%)

I have an idea for how to fix the right_nav problem that would not require cookies at all. you can ignore that altogether, i'll handle it by setting link individual classes on the pages themselves instead of passing the arguments across page. I just realized how easy that would be :D
the Nav_Helper problem:
I think we can get around this by having the initial image hidden, and IF the url does NOT have a '?' in it, THEN it gets unhidden (instead of now where it flickers and disappears on every page). What do you think?
The border-Top does not work on first-level menus in IE, I can't quite figure out why
you had given me the ability to set class="zxcNoBorder" about three weeks ago but remember in your last code post that function was removed. Could you make sure that I can do that? I will come in very handy when I want a border-fade on every link on a page except for ones within a certain div (or on a particular link)
if possible, can you have a look at posts #9 and #12 here
(http://www.codingforums.com/showthread.php?t=123055)... I've asked several people over the past week an nobody seems to be able to figure it out (I already posted once in the JS forums)
When the page initially loads, the top mirror seems to move... I'm guessing this is because some positioning between my css and your script are conflicting. I don't mind how it is done, but can we eliminate that?


Those are the major ones for now, and I can't really foresee any big problems after that :) Just minor tweaks.

Thanks a million times over :D

p.s: my CSS is total crap! lol, i have to streamline it a lot, so i'm sorry about that

canadianjameson
09-12-2007, 04:05 PM
Hi Vic,

I'm going to add one small bug I just discovered to the list. It will be a quick fix, i'm sure :D (or i'm doing something wrong, lol)


When new page is opened, I wanted to automatically toggle the first link on that page (not a problem). I also wanted to automatically add the border-Top to that link onload (also, not a problem). The problem is that that border-Top is not removed from the initial link when other links are clicked.
You can see it here: www.enviromark.ca/head/YPP.php --> click any other link on the page


the code I used to do this was (in bold -- see long onload statement)


...
<body onload="zxcGetCookieValue('navcontainer'); zxcInitImages('logoC','links_BW'); zxcNavHelper(); zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px'); zxcToggle('mainPointsYPP',1,0); zxcBorder('border-Top','YPPDefault',1000,'#FFFFFF','#0000A0','solid #0000A0 1px',1,0); zxcToggle('eligibilityYPP',1,1); zxcBorder('border-Top','YPPDefault2',1000,'#FFFFFF','#006633','solid #006633 1px',1,1); email('YPP'); zxcInitPage()">
<div id="pageContainer">
<!--#include file="includes/topBar.htm" -->
<? include("includes/topBar.htm"); ?>
<!--#include file="includes/leftNav.htm" -->
<? include("includes/leftNav.htm"); ?>
<div class="clear"></div>
<!--#include file="includes/rightNav.htm" -->
<? include("includes/rightNav.htm"); ?>
<div id="contentarea">
<div id="pageHolder">
<div id="linksYPP">
<a href="#mainPointsYPP" id="YPPDefault" onclick="zxcToggle('mainPointsYPP',1,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#0000A0','solid #0000A0 1px',1,0); return false">Info</a>
<a href="#commentsYPP" onclick="zxcToggle('commentsYPP',2,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#0000A0','solid #0000A0 1px',2,0); return false">Comments</a>
<a href="#slideshowYPP" onclick="zxcToggle('slideshowYPP',3,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#0000A0','solid #0000A0 1px',3,0); P7_killShow(); P7_SSMinit(1,1,1,1,0,1,1,1,5); P7_SSMopenPanel('p7SSMthmb',0); return false">Slide Show</a>
<a href="#whenWhereYPP" onclick="zxcToggle('whenWhereYPP',4,0); zxcBorder('border-Top',this,1000,'#FFFFFF','#0000A0','solid #0000A0 1px',4,0); return false">Location and Hours</a>
</div>
<div id="mainPointsYPP" class="listYPP" >
<div class="centerLinks">
<a href="#eligibilityYPP" id="YPPDefault2" onclick="zxcToggle('eligibilityYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#006633','solid #006633 1px',1,1); return false">About Us</a>
<a href="#programYPP" onclick="zxcToggle('programYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#006633','solid #006633 1px',1,1); return false">The Program</a>
<a href="#childcareYPP" onclick="zxcToggle('childcareYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#006633','solid #006633 1px',1,1); return false">Childcare</a>
<a href="#timeOffYPP" onclick="zxcToggle('timeOffYPP',1,1); zxcBorder('border-Top',this,1000,'#FFFFFF','#006633','solid #006633 1px',1,1); return false">"Time Off For Mum"</a>
</div>
<ul id="eligibilityYPP">
<li>The Young Parents Program is a place for parents or pregnant women under the age of 25 to meet and connect with other parents in a friendly, casual, and inviting atmosphere.</li>
<li>Parents not only get to unwind, but they can share their hopes, fears, and problems with like-minded people in similar situations.</li>
</ul>
...


Thanks Vic, and sorry for adding another one :)
p.s: If there is another way I can do this that wouldn't be complicating, I'm up for that too (whatever is easiest for you :)

canadianjameson
09-17-2007, 03:22 PM
Hey Vic... have you had a chance to look at this yet?

vwphillips
09-17-2007, 03:40 PM
Sorry Jay but I've been having trouble facing this after slogging though the files in you first zip.

I will try and have a look this evening using you latest zip.

canadianjameson
09-17-2007, 03:47 PM
Hi Vic,

I'm sorry that what I gave you somewhat messy... but by all means ask me if you have any questions about anything i've done -- my goal is to make your life as easy as possible.

I appreciate your help -- again, anything, just ask :)

also if it's easier: dont use my files and I can just troubleshoot through what you give me. It might make the process a bit longer but it should make your head hurt less

vwphillips
09-17-2007, 07:29 PM
I have used .htm pages and border-Left rather than border-Top
demo index.htm and info.htm and new JSs are in the zip.
why are you still calling DynamicAjaxContent.js & js/setCookie.js and other redundant scripts.

please list outstanding issues

canadianjameson
09-19-2007, 05:55 PM
Vic This Is AMAZING!

Thank you! Thank you so much for revisiting this with me :)

I have a few outstanding things to ask, but apart from that we are looking good! :D:D



function zxcInitBorder(zxcid){
var zxcobj=document.getElementById(zxcid);
zxcBorder('border-Left','infoDefault',1000,'#FFFFFF','#0000A0','solid #0000A0 1px',1,0);
zxcTBAry[1]=[];
zxcTBAry[1].push([document.getElementById('infoDefault'),0]);


}
This is good, however it seems that you have hardcoded the 'infoDefault' into the script (above), who is giving me problems when i change (for ex: ) zxcInitBorder('infoDefault') to zxcInitBorder('anythingElse') :) (basically info.php is the only page that displays a border-Left)
-
It may be related to the above problem, but on most pages (except info.php) i get the onload error
"zxcobj has no properties"
if (zxcobj.className.match('zxcNoBorder')) return;
see www.enviromark.ca/head/social.php for ex:
-
I was wondering how I would link from one page to another? on index.php (http://www.enviromark.ca/head/index.php) I have a link in the main text called "Sense Project". I tried to do this:
<a href="medical.php?zxcToggle('senseMedical')">Sense Project</a> but it didn't work as expected, and even if it had worked the zxcInitBorder() would have applied a border to the wrong link. Is there any way to do this so that IF a link is opened this way that it overwrites the zxcToggle and zxcInitBorder that is set in the Init() function?


There are a few others but i think they may be related to these, so we'll fix these and if they're still present I'll address them then :)

Thanks again :D:D

vwphillips
09-20-2007, 10:03 AM
the id of the default link is passed the the InitBorder function which should read


function zxcInitBorder(zxcid){
var zxcobj=document.getElementById(zxcid);
zxcBorder('border-Left',zxcid,1000,'#FFFFFF','#0000A0','solid #0000A0 1px',1,0);
zxcTBAry[1]=[];
zxcTBAry[1].push([document.getElementById(zxcid),0]);


}

canadianjameson
09-20-2007, 04:41 PM
Perfect :) Thanks Vic, I knew it would be simple :)

How can we address the issue of linking between pages within the site itself (aka if I have a link on index.php in the text that needs to open about.php and toggle a particular div?



I was wondering how I would link from one page to another? on index.php (http://www.enviromark.ca/head/index.php) I have a link in the main text called "Sense Project". I tried to do this:
<a href="medical.php?zxcToggle('senseMedical')">Sense Project</a> but it didn't work as expected, and even if it had worked the zxcInitBorder() would have applied a border to the wrong link. Is there any way to do this so that IF a link is opened this way that it overwrites the zxcToggle and zxcInitBorder that is set in the Init() function?


I have an idea as to how to do this, but I'll elaborate tonight (class is starting). I think we need to call a .js file from the Init() instead of having zxcToggle and zxcBorderInit called onload. This file would have a condition of "if data is being passed from another page (i.e: <a href="medical.php?zxcToggle('senseMedical')">), the toggle that, if not go with the hardcoded zxcToggle and zxcBorderInit from the onload

I'lll try to explain clearer later, but do you understand what I'm trying to do?

vwphillips
09-20-2007, 05:25 PM
<a href="info.htm?BW?0">Sense Project</a>


I have linked to 'info.htm' as its the only page I have tested.

canadianjameson
09-20-2007, 10:01 PM
That works, but then how would I open the link, toggle the right div, and add the border-Left?

for example, using only the index and info pages... say that I had this on the index page


... if you want to use one of our services come check out <a href="info.htm?BW?0">Where we are</a>.

What I would want to do is transfer the user from index.htm to info.htm, toggle the appropriate div (id="whereWhenInfo"), and apply the border-Left to that link to show it as open (i would have to give it an ID, which i havent yet)

currently the zxcToggle and zxcBorderInit() are set in the Init() function... but wouldnt they overwrite anything I passed via the link

like

<a href="info.htm?BW?0?zxcToggle('whenWhereInfo')?zxcBorder...">Sense Project</a>

vwphillips
09-20-2007, 10:43 PM
the query string can be coded to establish the conditions for all major element blocks

currently it controls

links_BW

now you need control of

linksInfo


This needs to be planned, are the any other blocks that will need to be controlled?

canadianjameson
09-21-2007, 03:29 AM
Hey Vic,

From where I am sitting there are really only two elements that need to be controllable across pages -- zxcToggle, and zxcBorder. These are the only two function that indicate where a person is on a given page.

These two functions are currently called onload, via Init(), which poses a confliction problem. If they are set to a default parameter onload via Init(), then how can we override that IF they are called from a link? (ie:
<a href="info.htm?BW?0?zxcToggle('whenWhereInfo')?zxcBorder...">Sense Project</a>

The only way I see this happening is if instead of doing
<a href="info.htm?BW?0?zxcToggle('whenWhereInfo')?zxcBorder...">Sense Project</a> we did


<a href="info.htm?onloadCall('sense')">Sense Project</a>

and somehow told the script that if 'sense', override the Init() values for zxcToggle and zxcInitBorder, and use the ones specified in the 'sense' part of the onloadCall() function.

I'm sorry, I wish I could explain it better :( part of me sees it clearly in my head, and part of me doesnt want to annoy you by confusing you with my petty attempts at understanding your genius :o

canadianjameson
09-21-2007, 05:06 PM
Hey Vic,

The page is looking great! :) We've come so far -- Thank you :thumbsup:

I think you'll be proud of me! I was about to ask you how to do something and then I decided to try and modify the code myself! and it worked! (well, 95%)

I added this


function zxcInitBorder(zxcid){
var zxcobj=document.getElementById(zxcid);
zxcBorder('border-Top',zxcid,1000,'#FFFFFF','#0000A0','solid #0000A0 1px',1,0);
zxcTBAry[1]=[];
zxcTBAry[1].push([document.getElementById(zxcid),0]);


}

function zxcInitBorder2(zxcid){
var zxcobj=document.getElementById(zxcid);
zxcBorder('border-Top','YPPDefault2',1000,'#FFFFFF','#006633','solid #006633 1px',1,1);
zxcTBAry[2]=[];
zxcTBAry[2].push([document.getElementById(zxcid),1]);


}

and called it here


<!--

function Init(){
zxcInitImages('logoC','links_BW');
zxcNavHelper();
zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px');
zxcToggle('mainPointsYPP',1,0);
zxcToggle('eligibilityYPP',1,1);
email('YPP');
zxcInitPage();
zxcInitBorder('YPPDefault');
zxcInitBorder2('YPPDefault2');
}
//-->

to allow me to toggle and apply the border to two links onload :):) (see www.enviromark.ca/head/YPP.php)

However there is one small glitch (probably my doing, lol) -- once the page has opened and zxcBorder is applied to the first and second level links, if you click on another first-level link (ex: Comments), and then click Info again... the border-Top never again applies to the link specified in zxcInitBorder2('YPPDefault2'); (which is the 'about us' link)

Any idea why? I probably didnt modify the script properly :(

canadianjameson
09-24-2007, 05:59 PM
Hey Vic,

Have you had a chance to look at the remaining aspects? We're down to just a few bugs remaining and the launch is set for early Oct. (it was pushed back a bit to let me get the scripts working optimally

canadianjameson
09-26-2007, 04:07 PM
Hey vic,

can you add this to zxcInitBorderGrp() please?


if (zxcobj.className.match('zxcNoBorder')) return;

i tried but failed.

it's needed for situations like this:
www.enviromark.ca/head/YPP.php --> slideshow --> onmouseover any of the controls.

vwphillips
09-27-2007, 10:09 AM
// The zxcInitPage function
// call this function as the last onload event call
// the url ? string controls the 'links_BW' and 'linksInfo'
// e.g. ?1?1
// the first ? controls the 'links_BW' images (from 1 to 7)
// the second ? controls the 'linksInfo' Left-Border and section toggle (from 1 to n)


I will need to look at

if (zxcobj.className.match('zxcNoBorder')) return;

later

Edit not sure I have the latest InitPage in the zip

use


// The zxcInitPage function
// call this function as the last onload event call
// the url ? string controls the 'links_BW' and 'linksInfo'
// e.g. ?1?1
// the first ? controls the 'links_BW' images (from 1 to 7)
// the second ? controls the 'linksInfo' Left-Border and section toggle (from 1 to n)

function zxcInitPage(){
var zxcbw=document.getElementById('links_BW');
var zxcli=document.getElementById('linksInfo');
var zxcloc=window.location.toString();
zxcloc=zxcloc.split('?');
var zxcbwnu=parseInt(zxcloc[1]);
var zxclinu=parseInt(zxcloc[2])||1;
if (zxcbw&&zxcbwnu){
if (zxcbw.ary[zxcbwnu-1]){
zxcbw.hold=zxcbw.ary[zxcbwnu-1][2];
zxcFadeDo(zxcbw.hold,'mouseover');
zxcbw.holdmirror=zxcbw.mirror[zxcbwnu-1][2];
zxcFadeDo(zxcbw.holdmirror,'mouseover');
}
}
if (zxcli&&zxclinu){
if (linksInfoAry[zxclinu]) zxcToggle(linksInfoAry[zxclinu],zxclinu,0);
var zxcbobj=zxcli.getElementsByTagName('A')[zxclinu-1];
if (zxcbobj){
zxcBorder('border-Left',zxcbobj,1000,'#FFFFFF','#0000A0','solid #0000A0 1px',1,0);
zxcTBAry[zxclinu]=[];
zxcTBAry[zxclinu].push([zxcbobj,0]);
}
}
}

canadianjameson
09-28-2007, 06:05 PM
Hey Vic :)

This is great!

Can we by any chance change var zxcli=document.getElementById('linksInfo'); to a variable name that I can set on a per-page basis... because right now it only works for linksInfo :(

P.S: VIC YOU're a genius! you fixed the re-appearing nav_helper problem AND the fade bumb!! :D:D:)!

p.p.s: I set the links in the "rightNav.htm" file to this (so that they didn't cause images 1-7 to fade in onload) :


<a href="http://www.canadahelps.org/CharityProfilePage.aspx?CharityID=d41880" id="donateButton" target="_blank"><img src="/head/images/donate.gif" alt="Donate Now Through CanadaHelps.org!"></a>
<div id="navcontainer" onclick="zxcResetImages('links_BW'); zxcOnceClick('nav_helper')">
<ul id="navlist">
<li><a href="about.php?0" id="aboutRightNav" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this)">About Us</a></li>
<li><a id="media" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Media / Press</a></li>
<li><a href="getInvolved.php?0" id="getInvolvedRightNav" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Get Involved</a></li>
<li><a href="support.php?0" id="supportRightNav" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Donations</a></li>
<li><a href="http://headandhands.ca/forum/" id="forums" class="default" target="_blank" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Forums</a></li>
<li><a href="links.php?0" id="linksRightNav" class="default" onmouseover="mOver(this)" onmouseout="mOut(this)" onclick="mClick(this);">Links</a></li>
</ul>
</div>
<div id="emailSection"></div>
<img src="/head/images/staff/blankPhoto.jpg" name="staffPhoto" id="staffPhoto">

I was wondering if you could have ?0 call the function zxcResetImages(zxcid2)?? I think it would look good :):)

vwphillips
09-29-2007, 09:21 AM
// The zxcInitPage function
// call this function as the last onload event call
// the url ? string controls the 'links_BW' and 'linksInfo'
// e.g. ?1?1
// the first ? controls the 'links_BW' images (from 1 to 7, 0 = all inactive)
// the second ? controls the 'linksInfo' Left-Border and section toggle (from 1 to n, see the note in the code for var zxclinu)
// the third ? controls the 'navlist' links (from 1 to 6, 0 = all inactive)

//

function zxcInitPage(){
var zxcbw=document.getElementById('links_BW');
var zxcli=document.getElementById('linksInfo');
var zxcnl=document.getElementById('navlist');
var zxcloc=window.location.toString();
// var zxcloc='about.htm?0?0?1'; // to test/debug
zxcloc=zxcloc.split('?');
var zxcbwnu=parseInt(zxcloc[1]);
var zxclinu=parseInt(zxcloc[2])||1; // the ||1 defaults to the first link, remove this if it is a problem
var zxcnlnu=parseInt(zxcloc[3]);
if (zxcbw&&zxcbwnu){
if (zxcbw.ary[zxcbwnu-1]){
zxcbw.hold=zxcbw.ary[zxcbwnu-1][2];
zxcFadeDo(zxcbw.hold,'mouseover');
zxcbw.holdmirror=zxcbw.mirror[zxcbwnu-1][2];
zxcFadeDo(zxcbw.holdmirror,'mouseover');
}
}
if (zxcli&&zxclinu){
if (linksInfoAry[zxclinu]) zxcToggle(linksInfoAry[zxclinu],zxclinu,0);
var zxcbobj=zxcli.getElementsByTagName('A')[zxclinu-1];
if (zxcbobj){
zxcBorder('border-Left',zxcbobj,1000,'#FFFFFF','#0000A0','solid #0000A0 1px',1,0);
zxcTBAry[zxclinu]=[];
zxcTBAry[zxclinu].push([zxcbobj,0]);
}
}
if (zxcnl&&zxcnlnu){
var zxcnlobj=zxcnl.getElementsByTagName('A')[zxclinu-1];
if (zxcnlobj){
zxcnlobj.className='mDown';
LastID=zxcnlobj.id;
}
}
}



call zxcInitPage() from the onload event

vwphillips
09-29-2007, 09:37 AM
As far as I can see the 'zxcNoBorder' class name prevents the border fade

The inhibit is in function 'zxcBorder' for some reason, but I guess this makes some sense as it prevents all fades.

canadianjameson
09-30-2007, 03:05 AM
As far as I can see the 'zxcNoBorder' class name prevents the border fade

The inhibit is in function 'zxcBorder' for some reason, but I guess this makes some sense as it prevents all fades.

The problem seems to be that I am applying the class to a div, not an individual object. for ex:

I am doing:


<div id="slideshowYPP" class="zxcNoBorder">
....
</div>

but it doesn't seem to work. see www.enviromark.ca/head/YPP.php --> slideshow (onmouseover the top controls)

edit:

I added the proper div ID's to linksInfoAry (like so:

var linksInfoAry=['infoLegal','clinicsLegal','educationLegal','whoForLegal','workshopObjectivesLegal'] but i now get the onload error zxcevt has no properties borderFade.js line 31

a small bug, or did i implement it wrong?

http://www.enviromark.ca/head/legal.php?5?1

i wasn't sure if you wanted me to include every link in the linksInfoAry, or if you just wanted the 'main level' links (ex: onclick="zxcToggle('educationLegal',3,0); is a main level link, but zxcToggle('whoForLegal',3,1); is a sub-level link)

vwphillips
09-30-2007, 10:04 PM
re www.enviromark.ca/head/YPP.php

vwphillips
09-30-2007, 10:18 PM
the legal page

zxcInitBorder is now redundant and using the amended code in the previous post.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Head &amp; Hands - Legal Services</title>
<!--#include file="includes/head.htm" -->
<link rel="stylesheet" href="css/main.css" type="text/css">
<link rel="stylesheet" href="css/rightNav.css" type="text/css">
<script type="text/javascript" src="js/nav_helper.js"></script>
<script type="text/javascript" src="js/Toggle.js"></script>

<script type="text/javascript" src="js/link_titles.js"></script>
<script type="text/javascript" src="js/rightNav_switcher.js"></script>
<script type="text/javascript" src="js/effects/FadeImages.js"></script>
<script type="text/javascript" src="js/effects/Animator.js"></script>
<script type="text/javascript" src="js/effects/BorderFade.js"></script>
<script type="text/javascript" src="js/individualEmails.js"></script>

<script type="text/javascript" src="js/effects/InitPageEvents.js"></script>

<link rel="stylesheet" href="css/legal.css" type="text/css">

<script language="JavaScript" type="text/javascript">
<!--

// an array containing the ids of content area sections
var linksInfoAry=['infoLegal','clinicsLegal','educationLegal','whoForLegal','workshopObjectivesLegal']

function Init(){
zxcInitBorderGrp('pageHolder','border-Bottom','A',1000,2000,'#FFFFFF','#000000','solid #000000 1px');
zxcInitPage('?0?1?0');
}
//-->
</script>

</head>

<body onload="Init()">
<div id="pageContainer">
<div id="pageHolder">
<div id="mainLinks" style="position:relative;left:100px;">
<a href="#infoLegal" id="legalDefault" onclick="zxcToggle('infoLegal',1,0); zxcBorder('border-Left',this,1000,'#FFFFFF','#0000A0','solid #0000A0 1px',1,0); return false;">Legal Services</a>
<a href="#clinicsLegal" onclick="zxcToggle('clinicsLegal',2,0); zxcBorder('border-Left',this,1000,'#FFFFFF','#0000A0','solid #0000A0 1px',2,0); return false">Clinics</a>

<a href="#educationLegal" onclick="zxcToggle('educationLegal',3,0); zxcBorder('border-Left',this,1000,'#FFFFFF','#0000A0','solid #0000A0 1px',3,0); return false">Legal Education</a>
</div>
<ul id="infoLegal">
<li>Knowing where to find the answer to everything can be very hard. If you are between the ages of 12 and 25 and have questions concerning your rights and responsibilities, our Legal Coordinator can help you make sense of a variety of legal related issues.</li>
<li>With the help of our Legal Coordinator, you should be able to make sense of any legal situation after a phone call and/or a few meetings. The Legal Coordinator is also available to go to court with you so as to take the time to explain the process and tell you what's going on. </li>
<li>If you have questions on legal topics such as work law, divorce law, discrimination, tenant-law, your rights when on the metro, how to get out of debt or how to contest a ticket, don't hesitate to get in touch with us! The Legal Coordinator is there to help you!</li>
</ul>


<ul id="clinicsLegal">
<li>People older than 25 can take advantage of advice provided by more than a dozen volunteer lawyers. The clinics last a half hour each. We ask people to make a minimum donation of $20 that goes towards legal services that we offer youth. A tax receipt can be issued for deduction purposes. Give us a call to make an appointment.</li>
</ul>

<div id="educationLegal">
<ul>
<li>Legal Education is a longstanding tradition at Head & Hands. Our interventions are based on based on prevention among youth and empowerment so youth may decide and act for themselves. The workshops of the Legal Education program are geared towards helping youth make informed decisions based on an awareness of their legal rights and civic obligations as well as of the consequences of their actions. </li>
<li>All of these topics are presented in a clear and concrete manner in an atmosphere conducive to a direct exchange with our target population.</li>

<li>We can either meet at Head & Hands or somewhere else more convenient for you. Our services are bilingual.The topics covered in these workshops are varied. Don't hesitate to give our legal coordinator H&eacute;lène a call for more information: 514 481-0277.</li>
</ul>
<br>
<div class="centerLinks">
<a href="#whoForLegal" onclick="zxcToggle('whoForLegal',3,1); zxcBorder('border-Left',this,1000,'#FFFFFF','#006633','solid #006633 1px',10,0); return false">Who are these workshops for?</a>
<a href="#workshopObjectivesLegal" onclick="zxcToggle('workshopObjectivesLegal',3,1); zxcBorder('border-Left',this,1000,'#FFFFFF','#006633','solid #006633 1px',10,0); return false">Objectives of the legal education workshops</a>

</div>
</div>
<br>
<div id="whoForLegal">
The legal education workshops are geared towards youth, and more specifically those in the following three categories:
<ul>
<li>youth attending secondary-level schools</li>
<li>youth involved in community groups on the island of Montreal</li>

<li>youth attending CEGEP or college</li>
</ul>
</div>
<ul id="workshopObjectivesLegal">
<li>To provide youth with relevant information regarding important topics that concern them</li>
<li>To give youth the opportunity to ask questions and receive clear and concise answers</li>
<li>To provide resources and reference tools when needed</li>

</ul>
</div>
</div>
</body>
</html>

canadianjameson
10-08-2007, 10:51 PM
Hey Vic,

Sorry for the absence, I have been completely overwhelmed with school the past week or so. I will get this up and running and give you a shout as soon as it is up



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum