Javascript mouse click event

[Mirco]

How can I put a function when I click somewhere in the browser?

In the attachment there is an example

[admin]

Do you have any visualization elements there or is it just blank space?

[Mirco]

Side bands are blank space because I have set "Center plans, enable auto-sizing" in the Vis. configuration, but in the center of my page there are images, texts and objects

[admin]

Something to start with

CSS

Code:

.menu {
  z-index: 1000;
}

.overlay-left {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background-color: red;
  z-index: 999;
}

.overlay-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background-color: blue;
  z-index: 999;
}

JavaScript

Code:

$(function(){
  var body = $(document.body), el;

  // only apply script to user mode visualization
  if (!body.hasClass('usermode')) {
    return;
  }

  // create overlay element
  el = $('<div></div>').addClass('overlay-left').appendTo(body);
  el.on('vclick', function() {
    alert('clicked left');
  });

  // create overlay element
  el = $('<div></div>').addClass('overlay-right').appendTo(body);
  el.on('vclick', function() {
    alert('clicked right');
  });
});

[Mirco]

Thank you it works, but how can I adapt side bars? because this is the result

[admin]

Try this, but it will only work correctly if all plans have the same width:

Code:

$(function(){
  var body = $(document.body), leftEl, rightEl, timeout;

  // only apply script to user mode visualization
  if (!body.hasClass('usermode')) {
    return;
  }

  // create overlay element
  leftEl = $('<div></div>').addClass('overlay-left').appendTo(body);
  leftEl.on('vclick', function() {
    alert('clicked left');
  });

  // create overlay element
  rightEl = $('<div></div>').addClass('overlay-right').appendTo(body);
  rightEl.on('vclick', function() {
    alert('clicked right');
  });
  
  function setSize() {
    var rect = $('.layer.plan:visible').get(0).getBoundingClientRect()
        , width = Math.ceil((body.width() - rect.width) / 2);
    
    width = Math.max(0, width);
    leftEl.css('width', width);
    rightEl.css('width', width);
  }
  
  $(window).on('orientationchange resize', function() {
    clearTimeout(timeout);
    timeout = setTimeout(setSize, 150);
  });
  
  setSize();
});

[Mirco]

Thank you!!   It works perfectly! You are the best!

[admin]

There's no sound anywhere in this script, can you explain what kind of sound are you getting?