2
\$\begingroup\$

I am at a loss as to how to simplify the following two functions that share variables without polluting the global namespace. (Partial code for a carousel). I would like to streamline it.

Note: snapshotCheck(); is called once on window load. snapshotScroll(); is called on click events.

//FIRST FUNCTION
function snapshotScroll(amount, refresh) {
  var imageSum = snapshots.total_entries; //Inner Box
  var dl = $j('#snapshots')[0]; //Outer Box
  var c = $j('#photo-carousel')[0];
  var l = ((dl.style.left) ? parseInt(dl.style.left) : 0);
  var pos = l + parseInt(amount);
  var pos0 = pos;
  var viewport = $j('#photo-carousel')[0];
  var inView = Math.floor(viewport.clientWidth / snapshotWidth); //How many snapshots in view
  var maxPos = (imageSum * -snapshotWidth);
  if(pos > 0) { // prevent left side from going too far right
      pos = 0;
  } else if(pos < c.clientWidth - dl.clientWidth) {
      pos = c.clientWidth - dl.clientWidth;
      if(pos == 8) { // To account for 8px variation, set position to initial pos0 for animation.
          pos = pos0;
      }
  }

  $j(dl).animate({"left" : pos}, 1200); // Animate scroll
  // Toggle "filter" class (reduces opacity) depending on position.
  // if position is max, toggleClass of #next.
  // if position is 0, toggleClass of #prev.
  $j('#next').toggleClass('filter', (pos - maxPos) == (c.clientWidth))
  $j('#prev').toggleClass('filter', (pos >= 0))

  if(imageSum > inView) {
     dl.style.width = maxPos * -1 + "px";
  }
} // end snapshotScroll();

//SECOND FUNCTION
function snapshotCheck(){ // Check if snapshot is in view
  var c = $j('#photo-carousel')[0]; // #snapshots parent container
  var dl = $j('#snapshots')[0]; // ol container holding snapshots
  var imageSum = snapshots.total_entries;
  var l = ((dl.style.left) ? parseInt(dl.style.left) : 0);
  var maxPos = (imageSum * -snapshotWidth);
  var setWidth;
  var viewport = $j('#photo-carousel')[0]
  var inView = Math.floor(viewport.clientWidth / snapshotWidth); // # of snapshots in view
  (setWidth = function(){ // set initial width in order to retrieve position of currentSnapshot
    if(imageSum > inView) {
      dl.style.width = maxPos * -1 + "px";
    }
  })(); 
  if(typeof currentSnapshot != 'undefined') {
    var aSnapshot = $j('#' + currentSnapshot.snapshot.id + '_slide');  // jQuery object, array
    var theSnapshot = $j('#' + currentSnapshot.snapshot.id + '_slide')[0];  // first DOM element
    var pos = -aSnapshot.position().left; // a negative value, set to first position carousel (in view)
    $j(dl).animate({"left" : pos}, 1200); // Animate scroll
  } 
  $j('#next').toggleClass('filter', (pos - maxPos) == (c.clientWidth))
  $j('#prev').toggleClass('filter', (pos >= 0))
  } // end snapshotCheck();
\$\endgroup\$

migrated from stackoverflow.com Jul 13 '12 at 16:38

This question came from our site for professional and enthusiast programmers.

3
\$\begingroup\$

If those variables are constant (ie, they don't change between invocations of of the functions), you can put the functions and variables into a closure:

(function() {
    //FIRST FUNCTION
    var imageSum = snapshots.total_entries; //Inner Box
    var dl = $j('#snapshots')[0]; //Outer Box
    ...
    window.snapshotScroll = function (amount, refresh) {
        ...
    } // end snapshotScroll();

    //SECOND FUNCTION
    window.snapshotCheck = function (){ // Check if snapshot is in view
        ...
    } // end snapshotCheck();
})();
\$\endgroup\$
  • 1
    \$\begingroup\$ Actually this would work quite fine even if the functions change the variables. \$\endgroup\$ – RoToRa Jul 13 '12 at 8:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.