I need help with my Dhtml/Javascript Menu. Please :)

[tetzloff]

Hello Everyone,

Let me get straight to it. I am using the dhtml menu that is located on dynamic drive. It is the Dhtml Drop down menu. Here is a link to the page I am working on for reference.

http://thebrandartist.thestudioproje.../v1.3/main.php

What I need to be able to do it have the last menu item child, "Life" align to the right of the menu instead of the left like it does normally. I know this should be easy, but I am new to javascript and desperately need some help from all of you. First I e-mailed the creator of the script, and since Im am new to this scripting I couldnt get it right.


Here is what the creator replied.

The position of the menu is set by this line in at_show_aux function:
c.style.left       = left+'px';

You can change it like this:
c.style.left       = (left-100)+'px';
This will shift menu to the left. 

To know which menu to shift, you can check ids:
if (p.id = "<parent menu id>") ...

That does align them the opposite direction when I simplely replace those two lines of code. But what I need is for the last menu item only to align the opposite way, and I cannot figure out the if statement that I would need to be able to accomplish this.


The div id of the Life menu parent is: life_parent



Here is the actual javascript code for the menus:

<script>

function at_display(x)
{
  win = window.open();
  for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}

// ----- Show Aux -----

function at_show_aux(parent, child)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child);

  var top  = (c["at_position"] == "y") ? p.offsetHeight+0 : 0;
  var left = (c["at_position"] == "x") ? p.offsetWidth +0 : 0;
  
  for (; p; p = p.offsetParent)
  {
    top  += p.offsetTop;
    left += p.offsetLeft;
  }
  
  c.style.position    = "absolute";
  c.style.top         = top +'px';
  c.style.left         = left +'px';
  c.style.visibility   = "visible";

}



// ----- Show -----

function at_show()
{
  p = document.getElementById(this["at_parent"]);
  c = document.getElementById(this["at_child" ]);

  at_show_aux(p.id, c.id);

  clearTimeout(c["at_timeout"]);
}

// ----- Hide -----

function at_hide()
{
  c = document.getElementById(this["at_child"]);

  c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 30);
}

// ----- Click -----

function at_click()
{
  p = document.getElementById(this["at_parent"]);
  c = document.getElementById(this["at_child" ]);

  if (c.style.visibility != "visible") at_show_aux(p.id, c.id);
  else c.style.visibility = "hidden";

  return false;
}

// ----- Attach -----

// PARAMETERS:
// parent   - id of visible html element
// child    - id of invisible html element that will be dropdowned
// showtype - "click" = you should click the parent to show/hide the child
//            "hover" = you should place the mouse over the parent to show
//                      the child
// position - "x" = the child is displayed to the right of the parent
//            "y" = the child is displayed below the parent
// cursor   - Omit to use default cursor or check any CSS manual for possible
//            values of this field

function at_attach(parent, child, showtype, position, cursor)
{
  p = document.getElementById(parent);
  c = document.getElementById(child);

  p["at_parent"]     = p.id;
  c["at_parent"]     = p.id;
  p["at_child"]      = c.id;
  c["at_child"]      = c.id;
  p["at_position"]   = position;
  c["at_position"]   = position;

  c.style.position   = "absolute";
  c.style.visibility = "hidden";

  if (cursor != undefined) p.style.cursor = cursor;

  switch (showtype)
  {
    case "click":
      p.onclick     = at_click;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
    case "hover":
      p.onmouseover = at_show;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
  }
}

Thank you everyone in advance. I appreciate any help that can be given.

-Tyler

[jscheuer1]

  c.style.position    = "absolute";
  c.style.top         = top +'px';
  c.style.left         = left +'px';
  if (p.id == "<parent menu id>")
  c.style.left       = (left-100)+'px';
  c.style.visibility   = "visible";

Where <parent menu id> is the actual id of the menu in question.

If that gives you a jumpy effect, use:

  c.style.position    = "absolute";
  c.style.top         = top +'px';
  if (p.id == "<parent menu id>")
  c.style.left       = (left-100)+'px';
  else
  c.style.left         = left +'px';
  c.style.visibility   = "visible";

[tetzloff]

thanks for the quick post jscheuer1, but unfortunately that did not work. any other suggestions?

[ddadmin]

Warning: For future reference, please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

[jscheuer1]

thanks for the quick post jscheuer1, but unfortunately that did not work. any other suggestions?

Did you give the menu an id and insert it into the code where the author and I indicated? If so, the id may need to be applied to the menu trigger or to the 'parent'. To determine this , I will need to go through all the files involved so -

Are you sure you applied and used the correct id in both the script and in the markup?

