...

View Full Version : popup code for multiple divs



bodymoves
05-31-2006, 07:37 PM
im having trouble display more than one div with this code. only the first popup shows eventhough the second has different content. has anyone else run into this problem?




<style type="text/css">
.transparent {
filter:alpha(opacity=90);
-moz-opacity:0.9;
background-color:#F4F4F4;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
display:none;
width:225px;

position:absolute;
color:#333333;
border-width:1px;
border-color:orange;
border-style:solid;
/***{opacity:.95;
filter:alpha(opacity=95);
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=95);

-moz-opacity:.95;
cursor: pointer;}***/

/** border: 1 orange solid; **/
}
</style>


<script type="text/javascript">

var mozilla=document.getElementById && !document.all
var ie=document.all

function iebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function displaymenu(e, x){


popup = document.getElementById("news");


if (mozilla){
popup.style.left=pageXOffset+e.clientX+ 15 + "px"
popup.style.top=pageYOffset+e.clientY+ 10 + "px"
popup.style.display="block"
popup.style.visibility="visible"

return false
}
else if (ie){
popup.style.left=iebody().scrollLeft+event.clientX + 15
popup.style.top=iebody().scrollTop+event.clientY + 10
popup.style.display="block"
popup.style.visibility="visible"
return false
}
}

function hidemenu(){
if (typeof popup!="undefined"){
popup.style.visibility="hidden"
}
}

</script>




<!--<span onMouseOver="displaymenu(event, ###NEWS_UID###);" onMouseOut="hidemenu();" onMouseMove="displaymenu(event, ###NEWS_UID###);">###NEWS_IMAGE###</span>
<span id="###NEWS_UID###" class="transparent">
<span style="background-color: #3366CC; color:white; padding:2px;"><b>###NEWS_TITLE###</b></span>
<span>###NEWS_CONTENT###</span>
</span>-->


<span onMouseOver="displaymenu(event, this);" onMouseOut="hidemenu();" onMouseMove="displaymenu(event, this);"><img src="file:///C|/Documents%20and%20Settings/nicolejones04/Desktop/help.gif" width="20" height="20" align="middle"> <a href="#" style="font-family:Arial, Helvetica, sans-serif; font-size: 11px; text-decoration:none; vertical-align:bottom;">What's This?</a></span>
<span id="news" class="transparent">
<div style="background-color: #3366CC; color:white; padding-top:3px; padding-bottom:3px; padding-left:10px;"><b>Ticket Status</b></div>
<div style="padding:10px;">The <strong>Ticket Status</strong> section of the Unified Request Form display, changes the overall status of the request being viewed. Upon selecting a status and clicking the <strong>Change Status</strong> button, the new status will be saved and an email will automatically be sent notifying all those involved in the request.</div>
</span>
<br><br><br>

<span onMouseOver="displaymenu(event, this);" onMouseOut="hidemenu();" onMouseMove="displaymenu(event, this);"><img src="file:///C|/Documents%20and%20Settings/nicolejones04/Desktop/help.gif" width="20" height="20" align="middle"> <a href="#" style="font-family:Arial, Helvetica, sans-serif; font-size: 11px; text-decoration:none; vertical-align:bottom;">What's This?</a></span>
<span id="news1" class="transparent">
<div style="background-color: #3366CC; color:white; padding-top:3px; padding-bottom:3px; padding-left:10px;"><b>Event Edit</b></div>
<div style="padding:10px;">The <strong>Event Edit</strong> section shows any previously added comments by other users. To add a comment, type in the text box and click the <strong>Add Comment</strong> button. By default, no email is sent out after the addition of a comment. If an email notification is desired select the <strong>Send Email</strong> checkbox and an email will be sent out to all those involved in the request.</div>
</span>

vwphillips
05-31-2006, 08:00 PM
popup = document.getElementById("news");

you only ask for news to be displayed

see
http://www.codingforums.com/showthread.php?t=87673

bodymoves
05-31-2006, 08:25 PM
ok so, how can i get the other div to display?

vwphillips
05-31-2006, 08:28 PM
look at the link I posted

edit nesting 'block elements(<div>) iin an inline element(<span>) is not recommended.

bodymoves
06-01-2006, 02:38 PM
thanks for the link vw but, i'm not sure how your code fits into what i'm trying to do. im guessing that there's a very simple line of code, that i can incorporate in to my existing code but, i just can't figure it out. is it possible to assign different values to the same variable?

for example:

can i do something like this?

if (document.getElementById("news") {

popup = document.getElementById("news")
}

else (document.getElementById("news1") {

popup = document.getElementById("news1")
}

vwphillips
06-01-2006, 03:53 PM
you need to pass the ID name of the tool tip to the function



onMouseOut="hidemenu('news');" onMouseMove="displaymenu(event,'news' ###NEWS_UID###);"

function displaymenu(e, x,id){


popup = document.getElementById(id);


then when you want to news1
onMouseOut="hidemenu('news1');" onMouseMove="displaymenu(event,'news1' ###NEWS_UID###);"

bodymoves
06-01-2006, 04:27 PM
THANK YOU! This code totally works...


you need to pass the ID name of the tool tip to the function



onMouseOut="hidemenu('news');" onMouseMove="displaymenu(event,'news' ###NEWS_UID###);"

function displaymenu(e, x,id){


popup = document.getElementById(id);


then when you want to news1
onMouseOut="hidemenu('news1');" onMouseMove="displaymenu(event,'news1' ###NEWS_UID###);"



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum