Avatar billede dmy Nybegynder
20. maj 2009 - 10:39 Der er 4 kommentarer og
1 løsning

Hjælp - fejl i min kode

Jeg har fundet denne her side

http://jqueryfordesigners.com/coda-popup-bubbles/comment-page-1/#allcomments

Men det virker bare ikke, kan ikke helt se hvor jeg har lavet en fejl.

min style:

<style type="text/css" media="screen">         
               
.bubbleInfo {           
position: relative;           
     
}       

.trigger {           
position: absolute;       
}           

/* Bubble pop-up */     
.popup {               
position: absolute;               
display: none;               
   
}
  .popup td#topleft { background-image: url(http://jqueryfordesigners.com/demo/images/coda/bubble-1.png); }       
  .popup td.top { background-image: url(http://jqueryfordesigners.com/demo/images/coda/bubble-2.png); }       
  .popup td#topright { background-image: url(http://jqueryfordesigners.com/demo/images/coda/bubble-3.png); }     
  .popup td.left { background-image: url(http://jqueryfordesigners.com/demo/images/coda/bubble-4.png); }       
  .popup td.right { background-image: url(http://jqueryfordesigners.com/demo/images/coda/bubble-5.png); }       
  .popup td#bottomleft { background-image: url(http://jqueryfordesigners.com/demo/images/coda/bubble-6.png); }       
  .popup td.bottom { background-image: url(http://jqueryfordesigners.com/demo/images/coda/bubble-7.png); text-align: center;}       
  .popup td.bottom img { display: block; margin: 0 auto; }       
  .popup td#bottomright { background-image: url(http://jqueryfordesigners.com/demo/images/coda/bubble-8.png); }       

    .popup table.popup-contents {               
  font-size: 12px;               
  line-height: 1.2em;               
  background-color: #fff;               
  color: #666;               
  font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans";               
  }       
 
  table.popup-contents th {               
  text-align: right;               
  text-transform: lowercase;               
  }       
 
  table.popup-contents td {               
  text-align: left;               
  }       
  tr#release-notes th {               
  text-align: left;               
  text-indent: -9999px;               
  background: url(http://jqueryfordesigners.com/demo/images/coda/starburst.gif) no-repeat top right;               
  height: 17px;             
  }       
 
  tr#release-notes td a {               
  color: #333;       
  }
</style>
_______________________________________________________________

min kode:

<script src="jquery.js" type="text/javascript"></script>   
<script type="text/javascript">     
$(function () { 
    $('.bubbleInfo').each(function () {   
                                                                    // options   
    var distance = 10;   
    var time = 250;   
    var hideDelay = 500;   
    var hideDelayTimer = null;                                                    // tracker   
    var beingShown = false;   
    var shown = false;       
    var trigger = $('.trigger', this);   
    var popup  = $('.popup', this).css('opacity', 0); 
                                                                                // set the mouseover and mouseout on both element   
    $([trigger.get(0), info.get(0)]).mouseover(function () {      // stops the hide event if we move from the trigger to the popup element     
        if (hideDelayTimer) clearTimeout(hideDelayTimer);      // don't trigger the animation again if we're being shown, or already visible     
        if (beingShown || shown) {        return;     
    } else {       
        beingShown = true;                                                                    // reset position of popup box     
          popup.css({         
              top: -100,         
              left: -33,         
              display: 'block'                                                             // brings the popup back in to view       
    })                                                                    // (we're using chaining on the popup) now animate it's opacity and position       
          .animate({         
              top: '-=' + distance + 'px',         
              opacity: 1        }, time, 'swing', function() {          // once the animation is complete, set the tracker variables         
          beingShown = false;         
          shown = true;       
          });   
        }   
    }).mouseout(function () {                                                    // reset the timer if we get fired again - avoids double animations     
    if (hideDelayTimer) clearTimeout(hideDelayTimer);            // store the timer so that it can be cleared in the mouseover if required     
   
    hideDelayTimer = setTimeout(function () {       
    hideDelayTimer = null;       
    popup.animate({         
        top: '-=' + distance + 'px',         
        opacity: 0       
        }, time, 'swing', function () {                  // once the animate is complete, set the tracker variables         
        shown = false;                              // hide the popup entirely after the effect (opacity alone doesn't do the job)         
        popup.css('display', 'none');       
        });     
        }, hideDelay); 
        });
    });
});
      </script>
</head>

<body>


<div class="bubbleInfo">       
        <div><img class="trigger" src="http://jqueryfordesigners.com/demo/images/coda/nav-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>File:</th>                                       
        <td>coda 1.1.zip</td>                               
    </tr>                               
    <tr>                                       
        <th>Date:</th>                                       
        <td>11/30/07</td>                               
    </tr>                               
    <tr>                                       
        <th>Size:</th>                                       
        <td>17 MB</td>                               
    </tr>                               
    <tr>                                       
        <th>Req:</th>                                       
        <td>Mac OS X 10.4+</td>                               
    </tr>                                                                         
        <tr id="release-notes">                                       
        <th>Read the release notes:</th>                                       
        <td><a title="Read the release notes" href="./releasenotes.html">release notes</a></td>                               
    </tr>                       
    </tbody></table>

</div>
</body>
</html>
Avatar billede majbom Novice
20. maj 2009 - 10:43 #1
hvad gør den (ikke) ?
Avatar billede dmy Nybegynder
20. maj 2009 - 10:46 #2
Ja den virker ikke
Avatar billede dmy Nybegynder
20. maj 2009 - 10:46 #3
den viser absolut ingenting
Avatar billede majbom Novice
20. maj 2009 - 13:49 #4
nu kender jeg ikke jquery, af andet end navnet, så jeg kan ikke lige se om der er nogle fejl.

du får ikke en javascript-fejl i din browser?
Avatar billede dmy Nybegynder
27. maj 2009 - 09:35 #5
Har selv fundet fejlen ;-)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester