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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Nov 2011
    Posts
    138
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Question Why won't my js "tip" show up?

    I'm wondering if there's a conflict with some of my CSS coding here? Or if I just did something wrong.

    http://www.lyricoperala.org/index3.html

    On my calendar, I was trying to put some pop-up "tips" when you mouseover dates with colored boxes behind them (performance dates), but the effect isn't showing up for me (I'm using FireFox and haven't checked in other browsers yet).

    Any ideas what I did wrong?

    Thanks in advance.

    ~Laura

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <link href="http://www.lyricoperala.org/style.css" rel="stylesheet" type="text/css" />
    <link href="http://www.lyricoperala.org/layout.css" rel="stylesheet" type="text/css" />
    <link href="http://www.lyricoperala.org/webfontkit/stylesheet.css" rel="stylesheet" type="text/css" />
    <SCRIPT TYPE="text/javascript">
    <!--
    
    //Pop up information box II (Mike McGrath (mike_mcgrath@lineone.net,  http://website.lineone.net/~mike_mcgrath))
    //Permission granted to Dynamicdrive.com to include script in archive
    //For this and 100's more DHTML scripts, visit http://dynamicdrive.com
    
    var Xoffset=-60;    // modify these values to ...
    var Yoffset= 20;    // change the popup position.
    var xy;
    
    
    
    function popup(msg,bak){
     var obj=document.getElementById("skin")
     var content="<TABLE  WIDTH=150 BORDER=1 BORDERCOLOR=black CELLPADDING=2 CELLSPACING=0 "+
     "BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=black SIZE=2>"+msg+"</FONT></TD></TABLE>";
     obj.innerHTML=content;
     obj.style.display='block';
     obj.style.left=xy[0]+Xoffset+'px';
     obj.style.top=xy[1]+Yoffset+'px';
    }
    
    function mse(e){
      if (window.event){
       var e=window.event,docs=[document.body.scrollLeft,document.body.scrollTop];
       if (!document.body.scrollTop){
        docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
       }
       xy=[e.clientX+docs[0],e.clientY+docs[1]];
      }
      else {
       xy=[e.pageX,e.pageY];
      }
     }
    
    
    function kill(){
     document.getElementById("skin").style.display='none';
    }
    
    document.onmousemove=function(event){ mse(event);  }
    
    //-->
    </script>
    
    </head>
    
    <body>
            <div class="col-2">
              <h3><b>U</b>p <b>N</b>ext</h3>
              <div class="carousel"> <a href="#" class="prev"></a> <a href="#" class="next"></a>
                <ul>
                  <li>
                    <dl class="list">
    
                      <dd class="first"><strong><b>January</b> 2012</strong></dd>
                      <dd class="title"><b>S</b><b>m</b><b>t</b><b>w</b><b>t</b><b>f</b><b>s</b></dd>
                      <dd><em>&nbsp;</em><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a></dd>
    
                      <dd><em>&nbsp;</em><a href="#">8</a><a href="#">9</a><a href="#">10</a><a href="#">11</a><a href="telephone.html" class="act1" ONMOUSEOVER="popup('Preview Performance. 1/2-price tickets.  7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">12</a><a href="telephone.html" class="act1" ONMOUSEOVER="popup('Preview Performance. 1/2-price tickets.  7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">13</a><a href="telephone.html" class="act3" ONMOUSEOVER="popup('OPENING NIGHT.  7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">14</a></dd>
                      <dd><em>&nbsp;</em><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Matinee. 2:00pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">15</a><a href="#">16</a><a href="#">17</a><a href="#">18</a><a href="#">19</a><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Evening Performance. 7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">20</a><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Evening Performance. 7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">21</a></dd>
    
                      <dd><em>&nbsp;</em><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Matinee Performance. 2:00pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">22</a><a href="#">23</a><a href="#">24</a><a href="#">25</a><a href="#">26</a><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Evening Performance. 7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">27</a><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Evening Performance. 7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">28</a></dd>
                      <dd><em>&nbsp;</em><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Matinee Performance. 2:00pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">29</a><a href="#">30</a><a href="#">31</a><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></dd>
                    </dl>
                  </li>
    
                  <li>
                    <dl class="list">
                      <dd class="first"><strong><b>February</b> 2012</strong></dd>
                      <dd class="title"><b>S</b><b>m</b><b>t</b><b>w</b><b>t</b><b>f</b><b>s</b></dd>
    
                      <dd><em>&nbsp;</em><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><a href="#">1</a><a href="#">2</a><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Evening Performance. 7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">3</a><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Evening Performance. 7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">4</a></dd>
                      <dd><em>&nbsp;</em><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Matinee Performance. 2:00pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#">9</a><a href="#">10</a><a href="#">11</a></dd>
                      <dd><em>&nbsp;</em><a href="#">12</a><a href="#">13</a><a href="#">14</a><a href="#">15</a><a href="#">16</a><a href="#">17</a><a href="#">18</a></dd>
    
                      <dd><em>&nbsp;</em><a href="#">19</a><a href="#">20</a><a href="#">21</a><a href="#">22</a><a href="#">23</a><a href="#">24</a><a href="#">25</a></dd>
                      <dd><em>&nbsp;</em><a href="#">26</a><a href="#">27</a><a href="#">28</a><a href="#">29</a><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></dd>
                    </dl>
    
                  </li>
                </ul>
              </div>
    <div id="skin" style=position:absolute;z-Imdex:101;" ></div>
    </body>
    
    </html>
    or better

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <link href="http://www.lyricoperala.org/style.css" rel="stylesheet" type="text/css" />
    <link href="http://www.lyricoperala.org/layout.css" rel="stylesheet" type="text/css" />
    <link href="http://www.lyricoperala.org/webfontkit/stylesheet.css" rel="stylesheet" type="text/css" />
    <SCRIPT TYPE="text/javascript">
    <!--
    
    var Xoffset=-60;    // modify these values to ...
    var Yoffset= 20;    // change the popup position.
    
    
    
    function popup(msg,bak){
     var e=window.event||arguments.callee.caller.arguments[0],mse=pos(e.target||e.srcElement),obj=document.getElementById("skin");
     obj.innerHTML=msg;
     obj.style.left=mse[0]+Xoffset+'px';
     obj.style.top=mse[1]+Yoffset+'px';
     obj.style.backgroundColor=bak;
    }
    
    function pos(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     }
    
    
    function kill(){
     document.getElementById("skin").style.left='-2000px';
    }
    
    
    //-->
    </script>
    
    </head>
    
    <body>
            <div class="col-2">
              <h3><b>U</b>p <b>N</b>ext</h3>
              <div class="carousel"> <a href="#" class="prev"></a> <a href="#" class="next"></a>
                <ul>
                  <li>
                    <dl class="list">
    
                      <dd class="first"><strong><b>January</b> 2012</strong></dd>
                      <dd class="title"><b>S</b><b>m</b><b>t</b><b>w</b><b>t</b><b>f</b><b>s</b></dd>
                      <dd><em>&nbsp;</em><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a></dd>
    
                      <dd><em>&nbsp;</em><a href="#">8</a><a href="#">9</a><a href="#">10</a><a href="#">11</a><a href="telephone.html" class="act1" ONMOUSEOVER="popup('Preview Performance. 1/2-price tickets.  7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">12</a><a href="telephone.html" class="act1" ONMOUSEOVER="popup('Preview Performance. 1/2-price tickets.  7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">13</a><a href="telephone.html" class="act3" ONMOUSEOVER="popup('OPENING NIGHT.  7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">14</a></dd>
                      <dd><em>&nbsp;</em><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Matinee. 2:00pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">15</a><a href="#">16</a><a href="#">17</a><a href="#">18</a><a href="#">19</a><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Evening Performance. 7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">20</a><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Evening Performance. 7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">21</a></dd>
    
                      <dd><em>&nbsp;</em><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Matinee Performance. 2:00pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">22</a><a href="#">23</a><a href="#">24</a><a href="#">25</a><a href="#">26</a><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Evening Performance. 7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">27</a><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Evening Performance. 7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">28</a></dd>
                      <dd><em>&nbsp;</em><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Matinee Performance. 2:00pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">29</a><a href="#">30</a><a href="#">31</a><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></dd>
                    </dl>
                  </li>
    
                  <li>
                    <dl class="list">
                      <dd class="first"><strong><b>February</b> 2012</strong></dd>
                      <dd class="title"><b>S</b><b>m</b><b>t</b><b>w</b><b>t</b><b>f</b><b>s</b></dd>
    
                      <dd><em>&nbsp;</em><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><a href="#">1</a><a href="#">2</a><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Evening Performance. 7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">3</a><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Evening Performance. 7:30pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">4</a></dd>
                      <dd><em>&nbsp;</em><a href="telephone.html" class="act2" ONMOUSEOVER="popup('Matinee Performance. 2:00pm.  Click link for more info.','yellow')"; ONMOUSEOUT="kill()">5</a><a href="#">6</a><a href="#">7</a><a href="#">8</a><a href="#">9</a><a href="#">10</a><a href="#">11</a></dd>
                      <dd><em>&nbsp;</em><a href="#">12</a><a href="#">13</a><a href="#">14</a><a href="#">15</a><a href="#">16</a><a href="#">17</a><a href="#">18</a></dd>
    
                      <dd><em>&nbsp;</em><a href="#">19</a><a href="#">20</a><a href="#">21</a><a href="#">22</a><a href="#">23</a><a href="#">24</a><a href="#">25</a></dd>
                      <dd><em>&nbsp;</em><a href="#">26</a><a href="#">27</a><a href="#">28</a><a href="#">29</a><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span></dd>
                    </dl>
    
                  </li>
                </ul>
              </div>
    <div id="skin" style="position:absolute;z-Imdex:101;left:-2000px;width:150px;border:solid black 1px;padding:5px;text-Align:center;color:black;font-Size:12px;" ></div>
    </body>
    
    </html>
    Last edited by vwphillips; 12-27-2011 at 10:16 AM.
    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
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,083
    Thanks
    38
    Thanked 498 Times in 492 Posts

    Lightbulb

    'vwphillips': I liked your second version in the last post,
    but I thought the setting of the dates was a little akward.

    I put the dates into a assoc. array.
    This could also be put into an external JS file.
    Probably could change the calendar settings to
    make a bit easier to insert into the source.

    See if the changes I made are of any interest to you.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Future Events Calendar</title>
    <link href="http://www.lyricoperala.org/style.css" rel="stylesheet" type="text/css" />
    <link href="http://www.lyricoperala.org/layout.css" rel="stylesheet" type="text/css" />
    <!--
    <link href="http://www.lyricoperala.org/webfontkit/stylesheet.css" rel="stylesheet" type="text/css" />
    <!-- loading from local directory
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link href="layout.css" rel="stylesheet" type="text/css" />
    <link href="stylesheet.css" rel="stylesheet" type="text/css" />
    -->
    <SCRIPT TYPE="text/javascript">
    // From: http://www.codingforums.com/showthread.php?p=1174541#post1174541
    
    var futureEvents = {
      '1_12':'Preview Performance. 1/2-price tickets.  7:30pm.  Click link for more info.',
      '1_13':'Preview Performance. 1/2-price tickets.  7:30pm.  Click link for more info.',
      '1_14':'OPENING NIGHT.  7:30pm.  Click link for more info.',
      '1_15':'Matinee. 2:00pm.  Click link for more info.',
      '1_20':'Evening Performance. 7:30pm.  Click link for more info.',
      '1_21':'Evening Performance. 7:30pm.  Click link for more info.',
      '1_22':'Matinee Performance. 2:00pm.  Click link for more info.',
      '1_27':'Evening Performance. 7:30pm.  Click link for more info.',
      '1_28':'Evening Performance. 7:30pm.  Click link for more info.',
      '1_29':'Matinee Performance. 2:00pm.  Click link for more info.',
      '2_3':'Evening Performance. 7:30pm.  Click link for more info.',
      '2_4':'Evening Performance. 7:30pm.  Click link for more info.',
      '2_5':'Matinee Performance. 2:00pm.  Click link for more info.',
    }
    
    var Xoffset= 20;    // modify these values to ...
    var Yoffset= 20;    // change the popup position.
    
    function popup(msg,bak){
      var e=window.event||arguments.callee.caller.arguments[0],
          mse=pos(e.target||e.srcElement),obj=document.getElementById("skin");
      obj.innerHTML=futureEvents[msg];
      obj.style.left=mse[0]+Xoffset+'px';
      obj.style.top=mse[1]+Yoffset+'px';
      obj.style.backgroundColor=bak;
    }
    
    function pos(obj){
      var rtn=[0,0];
      while(obj){
       rtn[0]+=obj.offsetLeft;
       rtn[1]+=obj.offsetTop;
       obj=obj.offsetParent;
      }
      return rtn;
     }
    
    function kill(){
      document.getElementById("skin").style.left='-2000px';
    }
    
    </script>
    </head>
    <body>
    <div class="col-2">
     <h3><b>U</b>p <b>N</b>ext</h3>
     <div class="carousel">
      <a href="#" class="prev"></a> <a href="#" class="next"></a>
      <ul>
       <li>
        <dl class="list">
         <dd class="first"><strong><b>January</b> 2012</strong></dd>
         <dd class="title"><b>S</b><b>m</b><b>t</b><b>w</b><b>t</b><b>f</b><b>s</b></dd>
         <dd><em>&nbsp;</em>
             <a href="#">1</a><a href="#">2</a><a href="#">3</a>
             <a href="#">4</a><a href="#">5</a><a href="#">6</a><a href="#">7</a>
         </dd>
         <dd><em>&nbsp;</em>
             <a href="#">8</a><a href="#">9</a><a href="#">10</a>
             <a href="#">11</a>
             <a href="telephone.html" class="act1"
              ONMOUSEOVER="popup('1_12','yellow')";ONMOUSEOUT="kill()">12</a>
             <a href="telephone.html" class="act1"
              ONMOUSEOVER="popup('1_13','yellow')";ONMOUSEOUT="kill()">13</a>
             <a href="telephone.html" class="act3"
              ONMOUSEOVER="popup('1_14','yellow')" ONMOUSEOUT="kill()">14</a>
         </dd>
         <dd><em>&nbsp;</em>
             <a href="telephone.html" class="act2"
              ONMOUSEOVER="popup('1_15','yellow')" ONMOUSEOUT="kill()">15</a>
    		 <a href="#">16</a><a href="#">17</a><a href="#">18</a><a href="#">19</a>
             <a href="telephone.html" class="act2"
              ONMOUSEOVER="popup('1_20','yellow')" ONMOUSEOUT="kill()">20</a>
             <a href="telephone.html" class="act2"
              ONMOUSEOVER="popup('1_21','yellow')" ONMOUSEOUT="kill()">21</a>
         </dd>
         <dd><em>&nbsp;</em>
             <a href="telephone.html" class="act2"
              ONMOUSEOVER="popup('1_22','yellow')" ONMOUSEOUT="kill()">22</a>
             <a href="#">23</a><a href="#">24</a><a href="#">25</a><a href="#">26</a>
             <a href="telephone.html" class="act2"
              ONMOUSEOVER="popup('1_27','yellow')" ONMOUSEOUT="kill()">27</a>
             <a href="telephone.html" class="act2"
              ONMOUSEOVER="popup('1_28','yellow')" ONMOUSEOUT="kill()">28</a>
         </dd>
         <dd><em>&nbsp;</em>
             <a href="telephone.html" class="act2"
              ONMOUSEOVER="popup('1_29','yellow')" ONMOUSEOUT="kill()">29</a>
             <a href="#">30</a><a href="#">31</a>
             <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
         </dd>
        </dl>
       </li>
    
       <li>
        <dl class="list">
         <dd class="first"><strong><b>February</b> 2012</strong></dd>
         <dd class="title"><b>S</b><b>m</b><b>t</b><b>w</b><b>t</b><b>f</b><b>s</b></dd>
         <dd><em>&nbsp;</em>
          <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span><a href="#">1</a><a href="#">2</a>
          <a href="telephone.html" class="act2"
           ONMOUSEOVER="popup('2_3','yellow')" ONMOUSEOUT="kill()">3</a>
          <a href="telephone.html" class="act2"
          ONMOUSEOVER="popup('2_4','yellow')" ONMOUSEOUT="kill()">4</a>
         </dd>
         <dd><em>&nbsp;</em>
          <a href="telephone.html" class="act2"
           ONMOUSEOVER="popup('2_5','yellow')" ONMOUSEOUT="kill()">5</a>
          <a href="#">6</a><a href="#">7</a><a href="#">8</a>
          <a href="#">9</a><a href="#">10</a><a href="#">11</a>
         </dd>
         <dd><em>&nbsp;</em>
          <a href="#">12</a><a href="#">13</a><a href="#">14</a>
          <a href="#">15</a><a href="#">16</a><a href="#">17</a><a href="#">18</a>
          </dd>
         <dd><em>&nbsp;</em>
          <a href="#">19</a><a href="#">20</a><a href="#">21</a>
          <a href="#">22</a><a href="#">23</a><a href="#">24</a><a href="#">25</a>
         </dd>
         <dd><em>&nbsp;</em>
          <a href="#">26</a><a href="#">27</a><a href="#">28</a><a href="#">29</a>
          <span>&nbsp;</span><span>&nbsp;</span><span>&nbsp;</span>
         </dd>
        </dl>
       </li>
      </ul>
     </div>
     <div id="skin"
       style="position:absolute;z-Imdex:101;left:-2000px;width:150px;border:solid black 1px;padding:5px;text-Align:center;color:black;font-Size:12px;" >
     </div>
    </div>
    </body>
    </html>
    I was getting errors with the last CSS external file,
    so I removed it without any decernable difference.
    Please advise if it is important to this script.

    Anyway, thanks for the script!


  •  

    Posting Permissions

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