N a g a s a i: HTML

Showing posts with label HTML. Show all posts

Monday, March 11, 2024

Convert String to Title case using Javascript

Here is the function to convert string to title case, which can handle spaces and underscores. Below function will remove underscores from the string.

// Import the function
function convertToTitleCase(input) {
  return input.toLowerCase().replace(/_/g, ' ').replace(/\b\w/g, function(match) {
    return match.toUpperCase();
  });
}

You can call the convertToTitleCase function in HTML by including a script tag with the function definition, and then using JavaScript to call the function and display the result.

Here's an example of how you can call the convertToTitleCase function in HTML:

<!DOCTYPE html>
<html>
<head>
  <title>Convert to Title Case</title>
</head>
<body>

<p id="output"></p>

<script>
// Function definition
function convertToTitleCase(input) {
  return input.toLowerCase().replace(/_/g, ' ').replace(/\b\w/g, function(match) {
    return match.toUpperCase();
  });
}

  // Call the function and display the result
  let input = "Nagasai_Srinivas_Mudara";
  let convertedString = convertToTitleCase(input);
  document.getElementById("output").innerHTML = convertedString;
</script>

</body>
</html>

In this JavaScript function, the replace method is used with a regular expression to match the underscores and lowercase letters and convert the lowercase letters to uppercase when preceded by an underscore or at the beginning of the string.

You can use the convertToTitleCase function to convert any input string to title case in a generic and reusable way.

Sunday, August 28, 2016

How transform Image using CSS/HTML

I want to turn the image full 180 degrees, this is how we CSS can help turn image upside down.

div {
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}

Flip image via Javascript/CSS?

This is how image can be flipped, like a mirror image

<div id="container" class="flip-vertical">

<h3 class="flip-vertical">vertical flip</h3>
</div>

.flip-horizontal { -moz-transform: scaleX(-1); -webkit-transform: scaleX(-1); -o-transform: scaleX(-1); transform: scaleX(-1); -ms-filter: fliph; /*IE*/ filter: fliph; } .flip-vertical { -moz-transform: scaleY(-1); -webkit-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); -ms-filter: flipv; /*IE*/ filter: flipv; }

Friday, March 28, 2014

Remove the AnchorTag Border

I have a AJAX Tab container and in that on selection its giving me a border on the Header Text of the Tab. To remove this using CSS, here is how we can do it

.ajax__tab_inner a.ajax__tab_tab{width:100%;border:0 !important;outline: none; }

a:focus {
outline: none;
}

This is what will fix the issue. Hope this helps!

Monday, March 10, 2014

How to access a div or HTML controls is inside a gridview?

Here is an example of how to access a div inside the TemplateColumn of a Grid:

aspx:

<asp:TemplateField HeaderText="Pick" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<ItemStyle Width="60px" />
<ItemTemplate>
<div id="divpickstatus" runat="server">                                 
</div>
</ItemTemplate>
</asp:TemplateField>

codebehind

protected void gridview_schedule_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        HtmlGenericControl divpickstatus = (HtmlGenericControl)e.Row.FindControl("divpickstatus");              
    }
}

Hope this helps.

Friday, May 10, 2013

Free eBook: Programming Windows 8 Apps with HTML, CSS and JavaScript

You can download the eBook in PDF format here: http://go.microsoft.com/FWLink/?Linkid=270056 (17.9 MB)

EPUB format is here: http://go.microsoft.com/FWLink/?Linkid=272592 (37.3 MB)

MOBI format is here: http://go.microsoft.com/FWLink/?Linkid=272591 (69.5 MB)

Happy programming!!

Saturday, January 26, 2013

How to get Line break in a button using HTML and CSS

Some times there are some scenarios where we might put some line breaks in buttons while doing HTML code your pages. There are few different ways that you can achieve this using HTML and CSS.

Here are few code snippets

   1: <!-- Method 1 -->

   2: <input type='submit' value='my \n button'>

   3: <!-- Method 2 Using HTML break-->

   4: <input type='submit' value='my &lt;br> button'>

   5: <!-- Method 3: Using CSS -->

   6: <input type="submit" value="My button" style="white-space:normal"/>

