Yasserzaid’s Weblog

December 22, 2008

Using Marquee

Filed under: Javascript — yasserzaid @ 8:27 pm

Try this example to use Marquee with direction

Ex1:

<html>
<body>
<script language=”JavaScript”>
    function function1(){
        document.all.myMarquee.direction = “up”;
    }
    function function2(){
        document.all.myMarquee.direction = “left”;
    }
    function function3(){
        document.all.myMarquee.direction = “right”;
    }
    function function4(){
        document.all.myMarquee.direction = “down”;
    }
</script>
<marquee id=”myMarquee” bgcolor=”cyan”>MARQUEE TEXT HERE</marquee>
<button onclick=”function1();”>Up</button>
<button onclick=”function2();”>Left</button>
<button onclick=”function3();”>Right</button>
<button onclick=”function4();”>Down</button>
</body>
Ex2 :

<html xmlns=”http://www.w3.org/1999/xhtml” >
<head runat=”server”>
    <title>.::M A R U Q U E E::. </title>
</head>
<body>
<script language=”JavaScript”>
    function goRightfor2sec()
    {
        document.getElementById(‘myMarquee’).direction = “right”;
    }
    function crawlLeft(){
        setTimeout(goRightfor2sec,2000);
        document.getElementById(‘myMarquee’).direction = “left”;
    }
    function crawlRight(){
        setTimeout(goLeftfor2sec,2000);
        document.getElementById(‘myMarquee’).direction = “right”;
    }
    function goLeftfor2sec(){
        document.getElementById(‘myMarquee’).direction = “left”;
    }
</script>
<button onclick=”crawlLeft();”>Left</button>
<marquee id=”myMarquee”  bgcolor=”cyan”>MARQUEE TEXT HERE</marquee>
<button onclick=”crawlRight();”>Right</button>
</body>
</html>

Good Luck

Javascript for comparing two passwords

Filed under: Javascript — Tags: , — yasserzaid @ 8:24 pm

Try this example:

 <script language=”javascript” type=”text/javascript”>
    
    function Button1_onclick() {
    var pass1 = document.getElementById(“TextBox1″);
    var pass2 = document.getElementById(“TextBox2″);
    if(pass1.value==pass2.value){
     alert(“Password Match”);
   }
   else { alert(“Password do not match.”);}
   }
   
   </script>
   </head>
   <body>
       <form id=”form1″ runat=”server”>
           <asp:TextBox ID=”TextBox1″ runat=”server” TextMode=”Password”></asp:TextBox>
           <br />
           <asp:TextBox ID=”TextBox2″ runat=”server” TextMode=”Password”></asp:TextBox>
           <input id=”Button1″ type=”button” value=”button” onclick=”return Button1_onclick()” />
       </form>
   </body>

Good Luck

Bind Dependent DropdownList

Filed under: ASP.Net — yasserzaid @ 8:20 pm

Hi

try this example:

protected void PopulateDropDownList1()

{
    string queryString = “SELECT * FROM Table1″;
    SqlClient.SqlConnection connection = new SqlClient.SqlConnection(“Data Source=HCISSQL2;Initial Catalog=…;User ID=apps;Password=…”);
    SqlClient.SqlCommand command = new SqlClient.SqlCommand(queryString, connection);
       
    connection.Open();
  
    DataTable dt = new DataTable();
    SqlDataAdapter ad = new SqlDataAdapter(command);
    ad.Fill(dt);
    if (dt.Rows.Count > 0) {

    DropDownList1.DataSource = dt;
    DropDownList1.DataTextField = “CountryName”;
    DropDownList1.DataValueField = “CountryID”;
    DropDownList1.DataBind();
    }
   
    connection.Close();
  
}
protected void PopulateDropDownList2(int country)
{
   
    string queryString = “SELECT States FROM FROM Table2 WHERE CountryID = @countryId”;
    SqlClient.SqlConnection connection = new SqlClient.SqlConnection(“YOUR CONNECTION STRING HERE”);
    SqlClient.SqlCommand command = new SqlClient.SqlCommand(queryString, connection);
    command.Parameters.AddWithValue(“@countryId”, country);
    connection.Open();
  
    DataTable dt = new DataTable();
    SqlDataAdapter ad = new SqlDataAdapter(command);
    ad.Fill(dt);

    DropDownList1.Items.Clear();
    if (dt.Rows.Count > 0) {

    DropDownList2.DataSource = dt;
    DropDownList2.DataTextField = “StatesName”;
    DropDownList2.DataValueField = “StatesID”;
    DropDownList2.DataBind();
    }
    connection.Close();
   
}

