jQuery - Hjelp, for ikke til dette... ;)

En tråd i 'Javascript/Ajax' startet av Jazz, 8 Mar 2011.

  1. Jazz Medlem

    Innlegg:
    60
    Hei alle sammen

    Jeg jobber med nettsted til en cateringfirma, der jeg også lager et handlerkurv system. For å vise denne handlekurven til brukeren, har jeg et link som det står handlekurv på. Tanken er at når brukerens mus kommer over denne lenken, skal en div komme opp med info om hva som er i handlekurven og en link til "kassen"...

    det jeg har fått til så langt er at divven vises når brukeren har musen over, og forsvinner når musen er ute. Men problemet er at jeg ønsker at brukeren skal kunne se handlekurven når han går rundt med musen inne på den divven....(er jeg litt uklar nå? ;))

    jQuery jeg bruker er:
    HTML:
    <script type="text/javascript">
    $(document).ready(function() {
    	$("#cart").hide();
    	$("#cartlink").hover(function() {
    		$("#cart").show();
    	}, function() {
    		$("#cart").hide();
    	});
    });
    </script>
    her er html:
    HTML:
    <a href="#" id="cartlink">Handlekurven</a>
    	<div id="cart">
    her kommer handlekurven med info fra databasen og link til kassen
    </div>
    og her er css:
    HTML:
    #cart {
    	width: 500px; height: 200px;
    	background: black;
    	position: absolute;
    	margin-left: 300px;
    }
    er det noen her som kan hjelpe meg med dette? jeg er selvlært html, css, php og mysql, men klarer bare ikke å sette meg inn i javascript/jquery og sånt....

    tusen takk for alle svar ;)
     
  2. agrimsrud Medlem

    Innlegg:
    117
    Slettet forrige forslag.
    --------------------
    Nytt forslag 21:30:


    Ideen er egentlig å legge linken og handlekurven i samme element. Da kan vi bare sjekke mouseover og mouseout på dette "samleelementet".

    Testet i både Firefox og Chrome - skal funke bra:

    Kode:
    jQuery(function($){
            $("#cart").hide();
            $("#cartlink").live('mouseover mouseout', function(event) {
                    if (event.type == 'mouseover') {
                            $("#cart").show();
                    } else {
                            $("#cart").hide();
                    }
            });
    });
    
    HTML:
    <div id="cartlink">
    	<a href="#">Handlekurven</a>
    	<div id="cart">
    		her kommer handlekurven
    	</div>
    </div>
     
    Sist redigert: 8 Mar 2011
    hansson liker dette.
  3. Jazz Medlem

    Innlegg:
    60
    tusen takk, det funker veldig bra ;)

    tuuusen tuuusen takk :p
     

Del denne siden