[jscheuer1]

Hmm, I got bored so I looked into this in detail anyway. Turns out the author was off by a few lines, here is an updated copy of the script with the necessary changes (highlighted red):

// <script>

// Copyright (C) 2005 Ilya S. Lyubinskiy. All rights reserved.
// Technical support: http://www.php-development.ru/
//
// YOU MAY NOT
// (1) Remove or modify this copyright notice.
// (2) Distribute this code, any part or any modified version of it.
//     Instead, you can link to the homepage of this code:
//     http://www.php-development.ru/javascripts/smart-forms.php.
//
// YOU MAY
// (1) Use this code on your website.
// (2) Use this code as a part of another product provided that
//     its main use is not creating javascript menus.
//
// NO WARRANTY
// This code is provided "as is" without warranty of any kind, either
// expressed or implied, including, but not limited to, the implied warranties
// of merchantability and fitness for a particular purpose. You expressly
// acknowledge and agree that use of this code is at your own risk.

// If you find my script useful, you can support my site in the following ways:
// 1. Vote for the script at HotScripts.com (you can do it on my site)
// 2. Link to the homepage of this script or to the homepage of my site:
//    http://www.php-development.ru/javascripts/smart-forms.php
//    http://www.php-development.ru/
//    You will get 50% commission on all orders made by your referrals.
//    More information can be found here:
//    http://www.php-development.ru/affiliates.php


// ----- Popup Control ---------------------------------------------------------

function at_display(x)
{
  win = window.open();
  for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}

// ----- Show Aux -----

function at_show_aux(parent, child)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child);

  var top  = (c["at_position"] == "y") ? p.offsetHeight+0 : 0;
  var left = (c["at_position"] == "x") ? p.offsetWidth +0 : 0;

  for (; p; p = p.offsetParent)
  {
    top  += p.offsetTop;
    left += p.offsetLeft;
      if (p.id == "life_parent")
          left += p.offsetLeft-100;
  }

  c.style.position    = "absolute";
  c.style.top         = top +'px';
  c.style.left         = left +'px';
  c.style.visibility   = "visible";
}

// ----- Show -----

function at_show()
{
  p = document.getElementById(this["at_parent"]);
  c = document.getElementById(this["at_child" ]);

  at_show_aux(p.id, c.id);

  clearTimeout(c["at_timeout"]);
}

// ----- Hide -----

function at_hide()
{
  c = document.getElementById(this["at_child"]);

  c["at_timeout"] = setTimeout("document.getElementById('"+c.id+"').style.visibility = 'hidden'", 30);
}

// ----- Click -----

function at_click()
{
  p = document.getElementById(this["at_parent"]);
  c = document.getElementById(this["at_child" ]);

  if (c.style.visibility != "visible") at_show_aux(p.id, c.id);
  else c.style.visibility = "hidden";

  return false;
}

// ----- Attach -----

// PARAMETERS:
// parent   - id of visible html element
// child    - id of invisible html element that will be dropdowned
// showtype - "click" = you should click the parent to show/hide the child
//            "hover" = you should place the mouse over the parent to show
//                      the child
// position - "x" = the child is displayed to the right of the parent
//            "y" = the child is displayed below the parent
// cursor   - Omit to use default cursor or check any CSS manual for possible
//            values of this field

function at_attach(parent, child, showtype, position, cursor)
{
  p = document.getElementById(parent);
  c = document.getElementById(child);

  p["at_parent"]     = p.id;
  c["at_parent"]     = p.id;
  p["at_child"]      = c.id;
  c["at_child"]      = c.id;
  p["at_position"]   = position;
  c["at_position"]   = position;

  c.style.position   = "absolute";
  c.style.visibility = "hidden";

  if (cursor != undefined) p.style.cursor = cursor;

  switch (showtype)
  {
    case "click":
      p.onclick     = at_click;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
    case "hover":
      p.onmouseover = at_show;
      p.onmouseout  = at_hide;
      c.onmouseover = at_show;
      c.onmouseout  = at_hide;
      break;
  }
}

[tetzloff]

Jscheuer1,

Thank you for all of your help. That worked like a charm. I guess from the begining I was kinda on the right track. I was trying to put the If statement in the wrong place the whole time.. I was putting it in the c.style section instead of the p.offset section.. Thank you so very much for looking in to this for me... I'm learning...

-Tyler

DD is the best!

[jscheuer1]

Thank you and, you shouldn't be too hard on yourself. If what you quoted in your first message is what the author told you to do, the author was a bit off - an easy thing to happen if you haven't worked with a script, even your own script, in awhile.