protected void DropDownList1_SelectedIndexChanged(object sender, System.EventArgs e)
{
   
 PopulateDropDownList2(int.Parse(DropDownList1.SelectedValue));
   
}
protected void Page_Load(object sender, System.EventArgs e)
{
   
    if (!Page.IsPostBack) {
       
        PopulateDropDownList1();
       
    }
}
NOTE: Don’t forget to add the following Namespaces below for you to make it work:

Using System.Data;
Using System.Data.SqlClient;

Also don’t forget to set AutoPostBack to TRUE in your first DropDownList1 to fire up the SelectedIndexChanged event

Good Luck

Disable Button Click untill Check a CheckBox

Filed under: ASP.Net, Javascript — yasserzaid @ 8:17 pm

Hi

try this example:

Step 1 : Place a CheckBox an button on page
<asp:CheckBox ID=”CheckBox1″ runat=”server” Text=”Agree” />
<asp:Button ID=”Button1″ runat=”server” Text=”Button”  Enabled=”false” />

 

step 2: add following javascript to the page:
 <script type=”text/javascript”>
    function SetStatus()
    {
      
        if(document.getElementById(‘<%=CheckBox1.ClientID%>’).checked)
        {
            document.getElementById(‘<%=Button1.ClientID%>’).disabled = false;
        }
        else
        {
            document.getElementById(‘<%=Button1.ClientID%>’).disabled = true;
        }
        return false;
    }
    </script>

 

Step 3: Add Attribute the CheckBox
CheckBox1.Attributes.Add(“onchange”, “SetStatus();”);

Good Luck

Display Date in (dd/MM/yyyy) format with Gridview

Filed under: ASP.Net — Tags: , — yasserzaid @ 7:57 pm

Hi

try this example:

<asp:BoundField DataField=”date_from” HeaderText=”DateApply” 
     HeaderStyle-Width =”350px” DataFormatString=”{0:MM/dd/yyyy}” HtmlEncode=”false”>

//—–another way

<asp:TemplateField HeaderText=”Date Submission” SortExpression=”DateSubmission”>
                <ItemTemplate>
                    <asp:Label ID=”Label1″ runat=”server” Text=’<%# Bind(“DateSubmission”, “{0:dd/MM/yyyy}”) %>’></asp:Label>
                </ItemTemplate>
                <ItemStyle HorizontalAlign=”Center” />
            </asp:TemplateField>

Good Luck

Insert and Display Image from Database

Filed under: ASP.Net — Tags: , , , — yasserzaid @ 7:53 pm

Hi

try this example to Insert and Display Image from Database in Gridview

Database Script:

CREATE DATABASE [Employee]
GO
USE [Employee]
GO
CREATE TABLE EmpDetails
(
empid int IDENTITY NOT NULL,
empname varchar(20),
empimg image
)

Default.aspx

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">

<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<head runat="server">
    <title>Save Retrieve Images</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <asp:Label ID="lblEmpName" runat="server" Text="Employee Name"></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="txtEName" runat="server"></asp:TextBox>
        <br />
        <asp:Label ID="lblImage" runat="server" Text="Employee Image"></asp:Label>
&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:FileUpload ID="imgUpload" runat="server" />
        <br />
        <br />
        <asp:Button ID="btnSubmit" runat="server" onclick="btnSubmit_Click"
            Text="Submit" />
        <asp:Label ID="lblResult" runat="server" ForeColor="#0066FF"></asp:Label>
    <br />
    <hr />
  
   <asp:Image ID="Image1" style="width:200px" Runat="server" />
    </div>
    </form>
</body>
</html>

Default.asp.cs

using System;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void btnSubmit_Click(object sender, EventArgs e)
    {
        SqlConnection connection = null;
        try
        {
            FileUpload img = (FileUpload)imgUpload;
            Byte[] imgByte = null;
            if (img.HasFile && img.PostedFile != null)
            {
                //To create a PostedFile
                HttpPostedFile File = imgUpload.PostedFile;
                //Create byte Array with file len
                imgByte = new Byte[File.ContentLength];
                //force the control to load data in array
                File.InputStream.Read(imgByte, 0, File.ContentLength);
            }
            // Insert the employee name and image into db
            string conn = ConfigurationManager.ConnectionStrings["EmployeeConnString"].ConnectionString;
            connection = new SqlConnection(conn);

            connection.Open();
            string sql = "INSERT INTO EmpDetails(empname,empimg) VALUES(@enm, @eimg) SELECT @@IDENTITY";
            SqlCommand cmd = new SqlCommand(sql, connection);
            cmd.Parameters.AddWithValue("@enm", txtEName.Text.Trim());
            cmd.Parameters.AddWithValue("@eimg", imgByte);
            int id = Convert.ToInt32(cmd.ExecuteScalar());
            lblResult.Text = String.Format("Employee ID is {0}", id);

            // Display the image from the database
            Image1.ImageUrl = "~/ShowImage.ashx?id=" + id;
        }
        catch
        {
            lblResult.Text = "There was an error";
        }
        finally
        {
            connection.Close();
        }

    }
}

