Jquery beginnersfout maar wat

**Freek G** · 30-12-2009, 13:45

Beste mensen,

Ik probeer sinds gister de beginselen van Jquery te leren, nu zag ik deze video:

http://blog.themeforest.net/screenca...ries/#more-682

En heb alles gedaan wat die man zei maar ik krijg niet hetzelfde resultaat, het doet gewoon niks.

Hier heb ik de code staan:

Code:

<!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"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
 
<title>Jquery tutorial login slide</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 


<style type="text/css">

#box{background:#999; height:100px; width:200px;}

</style>

<script type="text/javascript">

	$(function() {
			   $('a').click(function(){
					$('#box').fadeOut();
					
				});		   
	});

</script> 


</head>

<body>

<div id="box"></div>
<a href="">Login!</a>

</body>
</html>

Weten jullie wat ik fout doe?

Alvast bedankt,

Freek

**Job van S.** · 30-12-2009, 13:52

Wanneer je wilt dat bij klikken op een <a> javascript wordt uitgevoerd, is het het beste als je in de href "javascript:void(0);" zet, om te zorgen dat de pagina niet vernieuwd wordt als er op geklikt wordt.
Ik vermoed dat dat hier het geval is.

Tip: zet code tussen [*code][/*code] (zonder de sterretjes dan ;)

**Vincent** · 30-12-2009, 13:58

In #box staat niks dus je ziet eigenlijk ook niks verdwijnen

gast · 30-12-2009, 13:59

Ik denk dat je je href een # moet meegeven en anders zou ik een ID meegeven in de A tag en deze laten openen dus kan krijg je zit:

PHP Code:


<script type="text/javascript">
    $(function() {
                     $('#link').click(function(){
                               $('#box').fadeOut();
      });           
    });
 
</script> 
<div id="box"></div>
<a id="#link" href="#">Login!</a>

**Job van S.** · 30-12-2009, 14:02

Origineel gepost door Vincent

In #box staat niks dus je ziet eigenlijk ook niks verdwijnen

In de css is een achtergrondkleur en grootte meegegeven ;)

Origineel gepost door gast172

Ik denk dat je je href een # moet meegeven en anders zou ik een ID meegeven in de A tag en deze laten openen

Beter is om 'javscript:void(0);' in het href attribuut te zetten, omdat bij # de pagina omhoog springt, en je twee keer op vorige moet klikken om ook echt bij de vorige pagina te komen.
Een id meegeven aan de <a> tag is ook niet per se nodig, hij zou het zo moeten doen.

**René Vennik** · 30-12-2009, 14:08

http://docs.jquery.com/Effects/fadeOut
Nou misschien moet je de snelheid wel meegeven?
Aanvullend bericht:
@Job
return false; is misschien nog net even wat netter. Dan kun je er namelijk ook nog een link inzetten voor mensen die geen javascript aan hebben staan.

**Job van S.** · 30-12-2009, 14:31

Origineel gepost door René Vennik

http://docs.jquery.com/Effects/fadeOut
Nou misschien moet je de snelheid wel meegeven?
Aanvullend bericht:
@Job
return false; is misschien nog net even wat netter. Dan kun je er namelijk ook nog een link inzetten voor mensen die geen javascript aan hebben staan.

Snelheid hoeft je niet per se te geven, hij heeft een standaard snelheid wanneer je dat niet doet.

En over return false; je hebt helemaal gelijk, wanneer je wil dat niet-javascript gebruikers doorgestuurd worden is dat ideaal.

@Freek, is het al gelukt?

**Sam Vloeberghs** · 30-12-2009, 14:37

Origineel gepost door René Vennik

http://docs.jquery.com/Effects/fadeOut
Nou misschien moet je de snelheid wel meegeven?
Aanvullend bericht:
@Job
return false; is misschien nog net even wat netter. Dan kun je er namelijk ook nog een link inzetten voor mensen die geen javascript aan hebben staan.

je kan ook een event meegeven als parameter in de function van het event en het event preventen.. :) is nog veel beter en verminderd inline javascript:

PHP Code:


<script>
$(document).ready(function() {
     $(function() {
              $('#link').click(function(e){
                        e.preventDefault();
                        $('#box').fadeOut();
              });           
      });

});
</script>

<div id="box"></div>
<a id="#link" href="login.html">Login!</a>

Ook opletten dat je deze functies initialiseert als het document geladen is!

**Joris Demmers** · 30-12-2009, 14:54

Code:

$(document).ready(function() {
    $('a').click(function(){
        $('#box').fadeOut();            
    });
});

Zou ook moeten werken toch?

**Job van S.** · 30-12-2009, 14:55

Origineel gepost door Sam Vloeberghs

Ook opletten dat je deze functies initialiseert als het document geladen is!

PHP Code:


$(function(){

      // code

});

Doet exact hetzelfde als

PHP Code:


$(document).ready(function(){

      // code

});

Dit is dus voldoende.

PHP Code:


$(function() {

        $('#link').click(function(e){

                  e.preventDefault();

                  $('#box').fadeOut();

        });           

});

**Sam Vloeberghs** · 30-12-2009, 15:00

Origineel gepost door Job van S.

Dit is dus voldoende.

PHP Code:


$(function() {
        $('#link').click(function(e){
                  e.preventDefault();
                  $('#box').fadeOut();
        });           
});

correct

Origineel gepost door Joris Demmers

Code:

$(document).ready(function() {
    $('a').click(function(){
        $('#box').fadeOut();            
    });
});

Zou ook moeten werken toch?

dan zou je dat click event op elke anchor link in uw document oproepen.. :)

**Joris Demmers** · 30-12-2009, 15:03

Ja klopt, maar ik had het puur over de dubbele functies.

**Freek G** · 30-12-2009, 20:39

Bedankt iedereen, ik was deze dag bezet en bekijk deze discussie op m'n iPhone uit de trein vanuit het hoge noorden. Ik ga vanavond even kijken of het lukt. Alvast bedankt iedereen.
Aanvullend bericht:
Ik heb alles even geprobeerd maar nee, lukt allemaal niet.

Heb hem even op mijn server gezet: http://websane.nl/based/Jquery/index.html

Ziet iemand de bug?

**Sam Vloeberghs** · 31-12-2009, 16:53

valideer je pagina.

**DerkVg** · 31-12-2009, 16:55

verander:

Code:

<a id="#link" href="index.html" >Login!</a>

met

Code:

<a id="#link" href="#" >Login!</a>

Jquery beginnersfout maar wat