Jquery bind "click"

[Verwijderd]

Ik ben bezig met een JQuery slider. Nu heb ik een tutorial gevonden en ben de code gaan implementeren in een test bestand. Nu werkt de rechter knop van mijn slider correct. Maar de linker wil niet werken. Nu heb ik de knop 2x definieert en 1 maal buiten mijn slider div geplaatst. Deze knop werkt wel, maar de ene in de slider div doet het niet. Ik snap niet waarom hij het buiten het slider object wel doet, maar er binnen in niet.

HTML:

<a href="#" class="knop-vorige" id="vorige"><img src="images/pijl-vorige.png"></a> //Knop 1, werkt wel
<div class="slider" id="slider">
     <a href="#" id="vorige"><img src="images/pijl-vorige.png"></a> //Knop 2, juiste positie, werkt niet
     <div class="slider-wrapper">
    <div class="slider-content">
       <div class="slider-artikel">
            <h1>Slide 1</h1>
        <span class="tekst">Tekst slide 1!</span>
        </div>
            <div class="slider-artikel">
            <h1>Slide 2</h1>
        <span class="tekst">Tekst slide 2!</span>
        </div>
            <div class="slider-artikel">
            <h1>Slide 3</h1>
        <span class="tekst">Tekst slide 3!</span>
        </div>
         </div>
     </div>
</div>

Javascript code:

JavaScript:

(function($) {
  $.fn.ContentSlider = function(options)
  {
    var defaults = {
      width : '925px',
      height : '220px',
      speed : 400,
      easing : 'easeOutQuad',
    }
    var defaultWidth = defaults.width;
    var o = $.extend(defaults, options);
    var w = parseInt(o.width);
    var n = this.children('.slider-wrapper').children('.slider-content').children('.slider-artikel').length;
    var content = this.children('.slider-wrapper').children('.slider-content');
    var x = -1*w*n+w; // Minimum left value
    var p = parseInt(o.width)/parseInt(defaultWidth);
    var thisInstance = this.attr('id');
    var inuse = false; // Prevents colliding animations
    var slide = 1;
    
    function moveSlider(d, b)
    {
      if(d=='left')
      {
        slide++;
      }
      else
      {
        slide--;
      }
      var l = parseInt(content.css('left'));
      if(isNaN(l)) {
        var l = 0;
      }
      var m = (d=='left') ? l-w : l+w;
      if(m<=0&&m>=x) {
        content.animate({ 'left':m+'px' }, o.speed, o.easing, function() {
                inuse=false;
              });
        
        if(slide>1)
        {
            $(".knop-vorige").show();
        }
        if(slide>=n)
        {
            $(".knop-volgende").hide();
        }
        if(slide==1)
        {
            $(".knop-volgende").show();
            $(".knop-vorige").hide();
        }
        
          /*/if(b.attr('class')=='cs_leftBtn') {
          var thisBtn = $('#'+thisInstance+' .cs_leftBtn');
          var otherBtn = $('#'+thisInstance+' .cs_rightBtn');
        } else {
          var thisBtn = $('#'+thisInstance+' .cs_rightBtn');
          var otherBtn = $('#'+thisInstance+' .cs_leftBtn');
        }*/
      }
    }

    function vCenterBtns(b)
    {
      // Safari and IE don't seem to like the CSS used to vertically center
      // the buttons, so we'll force it with this function
      var mid = (parseInt(o.height)/2)-30;
      b
        .find('.knop-vorige').css({ 'top':mid+'px', 'padding':0 }).end()
        .find('.knop-volgende').css({ 'top':mid+'px', 'padding':0 });
    }

    return this.each(function() {
      $('#vorige').bind( 'click', function() {
        if(inuse===false) {
          inuse=true;
          moveSlider('right', $('#vorige'));
        }
        return false; // Keep the link from firing
      });
      /*
      $('.knop-vorige').bind( 'click', function() {
        alert('test');
        return false; // Keep the link from firing
      });*/
      // Store a copy of the button in a variable to pass to moveSlider()
      $('.knop-volgende').bind('click', function() {
        if(inuse===false) {
          inuse=true;
          moveSlider('left', $('.knop-volgende'));
        }
        return false; // Keep the link from firing
      });
      
      $(this)
        // Set the width and height of the div to the defined size
        .css({
          width:o.width,
          height:o.height
        })
        // Dig down to the article div elements
        .find('.slider-artikel')
          // Set the width and height of the div to the defined size
          .css({
            width:o.width,
            height:o.height
          })
          .end()
        // Animate the entrance of the buttons
        .find('.knop-vorige')
          .hide()
         .find('.knop-volgende')
          .hide()
          .animate({ 'width':'show' });
      
      // Store a copy of the button in a variable to pass to moveSlider()
      
      vCenterBtns($(this)); // This is a CSS fix function.
    });
  }
})(jQuery)

Het is natuurlijk vreemd dat een element (a) in een bepaalde div wordt geplaatst dat deze in eens niet meer werkt!

[8088]

Verwijderd schreef op woensdag 08 december 2010 @ 20:27:
Het is natuurlijk vreemd dat een element (a) in een bepaalde div wordt geplaatst dat deze in eens niet meer werkt!

Als je beide elementen dezelfde id geeft, lijkt me dat allesbehalve vreemd.

[Verwijderd]

wel als je hem uit de slider div verwijderd en hij doet het en als je hem in de div dat hij het niet doet. Ik heb dat dus ook geprobeerd.
Dus ik heb zowel uit de div als in de div de zelfde link code geplaatst, echter werkt de code in de div dus niet maar er buiten wel.

[OkkE]

Aantal dingen die me opvallen:

• 2x het zelfde ID gebruiken binnen een HTML document is niet toegestaan en zorgt bovendien nog wel eens voor vreemd gedrag. Ik zou alles sowieso met class'es oplossen.
• Gebruik van "return false" raad ik af, gebruik liever "preventDefault".
• Ik zou de volgende/vorige knoppen met jQuery toevoegen en niet al direct in de HTML zetten, je hebt er tenslotte niets aan zonder JS.
• De structuur zou ik opbouwen met een <ol> of een <ul>, vind ik beter kloppen voor een slider.

[noes]

Behalve wat OkkE zegt: 2x hetzelfde ID, kan je ook nog iets anders proberen. Ik weet niet hoe je CSS in elkaar geschroefd zit, maar als er een element voor je knop is geschoven wordt je knop nooit getriggerd. Je triggers altijd even testen met een alert oid, dan weet je zeker dat de selector werkt en je knop aanklikbaar is.

Tevens:
$('.knop-volgende').bind('click', function() {
if(inuse===false) {
inuse=true;
moveSlider('left', $('.knop-volgende'));
}
return false; // Keep the link from firing
});
Wordt nooit getriggerd, geen van je twee knoppen hebben deze class. Terwijl deze knop juist de magic moet doen lijkt me? (gezien 'moveSlider('left', $('.knop-volgende'));')

[R4gnax]

Aan OkkE's opmerkingen zou ik ook nog willen toevoegen:

• Gebruik de type (non)equality operators === en !==.
• Declareer je variabelen up-front en strooi ze niet door je hele functie heen. In javascript hebben variabelen function scope, geen block scope zoals in C varianten, en vindt er onder de kap variable hoisting plaats. Zoals je het nu hebt staan wekt het alleen maar valse verwachtingen op bij mensen die van deze twee zaken geen weet hebben.
• Ga geen layout in JS fixen tenzij het absoluut functioneel noodzakelijke zaken betreft die je in CSS niet kunt fixen. ("Don't seem to like the CSS" is een absolute flut reden.)
• Voeg namespacing aan events toe, zodat je ze ook netjes kunt unbinden.
• Declareer geen units op je width/height opties als je ze er toch enkel afsloopt en intern alleen pixels ondersteunt. Dit schept valse verwachtingen. (Waarom heb je deze eigenlijk überhaupt nodig in je script? Dit zijn CSS zaken.)
• Je kunt detecteren of een element op het moment geanimeerd wordt met de ":animated" pseudo-selector. Heb je geen aparte boolean voor nodig waarvan je zelf de toestand bij moet houden.
• Gebruik voor dit soort user interface componenten liever de jQuery UI widget factory. (Voordat mensen gaan klagen: die is in nieuwere releases losgemaakt van alle andere zaken. Je zit dus niet meer met extra bagage.)

Hier een (bewust incompleet) opzetje om je een paar ideetjes te geven:

JavaScript:

$.widget( "pb.carousel", {
  options: {
    speed: 400,
    easing: "easeOutQuad"
    items: ".slider-artikel"
    prevTemplate: "<a href='#'><img src='images/pijl-vorige.png'></a>",
    nextTemplate: "<a href='#'><img src='images/pijl-volgende.png'></a>"
  },

  _create: function() {
    var self = this, o = this.options;

    $.extend( this, {
      _items: this.element.find( o.items ),
      _previous: $( o.prevTemplate ),
      _next: $( o.nextTemplate )
    });

    this.element
      .addClass( "slider-content" )
      .wrap( "<div></div>" )
      .parent()
        .addClass( "slider-wrapper" )
        .before( this._previous )
        .after( this._next )
        .wrap( "<div></div>" )
        .parent()
          .addClass( "slider" );

    this._previous.bind( "click", -1, $.proxy( this, "_onNavigate" ) );
    this._next.bind( "click", 1, $.proxy( this, "_onNavigate" ) );
  },

  _destroy: function() {
   
    this.widget()
      .after(this.element)
      .remove();

    $.Widget.prototype.destroy.apply(this, arguments);
  },

  widget: function() {
    this.element.closest( ".slider" );
  },

  _onNavigate: function( event ) {
    var self = this, o = this.options, step = event.data;
  }
});

[Bosmonster]

jQuery UI widgets zijn een mooie manier om iets heel simpels nodeloos ingewikkeld te maken.

Wat is er mis met gewoon een good old plugin?

Al moet ik zeggen dat ik voor dingen als sliders vaak niet eens meer plugins maak/gebruik, maar die paar regels gewoon custom schrijf waar nodig.

Andere semantiek tips: Gebruik idd een list (UL/OL) voor dit soort zaken. en gebruik geen H1's voor dit soort herhalende headers. Bij voorkeur heb je per pagina maar 1 H1.

[ Voor 53% gewijzigd door Bosmonster op 09-12-2010 21:13 ]

[R4gnax]

Bosmonster schreef op donderdag 09 december 2010 @ 21:10:
jQuery UI widgets zijn een mooie manier om iets heel simpels nodeloos ingewikkeld te maken.

En een hele mooie manier om veel gebruikte zaken als het mergen van configuratie opties af te handelen en een nette en efficiente code structuur te forceren.

[samo]

Bosmonster schreef op donderdag 09 december 2010 @ 21:10:
Andere semantiek tips: Gebruik idd een list (UL/OL) voor dit soort zaken. en gebruik geen H1's voor dit soort herhalende headers. Bij voorkeur heb je per pagina maar 1 H1.

Iets wat met HTML5 overigens weer omgegooid wordt, daar mag je weer opnieuw beginnen met tellen van hn-s per hoofd-DOM-element. De DOM wordt nog duidelijker genest opgebouwd dus is het optellen van headers niet meer nodig. Dus dat ligt ook een beetje aan hoe de rest van de site is opgebouwd.

[Verwijderd]

Bedankt voor de tips! Dit mijn eerste jQuery code die ik aan het maken ben. Misschien zou ik eerst eens een tutorial of 5 moeten doen, om de echte kracht van jQuery te leren kennen. Ik ga in ieder geval aan de slag hiermee.

[Verwijderd]

Ik weet niet hoe je CSS in elkaar geschroefd zit, maar als er een element voor je knop is geschoven wordt je knop nooit getriggerd.

Ik ben helemaal op nieuw begonnen, met wat tutorials en dergelijke . Bleek inderdaad het op andere manieren nog steeds niet werkte! Toen maar even de CSS ingedoken en een z-index aan de de knop toegevoegd. Nu werkt hij dus wel! Thanks voor alle hulp!