Solved

popup with jquery help

Posted on 2010-09-05
5
496 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 500 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

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
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…

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