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:

1234567891011121314151617181920212223

.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:

1234567891011121314151617181920

$(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:

123456789101112131415161718192021222324252627282930313233343536

$(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?