Pages
Showing posts with label CSS. Show all posts
Showing posts with label CSS. Show all posts

Thursday, May 2, 2013

Link CSS and Script Files in ASP.NET MVC 2

 
To resolve the correct file path in MVC 2 you need to use URL.Content.

Linking a CSS file.

<link href="<%= Url.Content("~/Content/StyleSheet1.css") %>" rel="stylesheet" type="text/css"/>

Linking a JavaScript file.

<script src="<%= Url.Content("~/Content/TreeMenu.js") %>" type="text/javascript"></script>

Adding Images through CSS.

.myClass  { background-image:url(<%: Url.Content("~/Content/icons/page.png")%>); }

Tuesday, April 2, 2013

Refresh div tag content

 
Below ASP.NET web form uses jquery to change the content inside a div tag.



<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){

    $("#changePanel").click(function() {

    var data = "foobar";

    $("#panel").hide().html(data).fadeIn('fast');

    })

  });

    </script>

    <style type="text/css">

    div {

    padding: 1em;

    background-color: #00c000;

     }



    input {

    padding: .25em 1em;

     }​

    </style>

</head>

<body>

    <form id="form1" runat="server">

    <div id="panel">my data</div>

    <input id="changePanel" value="Change Panel" type="button"/>​

  

    </form>

</body>

</html>

Thursday, February 14, 2013

Change Button Color on Mouseover using Jquery

 
HTML Code:

<input type="button" value="button" id="btn"/>
CSS: 
<style type="text/css">

.changeBc

{

    background-color:#380606;

}


</style>
Jquery: 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function () {

  $("#btn").hover(function () {

    $(this).toggleClass("changeBc");

  });

});

</script>

Wednesday, February 13, 2013

@media in CSS

 
With media types a page can have one layout for screen, one for print, one for handheld devices, etc.

The style in the example below tells the browser to display a 14 pixels Verdana font on the screen. But if the page is printed, it will be in a 10 pixels Times font. Notice that the font-weight is set to bold, both on screen and on paper:
<html>
<head>
<style>
@media screen
  {
  p.test {font-family:verdana,sans-serif;font-size:14px;}
  }
@media print
  {
  p.test {font-family:times,serif;font-size:10px;}
  }
@media screen,print
  {
  p.test {font-weight:bold;}
  }
</style>
</head>
<body>
....
</body>
</html>
Other Media Types
all  - Used for all media type devices
aural - Used for speech and sound synthesizers
braille - Used for braille tactile feedback devices
embossed - Used for paged braille printers
handheld - Used for small or handheld devices
print - Used for printers
projection - Used for projected presentations, like slides
screen - Used for computer screens
tty - Used for media using a fixed-pitch character grid, like teletypes and terminals
tv - Used for television-type devices

Monday, February 11, 2013

Simple Validation Form In Jquery

 
Preview On Focus:



Preview On Button Click:



Below is our HTML form with one text box and the validation messages.
<form id="form1" runat="server">
<fieldset class="formContainer">
<h3>Simple Validation Form.</h3>
<div class="rowContainer">
<label for="txtFirstname">Choose a username</label>
<input id="txtFirstname" type="text"/>
<div class="tooltipContainer info">Minimum 4 characters, maximum 15 characters.</div>
<div class="tooltipContainer error">Username must be between 4 and 15 characters.</div>
</div>
<input type="button" id="btnSubmit" value="Sign in" onclick="validateForm()"/>
</fieldset>
</form>
Add the form style.
<style type="text/css">
body
{
font-family:Arial, Sans-Serif;
font-size:83%;
}
.formContainer
{
background-color:#F5EFC9;
border:none;
padding:30px;
}
.formContainer h3
{
margin:0px;
padding:0px 0px 10px 0px;
font-size:135%;
}
.rowContainer
{
width:100%;
overflow:hidden;
padding-bottom:5px;
height:34px;
}
.rowContainer label
{
width:140px;
float:left;
color: #758656;
font-weight:bold;
}
.rowContainer input[type="text"]
{
width:200px;
}
.tooltipContainer
{
height:16px;
font-size:11px;
color: #666666;
display:none;
float:none;
background-repeat:no-repeat;
background-position:left center;
padding:0px 20px;
}
.info
{
background-image:url('info.gif');
}
.error
{
background-image:url('error.gif');
}
</style> 
Add the Jquery script to validate the form.
<script type="text/javascript">
$(document).ready(function () {
$(".formContainer input[type=text]").focus(function () {
$(this).parent().find(".error").css("display", "none");
$(this).parent().find(".info").css("display", "block");
}).blur(function () {
$(this).parent().find(".info").css("display", "none");
});
});
function validateForm() {
$(".formContainer input[type=text]").each(function () {
var text = $(this).attr("value");
if (text == "") {
$(this).parent().find(".error").css("display", "block");
}
if (text.length < 5) {
$(this).parent().find(".error").css("display", "block");
}
});
}
function clearForm() {
$(".formContainer input[type=text]").each(function () {
$(this).parent().find(".error").css("display", "none");
});
}
</script>

Thursday, January 17, 2013

Creating a Style Sheet in ASP.NET

 
To really get the value out of CSS, you need to create a style sheet. To create a style sheet in Visual Studio, choose Website -> Add New Item from the Visual Studio menu. Then, pick the Style Sheet template, specify a file name (like StyleSheet.css), and click Add. In a style sheet, you define several styles (also known as rules). You can then use these rules to format ordinary HTML and ASP.NET controls. Each rule defines a collection of formatting presets that determines how a single ingredient in your web page should be formatted. For example, if you want to define a rule for formatting headings, you start by defining a rule with a descriptive name, like this:

.heading1
{
}

