google

Newest Post

Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Dynamic Menu using HTML and CSS in ASP.Net

| Tuesday, March 25, 2014
Read more »
In this article we will create nested dynamic menus and submenus using CSS and HTML which all browsers support.
  
Let's start by creating a website as:
  1. Start - All Programs - Microsoft Visual Studio
  2. File - New Website - C# - Empty website (to avoid adding a master page)
  3. Give the web site a name such as NestedSubmenu or whatever you wish and specify the location
  4. Then right-click on Solution Explorer - Add New Item - Default.aspx page
Open the source view and use the list tag to create the Menu and Submenu. The source code 
<body> tag should be as in the following:

 <body bgcolor="#c0c0c0">  
   <form id="form2" runat="server">  
   <ulid="Ul1">  // for horizontal Main Menu Tab  
 <li><ahref="#" title ="Homepage" class="selected">About Us</a ></li >  
 <li ><a href ="#" title ="About us">Authors</ a ></li >  //for submenu  
 <li ><a href ="#" title ="Projects">Articles</a >  
 <ul>  
 <li ><a href ="#" title="Older projects">Older Articles</a > //for submenu  
 <ul>  
 <li> <a href ="#" title ="">ASP.Net </ a ></ li >// for Nested subemenu and <a> tag is used to pass URL address  
 <li> <a href ="#" title ="">Silverlight</a ></ li >  
 <li> <a href ="#" title ="">Ajax</a ></ li >  
 </ ul >  
 </ li >  
  <li> <a  href ="#" title ="Active projects">New Articles</a > //for submenu  
 <ul>  
 <li> <a href ="" title ="Excel FIle">File Upload</a ></ li > // for Nested subemenu  
 <li> <a href ="" title ="ConvertNoToString">Convert Number</a ></li >  
 <li> <a href ="" title ="Stored Procedure">Stored Procedure</a ></ li >  
 </ ul >  
 </ li >  
 </ ul >  
 </ li >  
 <li> <a href ="#" title ="Contact">Contact Us</a ></ li >  
 </ul >  
   </form>  
 </body>  

In the above source code the <li> tag is used to create a horizontal Main Menu and the <ul> list tag is used to create the submenu, again under the <ul> used and another <ul> tag to create a nested submenu.
Applying effects to the Menu using CSS
 
To apply the effects to the menu use the following CSS classes:

 #menu, #menu ul  /*for main menu *\  
  {  
 list-style:none;  
 padding:0;  
 margin:0;  
 }  
 /* SHOW SUBMENU 1 */  
 #menu li:hover ul, #menu li.over ul   
 {  
 display:block;  
 }  
 #menu li:hover ul ul, #menu li.over ul ul   
 {  
 display:none;  
 }  
 /* SHOW SUBMENU 2 */  
 #menu ul li:hover ul, #menu ul li.over ul   
 {  
 display:block;  
 }  
 /* for mouse hover */  
 #menu a:hover   
 {  
 background-color:#5798B4;  
 color:#fff;  
 }  

The output in the browser will be:

nestedmenu.jpg


Dynamic Menu using HTML and CSS in ASP.Net

Posted by : Stranger
Date :Tuesday, March 25, 2014
With 0comments

ScriptManager.RegisterStartupScript using JavaScriptSerializer - To display the Alert or Message Box from Code behind

| Thursday, March 13, 2014
Read more »
While registering a message using the javascript code in RegisterStartupScript, message might contain some escape characters like ' or " this will definitely break the javascript. Hence we need to encode it, for example using JavaScriptSerializer as follows.



  string message = new JavaScriptSerializer().Serialize(ex.Message.ToString());  
  string myScript = String.Format("alert('{0}');", msg);  
  ScriptManager.RegisterStartupScript(page, page.GetType(), "MyScript", myScript, true);  




How to - Populate RadEditor's Apply CSS Class dropdown with custom styles.

| Tuesday, January 28, 2014
Read more »
Populate RadEditor's Apply CSS Class dropdown with custom styles.


 <telerik:RadEditor runat="server" ID="RadEditor1" SkinID="DefaultSetOfTools" Height="400px"  
 Width="100%" >  
 <CssFiles>  
    <telerik:EditorCssFile Value="mystyle.css" />  
 </CssFiles>   
 </telerik:RadEditor>  

How to - Populate RadEditor's Apply CSS Class dropdown with custom styles.

Posted by : Stranger
Date :Tuesday, January 28, 2014
With 0comments

What is the need of Master Pages?

| Saturday, January 18, 2014
Read more »
In Web site development with ASP.NET, the master page is a feature that enables you to define common structure and interface markup elements for your Web site, including headers, footers, style definitions, or navigation bars. The master page can be shared by any of the pages in your Web site, called the Content Page, and removes need to duplicate code for shared elements within your Web site.

