jQuery/JS Error When on a page that doesn't have given ID

I've got a situation, that I'm pretty sure is something basic, that I just don't know the proper syntax/sequence for:

I've got the following code in my site's $(document).ready(function():

$(document).ready(function() {

//Prevents default anchor tag behavior
$('#socialScroller a, #contributePod a, .prev, .next').click(function(e) {
    e.preventDefault();
});


//Scrollable for Social Sidebar area
$(".socialScrollable").scrollable({ easing:"easeInOutCubic", vertical:true, next:".socialNext", prev:".socialPrev"});
  var scrollable = jQuery(".socialScrollable").data("scrollable");
  var size = 3;
  scrollable.onSeek(function(event, index) {
    if (this.getIndex() >= this.getSize() - size) {
      jQuery("a.socialNext").addClass("disabled");
    }
  });
  scrollable.onBeforeSeek(function(event, index) {
    if (this.getIndex() >= this.getSize() - size) {
      if (index > this.getIndex()) {
        return false;
      }
    }
  });

//Scrollable for History page
$(".historyScrollable").scrollable({ easing:"easeInOutCubic"}).navigator();

//Scrollables for Media page
$(".mediaScrollable").scrollable({ easing:"easeInOutCubic"}).navigator({navi:'#pressNavTabs'});

$("#mediaNavScrollable").scrollable({ easing:"easeInOutCubic", next:".nextMedia", prev:".prevMedia"});
  var scrollable = jQuery("#mediaNavScrollable").data("scrollable");
  var size = 4;
  scrollable.onSeek(function(event, index) {
    if (this.getIndex() >= this.getSize() - size) {
      jQuery("a.nextMedia").addClass("disabled");
    }
  });
  scrollable.onBeforeSeek(function(event, index) {
    if (this.getIndex() >= this.getSize() - size) {
      if (index > this.getIndex()) {
        return false;
      }
    }
  });


$("#mediaNavScrollable").scrollable({ easing:"easeInOutCubic"});

//History Scroller
$(function() {      
    $(".vertHistoryScroller").scrollable({ vertical:"true", easing:"easeInOutCubic", next:".nextVert", prev:".prevVert" }).navigator(); 
});

//Contribute Sidebar Actions
$(".contributeContainer").hide();

$("#contributePod a").click(function(){
    var aData = $(this).attr("data-name");
    $(".contributeContainer").fadeOut("fast");
    $("#"+aData).fadeIn("slow");
});

$(".contributeContainer a").click(function(){
    $(this).parent(".contributeContainer").fadeOut("fast");
});

});

On any page that doe开发者_如何学Pythons not have #mediaNavScrollable, I get this error in the JS console: Uncaught TypeError: Cannot call method 'onSeek' of undefined.

If I comment everything from the "var scrollable" line down, everything works fine on pages without that #mediaNavScrollable ID. How do I wrap that JS so that it only fires if it has #mediaNavScrollable?

---

You need to check to see if scrollable is not null and has any elements in it. If it doesnt, exit the handler.

var scrollable = jQuery("#mediaNavScrollable").data("scrollable");
if(scrollable == null || scrollable.length==0) return;

This will exit the handler without running any other code. Alternately, you can use an if block:

var scrollable = jQuery("#mediaNavScrollable").data("scrollable");
if(scrollable == null || scrollable.length==0) 
{
    //element doesnt exist, perform alternate action
}
else
{
    //element does exist, do normal stuff here
    scrollable.onSeek(......);
}

---

if ($("#mediaNavScrollable").length){
      // your code
}

---

You need to check for the existence of scrollable:

if(scrollable)
{ 
  ...
}

---

You can check to see if the element exists first, like this:

if ($("#mediaNavScrollable").length) {
  //your code here
}

---

That's not being caused by a missing element. If the element were missing, you'd never make it into the code where the error happens. edit — oops I hadn't scrolled the OP's code far enough to the right; I thought the code below it that's confusingly indented was part of a handler function.

Instead, the problem is that this:

var scrollable = jQuery("#mediaNavScrollable").data("scrollable");

is returning nothing. There's no data element called "scrollable" stored on your "mediNavScrollable" element. That may mean that the element in your HTML is supposed to look like this:

<div id='mediaNavScrollable' data-scrollable='something'>

but I sort of doubt it, as that code seems to expect it to be a DOM element. (Sort of an unpleasant mix of jQuery and old-style DOM 0 handlers, too). That means that for the code to work, not only do you need that element to be on the page, but something will have had to stick a reference to a DOM node in the jQuery data store for the element.