The BODY width of my mobile sites + radio jukebox website is 600 pixels or less (used for PCs, tablets, and smartphones).
As an experiment, I want to click any blank space to the right of the BODY (typically on a PC) to do something. The first test is to just jump back to the main menu. A later test is to scroll back to the top of iframe content. Since this occurs outside of the <body> declaration, I put an onClick statement in the <html> tag.
<html xmlns="http://www.w3.org/1999/xhtml"
onclick="var iframeX=600, evX=event.pageX; if(evX>iframeX)d123(1);">
Example test page: http://m.gooplusplus.com/i8-test.php (Sorry, deleted during cleanup.)
This works as long as I click to the right of the initial 600 pixels. However, when I reassign variable iframeX to a smaller value of 356, there is no action when I click in the 356-600 pixel range.
To test, go to the test page, click on the meter or info icon or any content link.
(1) Cursor near right edge of the screen and click. You get the main menu again.
(2) Click meter again and cursor just right of menu and click. Now nothing happens.
Any ideas?
Well after some testing, I think that I figured it out.
I should not have set global variable iframeX in the <html> onclick statement. I should have deferred creating iframeX until later in one of my <head> <script> sections.
I don't know if this is cross-browser compatible but it works in current Windows versions of Google Chrome, Firefox, and IE 11.
The new <html> statements is almost the same:
<html xmlns="http://www.w3.org/1999/xhtml"
onclick="var evX=event.pageX; if(evX>iframeX)d123(1);">
http://m.gooplusplus.com/i8-test-solved.php
Sorry, test file was deleted during directory cleanup. Working solution is in source code: