We help IT Professionals succeed at work.
Get Started

How do I pass a dynamic DIV ID from php to Javascript?

FourMat
FourMat asked
on
1,014 Views
Last Modified: 2012-06-21
I am trying to create a tooltip popup for some additional descriptions in the product listing in Oscommerce.  I have been able to get the popup description to work, but I haven't figured out how to make it display the different descriptions for each individual product listed on the same page.  I know what I need to do, but I don't know what the proper javascript syntax  should be for passing different Div ID numbers.

What I planned on doing was setting the Div ID equal to the unique product ID number for whatever products the list returns on a search.  But I can't figure out how to properly add a variable DIV ID to the javascript to make it trigger properly.

Here is what I have so far that displays the first statically named DIV in the list:
// The JAVASCRIPT PORTION
 
// Browser safe opacity handling function
 
function setOpacity( value ) {
 document.getElementById("styled_popup").style.opacity = value / 10;
 document.getElementById("styled_popup").style.filter = 'alpha(opacity=' + value * 10 + ')';
}
 
function fadeInMyPopup() {
 for( var i = 0 ; i <= 100 ; i++ )
   setTimeout( 'setOpacity(' + (i / 10) + ')' , 8 * i );
}
 
function fadeOutMyPopup() {
 for( var i = 0 ; i <= 100 ; i++ ) {
   setTimeout( 'setOpacity(' + (10 - i / 10) + ')' , 8 * i );
 }
 
 setTimeout('closeMyPopup()', 800 );
}
 
function closeMyPopup() {
 document.getElementById("styled_popup").style.display = "none"
}
 
function fireMyPopup() {
 setOpacity( 0 );
 document.getElementById("styled_popup").style.display = "block";
 fadeInMyPopup();
}
 
 
 
//THE PHP SECTION I'M CONCERNED WITH
 
case 'MASTER_LIST_DESCRIPTION':
            $lc_align = '';
            $lc_text = '<div id=\'styled_popup\' name=\''. $listing[$x]['products_id'].'\' style=\'width: 380px; height: 300px; display:none; position: absolute; top: 50px; left: 50px; zoom: 1\'>
<table width=\'380\' cellpadding=\'0\' cellspacing=\'0\' border=\'0\'>
<tr>
<td><img height=\'23\' width=\'356\' src=\'media/x11_title.gif\'></td>
<td><a href=\'javascript:fadeOutMyPopup();\'><img height=\'23\' width=\'24\' src=\'media/x11_close.gif\' border=\'0\'></a></td>
</tr>
<tr><td colspan=\'2\' style=\'background: #ffffff; border:1px #000000 solid;\'>
 
'. $listing[$x]['products_spec'].'
 
</td></tr>
</table>
</div>
 
<span onclick="fireMyPopup()">Fire!</span>';
 
 
 
            break;

Open in new window

Comment
Watch Question
IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
This problem has been solved!
Unlock 2 Answers and 12 Comments.
See Answers
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE