• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 325
  • Last Modified:

Need to pass mouse or image coordinates to dropdown menu script

I've been browsing the various dropdown  menu scripts that are out there and it seems like almost all of them require some hard coding of coordinates for where the menu starts and ends.  My problem is that I'm trying to get these menus to drop down from links whose coordinates may vary from page to page.  

I'm using the Slide Out Menu by Young Pup and the script calls for a new instance of the menu object for each dropdown menu that needs to be generated.  The new instances are called with this below:

===============================================
     <SCRIPT language=javascript>
          new ypSlideOutMenu("menu1", "down", 280, 50, 300, 800)
          new ypSlideOutMenu("menu2", "down", 280, 50, 300, 800)
          new ypSlideOutMenu("menu3", "down", 280, 50, 300, 800)
     </SCRIPT>
===============================================

The constructor that gets called is below:

===============================================
      function ypSlideOutMenu(id, dir, left, top, width, height)
      {
            this.ie  = document.all ? 1 : 0
            this.ns4 = document.layers ? 1 : 0
            this.dom = document.getElementById ? 1 : 0
                  
            if (this.ie || this.ns4 || this.dom) {
                  this.id                   = id
                  this.dir             = dir
                  this.orientation = dir == "left" || dir == "right" ? "h" : "v"
                  this.dirType       = dir == "right" || dir == "down" ? "-" : "+"
                  this.dim             = this.orientation == "h" ? width : height
                  this.hideTimer       = false
                  this.aniTimer       = false
                  this.open             = false
                  this.over             = false
                  this.startTime       = 0
      
                  // global reference to this object
                  this.gRef = "ypSlideOutMenu_"+id
                  eval(this.gRef+"=this")
      
                  // add this menu object to an internal list of all menus
                  ypSlideOutMenu.Registry[id] = this
      
                  var d = document
                  
                  d.write('<style type="text/css">')
                  d.write('#' + this.id + 'Container { visibility:hidden; ')
                  d.write('left:' + left + 'px; ')
                  d.write('top:' + top + 'px; ')
                  d.write('overflow:hidden; }')
                  d.write('#' + this.id + 'Container, #' + this.id + 'Content { position:absolute; ')
                  d.write('width:' + width + 'px; ')
                  d.write('height:' + height + 'px; ')
                  d.write('clip:rect(0 ' + width + ' ' + height + ' 0); ')
                  d.write('}')
                  d.write('</style>')
      
                  this.load()
            }
      }
===============================================

What I'm trying to do is pass a variable in place of the inputted variable for "left" and "top" to the constructor function.  I'm calling the coordinates for a small spacer image that I'm placing next to the menu items with the following function:

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

function checkXY(name) {
      if(document.images[name].offsetLeft)
      {
            var info[x] = document.images[name].offsetLeft;
            var info[y] = document.images[name].offsetTop;
      }
      else if(document.images[name].x)
      {
            var info[x] = document.images[name].x;
            var info[y] = document.images[name].y;
      }
      return info;
}

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

This function that I'm using to check the image coordinates works, but I just can't get it to pass the variable into the slideout menu functions.  Anytime I touch anything in that script, it breaks.  

At first I tried calling the variables from the initialization point for the new object:
          X = info[x];
          new ypSlideOutMenu("menu1", "down", X, 50, 300, 800)

This just breaks the script.  

I then tried calling the checkXY function from within the constructor function, but that also just breaks the script.  

I'm stumped... can anyone out there help this lost PHP coder?
0
smirking
Asked:
smirking
  • 3
  • 3
1 Solution
 
smirkingAuthor Commented:
BTW, here's a link to the Slide Out Menu Script by Young Pup:
http://simplythebest.net/scripts/DHTML_scripts/dhtml_script_114.html
0
 
hintCommented:
it seems that in your checkXY function, your x and y variables are not defined, thus they might both be setting info[0].

Why don't you create a wrappe for the info class?

e.g.

function Info(x,y) {
  this.x =x;
  this.y=y;
}

so in your checkXY function.

function checkXY(name) {
  var info;
     if(document.images[name].offsetLeft)
     {
        with ( document.images[name]){
           info = new Info(offsetLeft,offsetTop);
        }
     }
     else if(document.images[name].x)
     {
        with ( document.images[name]){
           info = new Info(x,y);
        }
     }
     return info;
}

then pass info.x and info.y to the constructor?

0
 
smirkingAuthor Commented:
Thanks that helped, but I was actually having a greater problem working with the structure of JavaScript so that I could pass those variables to slideout menu object without breaking JavaScript's syntax.  Any code I entered anywhere within the same <SCRIPT> tags as the slideout menu would break the script.  

I've decided that this was too much of a hassle for now and I'm going to move on and do the slideout menus in a future revision of my site.  
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
hintCommented:
Thanks for the points,

But that's quite strange, you should be able to add more scripts to an existing <script> tag, unless the <Script> tag actually includes a src="" attribute. In such case, you should create another tag
0
 
smirkingAuthor Commented:
Thanks for the help.  :)

Yeah, I'm quite puzzled about this one.  The only thing I can tell that's different about the way Young Pup wrote his code is that the functions aren't named.  

The first line of most of the functions look like this:

ypSlideOutMenu.prototype.load = function()

Would that affect the script as a whole?  
0
 
hintCommented:
nope..that shouldn't

Please check that you are adding the functions in the location as shown below

<!-- Author: Aaron aaron@youngpup.net - http://youngpup.net -->
<!-- Permission granted to SimplytheBest.net to feature the script in the DHTML script collection at http://simplythebest.net/scripts/ -->
<SCRIPT language=javascript src="menu_script/ypSlideOutMenus.js"></SCRIPT>
<SCRIPT language=javascript>
function Info(x,y) {
  this.x =x;
  this.y=y;
}

function checkXY(name) {
  var info;
     if(document.images[name].offsetLeft)
     {
        with ( document.images[name]){
           info = new Info(offsetLeft,offsetTop);
        }
     }
     else if(document.images[name].x)
     {
        with ( document.images[name]){
           info = new Info(x,y);
        }
     }
     return info;
}

function init(){
  var menu1Pos  = checkXY("image1");
  var menu2Pos =  checkXY("image2");
  new ypSlideOutMenu("menu1", "up", menu1Pos.x,menu1Pos.y, 300, 800)
  new ypSlideOutMenu("menu2", "left", menu2Pos.x, menu2Pos.y, 300, 800)
}

window.onload=init;

</SCRIPT>
<STYLE type=text/css>
.menuTable   { font-family: arial, helvetica, sans-serif; font-size: 10pt}
.menuLink    { font-size: 8pt; font-family: verdana, helvetica, sans-serif;
               color: #006666; text-decoration: none }
.menuLink:hover { color: #006699; text-decoration: underline }
.menuInsert  { z-index: 200; font-style: normal; font-variant: normal; font-weight: normal;
               line-height: 10pt; font-size: 9pt; font-family: verdana, helvetica, sans-serif;
               width: 140px; color: #888888; height: 80px; background-color: white;
               border: 1px solid #dddddd; margin: 0px;
               padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 15px }
.menuContainer { z-index: 1000 }
</STYLE>
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Introducing Cloud Class® training courses

Tech changes fast. You can learn faster. That’s why we’re bringing professional training courses to Experts Exchange. With a subscription, you can access all the Cloud Class® courses to expand your education, prep for certifications, and get top-notch instructions.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now