Friday, 18 May 2012

*************Single Image Zoom thro jquery***************

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.5.2.js" type="text/javascript"></script>
    <script type="text/javascript">
            $(document).ready(function(){
               $('#imgSmile').width(200);
               $('#imgSmile').mouseover(function()
               {
                  $(this).css("cursor","pointer");
                  $(this).animate({width: "500px"}, 'slow');
               });
           
            $('#imgSmile').mouseout(function()
              {  
                  $(this).animate({width: "200px"}, 'slow');
               });
           });
   
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
    <h1>Move mouse on image to Zoom In and Zoom Out</h1>
  <br />
  <img src="Image/Smiley.png" alt="smile" id="imgSmile"></img>
    </div>
    </form>
</body>
</html>

************DataList Image Zoom with JQuery*****************

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .example
{
    width: 130px;
height: 130px;
}
.imgzoom{
width: 100px;
height: 100px;
margin:10px 0px 0px 15px;
background: #f0f0f0;
left: 0; top: 0;
}
    </style>
    <script src="Scripts/jquery-1.5.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".example").hover(function () {
                $(this).find('.imgzoom').addClass("hover").stop().animate({
                    marginTop: '0px',
                    marginLeft: '0px',
                    width: '150px', /* Set new width */
                    height: '150px', /* Set new height */
                    padding: '0px'
                }, 500);

            }, function () {
                $(this).find(".imgzoom").removeClass("hover").stop().animate({
                    marginTop: '10px',
                    marginLeft: '15px',
                    width: '100px', /* Set width back to default */
                    height: '100px', /* Set height back to default */
                    padding: '0px'
                }, 500);

            });

        });


     </script>
    <style type="text/css">
        #imgSmile
        {
            height: 183px;
            width: 193px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
  <table>
  <tr>
  <td>Upload Image</td>
  <td><asp:FileUpload ID="Fileupload1" runat="server" /></td>
  <td><asp:Button ID="btn1" runat="server" Text="Upload" onclick="btn1_Click" /></td>
  </tr>
  </table>
    <asp:DataList ID="DataList1" runat="server"
     RepeatColumns="5" RepeatDirection="Horizontal" CellPadding="2" CellSpacing="2">
        <ItemTemplate  >
        <div >
        <table>
        <tr>
        <td>
        <div class="example">   
<asp:Image Height="100" Width="100" ID="img1" class="imgzoom"  runat="server" ImageUrl='<%#Eval("image")%>' /></div>
  </td></tr>
     </table>
   </div>   
        </ItemTemplate>
    </asp:DataList>
    </div>
    </form>
</body>
</html>

***********INSERT RECORD IN XML DATA BASE************
 protected void btn_save_Click(object sender, EventArgs e)
    {

        System.Xml.XmlDocument myXmlDocument = new System.Xml.XmlDocument();
        myXmlDocument.Load(Server.MapPath("Text.xml"));
        System.Xml.XmlNode myXmlNode = myXmlDocument.DocumentElement.FirstChild;
        DateTime text_postdate = DateTime.Now;

        // Create new XML element and populate its attributes 
        System.Xml.XmlElement myXmlElement = myXmlDocument.CreateElement("text");
        myXmlElement.SetAttribute("Title", Server.HtmlEncode(txt_title.Text));
        myXmlElement.SetAttribute("Keyword", Server.HtmlEncode(txt_keyword.Text));
        myXmlElement.SetAttribute("Description", Server.HtmlEncode(txt_desc.Text));
        myXmlElement.SetAttribute("Share", Server.HtmlEncode(RBL_text_share.SelectedItem.ToString()));
        myXmlElement.SetAttribute("Postdate", Server.HtmlEncode(text_postdate.ToString()));


        // Insert data into the XML doc and save 
        myXmlDocument.DocumentElement.InsertBefore(myXmlElement, myXmlNode);
        myXmlDocument.Save(Server.MapPath("Text.xml"));
        txt_title.Text = "";
        txt_keyword.Text = "";
        txt_desc.Text = "";

****************CODE FOR POST COMMENT *********************

<asp:Panel ID="pnl_comment" runat="server">
<asp:Repeater ID="RepDetails" runat="server">
<HeaderTemplate>
<table style=" border:1px solid #df5015; width:600px" cellpadding="0">
<tr style="background-color:#12c65f; color:White">
<td colspan="2">
<b>Comments</b>
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr style="background-color:#EBEFF0">
<td>
<table style="background-color:White;border-top:1px dotted #df5015; width:600px" >
<tr>
<td>
Subject:
<asp:Label ID="lblSubject" runat="server" Text='<%#Eval("Subject") %>' Font-Bold="true"/>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblComment" runat="server" Text='<%#Eval("Comment") %>'/>
</td>
</tr>
<tr>
<td>
<table style="background-color:#EBEFF0;border-top:1px dotted #df5015;border-bottom:1px solid #df5015; width:600px" >
<tr>
<td>Post By: <asp:Label ID="lblUser" runat="server" Font-Bold="true" Text='<%#Eval("UserName") %>'/></td>
<td>Created Date:<asp:Label ID="lblDate" runat="server" Font-Bold="true" Text='<%#Eval("PostedDate") %>'/></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<br />
<table style="width: 501px">
<tr>
<td colspan="2" class="style3"><strong>Post Comment:</strong></td>
</tr>
<tr>
<td>Enter Name: </td>
<td><asp:TextBox ID="txtName" runat="server" Height="22px" Width="225px"/></td>
</tr>
<tr>
<td>Enter Subject: </td>
<td><asp:TextBox ID="txtSubject" runat="server" Height="22px" Width="225px"/></td>
</tr>
<tr>
<td valign="top">Enter Comments:<asp:ScriptManager ID="ScriptManager1"
        runat="server">
    </asp:ScriptManager>
    </td>
<td><asp:TextBox ID="txt_comment" runat="server" Rows="5" Columns="20"
        TextMode="MultiLine" Height="90px" Width="302px"/>
    <asp:TextBoxWatermarkExtender ID="txt_comment_TextBoxWatermarkExtender"
        runat="server" Enabled="True" TargetControlID="txt_comment"
        WatermarkText="enter comment here......">
    </asp:TextBoxWatermarkExtender>
    </td>
</tr>
<tr>
<td></td>
<td><asp:Button ID="btnSubmit" runat="server" Text="Submit"
        onclick="btnSubmit_Click" /></td>
</tr>
</table>
</asp:Panel>

.CS CODE(IN XML FILE)

 protected void btnSubmit_Click(object sender, EventArgs e)
    {
      
        System.Xml.XmlDocument myXmlDocument = new System.Xml.XmlDocument();
        myXmlDocument.Load(Server.MapPath("Comments.xml"));
        System.Xml.XmlNode myXmlNode = myXmlDocument.DocumentElement.FirstChild;
        DateTime commentDateTime = DateTime.Now;
        // Create new XML element and populate its attributes 
        System.Xml.XmlElement myXmlElement = myXmlDocument.CreateElement("Comment");
        myXmlElement.SetAttribute("username", Server.HtmlEncode(txtName.Text));
        myXmlElement.SetAttribute("subject", Server.HtmlEncode(txtSubject.Text));
        myXmlElement.SetAttribute("Comment", Server.HtmlEncode(txt_comment.Text));
        myXmlElement.SetAttribute("PostedDate", Server.HtmlEncode(commentDateTime.ToString()));

        // Insert data into the XML doc and save 
        myXmlDocument.DocumentElement.InsertBefore(myXmlElement, myXmlNode);
        myXmlDocument.Save(Server.MapPath("Comments.xml"));

        showcomment();
        txtName.Text = "";
        txtSubject.Text = "";
        txt_comment.Text = "";
    }
 **********************************************************************************
Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)