I use a screenshot tool like SnagIt and this tool is able to make a screenshot of a specific element inside a website. I tried this feature with firefox, safari and ie, all runs fine. When I use the mouse pointer to aim an element, SnagIt shows a red box around the hovered element in the browser. For example, this tool knows the exact coordinates of a div or img element.
What is the technique behind this feature? Is there a common way for every browser? I've already used Spy++ to get the window handles, unfortunately this isn't the resolution.
I'm in a project in which I need this feature for different browsers.
Thank you very much,
Mark
If you want to know the x,y coordinates of any element in javascript, Then I suggest you use jquery [http://jquery.com] on your page and use its offset function.
Related
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.
If I want to make a div class in a CSS file which is simply a rectangular box on a page. how can I calculate the height and width of this div without excessive trial and error?
Really all I need is a simple tool which you can click on one section of the screen, and then click on another section of the screen and it gives you the horizontal, vertical, and diagonal pixel distance between the 2 clicked points. Does anyone know of a tool to do this? Perhaps I can create one, this seems very useful.
Screenshot > Open in GIMP or something similar > count pixels.
However, if you want actual developer tools, it depends on the browser:
Firefox has Firebug (add-on). To find it with Firebug, look in the HTML view, right-click your element, click "Inspect in DOM", and find "innerWidth/innerHright".
Chrome has Developer Tools (extension). I believe this shows you height/width just by hovering over the Element in HTML view.
Opera has something built-in called DragonFly. Select your Element in HTML view, and in the right window select "Layout" and look at the "clientWidth/clientHight".
I don't believe there's a way to find either with Internet Explorer or Safari though.
regarding the first part: you can tweak around with your div in chrome developer tools- very convenient.
https://developers.google.com/chrome-developer-tools/docs/elements
regarding the second part: you can write a function than handles the mouseclick events and calculates the number you want based on the coordinates. this function can then be used as a snippet in chrome dev tools.
I will try to write one for you in a few minutes...
On succession of a previous question I tried to find out if the next thing is possible:
Take you have a render, like a soccer player with a transparant background. You add this render to your html & css. The transparant parts are now part of the image 'box'; you can't click on links under the image transparant parts, but you can see them.
Is it possible to make these links clickable? Thus having the image as highest z-index, but still have the links clickable and working.
(the links have a lower z-index because their background then stops under the image, giving a nicer design)
(Or said otherwise: have a .png image with a transparant background not shown as a box, but as only the colored pixels. Preferable only in html/css)
I think it is not possible, to be honest. If you do not yet understand my question, maybe my previous will help you:
need help fixing the link's clickable area
You can use pointer-events to make an event (click in this case) bubble through to the layer below.
No, it's not possible from what I'm aware of. However you can do similar things to what you want that may be useful:
Turn an area into a link using <map>
Use pointer-events:none so that clicks are ignored on the top element
IE 10 provides the non-standard msElementsFromPoint method that allows you to "peek below" an element; you can do that inside the click handler and determine if the click point overlaps an anchor. If it does, triggering that element's click event would do what needs to be done.
Unfortunately I am not aware of similar functionality for other browsers or earlier versions of IE.
I've recently found that most of the measurements I thought I knew were actually different from what I thought they where due to browser specific defaults. I assessed that all my knowledge of my visual inspections were relative...item A is 20px so I can see that Item B is 22px. However because of browser hidden defaults...this method doesn't work too well. How can I know what absolute pixel count is.
Currently, I just created a 20px by 20px ruler in a graphics editor with tick marks.
Attached here
Now I can move this around by using absolute positioning and measure things. However is there something built into the development tools to do this. I'm using Firefox 10 right now.
Thanks
Chrome's inspector tool shows the dimension of any element that you happen to hover over. However, if you must remain loyal to Firefox, Firebug can show the exact dimensions of any element upon hover as well. When you open up Firebug, click "Layout" in the sidebar to the right. Then, when you hover over an element, the dimensions will appear within that box (no clicking necessary). Not exactly as intuitive as Chrome's inspector tool, but it works regardless.
Are you just looking for a tool to easily measure heights and widths without messing around in Firebug?
I'd suggest this add-on for Firefox (also available for Chrome): Web Developer
If this isn't what you're looking for, can you please clarify?
Edit: If you can't install software or add-ons, use the no-install Firebug Lite
there is a sweet measurement tool called "measure it." you can find it HERE. that's the best one i have found so far.
another thought... you could check and make sure all of your different browsers aren't at all zoomed in... view actual size etc...
also - are you using a "reset" of any kind ? if not - you could check out the meyer reset - or normalize... or - the freak reset... (that combines both).
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.