Databases
StackOverflow2013
Postsdbo
POBrowser relative positioning with jQuery and CutyCapt
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POBrowser relative positioning with jQuery and CutyCapt
    primarykey
    data
    text
    <p>I've been using CutyCapt to take screen shots of several web pages with great success. My challenge now is to paint a few dots on those screen shots that represent where a user clicked.</p> <p>CutyCapt goes through a process of resizing the web page to the scroll width before taking a screen shot. That's extremely useful because you only get content and not much (if any) of the page's background.</p> <p>My challenge is trying to map a user's mouse X coordinates to the screen shot. Obviously users have different screen resolutions and have their browser window open to different sizes. The image below shows 3 examples with the same logo. Assume, for example, that the logo is 10 pixels to the left edge of the "content" area (in red). </p> <p>In each of these cases, and for any resolution, I need a JavaScript routine that will calculate that the logo's X coordinate is 10. Again, the challenge (I think) is differing resolutions. In the center-aligned examples, the logo's position, as measured from the left edge of the browser (in black), differs with changing browser size. The left-aligned example should be simple as the logo never moves as the screen resizes.</p> <p>Can anyone think of a way to calculate the scrollable width of a page? In other words, I'm looking for a JavaScript solution to calculate the minimum width of the browser window before a horizontal scroll bar shows up. And I need to do this without first knowing any element IDs or class names.</p> <p>Thanks for your help!</p> <p><img src="https://i.stack.imgur.com/smviy.png" alt="alt text"></p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USTyler Brinks
    1. USTyler Brinks
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POBrowser relative positioning with jQuery and CutyCapt
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POBrowser relative positioning with jQuery and CutyCapt
      1. USJanis Peisenieks
      1. VTFavorite
    3. VO
      singulars
      1. POBrowser relative positioning with jQuery and CutyCapt
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload