Bill
asked on
Change hover box location
I have included a script that allows me to show my customers open changes that exist by the change number. To keep them from having to log into our ticketing system every time they want to view a ticket I created a pop-up window that hovers when they mouse over the URL and gives them a basic description of the change with some other info.
My problem is that if you are too low to the bottom or too close to the right side that the hover box will scroll off the screen. I was trying to figure out how to fix this problem. I can determine the size of the screen and the location of the mouse cursor using javascript. So my plan was going to be to detect if it is on the top 50% of the screen to have it hover on the bottom of the mouse but if it was on the bottom 50% of the screen that it would hover above your cursor. Then repeat the process for left and right. But I can't seem to access or modify the hover box at all.
Any suggestions on how to fix this dilemma?
My problem is that if you are too low to the bottom or too close to the right side that the hover box will scroll off the screen. I was trying to figure out how to fix this problem. I can determine the size of the screen and the location of the mouse cursor using javascript. So my plan was going to be to detect if it is on the top 50% of the screen to have it hover on the bottom of the mouse but if it was on the bottom 50% of the screen that it would hover above your cursor. Then repeat the process for left and right. But I can't seem to access or modify the hover box at all.
Any suggestions on how to fix this dilemma?
<!-- #include file="timeadj.inc" -->
<style type="text/css">
a.info { position:relative; z-index:24; color:#000000; text-decoration:none; padding-left:5px; padding-right:5px; }
a.info:hover { z-index:25; font-weight: bold; }
a.info span { display:none; }
a.info:hover span { display:block; position:absolute; bottom:50px; top:2em; left:2em; width:20em; border:1px solid #0cf; background-color:#cff; color:#000; text-align:left; }
table { border:3px solid #00003f; padding:0; border-spacing:0; }
#leftheader { background-color:#00003f; text-align:left; font: bold 14px Verdana, Arial, Helvetica, sans-serif; }
#centerheader { background-color:#00003f; color:#ffff00; height:3em; text-align:center; font: bold 24px Verdana, Arial, Helvetica, sans-serif; }
#rightheader { background-color:#00003f; text-align:right; font: bold 14px Verdana, Arial, Helvetica, sans-serif; }
#labels { vertical-align:middle; height:2em; background-color:#00003f; color:#FFFFFF; font: bold 12px Verdana, Arial, Helvetica, sans-serif; }
#dateboxes { height:8.5em; width:10em; vertical-align:top; }
#datenumbers { font: italic bold 14px "Courier New", Courier, monospace; width:1.5em; height:1.5em; line-height:1.5em; text-align:center; }
td { border:solid 1px #00003f; }
</style>
<table cellpadding="0" cellspacing="0">
<%
MyMonthTest=Request.QueryString("MyMonth")
MyYearTest=Request.QueryString("MyYear")
if MyMonthTest = "" then CurrentMonth=Month(Date) else CurrentMonth=MyMonthTest
if MyYearTest = "" then CurrentYear=Year(Date) else CurrentYear=MyYearTest
if CurrentMonth=12 then
NextMonth=1
NextYear=CurrentYear+1
PreviousMonth=11
PreviousYear=CurrentYear
elseif CurrentMonth=1 then
NextMonth=2
NextYear=CurrentYear
PreviousMonth=12
PreviousYear=CurrentYear-1
else
NextMonth=CurrentMonth+1
NextYear=CurrentYear
PreviousMonth=CurrentMonth-1
PreviousYear=CurrentYear
end if
StartofMonth=CurrentMonth & "/1/" & CurrentYear
Endofmonth=dateadd("d",-1,NextMonth & "/1/" & NextYear)
Response.Write ("<tr><td id='leftheader' colspan='2'><a href='Test.asp?MyMonth=" & PreviousMonth & "&MyYear=" & PreviousYear & "'>< < " & MonthName(PreviousMonth) & " " & PreviousYear & "</a></td><td id='centerheader' colspan='3'>" & MonthName(CurrentMonth) & " " & CurrentYear & "</td><td id='rightheader' colspan='2'><a href='Test.asp?MyMonth=" & NextMonth & "&MyYear=" & NextYear & "'>" & MonthName(NextMonth) & " " & NextYear & " > ></a></td></tr>")
Response.Write ("<tr id='labels'>")
for x=1 to 7
Response.Write("<td align='center'>" & WeekdayName(x) & "</td>")
next
Response.Write ("</tr>")
Response.Write ("<tr>")
for w=1 to Weekday(StartofMonth)-1
if w=1 then
if WeekDay(StartofMonth)-1=1 then
Response.Write ("<td style='border:solid #00003f; border-width:1px;'> </td>")
else
Response.Write ("<td style='border:solid #00003f; border-width:1px 0px 1px 1px;'> </td>")
end if
elseif w=Weekday(StartofMonth)-1 then
Response.Write ("<td style='border:solid #00003f; border-width:1px 1px 1px 0px;'> </td>")
else
Response.Write ("<td style='border:solid #00003f; border-width:1px 0px 1px 0px;'> </td>")
end if
next
for v=1 to Day(EndofMonth)
CurrentDate = CurrentMonth & "/" & v & "/" & CurrentYear
for tempcount=1 to 20
tempdata=tempdata & "Record " & tempcount & ": Data " & tempcount & "<br />"
next
ExtraInfo = "<a href='#' class=info>Ticket1<span id='E2EInfoBox'>" & tempdata & "</span></a><br />"
if cInt(CurrentMonth)=Month(Date) and cInt(CurrentYear)=Year(Date) and v=Day(Date) then DayFormat=" style='background-color:#c8ffc8;'"
CurrentDay = Weekday(CurrentDate)
if CurrentDay = 0 then
Response.Write ("<tr><td id='dateboxes'" & DayFormat & "><div id='datenumbers'>" & v & "</div>" & ExtraInfo & "</td>")
elseif CurrentDay = 7 then
Response.Write ("<td id='dateboxes'" & DayFormat & "><div id='datenumbers'>" & v & "</div>" & ExtraInfo & "</td></tr>")
else
Response.Write ("<td id='dateboxes'" & DayFormat & "><div id='datenumbers'>" & v & "</div>" & ExtraInfo & "</td>")
end if
ExtraInfo=Null: DayFormat=Null: tempdata=Null
next
for u=(7-WeekDay(EndofMonth)) to 1 step -1
if u=1 then
if 7-WeekDay(EndofMonth)=1 then
Response.Write ("<td style='border:solid #00003f; border-width:1px;'> </td></tr>")
else
Response.Write ("<td style='border:solid #00003f; border-width:1px 1px 1px 0px;'> </td></tr>")
end if
elseif u=7-WeekDay(EndofMonth) then
Response.Write ("<td style='border:solid #00003f; border-width:1px 0px 1px 1px;'> </td>")
else
Response.Write ("<td style='border:solid #00003f; border-width:1px 0px 1px 0px;'> </td>")
end if
next
%>
</table>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER