Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts

    popup code for multiple divs

    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?

    Code:
    <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>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    Code:
    popup = document.getElementById("news");
    you only ask for news to be displayed

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

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New Coder
    Join Date
    Mar 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    ok so, how can i get the other div to display?

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    look at the link I posted

    edit nesting 'block elements(<div>) iin an inline element(<span>) is not recommended.
    Last edited by vwphillips; 05-31-2006 at 08:45 PM.
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #5
    New Coder
    Join Date
    Mar 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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")
    }

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,518
    Thanks
    3
    Thanked 506 Times in 493 Posts
    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###);"
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #7
    New Coder
    Join Date
    Mar 2006
    Posts
    31
    Thanks
    0
    Thanked 0 Times in 0 Posts
    THANK YOU! This code totally works...

    Quote Originally Posted by vwphillips
    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###);"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •