...

View Full Version : Why won't my js "tip" show up?



operapixie
12-27-2011, 06:07 AM
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

vwphillips
12-27-2011, 09:38 AM
<!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


<!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>

jmrker
12-30-2011, 01:46 AM
'vwphillips': I liked your second version in the last post, :thumbsup:
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.


<!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!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum