Use className="myclass" rather than setAttribute("class", "myclass")

I had to build dynamic html using javascript and I came up with this problem - setAttribute("class", "myclass") didn't work. You should use className instead. The same with setAttribute("onclick","myfunc") - will not work. You should use onclick directly.

Great Javascript Resources

Here are some of the javascript resources I found on the net.

Yahoo! User Interface Library - a huge library with many controls and functions, including animation, effects, menus, calendar and so on.

script.aculo.us - has some basic effects that are really nice to use like fading in, fading out, folding, shaking, pulsating and so on.

Smooth Gallery - a great piece of javascript code that is perfect for showing pictures.

Lightbox2 - great for showing photos!

Shadowbox - ideal for photos or galleries, shows even flash and movies.

Carousels for showing large content.

Buttons Hover Effect With Javacript

I have a lot of pages that have buttons and I wanted to have mouse over effect without setting onmouseover and onmouseout in the html source. The best, of course, would be to use css style like a:hover, but I don't think this is going to work with older browsers. So, I used dynamically attaching to events for all buttons that have the same css class - 'inputButton' for example. I have two functions overBtn and outBtn that change the className of the button to 'inputButtonHover' on mouseover and back to 'inputButton' on mouseout. Here is the code:

<script type="text/javascript">
function overBtn( e )
{
var target = getTarget( e );
target.className = 'inputButtonHover';
}

function outBtn( e )
{
var target = getTarget( e );
target.className = 'inputButton';
}

function getTarget( e )
{
if ( window.event )
{
target = window.event.srcElement;
}
else if ( e )
{
target = e.target;
}

return target;
}

var buttons = document.getElementsByTagName( 'input' );

if( typeof window.addEventListener != 'undefined' )
{
//.. gecko, safari, konqueror and standard
window.addEventListener( 'load', MouseOverEffect, false );
}
else if( typeof document.addEventListener != 'undefined' )
{
//.. opera 7
document.addEventListener( 'load', MouseOverEffect, false );
}
else if( typeof window.attachEvent != 'undefined' )
{
//.. win/ie
window.attachEvent( 'onload', MouseOverEffect );
}

function MouseOverEffect()
{
for ( var i = 0; i < buttons.length; i++ )
{
if( ( ( buttons[i].type == 'submit' ) ( buttons[i].type == 'button' ) ) && ( buttons[i].className == 'inputButton' ) )
{
if ( buttons[i].addEventListener )
{
buttons[i].addEventListener( "mouseover", overBtn, false );
buttons[i].addEventListener( "mouseout", outBtn, false );
}
else if ( buttons[i].attachEvent )
{
buttons[i].attachEvent( "onmouseover", overBtn );
buttons[i].attachEvent( "onmouseout", outBtn );
}
else
{
buttons[i].onmouseover = overBtn;
buttons[i].onmouseout = outBtn;
}
}
}
}
</script>

PopupControlExtender To Show On MouseOver

This is an example of how to do it. Set unique BehaviorID to PopupControlExtender and call showPopup/hidePopup with it:

<ajaxToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server" BehaviorID="pce" ............... />

<asp:Panel onMouseOver="$find('pce').showPopup();" onMouseOut="$find('pce').hidePopup();" />

NOTE: If you use it in a user control that could be used more than once on a page - give unique BehaviorID to each one.

FileUpload Control Within An UpdatePanel

This will work by forcing a full postback. In order to do this, we use PostBackTrigger:

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<Triggers>
<asp:PostBackTrigger ControlID="Button1" />
</Triggers>
<ContentTemplate>
<ews:DatePicker ID="DatePicker1" runat="server" UsingUpdatePanel="True" OnSelectionChanged="DatePicker1_SelectionChanged" /><br />
<asp:Label ID="Label1" runat="server"></asp:Label><br /><br />
<asp:FileUpload ID="FileUpload1" runat="server" /><asp:Button ID="Button1" runat="server"
Text="Upload" OnClick="Button1_Click" />
</ContentTemplate>
</asp:UpdatePanel>

See: Triggers - a better control over postback , FileUpload example

Visibility:hidden vs Display:none

These two style properties do two different things.

visibility: hidden hides the element, but it still takes up space in the layout.

display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.