How to draw rectangle on the website to highlight?


Tags: php,javascript,html5,css3

Problem :

Is there any way to implement a Google feedback like feature as shown here? We can make the website slightly black-out using CSS, but how can we draw a rectangle on the that particular interface like highlighting some text or error. We can use same concept like sprite cow, has used to highlight the rectangle on particular image link. Any kind of idea and source is welcomed.

Thanks



Solution :

I asked myself this question recently and when looking at it through the chrome debugger it would appear that they are using some techniques that are more advanced than just sectioning off the screen into highlighted and un-highlighted areas.

The first thing to notice is that google uses 5 iframes to acheive their feedback system.

google-feedback-mask-frame : This is used just for the mask, it covers the whole screen. I'm not sure why they chose to use a whole iframe for this. But it serves the purpose of making sure you dont click any page links in feedback mode

google-feedback-screenshot-frame :This is where the real magic happens I suspect. It contains a copy of the page you were viewing, but with some proprietary HTML tags (<gft></gft>) to let the script know where highlight-able content is (images, text, links, etc.)

google-feedback-feedback-frame : This holds the controls for the highlighted areas as well as the X button for the whole widget.

To pull off the effect google actually does use a bunch of sections like @Jani Hartikainen suggests. In the screenshot below you can see that when you have multiple selections there's quite a few div's that need to be created to accommodate the effect.

enter image description here

I'm sure there's a very complicated algorithm for figuring out where all the div's go, but that's what makes software dev fun right??

google-feedback-proxy-frame : has the controls that you see in the bottom right side.

google-feedback-render-frame : This one is a bit more mysterious, all it contains is a script called render_frame.js which is obviously obfuscated and illegible.

In conclusion, using sections IS the way that google does it but there's a lot more magic that allows them to auto-highlight links and images. If you find out more I'm really interested too so let me know!


    CSS Howto..

    within mdl-card__supporting-text not properly shown

    How to use particular CSS styles based on screen size / device

    How can I apply CSS to a JPG server-side?

    How to position some text?

    how to get the css floating property to work with four divs?

    How to split a div into multiple rows and columns in css?

    CSS how to align vertically center div floating elements of menu?

    How can i make the horizontal navigation menu center aligned

    How to create a CSS shade effect with a faded sidebar

    In CSS, how can I give two styles to same div according to its level on a
      list?

    css - How to set fixed width of div that is display:inline

    CSS: How do I make text indent for a label with long text?

    “ul li a:link, a:visited” and “ul li a, visited” how they different?

    css float: left clash/collision, how to avoid?

    Displaying a title and description on a jquery slideshow

    How to arrange three flex div side by side

    How to move a div's border “up” one pixel with css

    How do I center a Bootstrap div with a 'spanX' class?

    How to make a dropdown sub-menu expand to the right in Bootstrap 3

    How do I center the contents in this div?

    How to Clear Every Third Box in a Row? [duplicate]

    How to apply css styles to dynamic JavaScript array?

    How to select Parent Div in CSS [duplicate]

    How to Implement YUI Compresser in a website [closed]

    how to remove extra css and js link in twitter-bootstrap-rails

    IE11 CSS bug with clear:right - how to workaround?

    Css How to add round corners when hover li element?

    How to include css font in Firefox and internet explorer?

    How do I align tables with HTML?

    How to reverse a sequence of CSS transitions and transforms which contain span:nth-child