popup with jquery help
hi EE,
I have the following html, including css that creates a table like structure.
I am now trying to create an event for each box so that when the visitor hovers over it a popup displays beside the adjacent box.
I would like the popup to fadeIn and fadeOut and the jquery needs to only allow one popup at one time, i.e when moving across of the boxes, it needs to hide any others.
Let me know if you need more information.
Many thanks,
I have the following html, including css that creates a table like structure.
I am now trying to create an event for each box so that when the visitor hovers over it a popup displays beside the adjacent box.
I would like the popup to fadeIn and fadeOut and the jquery needs to only allow one popup at one time, i.e when moving across of the boxes, it needs to hide any others.
Let me know if you need more information.
Many thanks,
<!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">
<head>
<style type="text/css">
.journey3Day, .journeyYear
{
float: left;
margin-bottom: 10px;
width: 300px;
}
.first
{
margin-right: 10px;
}
.journey3Day, .journeyYear
{
float: left;
margin-bottom: 10px;
width: 300px;
}
.first
{
margin-right: 10px;
}
.first
{
margin-right: 10px;
}
.journey3Day, .journeyYear
{
float: left;
margin-bottom: 10px;
width: 300px;
}
.first
{
margin-right: 10px;
}
.journey3Day, .journeyYear
{
float: left;
margin-bottom: 10px;
width: 300px;
}
.calendarView
{
margin: 0 0 0 25px;
position: relative;
width: 262px;
}
.OutboundDaySliderContainer
{
overflow: hidden;
position: relative;
width: 252px;
}
.OutboundDaySlider
{
left: -84px;
position: relative;
width: 420px;
}
.tab-content .day
{
color: #333333;
display: block;
float: left;
margin: 0 3px 5px 0;
text-align: center;
width: 81px;
}
.tab-content .day
{
color: #333333;
text-align: center;
}
.day ul li a:hover
{
border: 1px solid #FF7B00;
color: #004B91;
text-decoration: none;
}
.day ul
{
margin: 2px 0;
padding: 0;
}
.day ul li, .day ul li a
{
min-height: 62px;
}
.day ul li
{
display: block;
list-style: none outside none;
margin-bottom: 3px;
padding: 0;
border: 1px solid #CCCCCC;
}
.day ul li.alternative a
{
background: none repeat scroll 0 0 #FFFFFF;
}
.day ul li, .day ul li a
{
min-height: 62px;
}
.day ul li a
{
color: #333333;
display: block;
padding: 25px 0 5px;
position: relative;
}
.day ul li span.time
{
display: block;
font-size: 0.92em;
margin: 1px 0;
}
</style>
</head>
<body>
<div id="pageWrap">
<div class="ColumnLeft">
<div id="">
<div class="calendarTabs">
<div id="" class="tab-content">
<div class="tab-content-ReturnJourney contain">
<div id='' class='journey3Day first'>
<div id='' class="calendarView contain">
<div class="OutboundDaySliderContainer">
<div class="OutboundDaySlider">
<div class="day">
<span>test</span>
</div>
<div class="day">
<span>test</span>
<ul>
<li id='' class='alternative firstRowOut '><a id='' href="#" class=' '></span></span>
<span class="time">test </span><span class="time">test </span></a></li>
<li id='' class='alternative firstRowOut '><a id='' href="#" class=' '><span class="time">
test </span><span class="time">test </span></a></li>
</ul>
</div>
<div class="day">
<span>test</span>
<ul>
<li id='' class='standard row1 '><a id='' href="#" class=' '><span class="time">test
</span><span class="time">test </span></a></li>
<li id='' class='standard row1 '><a id='' href="#" class=' '><span class="time">test
</span><span class="time">test </span></a></li>
</ul>
</div>
<div class="day">
<span>test</span>
<ul>
<li id='' class='alt-lowest lastRowOut '><a id='' href="#" class=' '><span class="title">
test</span> <span class="time">test </span></a>
</li>
<li id='' class='alt-lowest lastRowOut '><a id='' href="#" class=' '><span class="title">
test</span> <span class="time">test </span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
SRigney
you want a tooltip? Look at cluetip http://plugins.learningjquery.com/cluetip/demo/
ASKER
is it possible without a plugin?
ASKER
i need to use my graphic so can I have an example using my markup and graphic please?
Thanks,
Thanks,
The general way of handling this is having a single div that is positioned absolutely at the location you want, but there's a lot that goes into detecting the edge of the browser.
You are probably going to be better off using something like cluetip and just modifying the background to include your image instead of using the default settings.
You are probably going to be better off using something like cluetip and just modifying the background to include your image instead of using the default settings.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.