Geekly Articles each Day
📜 ⬆️ ⬇️

Scrolling in web slices or how to cram

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

And everything is good, here is only 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 doesn’t fit there - the scroll bar will appear if there is no scrolling in the preview window for web slices.

For some web slices this does not matter. For example, for lots with eBuy , who like to cite as an example. One lot can be comfortably placed in a 320 x 240 window (the default preview window size). However, often web slices are some lists - the latest news, announcements, comments, and you never know. Try to open the valuta.online.ua page and add a web slice with the exchange rates. Now open it in the preview window. What, too, are you trying to turn the mouse wheel to view the contents, like me?
')
image

In principle, the user can stretch the window to a certain limit. But not the fact that everything fits even in this case and you cannot manage the size of the window yourself. But initially it opens with a size of 320 x 240 and does not adjust to the size of the displayed html.

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

So you can try to add the scroll yourself. It will look something like this:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> web slice</title>
<style type="text/css">
html { height: 100% }
body { padding: 0px; margin: 0px; height: 100% !important; overflow: hidden; }
#outer { overflow-x: hidden; overflow-y: auto; height: 100% }
#inner { padding: 10px; }
</style>
</head>
<body>
<div id="outer">
<div id="inner">
<!-- html web slice -->
</div>
</div>
</body>
</html>

As a result, we get a web slice, surrounded by 10px indents from the edges of the preview window. If the contents of the html will not fit - vertical scrolling will appear. The attributes “overflow-x” and “overflow-y” are unique to IE, but the web slices themselves are also unique to IE, so this will not create a problem.

How this scrolling will look like can be seen on the example of online football results .

image

There is one more thing that you need to pay attention to. Since we have to give out specially formed html for preview windows, the simplest way to create web slices with the help of 2-3 attributes will not suit us. We will use the “alternative display source” - the ability to specify a url that returns html for preview. For this:

We create a page that will generate the html we need. Let's say it will be /webslices.php (/webslices.aspx is for .NET cheats and simply / webslices for SEO optimizers :)

Add to the web slice code a pointer to this html:

<div class="hslice" id="slice">
<span class="entry-title"> web slice</span>
<a rel="entry-content" href="/webslice.php" style="display:none;"></a>
</div>

A longer description can be found in my post " Web Slices for IE 8 ". And of course, no article will replace the Web Slice documentation in MSDN. Good luck in your development!

Source: https://habr.com/ru/post/55310/

More articles:


All Articles