Fog Creek Software
Discussion Board




Knowledge Base
Documentation
Terry's Tips
Darren's Tips

Analyzing the actual citydesk-root (inc. solution)

How can i get dynamically the absolut path of the citydesk-root (localized citydesk-root)?

-------------------------------------------------
Examples:

=> file:///c:/temp/CITYDESK_-1881423/ <= citydesk-root

or if u work with multiple languages:

=> file:///c:/temp/CITYDESK_-1881423/German/ <= citydesk-root

or if u publish ur website on the subdirectory of a cd for ex:

=> file:///c:/mycd/mydoc/German/ <= citydesk-root

or if u publish multiple websites on ONE webserver

=> http://www.mysrv.com/German/ <= citydesk-root

aso ...
-------------------------------------------------

the problem is that citydesk defines no variables for languages and template-families and the statement for defining absolut pathes doesn't inludes this infos!

it looks like a funny question but you have to solve this problem for example by every javascripted menu with dynamically changed pictures defined in ONE CENTRAL JAVASCRIPT.

normaly in citydesk all links will be defined relative and changed dynamically by publishing. but the problem is that a relative definition works only from the actual look of a page but not if u have to define something on a global place. here u'll need absolut pathes!

citydesk has the possibillity to declare all links/pathes of a page as absolut when u use the statement "withAbsoluteLinks" at the start of a page but this will not be the right solution here cause it doesn't include infos about the path of the language and/or template-family! but this is required if u have to handle multiple languages or if u like to publish ur website on a cd-subdirectory!

citydesk means u have to define for problems like this multiple templates with manually defined roots but in my eyes is this a unprofessional and stupid rooky way and doesn't work if u have to handle multiple localized roots on ONE webserver!

a little bit more intelligent will be the following javascript-solution with a mix of citydesk-variables / statements.

========================================================================

1. Put the following js-function in a central javascript-file in your website: (my example is in the file "/res/js/main.js", with magic name "PTMFOG0000000087.js")

------------------------------------------------------------------------
//*** get the (localized) root of the actual document ***
function getMyRoot(){
  if (myAbsLink == null)
      return null;

  var t = location.href;
  var i = t.indexOf(myAbsLink, 0);
  if (i < 0)
      return null;
     
  t = t.substring(0, i);
  return t;
}
------------------------------------------------------------------------

This function will always return dynamically the complete and actual citydesk-root, example:

=> file:///c:/temp/CITYDESK_-1881423/German/ <= citydesk-root

Doesn't matter in which webpage u will call this function. To be able to do this ...

2. Add the following js-statements in your template of the webpage which will show the js-menu.

------------------------------------------------------------------------
<head>
...

</script><script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
  var myAbsLink = "{$.absLink$}";
//-->//]]>
</script>
<script language="JavaScript" src="PTMFOG0000000087.js" type="text/javascript">
</script><script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
  ImageLoad();
//-->//]]>
</script>

...
</head>
------------------------------------------------------------------------

Here we define a global variable "myAbsLink" which will be filled by citydesk with the actual complete path for every webpage and is required in the js-function "getMyRoot()". Then we include our js-file with his "magic name" and at least we call the js-function "ImageLoad()" to preload all pictures of the menu. (then all menu-pictures will already be loaded when the webpage with the js-menu will be shown)

Now we add the citydesk-statement "withAbsoluteLinks" at the beginning of your js-file in which we will define the js-menu and pre-load all pictures with the corrected path:

------------------------------------------------------------------------
{$ withAbsoluteLinks "/" $}

var imgMnuItem0 = null;
var imgMnuItem1 = null;

...

//*** pre-load of all pics ***
function ImageLoad(){
  if (document.images == null)
      return true;

  var r = getMyRoot(); // * HERE WE GET THE CITYDESK-ROOT-PATH! *
  if (r == null)
      r = "/";
 
  //*** Button: MenuItem (MouseOut) ***
  if (imgMnuItem0 == null){
      imgMnuItem0 = new Image();
      imgMnuItem0.src = r + "PTMFOG0000000109.gif";
  }  // * HERE WE ADD THE CITYDESK-ROOT TO THE PATH OF THE 1st GLOBAL IMAGE! *

  //*** Button: MenuItem (MouseOver) ***
  if (imgMnuItem1 == null){
      imgMnuItem1 = new Image();
      imgMnuItem1.src = r + "PTMFOG0000000110.gif";
  }  // * HERE WE ADD THE CITYDESK-ROOT TO THE PATH OF THE 2nd GLOBAL IMAGE! *

...
}


//*** eventhandling: changing the button-pics ***
function ButtonOut(PicName){
  if (document.images == null)
      return true;

  PicOut = eval(PicName + "0.src");
  document [PicName].src = PicOut;
}

function ButtonOver(PicName){
  if (document.images == null)
      return true;

  PicOver = eval(PicName + "1.src");
  document [PicName].src = PicOver;
}
------------------------------------------------------------------------

The pictures for the js-menu does exist in my example under:

=> "/res/img/menu/item0.gif" (for mouseover)
  (with magic-name = "PTMFOG0000000109.gif")

=> "/res/img/menu/item1.gif" (for mouseout)
  (with magic-name = "PTMFOG0000000110.gif")

At least we can include our js-code for the mouse-events which will show the right pictures if we move the mouse over the menuitem.

Include in your template: (by the graphical definition of your menu)

------------------------------------------------------------------------
<html>
...

<a href="aaa" onmouseover="ButtonOver('imgMnuItem');" onmouseout="ButtonOut('imgMnuItem');"><img id="imgMnuItem" name="imgMnuItem" alt="" src="PTMFOG0000000109.gif" border="0" /></a>

<!-- ATTENTION --->
<!-- name="imgMnuItem" is required by MSIE/OPERA --->
<!-- id="imgMnuItem" is required for correct HTML4.01/XHTML1.0 --->

<!-- ATTENTION --->
<!-- In XHTML all tags are case-sensitive and the standard-tags have to be lowercase! --->
<!-- So, don't write "onMouseOver" cause it's wrong! --->

...
</html>
------------------------------------------------------------------------

With this solution u will be able to define all pictures of the js-menu in citydesk with magic names in one global file which can be called from every webpage doesn't matter where it is.

A complete example u will find on my website "http://www.jaxid.com" when it's ready.

And in future releases of citydesk i hope there will be included variables for language / template-families or citydesk will include this infos in the absolute path by itselfe so we get a solution for browsers without support for javascript!

hope to help and
cu all
oliver schwerttner
(www.jaxid.com)

Oliver Schwerttner
Monday, May 10, 2004

*  Recent Topics

*  Fog Creek Home