Before Master Pages
Every website contains a common layout for most of the pages. Earlier before master pages,layout code was written on every page, which led to code redundancy and it was difficult to maintain also.

The common layout problem can be handled in two ways 
1. Using Master Pages
2. Using User Controls

User controls have few disadvantages
1. Code of User control is compiled again and again every time page loads.
2. Any change to the public environment of the User control needs to update code on the linked pages

Another option is Master Pages.A Master page is a feature that enables you to define common structure and interface markup elements for your Web site, including headers, footers, style definitions, or navigation bars. The master page can be shared by any of the pages in your Web site, called the Content Page, and removes need to duplicate code for shared elements within your Web site.

A master page is similar to an ordinary ASP.NET page except for the top @Master directive and the presence of one or more ContentPlaceHolder server controls. A ContentPlaceHolder
control defines a region in the master page that can be customized in a derived page. ContentPlaceHolder acts as container which holds controls/items defined in the derived pages.

 <asp:ContentPlaceHolder runat="server" ID="mainContent" />  

In the derived pages, server control is used to provide actual content to ContentPlaceHolders of Master Page. The link between placeholders and content is
established through the Content place holder ID.

 <asp:Content runat="server" contentplaceholderID="mainContent">  
 </asp:Content>  

1. In a master page, there can be multiple content place holders.
2. Content page is used to fill the content in their master pages and it should only contain <asp:Content> server control. Everything (like different content) should be
defined in that only.
3. For a given Content place holder, default content can be defined in the master page itself. If it has not been overridden in Content page, the content defined in the master will be
displayed.
4. A placeholder can't be bound to more than one content region in a single content page. If you have multiple <asp:Content> server tags in a content page, each must point to a
distinct placeholder in the master.
5. A ContentPlaceHolder control can be used only in a master page. Content placeholders are not valid on regular ASP.NET pages. If such a control is found in an ordinary Web
page, a parser error occurs.
6. The MasterPage class, in turn, inherits UserControl. So, at the end of the day, a master page is treated as a special kind of ASP.NET user control.


Attributes of @Master Directive

1. Language: This attribute tells the compiler about the language being used in the code-behind. Values can represent any .NET-supported language, including Visual Basic, C#, or JScript .NET.


2. AutoEventWireup: For every page there is an automatic way to bind the events to methods in the same master file or in code behind. The default value is True.


3. CodeFile: Specifies the code-behind file with which the MasterPage is associated.


4. Title: Set the MasterPage Title.


5. MasterPageFile: Specifies the location of the MasterPage file to be used with the current MasterPage. This is used for Nested Master Pages.


6. EnableViewState: Indicates whether view state is maintained across page requests. true if view state is maintained; otherwise, false. The default is true.


7. Inherits: Specifies a code-behind class for the page to inherit. This can be any class derived from the Page class.

Language used in master page and content pages can be different.

Master page can be attached to content page in different ways
1. Page Level
2. Folder Level
3. Application Level

Since Master and Content pages are interdependent, either of the page changes, dynamic assembly needs to be re-created.

When the user requests a page, first it checks whether master page exists or not. If there is any master page, then first master page will be compiled. If the folder consists of multiple master pages, all of them will be compiled at the same time. So when the user access any page for the first, page loading may take a little bit time for compiled, from the next time onwards, it won’t take much time, as master pages are already compiled and cached. When compared to User controls, this is an advantage for master pages as User Controls need compilation every time.

Master pages can be nested. There is no limitation on nesting levels. Nested master pages will have ContentPlaceHolder as well as @MasterPageFile directive.

What is the need of Master Pages?

Posted by : Stranger
Date :Saturday, January 18, 2014
With 0comments

Show Message Bar at the top of the page using HTML and jQuery

| Wednesday, February 13, 2013
Read more »
Download Code

This article will focus on displaying notifications or messages at the top of the website page using HTML and jQuery.

Links to required jQuery files will be added in the head section of the page.

  <script src="jquery.js" type="text/javascript"></script> 
 <script src="juery.topbar.js" type="text/javascript"></script>  


The source code includes 4 types of demonstrations of the top message bar.Following script will be included in the head section of the page


  <script type="text/javascript" language="javascript"> 
$(function () { 
$("#ex01").click(function () { 
$('#ex01-body').showTopbarMessage(); 
}); 
$("#ex02").click(function () { 
 $('#ex02-body').showTopbarMessage({ close: 2000 }); 
 }); 
$("#ex03").click(function () { 
 $('#ex03-body').showTopbarMessage({ background: "#043", close: 2000 }); 
 }); 
$("#ex04").click(function () { 
 $('#ex04-body').showTopbarMessage({ height: "180px", close: 2000 }); 
 }); 
 }); 
