Error message

The spam filter installed on this site is currently unavailable. Per site policy, we are unable to accept new submissions until that problem is resolved. Please try resubmitting the form in a couple of minutes.

Detecting Body Background Image Click with JQuery on a Drupal Zen Sub Theme

Category: 

So the other day I needed to detect when someone clicks on the background image of my drupal zen sub theme. Here is how I did it using jquery:

$(document).ready( function() {
		
  $('body').click(function (e) {

    var page_width = $('div#page').width();
    if (page_width == null) { return; }
    if (document.getElementById("admin-menu") != null) { return; /* ignore body click event if admin menu present */ }
    var x_pos = e.pageX;
    var y_pos = e.pageY;
    var win_width = $(window).width();
    var doc_width = $(document).width();
    var position = $('div#page').position();
    
    // begin: helpful debug info
    var debug_info = "";
    debug_info += "left: " + position.left + ", ";
    debug_info += "top: " + position.top + " | ";
    debug_info += "x: " + x_pos + ", ";
    debug_info += "y: " + y_pos + ", ";
    debug_info += "window w: " + win_width + ", ";
    debug_info += "document w: " + doc_width;
    //alert(debug_info); // uncomment to see debug info
    // end
	
    if ($.browser.msie || $.browser.mozilla) {
      if (x_pos <= position.left || x_pos >= (position.left+page_width)) {
	alert('clicked on background image');
      }
    }
    else if ($.browser.webkit || $.browser.safari) {
      if (x_pos <= (win_width-page_width-x_pos) || win_width-x_pos <= (win_width-page_width)/2) {
	alert('clicked on background image');
      }
    }

  });
});

There is a conditional in the code above that prevents usage of the 'admin-menu' from triggering this event.

The separate logic for webkit/safari is used because zen fixed width layouts use an auto margin on the page div, which causes the x and y pos to be reported differently in webkit browsers.

Add new comment