Implementation of the Trim function

if you are not using a javascript framework and you want to trim whitespace from a text you can use the following function. And keep in mind this is very efficient rather than using for loops and searching for spaces.

//this is the function
String.prototype.trim = function () {
  return this.replace(/^\s+|\s+$/g, "");
}

//usage:
var sampleText = "   text to trim  ";
var trimmedText = sampleText.trim(); 

//output will be:
"text to trim"

How to disable SharePoint built in liquid layout

You have to locate

<div id="s4-workspace">

div element(you can find it by searching by the id). After that put “s4-nosetwidth” class. Ex:

<div id="s4-workspace" class="s4-nosetwidth">

This class will disable SharePoint automatic width and height calculation and give you the control to set your own style.

Blogging is now very easy!

When you use a blog the most difficult part would be typing and adding images and videos. I found a very handy and easy to use tool that can be use to blogging, Windows Live Writer. You can download this application from this link.

Adding drag function to a web page

Some time you will need to use dragging method for some scenarios. As an example you want to provide a feature to drag an image to a particular place in your web page. So I created this jQuery plug-in to fulfill this need. If you want to try this out you need to have to download jQuery API first. Then download my drag.js file from here drag.js if you are using animation feature you have to download this extra .js from here easing.js OK, now I think you have the jQuery file. following are the steps to follow to use my plug-in.

1

Add reference to the jQuery and drag js files in you html page

<script type="text/javascript" src="jquery-1.4.2.js"> </script> 
<script type="text/javascript" src="jquery.drag.1.0.dis.js"> </script>

2

Add html controls or what ever the things you want to move. You can move "p" tags also!.

Here I'm using textboxes to move.

<script type="text/javascript">  

/*default drag function*/ 
$('#txtbox1').Drag();   

/*move the object using default built-in hand*/ 
$('#txtbox2').Drag({'usehandler': true});  

/*animate the movement*/ .
$('#txtbox3').Drag({'usehandler': true, 'animate':true}); 

/*you can define your own hand to do the move*/ 
var hand = '<div style=\'width:17px;height:22px;float:left;background-color:black;color:white;\'>|||||</div>'; 
$('#txtbox4').Drag({'usehandler': true, 'handstyle': hand}); 

/*you can use a animation duration also*/ 
$('form').Drag({'usehandler': true, 'handstyle': handtwo, 'animate':true, 'animateduration':250}); </script> 

Like wise you can try different ways to apply this plug-in to your web page. Enjoy!

20 CSS Best Practices

1

Always start with a reset. So you can minimize the cross browser issues

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}

body {
 line-height: 1;
}

ol, ul {
 list-style: none;
}

blockquote, q {
 quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}

table {
 border-collapse: collapse;
 border-spacing: 0;
}

2

Group styling

• Group type 1

  .wrapper{
    width:auto;
    height:auto;
    float:left;
  }

• Group type 2

  .wrapper{ width:auto; height:auto; float:left; }

3

Create a good HTML blueprint for the site. Design the site from bottom to top.

Then the styling will be easy.

4

Use a good naming convention when using styles for html elements

• Use meaning full name.

Ex: “header” for the upper area

• Use nested naming.

If you want to name a style using a same name you have defined before use a shortened version of the parent elements’ style name as a prefix followed by a hyphen. Ex:

head-content{  /*styling*/ }
body-content{  /*styling*/ }
footer-content{  /*styling*/ }

5

Always group styles bottom to top

Ex: if you have html structure like below try to write the styles like this.

/*----Start of header------*/
.header{ /*styling*/ }
.head-content{ /*styling*/ }
/*----End of header------*/

/*----Start of body------*/
.body{ /*styling*/ }
.body-content{ /*styling*/ }
/*----End of body------*/

/*----Start of footer------*/
.footer{ /*styling*/ }
.footer-content{ /*styling*/ }
/*----End of footer------*/

6

Comment, comment, comment!!!

You can’t use every programming like commenting in CSS. You can only use block comment like follows.

//*-----content for the comment------*/ 

You are not allowed to use “//comment” type of commenting

7

Use correct positioning methods

• Always try to use float: left, right. This will minimize the cross browser issues.
• Use absolute only when you want to get out an element from the page flow. Absolute positioning method is used to layered elements also always try to use values for top and left.
• Always try to use relative positioning rather than defining only float value. Because if you use relative position you can use top, right, bottom, left properties to place elements. This will also help to minimize cross browser issues since most of the problems occurred when using margins and paddings for the positioning.

8

Use fewer selectors to style a particular element if you are using unique class names

Ex: use

.text a 

instead of

.body .content .title .text a 

9

Use external style sheets

• It helps to separate content from presentation.
• External stylesheets can be cached, allowing faster page loading times.
• A single stylesheet can be applied to every page of a site, allowing quick style changes to a single file.
• It makes organization much easier

10

Keep a color reference on top of the document

So anybody read the style sheet knows what are the colors you have been used to style text, links, etc.

/* Colour reference
  
 background: #FFCCCC
 normal text: #FFF46D
 links: #38FF0E
 headings: #77F6FF
 main content bg: #DCAFFF
  
 */

11

Group styles whenever possible

Don’t repeat same style for different elements.

H1, h2, h3, h4{
     Color:#fff;
 }

12

Use the right DOCTYPE

Ex: IE has two rendering modes - Quirks mode and Strict mode. In Quirks mode, IE renders the page however it feels like on that particular day. You will notice problems with your CSS layouts that wouldn't appear in Strict Mode.

13

Don’t specify units for zero values

padding:0px 0px 10px 5px /*bad*/
 Padding:0 0 10px 5px /*good*/

14

Add a comment top of the CSS document

Mentioning created date, web site name, creators’ name, etc.

/*--------------------------------
 Owner: .ind
 Date:12/12/2012
 Web site:www.dotind.com
 ---------------------------------*/

15

Use fewer tables

Use div elements as much as you can to positioning since tables are difficult to position using css.

16

Avoid using browser specific styles

Because it is difficult to maintain several style sheet for one site.

17

Don’t use negative margin and padding values unnecessarily

Such as when fixing cross browser positioning issues.

18

Use less hacking methods

It is hard to get rid of cross browser issues without some hacks. But those also can be done using little bit workarounds.

19

Use less divs and tables

This is an independent country. You can use any amount of divs and tables. But you are the one who get complex your css.

20

Validate your CSS

So that will make sure your CSS is working on any browser without errors and according to the standards.

Start of a New Journey

I created this blog to share my knowledge in UI designing(most of the time it will be web site designing). I am currently working at Virtusa (pvt) Ltd as a  Associate UI Engineer(specialist) and undergraduate at SLIIT Sri lanka. So I hope people will like this blog and provide feed backs to my posts and share their knowledge with me. So this is the start of a new journey.

Stay hungry, Stay foolish!