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 4 of 4
  1. #1
    New Coder
    Join Date
    May 2006
    Posts
    92
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Adjusting a script... Need some help.

    Hi, I'm trying to use this script to popup a text box, however its only designed for one popup. What if I want more?

    http://www.codeproject.com/jscript/transparentpopup.asp

    My idea was to add multiple ids to the javascript code styling, and then create multiple div id's in the body each with different text, however I do not know how to tell a javascript code to style multiple id's rather than just one...

    The code is

    Code:
    <script>
        /* this function shows the pop-up when
         user moves the mouse over the link */
    	 
    	 
        function Show()
        {
            /* get the mouse left position */
            x = event.clientX + document.body.scrollLeft + 20;
            /* get the mouse top position  */
            y = event.clientY + document.body.scrollTop + -35;
            /* display the pop-up */
            Popup.style.display="block";
            /* set the pop-up's left */
            Popup.style.left = x;
            /* set the pop-up's top */
            Popup.style.top = y;
        }
        /* this function hides the pop-up when
         user moves the mouse out of the link */
        function Hide()
        {
            /* hide the pop-up */
            Popup.style.display="none";
        }
    </script>
    What I'd like is something like

    Code:
    	<div id="Popup" class="speech">Some textdiv>
    	<div id="Popup2" class="speech">Different text</div>
    and reflect this in the js script... i.e. instead of

    Popup.style.display="block"; I could use Popup,Popup2.style.display="block";

    BUT that isn't the correct wat to implement this. Anyone know the correct way?

  • #2
    New Coder
    Join Date
    Sep 2006
    Posts
    19
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's no way right. You could set up a function like this.

    PHP Code:
    function setVisible(show) {
       var 
    showblock show?'block':'none';
       
    popup1.style.display showblock;
       
    popup2.style.display showblock;
       
    popup3.style.display showblock;
       
    popup4.style.display showblock;
       
    // so on

    then you can call setVisible(true) or setVisible(false)
    so happy, so cool

    http://coolersport.info

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,534
    Thanks
    3
    Thanked 513 Times in 500 Posts
    or
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function zxcPop(zxcobj,zxcid,zxcxos,zxcyos,zxcopc){
     zxcpop=document.getElementById(zxcid)
     if (zxcopc){ zxcOpacity(zxcpop,zxcopc); }
     zxcpop.style.left=(zxcPos(zxcobj)[0]+(zxcxos||50))+'px';
     zxcpop.style.top=(zxcPos(zxcobj)[1]+(zxcyos||0))+'px';
     zxcpop.style.visibility='visible';
    }
    
    function zxcHide(zxcid){
     document.getElementById(zxcid).style.visibility='hidden';
    }
    
    function zxcOpacity(zxcobj,zxcopc) {
     if (zxcopc<0||zxcopc>100){ return; }
     if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; }
     else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')';	}
     else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; }
    }
    
    function zxcPos(zxcobj){
     zxclft=zxcobj.offsetLeft;
     zxctop=zxcobj.offsetTop;
     while(zxcobj.offsetParent!=null){
      zxcpar=zxcobj.offsetParent;
      zxclft+=zxcpar.offsetLeft;
      zxctop+=zxcpar.offsetTop;
      zxcobj=zxcpar;
     }
     return [zxclft,zxctop];
    }
    
    
    //-->
    </script>
    </head>
    
    <body>
    
    <center>
    <span onmouseover="zxcPop(this,'PopUp1',50,0,50);" onmouseout="zxcHide('PopUp1');">Link1</span>
    <br>
    <br>
    <span onmouseover="zxcPop(this,'PopUp2',-210,-20,90);" onmouseout="zxcHide('PopUp2');">Link2</span>
    
    </center>
    <div id="PopUp1" style="position:absolute;z-index:10;visibility:hidden;width:200px;height:100px;background-color:#FFCC66;" >
    Text PopUp 1
    </div>
    <div id="PopUp2" style="position:absolute;z-index:10;visibility:hidden;width:200px;height:100px;background-color:#FFCC66;" >
    Text PopUp 2
    </div>
    
    </body>
    
    </html>
    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/

  • #4
    New Coder
    Join Date
    May 2006
    Posts
    92
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thank you very much guys -

    vwphillips - Your script doesn't implement the popup moving with the mouse position whilst over the link though does it?

    Isn't there an easy option for grouping like in css where you can do this...


    #div1, #div2,# div3 {}
    Last edited by dommy; 09-06-2006 at 02:45 PM.


  •  

    Posting Permissions

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