Solved

Change hover box location

Posted on 2008-10-22
2
414 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
CSS Formatting Getting Stripped 1 35
Add Rows on a Table 8 51
Excel to HTML macro with inserting lines 14 51
css messed up 8 28
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

734 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