Advertisements

Archive

Archive for the ‘HTML’ Category

How to implement Password validation in ASP.Net/C# OR Implement Password strength using Jquery in ASP.Net

October 10, 2012 1 comment

 

DOWNLOAD SOURCE CODE FOR PASSWORD STRENGTH CHECKER

How to show Password Strength image to user in ASP.Net

Register/change password pages on most of the application showing password strength information to user while entering password in the textbox. It allows to user to enter a strong password for register the pages. We can implement Password Strength Checker in different methods in ASP.Net application. Its better to do it in the client side itself so that user doesn’t feels post back in the page.

Implement Password Strength Checker using Jquery

Here we are going to demonstrate a sample application to implement Password Strength Checker using Jquery. The application shows the status of entered password by each alphabet changes in the textbox such as Week, Good, Strong etc..

Password_Strength_Checker

ASPX/HTML Page for Password Strength Checker  

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <title>jQuery Validation Plugin Password Extension demo</title>
 <link rel="stylesheet" type="text/css" media="screen" href="../jquery.validate.password.css" />
 <script type="text/javascript" src="../lib/jquery.js"></script>
 <script type="text/javascript" src="../lib/jquery.validate.js"></script>
 <script type="text/javascript" src="../jquery.validate.password.js"></script>
 <script id="demo" type="text/javascript">
 $(document).ready(function () {
 $("#register").validate();
 $("#password").valid();
});
</script>
 <style>
 label, input
 {
 float: left;
 }
 input
 {
 margin-left: 1em;
 }
 label.error
 {
 display: none !important;
 }
 .password-meter
 {
 float: left;
 }
 </style>
</head>
<body>
 <form id="register">
 <div>
 Password Strength Checker Demo Using JQuery.. 
powered by <a href="http://tuvian.con">
 tuvian</a>
 </div>
 <br />
 <br />
 <label for="password">
 Password:</label>
 <input class="password" name="password" id="password" />
 <div class="password-meter">
 <div class="password-meter-message">
 &nbsp;</div>
 <div class="password-meter-bg">
 <div class="password-meter-bar">
 </div>
 </div>
 </div>
 </form>
</body>
</html>

 

DOWNLOAD SOURCE CODE FOR PASSWORD STRENGTH CHECKER

 

Advertisements

How to create a drag able and resizable div in ASP.Net/C# OR How to make a div Dragable and Resizable using Jquery in ASP.Net/C#

September 27, 2012 1 comment

                                    DOWNLOAD SOURCE CODE FOR DAG ABLE AND RE-SIZABLE DIV  

Resize and drag a div in ASPX page/HTML Page

Here we are going to demonstrate making a div that can be drag and resize by users. We are achieving this drag and resize of div functionality using Jquery files. We already posted some article related with Jquery and Javascript. Here we are again demonstrating a detailed post regarding Draggable and Resizable div using Jquery files.

Drag able Re-sizable Div in HTML/ASPX Page

Drag able and Resizable Div using Jquery in HTML/ASPX Page

For implementing drag and resize Div, we need to download following jquery and css files and included in the ASPX/HTML page.

1. jquery.min.js          – Download from here 

2. jquery-ui.min.js    – Download from here 

3. jquery-ui.css          – Download from here 

After downloading above files we need to create a HTML/ASPX Page and include above files as mentioned below.

<script src="jquery.min.js" type="text/javascript"></script>
 <script src="jquery-ui.min.js" type="text/javascript"></script>
 <link rel="stylesheet" href="jquery-ui.css"
 type="text/css" media="all" />

HTML/ASPX Page for creating drag able and re sizable div

<!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>
 <title>Untitled Page</title>
 <script src="jquery.min.js" type="text/javascript"></script>
 <script src="jquery-ui.min.js" type="text/javascript"></script>
 <link rel="stylesheet" href="jquery-ui.css"
 type="text/css" media="all" />
 <style type="text/css">
 #resizediv
 {
 width: 150px;
 height: 150px;
 padding: 0.5em;
 background: #EB5E00;
 color: #fff;
 }
 </style>
 <script type="text/javascript">
$(document).ready(function () {
$("#resizediv").resizable();
$("#resizediv").draggable();
});
</script>
</head>
<body>
 <form id="form1" runat="server">
 <div id="resizediv">
 Drag me ... or Resize me....<br />
 This is a Div that can be Drag and Resize by you.. .
 </div>
 </form>
</body>
</html>

------

                        DOWNLOAD SOURCE CODE FOR DAG ABLE AND RE-SIZABLE DIV  

How to set favicon for website page?


What is a favicon ? 

It’s a good practice to add a favicon to the website. Favicon is nothing but it is a small icon associated with a particular website, and typically displayed in the address bar of a browser viewing the site. A favicon (short for favorites icon), also known as a website icon, shortcut icon, url icon, or bookmark icon is a 16×16, 32×32 or 64×64 pixel square icon associated with a particular website or webpage. 

How to set favicon for websites? 

Setting favicon to the website is very simple, can be acieved by simple steps. First of all we need to create fav icon which should be associated with our website, size 16×16, 32×32 or 64×64 and uploaded to our website (commonly inside images folder). 

In the second step we have to put below codes inside the header tag of all webapages in our site. After that if you browse your web page you can see that your favicon is showing in address bar. Eg : www.supershope.com

 <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />

How to create a always visible div in css and HTML

June 2, 2011 3 comments

 How to create a div that is always visible even while scrolling 

In some scenario we need to show some information like ads,twitter like account’s logo,new updates etc..  always to user even he is scrolling website We can implement this using simple HTML and CSS within few steps. We can create more attractive div with given appropriate color and style to css.

 Step by step process to create always visible div 

Here we are explaining how easily we can create an always visible div using simple CSS in html by steps by step. We can create always visible div within 2 steps.

 Step 1

Create a css class and name it “alwaysVisibleDiv” (you can give any name that you like). And add position as “fixed”; 

<style type="text/css">
<!--
.alwaysVisibleDiv
{
    position: fixed;
    bottom: 10px;
    left: 10px;
}
//-->
</style>
 

Step2

 Add a new div to the page and specify the class name (class=”alwaysVisibleDiv”)

 <div class="alwaysVisibleDiv">
    Hello I am here always
</div>

 Always visible div is ready. You can see above div position is always there (here we are fixed bottom left) even user scrolling website. We can fix this div at any position of the web page by giving bottom,right,top,left position to the class ‘alwaysVisibleDiv’. By using this html css code we can keep element in view while scrolling website without any jquery,ajax techniques.

Categories: HTML Tags: ,

How to create a news scroller using HTML marquee.

May 30, 2011 4 comments

Very simple News Scroller using HTML

In most of the website we can see that there is a portion for updates from the company. This updates can be shown by javscript,jquery,ajax etc technologies and it should be some effort also we have to include some pages for this.

For eg if we are implemented javscript newsticker the user’s browser must enable javascript, otherwise nothing going to happen. So the better method is if we can create a simple news ticker by using html elements only, it will be more faster and reliable in all browsers.

Following are the very simple and attractive vertical news ticker using HTML elements only. (Without using jquery,js,ajax..) So it should be work in all browsers even in the javascript disabled mode. We can give more attractive color and style for the news ticker.

Simple HTML code for showing news updates.

<div style="width: 180px; text-align: center; margin-top: 30px; 
margin-bottom: 2px;
        font-weight: bold;">
        Announcements</div>
    <div id="news-container">
        <marquee bgcolor="#ffffff" scrollamount="1" height="80" 
direction="up" loop="true"
            width="95%">
        We offers shopping cart <span style="color: blue;">
domain hosting free</span>
for limitted customers.
        <br /><br />
        You can choose your own style,color and domain 
for your shopping site.
        <br /><br />
        Supershope has largest number of viewers in the world. 
<span style="color: blue;">
You can sell your products here.</span><br />
        <br />
        <span style="color: blue;">Gift Paintings on Sale..!</span> 
There are thousands of
paintings available in supershope.
        Please contact us to buy paintings for affordable price.
        <br /><br />
        The Shopping cart product with <span style="color: blue;">
'supershope.com' domain also
            avaliable </span>for first customer with special package.
    </marquee>
    </div>

Where is simple HTML news ticker implemented

You can see the implemented HTML news ticker in the left hand side of the websit supershope used as Announcements section

Categories: HTML Tags:
%d bloggers like this: