There are services like crazyegg.com that show you where visitors are resting their mouse cursors on your web page. My question is, given that people have different screen widths how can they be sure that my x coordinate is the same position on the page as another persons x coordinate? Meaning, two people may have the same mouse x coordinates, but since there screens are different widths, their mouse will be on a different part of the web page.
How can you create a web-page heat map service that takes this into consideration, and can be scaled and used across multiple different websites with different content sizes?
You can collect x & y data by element (like a main content div) rather than the entire viewport. In this fashion you can discard dead-space which is subject to a user's resolution.
You can add a clickhandler to the body or a wrapper div (better when your content is centered on the screen using margin: auto) that hold all the content of the page. The passed in MouseEvent hold the screenX/Y and the clientX/Y coordinates, where the former are the coordinates starting in the left top corner of the screen and the other are coordinates based on the top/left corner of the body or wrapper div. Using the clientX/Y coordinates made it easy to create a heat map cause you the same start point relative to your content over different screen sizes.
Instead of tracking the absolute x and y coordinate of the webpage, you can track the click coordination relative to the elements clicked. So, it would cater to different screen sizes and resolutions as the element position shifted.
There is also another aspect that you need to pay attention to which is each of the users' viewport width and the length of the full page (entire scrollable height) that you can adjust according to relative positioning.
At Howuku we did a lot of optimization on the mouse click and movement to ensure the precise and accurate datapoint that is dynamically generated for our website heatmap tool.
I hope this helps!
Related
Hoping someone can advise a good strategy for this.
I have a page I am trying to code that has five elements on it. The content of these elements will change as one uses the page ... sometimes consisting of text, sometimes images ... and importantly the height of the content will change (all built using JavaScript). The idea is that all of this will be visible on the screen at once.
The issue is that I want the elements to retain their positions on the screen (e.g., upper left, exact center, etc.) regardless of the size of the others. For example, the element in the middle may be a single line of text and may suddenly become a 300 px high image, may then become a 100 px high image. When that happens, I don't want the objects below it to move up or down.
(PS: this will only be used on a desktop computer)
Is there a way to HTML or CSS this to give these elements absolute positions (e.g., the one one in the middle: 50% from top, 50% from left, centered on the screen) regardless of the size of the others? I was previously just using line breaks and position things using line heights, but that causes elements lower on the screen to "move" down when the higher ones resize.
Any help or suggestions would be appreciated!
youc can use CSS for this, you should try with position property(relative/absolute)/ Check this out link and this link
I know how to change font size using CSS, and I know how to scale text inside a canvas, but is it possible to scale text outside of a canvas using CSS/JS?
My problem right now is that I want dynamic objects on a page to resize along with the page, but when there is text on those objects, it fails to resize correctly, since fonts only have sizes in full pixel amounts and not fractions I get "jitter" or "jumps" while the user is resizing. Using percent amounts on the fonts doesn't change the fact that there's no such thing as a "16.5" size font, a 30 character text will jump by at least 30 pixels per increment.
This also causes an issue with word wrapping giving inconsistent results between resizes, one word per line might decide to jump randomly to the next line or not based on the size:font relation and this snowballs for the entire paragraph.
Basically I want to get the same visual effect on every x,y window size without having to store all texts as images, and without creating a canvas for every single text that I use which sounds kind of ridiculous. Is this possible?
I believe your best bet for controlling typography to this degree is going to be with the vh, vw, and vmin & vmax CSS properties: These allow you to scale text based on the viewport height, width, and the smaller & larger of the two, respectively.
I personally find these work well at medium-to-larger size resolutions, but begin to breakdown at narrower viewport sizes, where it may be wiser to forgo this level of control. See Viewport Sized Typography on CSS-Tricks for usage and more information.
Upon a quick google search of how to calculate the browser resolution with javascript You get a fair amount of useful links on how to change the width (for example) of an element by calculating the screen width (with screen.width) then from there it is simple math to determine what you want the elements width to be. COOL However, that calculates the screen resolution, not the browsers current resolution if the browser is zoomed in, which is unfortunate. Sure you can set a constant width to a parent div and then the element wont be effected by a zoom at all. BUT is there a way to determine the total resolution of the view port left in a browser AFTER a zoom in or out has occured, rather than just the initial resolution? I cant seem to find anything...
Do you mean something like what that user was looking for?
Find real height of any DOM element when browser zoomed
Try to follow it.
I have a page in which I have a wheel of <div> elements, the entire wheel rotates when you click a button.
I achieve this effect by using CSS transforms, which are absolute in nature. However the wheel is very big, it looks nice on my HD display, but smaller screens get the edges cut off. I can not use % widths like I could with a normal layout, what I need is to scale the entire page down in the same way most browsers zoom functions work.
For myself I know that ctr+mouseWheel will zoom out the page so I can see the entire page, however I can not expect others to do this.
I know I can use -browser-transform: scale(amt); on a wrapper div to get the effect I want, however I can not figure out a way to do it dynamically. If I set the scale to .5 it will be .5, no matter the screen. I want the edges of the wheel to just be a few pixels from the edges of the screen on ANY screen. I know that media queries could be used to help the problem, but they would either leave me with results that are less than ideal, or require too many different queries. There must be a way to modify -browser-transform: scale(amt); programmatically, or some other way to have finite control.
Any thoughts?
Have you tried using media queries in css to target different screens. for example, have a media query in your css file that states that at a width of 320 - 480 pixels, the div containing this wheel is scaled to 50%. Then at 481-768 pixels, the div container is scaled to 75%. and from 769 pixels up, the div is scaled to 100%.
That should help you accomplish the dynamic scaling you want at different screen sizes. If you would like a demo, I'll be glad to make a jsfiddle showing it.
Scenario:
I have an area on the browser screen n x n in size (500px x 500px for example, ie 250,000 pixels).
As the mouse rolls over the area, it "paints" the pixels it passes.
Percentage of filled/unfilled pixels are displayed
Optional advanced scenario: As the mouse rolls over already painted pixels will "unpaint" those pixels, or paints those pixels in a different colour.
Solutions/Issues
What would be the most efficient way of detecting, logging and displaying the scenario?
The defined area could be a div, spacer image, image map, table, canvas?
How would the pixels be drawn?
image or div created for every mouse movement
server-side image created based on pixel co-ordinates?
Is it too inefficient to pass the mouse position(s) every time the position changes?
What would be an efficient way of displaying 250,000+ dynamic pixels/objects/data?
Check out my recent question for the drawing on canvas part, I got a number of good answers.