Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Objects/variables 1

Status
Not open for further replies.
smurfhell

smurfhell

MIS
Nov 5, 2004
45
US
I have a printer map page with layers (div) that are associated to specific printers.
For example:
Code: 
<div style="position: absolute; left: 300px; top: 86px; width: 34px; height: 25px; z-index: 1; background-color:#FFFFFF" id="c5180">
	<img border=0 src="images/printer.gif" onMouseover="dropdownmenu(this, event, printer0, '165px')" onMouseout="delayhidemenu()">
</div>
Printer0 (called in the dropdownmenu function) references:
Code: 
var printer0=new Array()
printer0[0]=p0
printer0[1]='<a href="pslink">Map PS Printer</a>'
printer0[2]='<a href="pclink">Map PCL Printer</a>'
and p0 is a variable that is the name of the printer.

Currently, I have typep a new array for each printer, and I just change the printer0 variable to printer1,2,3,etc.

Rather than retype the links in my <div> tags, can I just retrieve the ID from the tag and store the info in a variable.

I don't know anything about Java, just enough to incorporate pre-built functions into my pages.

Here is an example of what my code currently looks like:
Code: 
<head>
<script type="text/javascript">
var p3="HP 4050-NOVA";
var p4="HP 4250-ENG";

var printer3=new Array()
printer3[0]=p3
printer3[1]='<a href="4050-NOVA link">Map Printer</a>'

var printer4=new Array()
printer4[0]=p4
printer4[1]='<a href="4250-ENG link">Map Printer</a>'
</script>
</head>

<body>
<div style="position: absolute; left: 697px; top: 149px; width: 16px; height: 7px; z-index: 4; background-color:#FFFFFF" id="hp4050nova">
	<img border=0 src="images/printer.gif" onMouseover="dropdownmenu(this, event, printer3, '165px')" onMouseout="delayhidemenu()">
</div>

<div style="position: absolute; left: 227px; top: 149px; width: 15px; height: 16px; z-index: 5; background-color:#FFFFFF" id="hp4250">
	<img border=0 src="images/printer.gif" onMouseover="dropdownmenu(this, event, printer4, '165px')" onMouseout="delayhidemenu()">
</div>
 
Sort by date Sort by votes
Rather than retype the links in my <div> tags, can I just retrieve the ID from the tag and store the info in a variable.
Click to expand...

Yes, your dropdownmenu is passing a reference to the image object that is being hovered over. Use that reference to find the parent div. Since you have not supplied the code for your dropdownmenu function, I will assume that this reference is named obj.

Code: 
function dropdownmenu(obj, e, p, px) {
   alert(obj.parentNode.id);
   //rest of your code here
}

-kaht

 
Upvote 0 Downvote
That helps and gets me a bit closer. Thank you.

Here is the dropdown function:

Code: 
function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

Now I'm trying to figure out how to put all of this together to work.
Would I rename my variables to correspond to the <div> id? If I do that, it seems like I'd still need to change something else because "menucontents" in the function is what's actually referenced to display the correct info for each link.

Oh, and here is the populatemenu function:
Code: 
function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
 
Upvote 0 Downvote
So far I've tried:

Remove "menucontents" from the function and substitute populatemenu(menucontents) with populatemenu(obj.parentNode.id)

Add newmenu=obj.parentNode.id; populatemenu(newmenu)

I might've tried a few other configurations, but I keep getting errors on the page (Object doesn't support this property or method)

What am I missing? In VBScript, sometimes you have to convert strings into actual text - do I need to convert the output of obj.parentNode.id to text?
 
Upvote 0 Downvote
To make things easier, I will upload the full code I am using.

When something is passed to the dropdownmenu (obj, e, menucontents, menuwidth) function in the menucontents position, it refences the array defined in the head of my webpage i.e.

Code: 
<head>
<script>
var printer3=new Array()
printer3[0]=HP Printer
printer3[1]='<a href="4050-NOVA link">Map Printer</a>'
</script>
<body>
<div id="PRINTER3">
<img onmouseover="dropdownmenu(this, event, printer3, '165px')>
</div>
(I have capitalized the div ID to make it easier to reference in my explanation - in my code, it is identical to what is called in the function)

If you alert(printer3), you will get the full array returned. However, if I substitute printer3 with parentNode.id (also PRINTER3), the text "PRINTER3" is all that is returned.

I'm stuck on trying to capture the ID and pass it to the function so that it returns the contents of the arrays.
Again, I don't know Javascript, so that's why I'm struggling so much with this. If you could at least tell me what to research, that would be a good starting point, but it would also be nice if someone could just post the correct code.
 
 http://mail.barghausen.com/files/menu.js
Upvote 0 Downvote
I'm stuck on trying to capture the ID and pass it to the function so that it returns the contents of the arrays.
Click to expand...

Well, we've already determined how to capture the id and pass it to the function, so all that is left is to use that id to return the content of the arrays. Let's use your last example, using "printer3". Assuming that the id of the div is going to be "printer3" (in lower case), and that by referencing that id we want to use it to pull an array by the same name, try the following code:
Code: 
<head>
<script>
var printer3=new Array()
printer3[0]=HP Printer
printer3[1]='<a href="4050-NOVA link">Map Printer</a>'

function dropdownmenu(obj, e, menucontents, menuwidth){
[!]   var divId = obj.parentNode.id;
   var arrayRef = window[divId];
   alert(arrayRef);[/!]
[gray][i]   //now that we have a reference to the array, I fail to
   //see how you are using it in the rest of the function[/i][/gray]
   if (window.event) event.cancelBubble=true
   else if (e.stopPropagation) e.stopPropagation()
   clearhidemenu()
   dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
   populatemenu(menucontents)
}
</script>
<body>
<div id="printer3">
<img onmouseover="dropdownmenu(this, event, printer3, '165px')>
</div>

-kaht

 
Upvote 0 Downvote
Awesome!

The array reference is used to populate the popup menu.

With your code in place, it would look like this:

Code: 
function dropdownmenu(obj, e, menucontents, menuwidth){
   var divId = obj.parentNode.id;
   var arrayRef = window[divId];
   if (window.event) event.cancelBubble=true
   else if (e.stopPropagation) e.stopPropagation()
   clearhidemenu()
   dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
   populatemenu(arrayRef)
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}

Thanks for all of your help and explanations. I am now slightly smarter in the ways of Javascript, but still pretty close to clueless. Nothing that a little reading and tinkering can't fix.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Chalupabatman
  • Locked
  • Question
JavaScript Variables
Replies
2
Views
71
Chalupabatman
Chalupabatman
twcman
  • Locked
  • Question
Conditionals within jquery mobile variables
Replies
1
Views
53
jpadie
jpadie
pdbowling
  • Locked
  • Question
Passing javascript variables to a function
Replies
2
Views
65
pdbowling
pdbowling
markronz
  • Locked
  • Question
Problems passing variables to javascript 1
Replies
2
Views
64
markronz
markronz
Poseidon1003
  • Locked
  • Question
How to use html variables in javascript function call?
Replies
2
Views
72
Poseidon1003
Poseidon1003

Part and Inventory Search

Sponsor

Back
Top