Logic Machine Forum
Javascript mouse click event - Printable Version

+- Logic Machine Forum (https://forum.logicmachine.net)
+-- Forum: LogicMachine eco-system (https://forum.logicmachine.net/forumdisplay.php?fid=1)
+--- Forum: Scripting (https://forum.logicmachine.net/forumdisplay.php?fid=8)
+--- Thread: Javascript mouse click event (/showthread.php?tid=449)

Javascript mouse click event - Mirco - 02.11.2016

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

In the attachment there is an example

RE: Javascript mouse click event - admin - 02.11.2016

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

RE: Javascript mouse click event - Mirco - 02.11.2016

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

RE: Javascript mouse click event - admin - 02.11.2016

Something to start with Smile

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');
  });
});


RE: Javascript mouse click event - Mirco - 02.11.2016

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

RE: Javascript mouse click event - admin - 02.11.2016

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();
});


RE: Javascript mouse click event - Mirco - 02.11.2016

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

RE: Javascript mouse click event - admin - 21.11.2016

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