Thursday, 10 April 2014

AdRotator using JQuery.

ASPX Page:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Adrotator - Rotate advertisements on Web Page using jQuery</title>

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            setInterval(function () {
                $("#adr").load(location.href + " #adr", "" + Math.random() + "");
            }, 2000);
        });
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <p>
        Sample ..</p>
    <div class="ads">
        <asp:AdRotator ID="adr" AdvertisementFile="~/App_Data/Ads.xml" KeywordFilter="small"
            runat="server" />
    </div>
    </form>
</body>
</html>

XML:
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
  <Ad>
    <ImageUrl>~/images/etechpulse.png</ImageUrl>
    <NavigateUrl>http://www.etechpulse.com</NavigateUrl>
    <AlternateText>etechpulse home</AlternateText>
    <Impressions>40</Impressions>
    <Keyword>small</Keyword>
  </Ad>
  <Ad>
    <ImageUrl>~/images/google.png</ImageUrl>
    <Width>150</Width>
    <Height>150</Height>
    <NavigateUrl>http://www.Google.com</NavigateUrl>
    <AlternateText>Google home</AlternateText>
    <Impressions>20</Impressions>
    <Keyword>small</Keyword>
  </Ad>
  <Ad>
    <ImageUrl>~/images/yahoo-mail.png</ImageUrl>
    <Width>150</Width>
    <Height>150</Height>
    <NavigateUrl>http://www.mail.yahoo.com/</NavigateUrl>
    <AlternateText>Sign in to yahoo mail</AlternateText>
    <Impressions>40</Impressions>
    <Keyword>small</Keyword>
  </Ad>
</Advertisements>