✔ jQuery popup

goto;

goto;

Erfahrenes Mitglied
Hallo Community,
Bin gerade dabei mir ein Bubble Popup zusammen zu basteln. Leider hab ich kaum Ahnung von jquery und brauch deshalb etwas hilfe.

Es geht darum. Das mir das Popup nicht angezeigt wird. Obwohl es eigentlich funktionieren sollte ;/ hier mal auszüge.

HTML: 
<style> .....
      .bubbleInfo {   // 
            position: relative;
            top: 150px;
            left: 100px;
            width: 500px;
        }
        .trigger {   // Bild über dem das Popup erscheinen soll
            position: absolute;
        }

        .popup {     // style für das aussehen. Bild bereiche werden extra bestimmt.
                position: absolute;
                display: none;
                z-index: 50;
                border-collapse: collapse;
        }
.....
</style>

HTML: 
<body id="page">
    <div class="bubbleInfo">
        <div>
            <img class="trigger" src="images/download.png" id="download" />
        </div>
        <table id="dpop" class="popup">
                <tbody><tr>
                        <td id="topleft" class="corner"></td>
                        <td class="top"></td>
                        <td id="topright" class="corner"></td>
                </tr>

                <tr>
                        <td class="left"></td>
                        <td><table class="popup-contents">
                                <tbody><tr>
                                        <th>Test</th>
                                        <td>Test</td>
                                </tr>
                                <tr>
                                        <th>Test</th>
                                        <td>Test</td>
                                </tr>
                                <tr>
                                        <th>Test</th>
                                        <td>Test</td>
                                </tr>
                                <tr>
                                        <th>Test</th>
                                        <td>Test</td>
                                </tr>                                           
                                </tbody></table>

                        </td>
                        <td class="right"></td>    
                </tr>
                <tr>
                        <td class="corner" id="bottomleft"></td>
                        <td class="bottom"><img width="30" height="29" alt="popup tail" src="images/bubble-tail2.png"/></td>
                        <td id="bottomright" class="corner"></td>
                </tr>
        </tbody></table>
    </div>
</body>

Und hier ist der Script der via Mouseover ausgelöst werden soll.
HTML: 
    <script type="text/javascript">
$(function () {
        $('.bubbleInfo').each(function () {
            var distance = 10;
            var time = 250;
            var hideDelay = 500;

            var hideDelayTimer = null;

            var beingShown = false;
            var shown = false;
            var trigger = $('.trigger', this);
            var info = $('.popup', this).css('opacity', 0);


            $([trigger.get(0), info.get(0)]).mouseover(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                if (beingShown || shown) {
                    // don't trigger the animation again
                    return;
                } else {
                    // reset position of info box
                    beingShown = true;

                    info.css({
                        top: -90,
                        left: -33,
                        display: 'block'
                    }).animate({
                        top: '-=' + distance + 'px',
                        opacity: 1
                    }, time, 'swing', function() {
                        beingShown = false;
                        shown = true;
                    });
                }

                return false;
            }).mouseout(function () {
                if (hideDelayTimer) clearTimeout(hideDelayTimer);
                hideDelayTimer = setTimeout(function () {
                    hideDelayTimer = null;
                    info.animate({
                        top: '-=' + distance + 'px',
                        opacity: 0
                    }, time, 'swing', function () {
                        shown = false;
                        info.css('display', 'none');
                    });

                }, hideDelay);

                return false;
            });
        });
    });
    </script>
 
Also ich sehe da etwas :eek:


Aber mal eine Frage zu deinem CSS?
Code: 
      .bubbleInfo {   // 
            position: relative;
            top: 150px;
            left: 100px;
            width: 500px;
        }
        .trigger {   // Bild über dem das Popup erscheinen soll
            position: absolute;
        }

        .popup {     // style für das aussehen. Bild bereiche werden extra bestimmt.
                position: absolute;
                display: none;
                z-index: 50;
                border-collapse: collapse;
        }

Falls die rot markierten Stellen wirklich so in deinem Code stehen:

In CSS gibt es nur eine Sorte Comment, und der sieht so aus
Code: 
/* alles Kommentar */
 
Hallo, nein natürlich nicht, das hab ich hier im wys-Editor rein gemacht. In eigentlichen Code ist kein solche Kommentierung.
 
Hallo. Ja der Quellcode sieht wie folgt aus:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<style> ... </style>
<script>...  </script>

</head>
<body>
<div class="bubbleInfo">
  <img class="trigger" src="../images/admin_txt.gif" />
  <div class="popup">

        
        <table id="dpop" class="popup">
                <tbody><tr>
                        <td id="topleft" class="corner"></td>
                        <td class="top"></td>
                        <td id="topright" class="corner"></td>
                </tr>

                <tr>
                        <td class="left"></td>
                        <td><table class="popup-contents">
                                <tbody><tr>
                                        <th>Test</th>
                                        <td>Test</td>
                                </tr>
                                <tr>
                                        <th>Test</th>
                                        <td>Test</td>
                                </tr>
                                <tr>
                                        <th>Test</th>
                                        <td>Test</td>
                                </tr>
                                <tr>
                                        <th>Test</th>
                                        <td>Test</td>
                                </tr>                                           
                        </tbody></table>

                        </td>
                        <td class="right"></td>    
                </tr>

                <tr>
                        <td class="corner" id="bottomleft"></td>
                        <td class="bottom"><img width="30" height="29" alt="popup tail" src="../images/admin_txt.gif"/></td>
                        <td id="bottomright" class="corner"></td>
                </tr>
        </tbody></table>
    </div>
   </div>
</body>
Also es befindet sich im Head bereich :(
 
Splater hat gesagt.:
Hallo. Ja der Quellcode sieht wie folgt aus:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />

<style> ... </style>
<script>...  </script>

</head>
<body>
<div class="bubbleInfo">
  <img class="trigger" src="http://www.tutorials.de/forum/images/admin_txt.gif" />
  <div class="popup">

        
        <table id="dpop" class="popup">
                <tbody><tr>
                        <td id="topleft" class="corner"></td>
                        <td class="top"></td>
                        <td id="topright" class="corner"></td>
                </tr>

                <tr>
                        <td class="left"></td>
                        <td><table class="popup-contents">
                                <tbody><tr>
                                        <th>Test</th>
                                        <td>Test</td>
                                </tr>
                                <tr>
                                        <th>Test</th>
                                        <td>Test</td>
                                </tr>
                                <tr>
                                        <th>Test</th>
                                        <td>Test</td>
                                </tr>
                                <tr>
                                        <th>Test</th>
                                        <td>Test</td>
                                </tr>                                           
                        </tbody></table>

                        </td>
                        <td class="right"></td>    
                </tr>

                <tr>
                        <td class="corner" id="bottomleft"></td>
                        <td class="bottom"><img width="30" height="29" alt="popup tail" src="http://www.tutorials.de/forum/images/admin_txt.gif"/></td>
                        <td id="bottomright" class="corner"></td>
                </tr>
        </tbody></table>
    </div>
   </div>
</body>
Also es befindet sich im Head bereich :(
Zum Vergrößern anklicken....
Nö, davon seh ich dort nix :-)

Maik hat gesagt.:
Besitzt dein Dokument auch diese Script-Zeile im Header?
Code: 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript">
$(function () {
        ...
});
</script>
Zum Vergrößern anklicken....
Eigentlich müsstest du mit deinem Code vom Browser eine JS-Fehlermeldung erhalten, wenn er die Seite lädt ;-)

Wenn du mit jQuery arbeiten willst, muß hierfür die Library ("jquery-1.3.2.js" bzw. "jquery-1.3.2.min.js") im Dokument implementiert sein.

mfg Maik
 
Ok, echt blöd von mir, ich bin die ganze Zeit davon ausgegangen das dieser Script Bereich drin steht. Jetzt hab ich diesen drin und sieh da, es geht :) Super, danke euch
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück