Question

I’m using jquery kwicks for a projects and on document ready I provide the following functions.

an initial function of what the kwicks should do on document ready function which is my whatToDo

var whatToDo = 'mouseover';

$('.kwicks').kwicks({
    min : 10,
    max : 480,
    duration: 800,  
    easing: 'easeOutQuint',
    sticky : true,
    defaultKwick : 3,
    event : whatToDo,
});

Next what I want to do is basically when a user clicks and item for instance a certain div or p to switch from ‘mouseover’ to ‘click’

I have tried the following but does not seem to work.

$('#video').click(function(){
    var whatToDo = 'click';     
});

any suggestions?

Answer 1

Sorry if my comment made it sound like it was impossible… all you need to do is set up a custom event (demo):

HTML

<ul class="kwicks horizontal" >
  <li id="kwick_1"></li>
  <li id="kwick_2"></li>
  <li id="kwick_3"></li>
  <li id="kwick_4"></li>
</ul>

<input id="clickIt" type="checkbox">Click

Script

  $(document).ready(function() {

    $('.kwicks li').bind('click mouseover', function(e){
      var clickit = $('#clickIt').is(':checked');
      if ( clickit && e.type == "click" || !clickit && e.type == "mouseover") {
        $(this).trigger('myCustomEvent');
      }
    })

    $('.kwicks').kwicks({
      max : 220,
      spacing : 5,
      event: 'myCustomEvent'
    });

  });

---

To answer your updated needs, you will need to have a variable that is set by the jwplayer event functions. I haven’t tested the code below, but it should work. If it has any problems, then maybe try moving the jwplaying variable outside the $(document).ready to make it a global variable.

$(document).ready(function() {
 var jwplaying = false;

 $('.kwicks li').bind('click mouseover', function(e){
  if ( jwplaying && e.type == "click" || !jwplaying && e.type == "mouseover") {
   $(this).trigger('myCustomEvent');
  }
 })

 $('.kwicks').kwicks({
  max : 220,
  spacing : 5,
  event: 'myCustomEvent'
 });

 jwplayer("player").setup({
  autostart: true,
  flashplayer: "player.swf",
  skin: 'five/glow.zip',
  controlbar: "bottom",
  dock: true,
  events: {
   onPlay : function() {
    /// triggers to be click
    jwplaying = true;
   }, onPause : function() {
    /// triggers to be mouseover
    jwplaying = false;
   }, onComplete: function() {
    /// triggers to be mouseover
    jwplaying = false;
    jwplayer().stop();
   }
  }
 });

});

On and btw, I added document inside the $().ready as it is not recommended by the jQuery team to use that syntax and it may be phased out in future versions.