JQuery bind mouse wheel

clickdata-bindingjquery

I need to pass a variable inside a "bind mouse wheel" function and trigger that function when a user clicks on a link.

I just don't know how to do this as I can't put a bind inside an event handler. It just doesn't work.

This is how I tried:

$('.link').click(function(e)
{
   e.preventDefault();

   var nbr=$(this).data('article_nbr');

   $("#overlay").bind("mousewheel", function (event,delta,nbr) 
   {
        ...
        scrollTop = $("#article"+nbr).scrollTop();
        scrollTopNew = scrollTop - (delta * 30);
        ...
   }
});

I can imagine this is totally wrong but I just can't figure out the proper way to get what I need.

So far I only am able to use bind when the document is ready, but here it should be fired according to some events or event results .

Best Answer

You need to define delta and nbr outside as globals, and then you can use it inside.

var delta = 10;
var nbr = 'some_value';

$('.link').click(function(e)
{
   e.preventDefault();

   var nbr=$(this).data('article_nbr');

   $("#overlay").bind("mousewheel", function (event,delta,nbr) 
   {
        ...
        scrollTop = $("#article"+article_nbr).scrollTop();
        scrollTopNew = scrollTop - (delta * 30);
        ...
   }
});

Related Solutions

Javascript – n “exists” function for jQuery

In JavaScript, everything is 'truthy' or 'falsy', and for numbers 0 means false, everything else true. So you could write:

if ($(selector).length)

You don't need that >0 part.

Javascript – How to upload files asynchronously with jQuery

With HTML5 you can make file uploads with Ajax and jQuery. Not only that, you can do file validations (name, size, and MIME type) or handle the progress event with the HTML5 progress tag (or a div). Recently I had to make a file uploader, but I didn't want to use Flash nor Iframes or plugins and after some research I came up with the solution.

The HTML:

<form enctype="multipart/form-data">
    <input name="file" type="file" />
    <input type="button" value="Upload" />
</form>
<progress></progress>

First, you can do some validation if you want. For example, in the .on('change') event of the file:

$(':file').on('change', function () {
  var file = this.files[0];

  if (file.size > 1024) {
    alert('max upload size is 1k');
  }

  // Also see .name, .type
});

Now the $.ajax() submit with the button's click:

$(':button').on('click', function () {
  $.ajax({
    // Your server script to process the upload
    url: 'upload.php',
    type: 'POST',

    // Form data
    data: new FormData($('form')[0]),

    // Tell jQuery not to process data or worry about content-type
    // You *must* include these options!
    cache: false,
    contentType: false,
    processData: false,

    // Custom XMLHttpRequest
    xhr: function () {
      var myXhr = $.ajaxSettings.xhr();
      if (myXhr.upload) {
        // For handling the progress of the upload
        myXhr.upload.addEventListener('progress', function (e) {
          if (e.lengthComputable) {
            $('progress').attr({
              value: e.loaded,
              max: e.total,
            });
          }
        }, false);
      }
      return myXhr;
    }
  });
});

As you can see, with HTML5 (and some research) file uploading not only becomes possible but super easy. Try it with Google Chrome as some of the HTML5 components of the examples aren't available in every browser.

Best Answer

Related Solutions

Javascript – n “exists” function for jQuery

Javascript – How to upload files asynchronously with jQuery

Related Topic