[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Need to pass mouse or image coordinates to dropdown menu script

Posted on 2005-04-10
6
Medium Priority
?
323 Views
Last Modified: 2008-02-01
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
Comment
Question by:smirking
  • 3
  • 3
6 Comments
 

Author Comment

by:smirking
ID: 13750773
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
 
LVL 2

Accepted Solution

by:
hint earned 1500 total points
ID: 13751070
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
 

Author Comment

by:smirking
ID: 13780189
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 2

Expert Comment

by:hint
ID: 13780265
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
 

Author Comment

by:smirking
ID: 13782154
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
 
LVL 2

Expert Comment

by:hint
ID: 13787459
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

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question