Avatar billede learner Praktikant
24. september 2009 - 14:54 Der er 9 kommentarer og
1 løsning

Popup tekst ved onmouseover / hover gerne med jquery

Hej, jeg har søgt en del på jquery.com nu og kan ik finde ud af om der findes en funktion til følgende:

når man kører musen over et element med fx id="huhu" så skal den vise en lille boks med noget tekst ved siden af.

jeg har allerede inst jquery og jeg tænker at jquery må da have sådan en funktion. Ik?

noget alla:
$("#bonusbanner").hover(function(){
  $(#helptxt).fadeOut(100);
  $(#helptxt).fadeIn(500);
});

Jeg skal bruge det til at vise en liste over de bonus produkter folk kan få når de har puttet varer i deres indkøbskurv.

På forhånd tak :o)
Avatar billede learner Praktikant
24. september 2009 - 14:57 #1
eller endnu bedre noget alla:
$("#bonusbanner").hover(function(){
  $(#helptxt).popuptextinwindow('punkt1\npunkt2\npunkt3').fadein(100);
});

jeg har punkt1\npunkt2\npunkt3 i et array fra php
Avatar billede learner Praktikant
24. september 2009 - 14:59 #2
jeg plejer jo at bruge overlib, men har jquery ik en lign funktion?
Avatar billede zips Juniormester
24. september 2009 - 15:30 #3
Avatar billede learner Praktikant
24. september 2009 - 15:39 #4
nemmerlig :D

lige nøjagtig
Avatar billede kimdolleris Nybegynder
24. september 2009 - 17:29 #5
Jeg har lige lavet noget tilsvarende faktisk.. skidtet virker bare ikke med select (option) bokses i IE.. men et hver andet element burde det virke:

-----------KODE----------


<script src="jquery.js" type="text/javascript"></script>

<script> //<![CDATA[

$(document).ready(function(){
 
    $("#mithoverelement").hover(function(){
        //$('div#minboks').fadeIn('fast');
        $('div#minboks').animate({opacity: "show", top: "300px"}, "fast");
    }, function(){
        //$('div#minboks').fadeOut('fast');
        $('div#minboks').animate({opacity: "hide", top: "290px"}, "fast");
    });
});

//]]></script>


<a href="" id="mithoverelement">Mit hover link - dette behøver ikke at være a ;)</a>

<div id="minboks">mit content</div>


-----------/KODE----------



Håber det hælper..!

:D
Avatar billede kimdolleris Nybegynder
24. september 2009 - 17:30 #6
Hov, tag dig ikke af de ukommenterede linier - dem glemte jeg vist at fjerne ;)

$(document).ready(function(){

    $("#mithoverelement").hover(function(){
        $('div#minboks').animate({opacity: "show", top: "300px"}, "fast");
    }, function(){
        $('div#minboks').animate({opacity: "hide", top: "290px"}, "fast");
    });
});
Avatar billede learner Praktikant
24. september 2009 - 19:08 #7
tak begge to. Jeg har brugt zips forslag og modificeret det en del. men det virker super fint nu.

Bare lige en ting jeg mangler at lave nu, og det er at når man kører musen henover det popupvindue der kommer frem, så skal den ikke blive hængende, men bare lukke. altså skal den kun holde åbent så længe man har musen over trigger billedet.

Her er jquery scriptet jeg bruger:
<script type="text/javascript">
$(function () {
  $('.bubbleInfo').each(function () {
    // options
    var distance = 10;
    var time = 250;
    var hideDelay = 400;

    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), popup.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: -80, //-100
          left: -505,
          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, 'linear', 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, 'linear', 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>
Avatar billede learner Praktikant
25. september 2009 - 03:45 #8
man kan se det jeg har lavet inde på pet foodnord .dk og det dukker først frem nr man har varer i kurven for over 800

tak for hjælpen :o)

jeg synes zips skal ha point, for det var hans forslag jeg brugte.
svar venligst zips

Men os tak til kim
Avatar billede zips Juniormester
25. september 2009 - 10:39 #9
Her er et svar :-)
Avatar billede learner Praktikant
25. september 2009 - 14:20 #10
Fik du set hvordan det ser ud?
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