a href=”javascript:void(0);” — avoid the void

One of the most important hints about javascript and web development.

a href=”javascript:void(0);” — avoid the void

DotNetNuke skin customized

You will find in the following zipped file the default DNN-Blue skin but I made customized it to use div instead of tables and to be 4 columns instead of 3.

Note: You will find the admin panel down instead of top.

http://cid-fa1922bb57748e08.skydrive.live.com/self.aspx/Shared%20Source/NewSkin.zip

Select an option in select tag by value

<SELECT name="fruit">
  <OPTION value="apple">apple</option>
  <OPTION value="orange">orange</option>
  <OPTION value="pear">pear</option>
</SELECT>

If you need to select an option in a select tag by index you can do the following:

document.getElementById('dropDown').selectedIndex = 1;

But if you want to select an option in a select tag by value you can do the following:

for(var i=0; i<document.getElementById('dropDown').options.length;i++)

        if(document.getElementById('dropDown').options[i].value == "MYVALUE")
          document.getElementById('dropDown').selectedIndex = i;

Disable or stop AutoCompleteExtender (Javascript)

To disable or stop the AutoCompleteExtender from running or calling its service to load auto suggested list, (Using Javascript)

Its very simple

-Set the BehaviorID property for the AutoCompleteExtender

<ajaxToolkit:AutoCompleteExtender
   runat="server"
   ID="autoSuggest"
   TargetControlID="SearchBox"
   ServiceMethod="GetSuggestedList"
   ServicePath="~/_Services/AutoSuggest.asmx"
   MinimumPrefixLength="2"
   CompletionInterval="1"
   EnableCaching="true"
   CompletionSetCount="10"
   CompletionListCssClass="AutoSuggestSearch"
   CompletionListItemCssClass="listItem"
   CompletionListHighlightedItemCssClass="highlightedListItem"
   BehaviorID="autoSuggest"
     />

Then using javascript just write:

function selectType()
{
   var a = $find("autoSuggest");
   a.set_serviceMethod('');
}

By setting the service method to empty, the autosuggestextender will not find the service to call and will stop working

Window.open invalid argument

Just a hint about a simple problem could happen to you while writing javascript code to open a new browser window using window.open, it may give you the following error message box

in case you wrote it like that:

window.open("http://www.google.com", "This Is My Page", "status=1, width=300,height=500");

where is the wrong argument?

its the name argument "This Is My Page"

You can write it like that (without spaces):

window.open("http://www.google.com", "ThisIsMyPage", "status=1, width=300,height=500");

Note:

It wont give you any errors in firefox in both cases, this error just happen in IE.

window.open good article

Add Microsoft Ajax reference to javascript file

To use microsoft ajax library reference inside your javascript file and see the Intellisense (VS 2008) while writing your javascript code:

/// <reference name="MicrosoftAjax.debug.js" />

Add to bookmarks

Javascript simple code to add the current url to bookmarks (FireFox), or Favorites (IE).

function addToBookMarks()
{
   if(document.all) //IE
       window.external.AddFavorite(location.href,document.title);
   else if(window.sidebar)window.sidebar.addPanel //FireFox
       (document.title,location.href,'');
}

Decimal To Fraction

Change from decimal to fraction using javascript:

I got a sample after searching on google and found a good sample, i can't remember the website link, but i tried it in a website and it worked fine with me.

Number.prototype.fraction=fraction;
      function fraction(item){
          if(item.value != "" && item.value.indexOf(".")!=-1 && item.value.indexOf("/")==-1)
          {
              decimal=item.value
              if(!decimal){
                  decimal=this;
              }
              whole = String(decimal).split('.')[0];
              decimal = parseFloat("."+String(decimal).split('.')[1]);
              num = "1";
              for(z=0; z<String(decimal).length-2; z++){
              num += "0";
              }
              decimal = parseInt(decimal*num);
              num = parseInt(num);
              for(z=2; z<decimal+1; z++){
                  if(decimal%z==0 && num%z==0){
                      decimal = decimal/z;
                      num = num/z;
                      z=2;
                  }
              }
              item.value= ((whole==0)?"" : whole+" ")+decimal+"/"+num;
          }
      }

SlideShowExtender Fade effect

You can make fade effect while sliding and there is a good way by using SlideShowExtender + AnimationExtender like the following good sample:

<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
  [System.Web.Services.WebMethod]
  public static AjaxControlToolkit.Slide[] GetSlides()
  {
      return new AjaxControlToolkit.Slide[] {
          new AjaxControlToolkit.Slide("AjaxToolKit/SliderShowImages/Blue hills.jpg", "Blue Hills", "Go Blue"),
          new AjaxControlToolkit.Slide("AjaxToolKit/SliderShowImages/Sunset.jpg", "Sunset", "Setting sun"),
          new AjaxControlToolkit.Slide("AjaxToolKit/SliderShowImages/Winter.jpg", "Winter", "Wintery..."),
          new AjaxControlToolkit.Slide("AjaxToolKit/SliderShowImages/Water lilies.jpg", "Water lillies", "Lillies in the water"),
          new AjaxControlToolkit.Slide("AjaxToolKit/SliderShowImages/VerticalPicture.jpg", "Sedona", "Portrait style picture")};
  }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
  <title>Untitled Page</title>
<script language="javascript" type="text/javascript">
var fadein;
var fadeout;

function pageLoad()
{
  var ss=$find("ss1");
  ss.add_slideChanging(onChanging);  

  var ae=$find("ae");
  var be=ae.get_OnLoadBehavior();
  var an=be.get_animation();
  fadein=an.get_animations()[1];
  fadeout=an.get_animations()[0];

  fadein.set_duration(0.5);
  fadeout.set_duration(0.5);
}
function onChanging(sender, args)
{
  fadein.play();
  window.setTimeout("fadeout.play()", 1000);
}
</script>
</head>
<body>
  <form id="form1" runat="server">
  <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptLocalization="true" EnableScriptGlobalization="true">
  </asp:ScriptManager>
   <asp:Image ID="Image1" runat="server"
              Height="300"
              Style="border: 1px solid black;width:auto"
              AlternateText="Blue Hills image" />
    <ajaxToolkit:SlideShowExtender ID="slideshowextend1" runat="server"
              TargetControlID="Image1" BehaviorID="ss1"
              SlideShowServiceMethod="GetSlides" PlayInterval="2000"
              AutoPlay="true"
              Loop="true" />
   <ajaxToolkit:AnimationExtender id="MyExtender" runat="server" BehaviorID="ae" TargetControlID="Image1">
<Animations>
  <OnLoad>
  <Sequence>
    <FadeOut Duration="0" Fps="20" />
    <FadeIn Duration="0" Fps="20" />
  </Sequence>
  </OnLoad>
</Animations>
</ajaxToolkit:AnimationExtender>             
  </form>
</body>
</html>

Download Sample

Reference

SlideShowExtender Set Current Image Index, Src

I wanted to set the SlideShowExtender current image, i found just one good way to do so using simple java script code

1- Add the SlideShowExtender:

<cc1:SlideShowExtender BehaviorID="behaviorID" ID="SlideShowExtender1" runat="server"

SlideShowServiceMethod="GetSlides" PlayInterval="9000" TargetControlID="imgScreen"

UseContextKey="True" AutoPlay="true" Loop="true">

</cc1:SlideShowExtender>

2- Add the following java script code:

function changeImage(imgUrl, imageIndex){
slider1 = $find("behaviorID");
slider1._currentIndex = imageIndex-1;
slider1.setCurrentImage = imgUrl;
}