</script>  


Following types of demonstrations are there:

1. Simple

  <p> 
<a href="javascript:void(0)" id="ex01">Simple</a>     </p> 
<pre>$("#ex01").click(function () { 
 $('#ex01-body').showTopbarMessage();   });</pre> 
 <div id="ex01-body" style="display: none;"> 
 This is a simple demo 
 <span style="font-size: small; cursor: pointer">(click to close)</span> 
 </div>  

2. Automatic close after some time.

  <p> 
 <a href="javascript:void(0)" id="ex02">Automatic close after some time</a> 
 </p>     <pre>$("#ex02").click(function () { 
 $('#ex02-body').showTopbarMessage({ close: 2000 });   });</pre> 
 <div id="ex02-body" style="display: none;"> 
 Automatic close after some time     </div>  

3. With custom background

  <p> 
 <a href="javascript:void(0)" id="ex03">With Custom background</a> 
 </p>     <pre>$("#ex03").click(function () { 
 $('#ex03-body').showTopbarMessage({ background: "#043", close: 2000 }); 
 });</pre>     <div id="ex03-body" style="display: none;"> 
 With Custom background     </div>  

4. Custom height with long text

 <p> 
 <a href="javascript:void(0)" id="ex04">Custom height with long text</a> 
 </p>     <pre>$("#ex04").click(function () { 
 $('#ex04-body').showTopbarMessage({ height: "180px", close: 2000 });   });</pre> 
 <div id="ex04-body" style="display: none;"> 
 Custom height with long text.<br /> 
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum 
 </div>  


Show Message Bar at the top of the page using HTML and jQuery

Posted by : Stranger
Date :Wednesday, February 13, 2013
With 0comments

ImageLens – A jQuery plug-in for Lens Effect Image Zooming

|
Read more »

ImageLens – A jQuery plug-in for Lens Effect Image Zooming

Posted by : Stranger
Date :
With 0comments
Tag : , ,

Create Tooltips, Modal Windows, Notice Messages using MooTools mBox library

| Tuesday, February 12, 2013
Read more »

mBox 0.2

mBox is a powerful library, helping you to easily create tooltips, modal windows, notice messages and more.
Styling is stress free with css and there are many options to customize position, appearance, events etc.

Check this out - mBox



Create Tooltips, Modal Windows, Notice Messages using MooTools mBox library

Posted by : Stranger
Date :Tuesday, February 12, 2013
With 0comments

HTML5 New Elements and Features

| Saturday, January 12, 2013
Read more »
HTML4 already has a lot of semantic elements to allow you to clearly define the different features of a web page, like forms, lists, paragraphs, tables, etc. However, it does have its shortcomings. We still rely heavily on <div> and <span> elements with different id and class attributes to define various other features, such as navigation menus, headers, footers, main content, alert boxes, sidebars, etc. Something like <div id="header"> works in terms of developers and designers knowing what it is for, and being able to use CSS and JavaScript to apply custom styles and behaviour to make it understandable to end users.


Structure of HTML5 document













HTML5 offers new elements for better structure.

TagDescription
<article>Defines an article
<aside>Defines content aside from the page content
<bdi>Isolates a part of text that might be formatted in a different direction from other text outside it
<command>Defines a command button that a user can invoke
<details>Defines additional details that the user can view or hide
<summary>Defines a visible heading for a <details> element
<figure>Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption>Defines a caption for a <figure> element
<footer>Defines a footer for a document or section
<header>Defines a header for a document or section
<hgroup>Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark>Defines marked/highlighted text
<meter>Defines a scalar measurement within a known range (a gauge)
<nav>Defines navigation links
<progress>Represents the progress of a task
<ruby>Defines a ruby annotation (for East Asian typography)
<rt>Defines an explanation/pronunciation of characters (for East Asian typography)
<rp>Defines what to show in browsers that do not support ruby annotations
<section>Defines a section in a document
<time>Defines a date/time
<wbr>Defines a possible line-break

HTML5 offers new elements for media content:

TagDescription
<audio>Defines sound content
<video>Defines a video or movie
<source>Defines multiple media resources for <video> and <audio>
<embed>Defines a container for an external application or interactive content (a plug-in)
<track>Defines text tracks for <video> and <audio>

The new <canvas> Element
TagDescription
<canvas>Used to draw graphics, on the fly, via scripting (usually JavaScript)

HTML5 offers new form elements, for more functionality:
TagDescription
<datalist>Specifies a list of pre-defined options for input controls
<keygen>Defines a key-pair generator field (for forms)
<output>Defines the result of a calculation

