Unique way of Checking Internet Availability

     I constantly try to improve my browser homepage. The most recent addition that I made was adding animation to the links. I had been using the icons of the webpages to show the links.Just using the icons bettered the appearance of the page but I wasn't satisfied (I never am! ). Anyways, so I added animation to the icons. I did not do something special but I just made the icon's size larger when the mouse hovered over it. This task can be done by simply adding this CSS:

.img hover

{

  height:50px;

  width:50px;

}

The initial height and width were 40 px each.

      Anyways, the main tweak that I made was to check the internet availability.Initially I put an i-frame of my blog and hence if the connection would not be available, it would be seen in the frame.But in this trick, if there was no internet connection, the page looked ugly. So, I thought of a new tweak. I put an image at the top of the page and the location of this image was not on my hard-drive but on the internet.In the alt part of the tag, I wrote down "You are not currently connected to the internet". 

<img src="example.com/asdf.jpg" alt="You aren't connected to the internet" />

This tweak, showed my connection status at the top of the page and also, if there wasn't an internet connection, it didnot take away the look of the page.

     But, there is one problem with this technique, chrome doesnot show the alternate text(Why??) .I will find some unique solution for chrome as well but I won't promise anything. Anyways, I am loving this tweak in my firefox and IE browsers. Hope you will like it too.

   Happy coding!

Tweet