Each rule name has two parts. The portion before the period indicates the HTML element to which the rule applies. In this example, nothing appears before the period, which means the rule can apply to any tag. The portion after the period is a unique name (called the CSS class name) that you choose to identify your rule. CSS class names are case sensitive.

Once you’ve defined a rule, you can add the appropriate formatting information. Here’s an example the sets the heading1 style to a large sans-serif font with a green foreground color. The font is set to Verdana (if it’s available), or Arial (if it’s not), or the browser’s default sansserif typeface (if neither Verdana nor Arial is installed).

.heading1
{
font-weight: bold;
font-size: large;
color: limegreen;
font-family: Verdana, Arial, Sans-Serif;
}

As you can see, the syntax for defining a style in a style sheet is exactly the same as it is for defining an internal style (not including the rule name and curly braces). By convention, each formatting option in a style is placed on a separate line, but this detail is optional. You can also create rules that are applied to HTML tags automatically. To do this, specify the tag name for the rule name. Here’s a rule that affects all <h2> tags on the page that uses the style sheet:

h2
{ ... }

If you want to apply formatting that applies to the entire web page, you can create a style sheet rule for the <body> element:

body
{ ... }

This gives you a good way to set the default font name and font size. Fortunately, you don’t need to hand-write the rules in your style sheet. Visual Studio allows you to build named styles in a style sheet using the same style builder you used to create inline styles earlier. To use this feature, add a blank style with the right rule name, like this:

.myStyle
{
}

Then, right-click between the two curly braces of an existing style and choose Build Style. You’ll see the familiar Modify Style dialog box, where you can point and click your way to custom fonts, borders, backgrounds, and alignment. If you want to create a new style from scratch, simply right-click an empty region of your style sheet and choose Add Style Rule. A typical style sheet defines a slew of rules. In fact, style sheets are often used to formally define the formatting for every significant piece of a website’s user interface. The following style sheet serves this purpose by defining five rules. The first rule sets the font for the <body> element, which ensures that the entire page shares a consistent default font. The rest of the rules are class based, and need to be applied explicitly to the elements that use them. Two rules define size and color formatting for headings, and the final rule configures the formatting that’s needed to create a bordered, shaded box of text.

body
{
font-family: Verdana, Arial, Sans-Serif;
font-size: small;
}

.heading1
{
font-weight: bold;
font-size: large;
color: lime;
}

.heading2
{
font-weight: bold;
font-size: medium;
font-style: italic;
color: #C0BA72;
}

.blockText
{
padding: 10px;
background-color: #FFFFD9;
border-style: solid;
border-width: thin;
}

Monday, January 7, 2013

CSS cursor Property Examples

 
See How the Cursor Changes
Put your mouse over the following links to see how the cursor changes. Be sure to test in different browsers, as not all CSS cursor typess are supported.
  • Default Cursors
  • Basic Cursors
  • Text Cursors
  • Resize Cursors
  • Table Cursors
  • Custom Cursors
Default Cursors
<a href="">No change to the cursor</a>
<a href="" style="cursor: auto;">cursor: auto;</a>
<a href="" style="cursor: default;">cursor: default;</a>
<a href="" style="cursor: none;">cursor: none;</a>
Basic Cursors
<a href="" style="cursor: help;">cursor: help;</a>
<a href="" style="cursor: pointer;">cursor: pointer;</a>
<a href="" style="cursor: progress;">cursor: progress;</a>
<a href="" style="cursor: wait;">cursor: wait;</a>
<a href="" style="cursor: crosshair;">cursor: crosshair;</a>
Text Cursors
<a href="" style="cursor: text;">cursor: text;</a>
<a href="" style="cursor: vertical-text;">cursor: vertical-text;</a>
<a href="" style="cursor: alias;">cursor: alias;</a>
<a href="" style="cursor: copy;">cursor: copy;</a>
<a href="" style="cursor: move;">cursor: move;</a>
<a href="" style="cursor: no-drop;">cursor: no-drop;</a>
<a href="" style="cursor: not-allowed;">cursor: not-allowed;</a>
Resize Cursors
<a href="" style="cursor: e-resize;">cursor: e-resize;</a>
<a href="" style="cursor: n-resize;">cursor: n-resize;</a>
<a href="" style="cursor: ne-resize;">cursor: ne-resize;</a>
<a href="" style="cursor: nw-resize;">cursor: nw-resize;</a>
<a href="" style="cursor: s-resize;">cursor: s-resize;</a>
<a href="" style="cursor: se-resize;">cursor: se-resize;</a>
<a href="" style="cursor: sw-resize;">cursor: sw-resize;</a>
<a href="" style="cursor: w-resize;">cursor: w-resize;</a>
<a href="" style="cursor: ew-resize;">cursor: ew-resize;</a>
<a href="" style="cursor: ns-resize;">cursor: ns-resize;</a>
<a href="" style="cursor: nesw-resize;">cursor: nesw-resize;</a>
<a href="" style="cursor: nwse-resize;">cursor: nwse-resize;</a>
Table Cursors
<a href="" style="cursor: context-menu;">cursor: context-menu;</a>
<a href="" style="cursor: cell;">cursor: cell;</a>
<a href="" style="cursor: col-resize;">cursor: col-resize;</a>
<a href="" style="cursor: row-resize;">cursor: row-resize;</a>
<a href="" style="cursor: all-scroll;">cursor: all-scroll;</a>
Custom Cursors
<a href="" style="cursor: url(redball.cur),default;">cursor: url(redball.cur);</a>

Tuesday, December 18, 2012

Disable HTML Link

 
You can use below code to disable a link button.

<a href="mypage.html" class="disable">HTML link</a>

CSS class
 .disable { pointer-events: none; cursor: default; }

You can change the cursor as you prefer.

Popular Posts

Distributed by My Blogger Themes - Designed by Bloggertheme9.