New DocType of HTML5

<!DOCTYPE html>

Following are the few elements which we will cover in this article.

<header>
The document's header looks like this:
<header>
  <hgroup>
    <h1>Header 1</h1>
    <h2>Header 2!</h2>
  </hgroup>
</header>

the purpose of the <header> element is to wrap the section of content that forms the header of the page, usually containing a company logo/graphic, main page title, etc.

<footer>
<footer>
  <h3 id="copyright">Copyright and attribution</h3>
  <!-- more content here -->  
</footer>

<footer> should be used to contain your site's footer content — if you look at the bottom of a number of your favourite sites, you'll see that footers are used to contain a variety of things, from copyright notices and contact details, to accessibility statements, licensing information and various other secondary links.

<nav>
<nav>
  <h2>Contents</h2>
    <ul>
      <li><a href="#Intro">Introduction</a></li>
      <li><a href="#History">History</a>
      <!-- other navigation links... -->
    </ul>
</nav>

The <nav> element is for marking up the navigation links or other constructs (eg a search form) that will take you to different pages of the current site, or different areas of the current page. Other links, such as sponsored links, do not count. You can of course include headings and other structuring elements inside the <nav>, but it's not compulsory.

<article> and <section>
Now we turn our attentions to probably the two most misunderstood elements in HTML5 — <article> and <section>. When you first meet them, the difference might appear unclear, but it really isn't so bad.
Basically, the <article> element is for standalone pieces of content that would make sense outside the context of the current page, and could be syndicated nicely. Such pieces of content include blog posts, a video and it's transcript, a news story, or a single part of a serial story.
The <section> element, on the other hand is for breaking the content of a page into different functions or subjects areas, or breaking an article or story up into different sections.
<article>
  <section id="Intro">
    <h2>Introduction</h2>
  </section>

  <section id="History">
    <h2>History</h2>
  </section>

  <section id="Discography">
    <h2>Discography</h2>
  </section>
</article>

<audio>
No longer do we have to rely upon third party plugins in order to render audio. HTML5 now offers the <audio> element. Well, at least, ultimately, we won’t have to worry about these plugins. For the time being, only the most recent of browsers offer support for HTML5 audio. At this time, it’s still a good practice to offer some form of backward compatibility.
<audio autoplay="autoplay" controls="controls">
    <source src="file.ogg" />
    <source src="file.mp3" />
    <a href = "file.mp3" > Download this file. </a> 
</audio>

<video>
Until now, there has not been a standard for showing a video/movie on a web page.Today, most videos are shown through a plug-in (like flash). However, different browsers may have different plug-ins. HTML5 defines a new element which specifies a standard way to embed a video/movie on a web page: the <video> element.
<video width="320" height="240" controls="controls">
   <source src="movie.mp4" type="video/mp4">
   <source src="movie.ogg" type="video/ogg">
   <source src="movie.webm" type="video/webm">
   Your browser does not support the video tag.
</video>

Regular Expressions
How often have you found yourself writing some quickie regular expression to verify a particular textbox. Thanks to the new pattern attribute, we can insert a regular expression directly into our markup.
<form action="" method="post"> 
   <label for="username">Create Username: </label>   
   <input type="text" name="username" id="username" 
        placeholder="4 <> 10"  pattern="[A-Za-z]{4,10}" autofocus  
        required>  
   <button type ="submit" > Go </button>   
</form>

HTML5 New Elements and Features

Posted by : Stranger
Date :Saturday, January 12, 2013
With 0comments
Tag :

Javascript to refresh page after a specific time

| Tuesday, January 8, 2013
Read more »

This Script refreshes the page automatically after a specific time. Copy and paste this code in the <head> section of your page.
<script>
<!--

//enter refresh time in "minutes:seconds" Minutes should range from 0 to inifinity. Seconds should range from 0 to 59

var limit="0:50"
if (document.images)
{
var parselimit=limit.split(":")
parselimit=parselimit[0]*60+parselimit[1]*1
}

function beginrefresh()
{
if (!document.images)
 return
if (parselimit==1)
 window.location.reload()
else
{ parselimit-=1
curmin=Math.floor(parselimit/60)
cursec=parselimit%60
if (curmin!=0)
curtime=curmin+" minutes and "+cursec+" seconds left until page refresh!"
else
curtime=cursec+" seconds left until page refresh!"
window.status=curtime setTimeout("beginrefresh()",1000)
}
}

window.onload=beginrefresh
//-->
</script>


Change the time for each refresh by configuring variable "limit" in the script.

Javascript to refresh page after a specific time

Posted by : Stranger
Date :Tuesday, January 8, 2013
With 0comments
Prev
▲Top▲