Scrolling in web slices or how to cram unbeatable

One of the new features of IE 8 is web slices, fragments of web pages that can be viewed by a browser without opening the entire page.

And everything would be fine, here is just one unpleasant trifle - there is no automatic scrolling in the preview window for web slice. If the same html is simply opened in the browser and it does not fit there, the scroll bar will appear, if there is no scroll in the preview window for web slices.

For some web slices this does not play any role. For example, for lots with eBuy , which are so fond of citing as an example. One lot can be comfortably placed in a 320 x 240 window (default preview window size). However, often web slices are some kind of lists - the latest news, announcements, comments, but you never know. Try to open the page.valuta.online.ua and add web slice with exchange rates. Now open it in the preview window. What, are you also trying to spin the mouse wheel to view the contents, just like me?



In principle, the user can stretch the window to a certain limit. But it’s not a fact that everything will fit even in this case, and you won’t be able to control the size of the window yourself. And initially it opens with a size of 320 x 240 and does not adapt to the size of the displayed html.

Of course, something can be done in this case. For example, limit the number of list items (first 5) and display no more than 100 characters in each item. But then web slice can lose its main advantage and instead of information that can be quickly viewed, turns into a regular banner like “Hey, look what we have! If you want to see it, go to the site! ”

So you can try adding the scroll yourself. It will look something like this: As a result, we get a web slice surrounded by 10px padding from the edges of the preview window. If the html content does not fit, a vertical scroll will appear. The “overflow-x” and “overflow-y” attributes are unique to IE, but the web slices themselves are also unique to IE, so this will not create a problem.


  
    
    
  
  
    

      

        
      

    

  




How such a scroll will look can be seen on the example of online football results .



There is one more point that you need to pay attention to. Since we must give away specially formed html for the preview window, the simplest way to create web slices using 2-3 attributes will not suit us. We will use “alternative display source” - the ability to specify a url that returns html for preview. To do this:

Create a page that will generate the html we need. Let's say it will be /webslices.php (/webslices.aspx for .NET chicks and just / webslices for SEO optimizers :)

Add a pointer to this html to the web slice code: You can find a longer description in my post " Web Slices for IE 8

  Заголовок web slice
  

". And of course, no article can replace the Web Slice documentation on MSDN. Good luck with your development!