Solved

Change hover box location

Posted on 2008-10-22
2
404 Views
Last Modified: 2012-05-05
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?
<!-- #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;'>&nbsp;</td>")

			else

				Response.Write ("<td style='border:solid #00003f; border-width:1px 0px 1px 1px;'>&nbsp;</td>")

			end if

		elseif w=Weekday(StartofMonth)-1 then

			Response.Write ("<td style='border:solid #00003f; border-width:1px 1px 1px 0px;'>&nbsp;</td>")

		else

			Response.Write ("<td style='border:solid #00003f; border-width:1px 0px 1px 0px;'>&nbsp;</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;'>&nbsp;</td></tr>")

			else

				Response.Write ("<td style='border:solid #00003f; border-width:1px 1px 1px 0px;'>&nbsp;</td></tr>")

			end if

		elseif u=7-WeekDay(EndofMonth) then

			Response.Write ("<td style='border:solid #00003f; border-width:1px 0px 1px 1px;'>&nbsp;</td>")

		else

			Response.Write ("<td style='border:solid #00003f; border-width:1px 0px 1px 0px;'>&nbsp;</td>")

		end if

	next

	%>

</table>

Open in new window

0
Comment
Question by:Aludaan
2 Comments
 
LVL 10

Accepted Solution

by:
Bane83 earned 500 total points
ID: 22786391
ExtraInfo = "<a href='#' class=info> ==> ExtraInfo = "<a href='#' class="info" onmouseover="RepositionBox('E2EInfoBox');">

Add:
<script type="text/javascript">
function RepositionBox(spanID)
{
     var hoverbox = document.getElementById(spanID);
 
    // Calculate top and left

    hoverbox.style.top = top + 'px';
    hoverbox.style.left = left + 'px';
}
</script>
0
 

Author Closing Comment

by:Aludaan
ID: 31509004
Thank you Bane83.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

758 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now