Using CSS only to Change backcolor of GridView or any table rows onmouseover

 I just learned a technique of applying a hover effect to an HTML table’s rows with the help of CSS, without using a single line of JavaScript, C#, VB, … etc. code.. all you hace to do is to define a new class with :hover selector.. 

Row Number 1

Row Number 2

Row Number 3

Let's suppose you have the following styles in your CSS file:

.tableClass

{

font-family: Tahoma;

      font-size: 9pt;

      font-weight: normal;

      color: #3d3d3d;

}

.tableRow

{

color: #3d3d3d;

      background-color: #daf1f2;

}

.tableAlterRow

{

background-color: #ece9ea;

      color: #3d3d3d;

}

To give the hover effect onmouseover, just add your styles to the following:

.tableClass tr. tableRow:hover,

.tableClass tr. tableAlterRow:hover,

.tableRow:hover,

.tableAlterRow:hover

{

   background-color:#199dbf !important;

   font-weight: bold;

}

Easy, right ;) !?

Passing url parameters to webpart in SharePoint

To pass the URL parameters to a webpart page in SharePoint, we can't use the "Page Viewer" webpart because it does not allow us to use the parameters in the URL.

So we use teh "Content Editor" webpart since it allows us to embed javascript code in it. We can then use an "iframe" with a generated URL from a JavaScript with URL parameters from the webpart page's URL.

First, create a webpart page, then insert a content editor webpart in it with the following code:

<script type="text/javascript">

    function getQueryStringRegExp(name) {

        var reg = new RegExp("(^|\\?|&)"

+ name + "=([^&]*)(\\s|&|$)", "i");

        if (reg.test(location.href))

return unescape(RegExp.$2.replace(/\+/g, " "));

        return "";

    }

    document.write("<iframe src='http://www.sitename.com/default.aspx?param1="+ getQueryStringRegExp('param1') + "' width=100% height=100%></iframe>");

</script>

The function getQueryStringRegExp is used to retrieve the parameter value from the page url.

Referece:

http://www.codebit.cn/pub/html/javascript/tip/javascript_get_url_parameter/

How to Fix Lightbox Effect for Blogger

Last week, I noticed a link to the updated Blogger interface at the top of the page. To tell the truth, I didnt like it at first.. and I couldn't work with it.. I changed it back to the old interface many times.. till I finally got used to it... I also used the new template designer to update My blogger design: colors, Background, Font..  etc.

Anyways, I then started to make a new post when I suddenly noticed... LIGHTBOX EFFECT IS NOT WORKING :O

yah it's normal as I have updated theblogger template , so I must re-followed the steps to add the LightBox effect from my previous post "How to add Lightbox effect to Blogger".. but it was still not working :(

here in this post I will show you How I fixed it using the same Script and CSS files in my previous post.

LightBox Effect

How to add Lightbox effect to Blogger

in this post i will show you the steps to add The Lightbox effect to Blogger (blogspot) blogs that is useful when your post has many images or images with large sizes, it helps people to save time browsing images in an impressive way.

LightBox effect