Solved

popup with jquery help

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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

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 four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
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 …

808 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