In order to display the image on the page, we will create an Http handler. To do so, right click project > Add New Item > Generic Handler > ShowImage.ashx. Add the code shown below to the handler.

ShowImage.ashx

<%@ WebHandler Language="C#" Class="ShowImage" %></span></div>
<div><span style="font-size: x-small;">using System;
using System.Configuration;
using System.Web;
using System.IO;
using System.Data;
using System.Data.SqlClient;</span></div>
<span style="font-size: x-small;">public class ShowImage : IHttpHandler
{
    public void ProcessRequest(HttpContext context)
    {
       Int32 empno;
       if (context.Request.QueryString["id"] != null)
            empno = Convert.ToInt32(context.Request.QueryString["id"]);
       else
            throw new ArgumentException("No parameter specified");

       context.Response.ContentType = "image/jpeg";
       Stream strm = ShowEmpImage(empno);
       byte[] buffer = new byte[4096];
       int byteSeq = strm.Read(buffer, 0, 4096);

       while (byteSeq > 0)
       {
           context.Response.OutputStream.Write(buffer, 0, byteSeq);
           byteSeq = strm.Read(buffer, 0, 4096);
       }       
       //context.Response.BinaryWrite(buffer);
    }

    public Stream ShowEmpImage(int empno)
    {
        string conn = ConfigurationManager.ConnectionStrings["EmployeeConnString"].ConnectionString;
        SqlConnection connection = new SqlConnection(conn);
        string sql = "SELECT empimg FROM EmpDetails WHERE empid = @ID";
        SqlCommand cmd = new SqlCommand(sql,connection);
        cmd.CommandType = CommandType.Text;
        cmd.Parameters.AddWithValue("@ID", empno);
        connection.Open();
        object img = cmd.ExecuteScalar();
        try
        {
            return new MemoryStream((byte[])img);
        }
        catch
        {
            return null;
        }
        finally
        {
            connection.Close();
        }
    }

</span>

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }
}

ViewImage.aspx

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
            CellPadding="4" DataKeyNames="empid" DataSourceID="SqlDataSource1" ForeColor="#333333">
            <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <Columns>
                <asp:BoundField DataField="empid" HeaderText="Id" InsertVisible="False" ReadOnly="True"
                    SortExpression="empid" />
                <asp:BoundField DataField="empname" HeaderText="Employee Name" SortExpression="empname" />
                <asp:TemplateField HeaderText="Employee Image" SortExpression="empimg">
                
                    <ItemTemplate>
                        <asp:Image ID="Image1" runat="server" Height="107px" ImageUrl='<%# Eval("empid", "~/ShowImage.ashx?id={0}") %>'
                            Width="108px" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
            <RowStyle BackColor="#EFF3FB" />
            <EditRowStyle BackColor="#2461BF" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EmployeeConnString %>"
            ProviderName="<%$ ConnectionStrings:EmployeeConnString.ProviderName %>" SelectCommand="SELECT * FROM [EmpDetails]">
        </asp:SqlDataSource>

Hope it helps

Good Luck
 
 

 

Display Dynamic Image in HoverMenu Extender with DataList

Filed under: AJAX, ASP.Net — yasserzaid @ 7:36 pm

try this example to view full size of image stored in database as we save image name only in database and upload image in folder in root of my website

now we will display Image in AJAX ModalPopup Extender

<asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
      
   <asp: DataList ID="DataList1" runat="server" RepeatColumns="5" DataSourceID="SqlDataSource1" >
<ItemTemplate>
        <asp: Panel ID="Panel1" runat="server" Height="100px" Width="100px" CssClass="panel">
            <asp:Image ID="Image1" runat="server" Width="60px" Height="70px"
                ImageUrl='<%# Eval("Image", "~/Ads/{0}") %>' />
        </asp: Panel>
        <br />
        <!-- TODO: HoverMenu and Panel -->
        <br />
        <cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server"
            TargetControlID="Panel1" OffsetX="50" OffsetY="50" PopupControlID="Panel2"
            HoverCssClass="panelHover" />
        <asp: Panel ID="Panel2" runat="server" CssClass="popup" Style="display: none">
            <asp:Image ID="Image2" ImageUrl='<%# Eval("Image", "~/Ads/{0}") %>' runat="server">
        </asp:Image>
        </asp: Panel>
    </ItemTemplate>
       
