Wednesday, July 27, 2011

Windows taskbar showing only one item per IE instance (not one per tab)

After I installed IE9 on Windows Server 2008, found that in Windows taskbar for Internet explorer are showed items for each open IE tab. If you are get used to showing only IE browser instances in Windows taskbar like me then you just found easy guide how to conifgure your IE to show only one item in Windows taskbar per instance.

So, you have many tabs opened in Internet Explorer, and widnow taskbar display many previews, one for each opened tab. On image below, two instances of IE are opened, first instance have two opened tabs and another IE instance have one opened tab.

Windows taskbar preview for IE 9 with Show previews for individual tabs in taskbar option on






And you think it would be better if only one preview per instance of IE will be visible. In our example we want to have two previews (imagine what a mess will be if you have dozen of open tabs) for each IE instance one without tabs:

Windows taskbar preview for IE 9 without tabs










Solution:
  • Click the Tools option at the top right corner of your Internet Explorer browser window and then click on Internet Options

    Click the Tools option at the top right corner of your Internet Explorer browser window and then click on Internet Options



















  • Internet Options --> General --> Tabs --> Settings

    In the Internet Options screen, under General tab, find Tabs category and click on the Settings button



















  • uncheck option "show previews for individual tabs in the taskbar *", click OK and restart your Internet Explorer.
  • Tabbed browser settings













Now you configured your IE to show previews in Winodws taskbar only for each instance not for tabs.


Monday, July 25, 2011

jQuery picture zoom

How to make jQuery picture zoom effect in a simple way. This jQuery image zoom effect you can easy add to your web or maybe to blogger's post. On this blog you can find more useful jscript effect tutorials.

Let's first take a look how jQuery picture zoom look like:




So when visitor hover a mouse over small picture zoom portion of that image appeared on right side with help of jQuery. On mouseover, image is zoomed! I believe that this is one of the simplest implementation of picture zoom effect you can find on Internet.

To accomplish picture zoom with jQuery like in demo you need to add this code on your web page:


<script src="[PathToJqueryFile]" type="text/javascript"></script>

<script src="[PathTojqzoomFile]" type='text/javascript'></script>

<script type="text/javascript">

    $(function () {
        var options =
{
    zoomWidth: 275,
    zoomHeight: 275
}
        $(".jqzoom").jqzoom(options);

        var options2 =
{
    zoomWidth: 275,
    zoomHeight: 275,
    zoomType: 'reverse'
}

        $(".jqzoom2").jqzoom(options2);

    });
</script>
<!--JQZOOM-STOPS-HELP@-http://bloggerstop.net-->

<a href="[PathToBiggerImage]" class="jqzoom" style="" title="Paris">

  <img src="[PathToSmallerImage]"  title="kawasakigreen" style="border: 1px solid #666;"><br />
</a>


You can copy code above and replace green words with real values:

  • [PathToJqueryFile] - path to jquery-1.3.2.min.js file. You must have this file to implement any jQuery functionality on your web site. You can download this file here.

  • [PathTojqzoomFile] - path to jquery.jqzoom1.0.1.js file. This file is needed for zoom functionality. You can download this file here.

  • [PathToBiggerImage] - path to image that will be displayed as a zoomed part of picture (in example it is zoomed portion of image which appear on the right side of the screen)

  • [PathToSmallerImage] - path to image that will be displayed as a image that you can move cursor over it (in example this is left picture)



In the end, here is some real code that works but please use it just for testing purpose. If you want to implement jquery picture zoom fuctionallity on you page, please, do not use paths you find on demo code below but download jqury files and upload them somewhere.


<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://nikofer.opendrive.com/files/54142960_wVVW5/jquery.jqzoom1.0.1.js" type='text/javascript'></script>

<script type="text/javascript">

    $(function () {
        var options =
{
    zoomWidth: 275,
    zoomHeight: 275
}
        $(".jqzoom").jqzoom(options);

        var options2 =
{
    zoomWidth: 275,
    zoomHeight: 275,
    zoomType: 'reverse'
}

        $(".jqzoom2").jqzoom(options2);

    });
</script>
<!--JQZOOM-STOPS-HELP@-http://bloggerstop.net-->

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjS8KHDSFc9LUf7Z8GIo920lA6j_EjMvQOCvQcT5puVzZoH3-i_MYjha2w4Siej9wd2utJSwagutC5UHGDvYZcV2dgGq0kI8dn5GsF1PPpYakYosgenP59zW69JohD-Ai3e-Zws-w46YYE/s800/SealSmall.jpg" class="jqzoom" style="" title="Paris">

  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2KDEWmLwz2Mx5wo-3cBnjNn-4e_HPYx6xzeMAikXolzag2JN7SJcO21oMpe-R_k9pW_wIusC1YjgnrLHPn74FHrspa1DpeSs-QKgF4nKkRli8dMH7V-mxipLbY95SMVgcIeXqJng0Tnk/s144/SealBig2.JPG"  title="kawasakigreen" style="border: 1px solid #666;"><br />
</a>