Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

popup with jquery help

Posted on 2010-09-05
5
Medium Priority
?
505 Views
Last Modified: 2012-05-10
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,
<!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>

Open in new window

bubble.gif
0
Comment
Question by:jimbona27
  • 2
  • 2
5 Comments
 
LVL 15

Expert Comment

by:SRigney
ID: 33608618
you want a tooltip?   Look at cluetip http://plugins.learningjquery.com/cluetip/demo/
0
 

Author Comment

by:jimbona27
ID: 33609367
is it possible without a plugin?
0
 

Author Comment

by:jimbona27
ID: 33609376
i need to use my graphic so can I have an example using my markup and graphic please?

Thanks,
0
 
LVL 15

Expert Comment

by:SRigney
ID: 33611614
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.
0
 
LVL 5

Accepted Solution

by:
fredmc earned 2000 total points
ID: 33613005
I use Beauty Tips, which is a JQuery plugin. However, there's nothing more to adding the plugin than having a few lines in your head section to call in Javasscript files.
http://www.lullabot.com/articles/beautytips-09-release

It is very configurable. I think you will find it is just what you are looking for. You will not need your bubble.gif, since Beauty Tips creates the background on the fly. You can tell it to use the color of your gif. And it will position the arrow on the edge of it appropriately, depending on where the popup is - that is, if it is at the far riight edge of the browser, it will popup to the left, and the arrow will be on the right. If it is on the far left edge, it does the opposite. You can tell it the default popup position.

Here is the demo page:
http://www.lullabot.com/files/bt/bt-latest/DEMO/index.html

If you need further help, just say so.

0

Featured Post

New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

Question has a verified solution.

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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
This article discusses how to implement server side field validation and display customized error messages to the client.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

927 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