</asp: DataList><asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Car_DBConnectionString %>"
       SelectCommand="SELECT [Id], [Image] FROM [Ads]"></asp:SqlDataSource>

Disable Right Click

Filed under: Javascript — yasserzaid @ 7:17 pm

Hi

Copy and Paste it into your Source Code

<script language=JavaScript>

var message=”Disabled!”;

function clickIE(){
if (event.button==2){
alert(message);
return false;
}
}

function clickNS(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}

if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE;
}

document.oncontextmenu=new Function(“alert(message);return false”)

// –>
</script>
//———Or—————

<script language=”javascript”>
document.onmousedown=disableclick;
status=”Right Click Disabled”;
Function disableclick(e)
{
  if(event.button==2)
   {
     alert(status);
     return false; 
   }
}
</script>
<body oncontextmenu=”return false”>
…
</body>

or

<Body>
  <Table>
   <tr oncontextmenu=”return false”>
    <td>
     <asp:datagrid id=”dgGrid1″>—</asp:datagrid>
   </td>
  </tr>
 </Table>
</Body>

Good Luck

Open Popup window when Click on Image in Gridview

Filed under: ASP.Net — yasserzaid @ 7:11 pm

Hi

try this example to view full size of image stored in database as we save image name only in database

and upload image in folder in root of my website

.aspx

<asp:TemplateField HeaderText="Image" SortExpression="Image">
               
                <ItemTemplate>
                    <asp:Image ID="Image1" runat="server" Height="82px" ImageUrl='<%# Eval("Image", "~/Car_Image/{0}") %>'
                        Width="108px" />
                </ItemTemplate>
            </asp:TemplateField>

in code behind:

protected void GridView1_DataBound(object sender, EventArgs e)
    {
        foreach (GridViewRow row in GridView1.Rows)
        {
            Image img = (Image)row.FindControl("Image1");
            string strImage = img.ImageUrl;
            //strImage = strImage.Replace("~", "..");
            img.Attributes.Add("onClick", "javascript:window.open('image.aspx?PId=" + strImage + "',null,'left=45px,top=15px, width=300px, height=300px,status=no, resizable= yes, scrollbars=yes, toolbar=no, location=no,menubar=no');");
        }
    }

Good Luck

SiteMap menu with icons

Filed under: ASP.Net — Tags: , , — yasserzaid @ 12:19 pm

While binding a Menu (or TreeView: everything in this article applies to TreeView as well) to a SiteMapDataSource is very easy, it can prove challenging to find how to extend the site map with custom properties and use these extended properties in a Menu. This sample shows how to add icons in a sitemap-driven menu.

SiteMap allows the addition of custom attributes to your site map nodes. If you’re using the XML site map provider, it’s as simple as this:

in Web.SiteMap

<siteMapNode url=“default.aspx” title=“Home”  description=“The home page” imageUrl=“images/home.gif”>

Here, imageUrl is a custom property, not defined by the SiteMap infrastructure by default.

The first idea that comes to mind to use these custom attributes is to just replace the automatic bindings you get from binding a Menu to SiteMapDataSource with “manual” bindings. This works very well with XmlDataSource because it is implemented so that the nodes implement ICustomTypeDescriptor, so any XML attribute is exposed as a property on the node as far as reflection is concerned. This is a very powerful feature of .NET reflection that gives it some of the qualities of dynamic languages. Unfortunately, SiteMapDataSource does not implement this, nor does Menu know how to query custom site map attributes. This is an oversight and we may add that support in future releases.

An easy (although not declarative) way out of this problem is to hook the OnMenuItemDataBound event and to set the custom properties from there:

with Menu Control

public void Menu1_OnMenuItemBound(object sender, MenuEventArgs args) {
    args.Item.ImageUrl = ((SiteMapNode)args.Item.DataItem)["imageUrl"];
}

with TreeView control

protected void TreeView1_TreeNodeDataBound(object sender, TreeNodeEventArgs e)
  {
   SiteMapNode nodeFromSiteMap = (SiteMapNode)e.Node.DataItem;
   e.Node.ImageUrl = nodeFromSiteMap["ImageUrl"];
  }

I hope this helps.

Good Luck

Blog at WordPress.com.