If you have ever released a new release of Chrome or Safari, then you know that when you add a new tab The default screen is waiting for a click on where to have a grid like setup with your most favorite links. What makes it even better is the graphical interface, with the actual pictures of the websites they are representing.
I am trying to do something like this, how is it done? Are they just iframes? Isrames set with css? If anyone seems to have any information about the actual implementation of the simple celebration, please share it !! Thank you
In Chrome, I can select the visual source (Ctrl + U) or Web Inspector ( Shift + Ctrl + I to see the 'New Tab' page) These thumbnails are actually screenshots of browser windows (and dynamically added DOM to use javascript, so you will not be able to view the source of the page ), Looks like the source of thumbnails (copied from web inspector Or):
& lt; A class = "thumbnail-container" tabindex = "1" id = "t1" style = "left: 235px; top: 0px;" Href = "http: // www .ns.nl /" & gt; & Lt; Div class = "edit-mode-border" & gt; & Lt; Div class = "edit-bar" & gt; & Lt; Div class = "pin" title = "keep on this page" & gt; & Lt; / Div & gt; & Lt; Div class = "spacer" & gt; & Lt; / Div & gt; & Lt; Div class = "remove" title = "do not show on this page" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Span class = "thumbnail-wrapper" style = "background-image: url (chrome: // thumb / http: //www.ns.nl/);" & Gt; & Lt; Span class = "thumbnail" & gt; & Lt; / Span & gt; & Lt; / Span & gt; & Lt; / Div & gt; & Lt; Div class = "title" & gt; & Lt; Div style = "background-image: url (chrome: // favicon / http: //www.ns.nl/);" Dir = "ltr" title = "Denis Lerning de Mere de Tine Riste for NIS" "re-sponsor" for "NS NE Rejectors" and "Dyingelining with edirine die met tant relist"> re-sponsor for NS> N S Rejuvenators & lt; / Div & gt; & Lt; / Div & gt; & Lt; / A & gt; I think the safari makes more or less, but I can not see it at this time.
Comments
Post a Comment