Page Transition Effects

We have very interesting transition effects for entry and exit from our webpage

Choose the transition of your choice and copy the code in the head section of master page or respective web page(if not using master pages in your website).

So here we go.......

Blinds 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=1)" 

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Blinds(Duration=1)"

Barn 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Barn(Duration=1)" 

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Barn(Duration=1)"

CheckerBoard 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=1)" 

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=1)"

Fade 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=1)" 

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=1)"

GradientWipe 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=1)" 

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=1)"

Inset 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Inset(Duration=1)"

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Inset(Duration=1)"

Iris 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Iris(Duration=1)" 

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Iris(Duration=1)"

Pixelate 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=1)" 

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=1)"

RadialWipe 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RadialWipe(Duration=1)" 

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RadialWipe(Duration=1)"

RandomBars 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=1)" 

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=1)"

RandomDissolve 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=1)"

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=1)"

Slide 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(Duration=1)" 

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(Duration=1)"

Spiral 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Spiral(Duration=1)" 

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Spiral(Duration=1)"

Stretch 

 

Strips 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Strips(Duration=1)" 

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Strips(Duration=1)"

Wheel 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Wheel(Duration=1)" 

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Wheel(Duration=1)"

ZigZag 

meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=1)" 

meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=1)"

NOTE: Please change each meta in tag format <> when you paste this in your website.

How to select and highlight a row in gridview using Javascript

If you have ever used the ASP.NET GridView control , you will know that the user is able to select rows within the grid. While this is a great feature of the GridView control, you would normally have to select a row using a CommandField or a hyperlink column with a CommandName="Select" property included. This, I think just looks a bit naff.

Surely, there is a better way. Well luckily there is, we can simply use client side JavaScript to do the row selection. That is what this article is all about. The code is minimal, and very easy to understand, but I think it is useful code, and I also think it is something that anyone that works with the GridView control should know.

How It Works

It's very easy actually, all we do is first we will associate a javascript function on click the mouse click event of each row Gridview. Here's the slice of code for that

protected void GridMultiD_RowCreated(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

e.Row.Attributes.Add("onclick", "onGridViewRowSelected('" + m_iRowIdx.ToString() + "')");

}

m_iRowIdx ++;

}

Here

m_iRowIdx is a global variable with default value 0. With this we have attached OnGridViewRowSelected method on click of row. So as soon as user will click on any row of grid this method starts its work.

Now lets see how this method works which we will code on .aspx page:

var gridViewCtlId = '<%=GridMultiD.ClientID%>';// GridMulti is the name of our grid

var gridViewCtl = null;

var curSelRow = null;

function getGridViewControl() {

if (null == gridViewCtl) {

gridViewCtl = document.getElementById(gridViewCtlId);

}

}

function onGridViewRowSelected(rowIdx) {

var selRow = getSelectedRow(rowIdx);

if (curSelRow != null) {

curSelRow.style.backgroundColor = '#ffffff';

}

if (null != selRow) {

curSelRow = selRow;

curSelRow.style.backgroundColor = '#BA9999';

}

}

function getSelectedRow(rowIdx) {

getGridViewControl();

if (null != gridViewCtl) {

return gridViewCtl.rows[rowIdx];

}

return null;

}

Explanation: This method gets row id of the clicked row as argument. we first get the gridview control using GetGridViewControl() function then in getSelectedRow() function we reach to that particular row. Finally we color that row to make it look selected.

That's it

And that as they say is that. Simple wasn't it. But I think it's a useful one, I have always wondered how my online bank did produced such a nice grid.

Conclusion

Well that's it actually. Although the code is very simple, I'm sure you'll agree this JavaScript selection method sure looks better than having a button column, or a hyperlink column to do the row selection. And it's more intuitive, I think. The users simply point and click the row they want, job done.