Hope this helps!!

Saturday, October 02, 2010

HTML Codes - Characters and symbols

I have found collection of information about HTML codes, ASCII Codes, URL Encoding, URL Decoding which is helpful.

Check this URL for more information.

Thursday, July 29, 2010

How to: Javascript Loading Conditionally for IE

Loading Javascript conditionally for IE. When rendering fixes are needed for IE, you can enclose CSS, JavaScript, or HTML markup in conditional comment tags directed at one or more versions of IE with an "if" statement; IE will then execute the code specified within them, while all other browsers treat them as standard comment tags and ignore them. The "if" statement must reference IE in square brackets as shown below; in this example include script only for IE

<!--[if IE]>

    <script type="text/javascript">

        /*  Do Stuff */
    </script>
<![endif]-->

below example shows how to exclude a script block from IE:

<![if !IE]>

    <script type="text/javascript">

        /*  Do Stuff */

    </script>

<![endif]>

Conditional comments can also be targeted to a particular version of IE, or a subset of versions, like those released prior to IE7 or IE6

<!--[if lt IE 7]>

  <link rel="stylesheet" type="text/css" href="ie_fixes.css" />

<![endif]-->

Hope this helps!

Friday, March 12, 2010

URL Escape Characters

What is the % Code in My URL?

In order to prevent the misinterpretation of special characters such as a space, bracket (< and >), or % in the URL (which stands for Uniform Resource Locator - it is the address you see in your browser's address bar indicating the location of the website you are visiting), browsers parse certain special characters using URL escape characters.

Table of URL Escape Characters
Character	Escape Character	Character	Escape Character
Space	%20	#	%23
$	%24	%	%25
&	%26	@	%40
'	%60	/	%2F
:	%3A	;	%3B
<	%3C	=	%3D
>	%3E	?	%3F
[	%5B	\	%5C
]	%5D	^	%5E
{	%7B	\|	%7C
}	%7D	~	%7E

Good Coding Practice

It is good coding practice to avoid the need for URL escape characters. As a rule of thumb, avoid using the special characters above when formulating a URI string (filename), and I recommend using the hyphen (-) instead of the underscore (_) (as all search engines recognize the hyphen as a space separator, but the same is not true for the underscore; and older browsers do not correctly interpret the underscore in CSS). If you must use the above characters make sure to escape them using the above escape characters so when the browser parses your code it will not misinterpret the link. It's important to note that these URL escape characters differ from HTML escape characters.

Thursday, February 18, 2010

Hypertext Transfer Protocol (HTTP) Status Code Registry

HTTP Status codes are returned by the server to the client software to determine the outcome of a request, the codes below are the HTTP /1.1 codes

HTTP CODES - 100-101

100 - Continue
Tells the client that the first part of the request has been received and that it should continue with the rest of the request or ignore if the request has been fulfilled.

101 - Switching Protocols
Tells the client that the server will switch protocols to that specified in the Upgrade message header field during the current connection.

HTTP CODES 200-206

200 - OK
The request sent by the client was successful.

201 - Created
The request was successful and a new resource was created.

202 - Accepted
The request has been accepted for processing, but has not yet been processed.

203 - Non-Authoritative Information
The returned meta information in the entity-header is not the definitive set as available from the origin server.

204 - No Content
The request was successful but does not require the return of an entity-body.

205 - Reset Content
The request was successful but the User-Agent should reset the document view that caused the request.

206 - Partial Content
The partial GET request has been successful.

HTTP CODES 300-307

300 - Multiple Choices
The requested resource has multiple possibilities, each with different locations.

301 - Moved Permanently
The resource has permanently moved to a different URI.

302 - Found
The requested resource has been found under a different URI but the client should continue to use the original URI.

303 - See Other
The requested response is at a different URI and should be accessed using a GET command at the given URI.

304 - Not Modified
The resource has not been modified since the last request.

305 - Use Proxy
The requested resource can only be accessed through the proxy specified in the location field.

306 - No Longer Used
Reserved for future use.

307 - Temporary Redirect
The resource has temporarily been moved to a different URI. The client should use the original URI to access the resource in future as the URI may change.

HTTP CODES 400-417

400 - Bad Request
The syntax of the request was not understood by the server.

401 - Not Authorised
The request needs user authentication

402 - Payment Required
Reserved for future use.

403 - Forbidden
The server has refused to fulfill the request.

404 - Not Found
The document/file requested by the client was not found.

405 - Method Not Allowed
The method specified in the Request-Line is not allowed for the specified resource.

406 - Not Acceptable
The resource requested is only capable of generating response entities which have content characteristics not specified in the accept headers sent in the request.

407 - Proxy Authentication Required
The request first requires authentication with the proxy.

408 - Request Timeout
The client failed to sent a request in the time allowed by the server.

409 - Conflict
The request was unsuccessful due to a conflict in the state of the resource.

410 - Gone
The resource requested is no longer available and no forwarding address is available.

411 - Length Required
The server will not accept the request without a valid Content-Length header field.

412 - Precondition Failed
A precondition specified in one or more Request-Header fields returned false.

413 - Request Entity Too Large
The request was unsuccessful because the request entity is larger than the server will allow.

414 - Request URI Too Long
The request was unsuccessful because the URI specified is longer than the server is willing to process.

415 - Unsupported Media Type
The request was unsuccessful because the entity of the request is in a format not supported by the requested resource for the method requested.

416 - Requested Range Not Satisfiable
The request included a Range request-header field, and not any of the range-specifier values in this field overlap the current extent of the selected resource, and also the request did not include an If-Range request-header field.

417 - Expectation Failed
The expectation given in the Expect request-header could not be fulfilled by the server.

HTTP CODES 500-505

500 - Internal Server Error
The request was unsuccessful due to an unexpected condition encountered by the server.

501 - Not Implemented
The request was unsuccessful because the server can not support the functionality needed to fulfill the request.

502 - Bad Gateway
The server received an invalid response from the upstream server while trying to fulfill the request.

503 - Service Unavailable
The request was unsuccessful to the server being down or overloaded.

504 - Gateway Timeout
The upstream server failed to send a request in the time allowed by the server.

505 - HTTP Version Not Supported
The server does not support or is not allowing the HTTP protocol version specified in the request.

Visit the World Wide Web Consortium or List of Status codes from Wiki to find out more definitions.

Potentially dangerous Request.Form value was detected from the client : ValidateRequest

This error is caused because the .NET framework detected HTML in an input control (e.g. TextBox). I've highlighted 3 possible ways to get round the issue, all with their advantages and disadvantages:

1. Add the following to the existing Page directive on the relevant pages.

<%@ Page Language="C#" MasterPageFile="~/Master.master" ValidateRequest="false" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>

2. Add the following to the Web.config within the <system.web> section (globally disable request validation). This will allow users to enter HTML into controls which could be harmful or result in undesirable consequences.

<system.web>

</system.web>

3. Unless you need users to be able to enter HTML into a form, make sure all HTML displayed in controls is encoded.

lblTextBox.Text = HttpUtility.HtmlEncode( lblTextBox.Text );

Wednesday, September 02, 2009

HTML 5

HTML 5 is the next major revision of HTML (Hypertext Markup Language), the core markup language of the World Wide Web.

HTML 5 is the proposed next standard for both HTML 4.01 and XHTML 1.0, as development on the next version of the latter has stopped. HTML 5 was initially said to become a game-changer in Web application development, making obsolete such plug-in-based rich Internet application (RIA) technologies as Adobe Flash, Microsoft Silverlight, and Sun JavaFX. Such applications would be made obsolete by specifying a standard video codec for all browsers to use. However, in December 2007, the editor of the burgeoning draft specification dropped the recommendation of the free software Theora and Vorbis codecs, after opposition from Apple and Nokia. This means HTML 5 does not currently specify a common video codec for Web development.

The ideas behind HTML 5, originally referred to as Web Applications 1.0, were pioneered in 2004 by the Web Hypertext Application Technology Working Group (WHATWG); HTML 5 incorporates Web Forms 2.0, another WHATWG specification. The HTML 5 specification was adopted as the starting point of the work of the new HTML working group of the W3C in 2007.

Difference between HTML4 and HTML5

Click Here for more.