Personal tech blog of Sameera Thilakasiri - Just I wanted.. Do you?…

Jquery Mobile related hot topics

Posted on August 21, 2011 by Sameera Thilakasiri

Theming list items, Theming dividers, Theming count bubbles, Theming icons, Theming split buttons

Theming headers and footers, Theming buttons in toolbars

List formatting

Read Only List

List Search Filter Bar

Search filter bar with dividers

Collapsible content

Collapsible set markup – accordion

Theming the content area – Collapsible

Footer Persist

Author

By Sameera Thilakasiri
He is a website designer based in Colombo. He is blogging technical articles while his leisure.
Follow Me at Twitter and Google+ and check out my blog.

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

IE settimeout arguments

Posted on July 19, 2011 by Sameera Thilakasiri

setTimeout() schedules an arbitrary function call for some point in future. This is useful when you have functions that do repetitive tasks some milliseconds apartment, but not constantly.

The reason why this is used instead of a simply while (true) { … } loop is because Javascript is a single-threaded language. So if you tie up the interpreter by executing one piece of code over and over, nothing else in the browser gets a chance to run. setTimeout() allows other pieces of Javascript (or browser events, such as clicking on a button) to run, while guaranteeing that your code will be executed at some point.

var   f = function() {function_name(arg1); };
setTimeout(f, msec);

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Category: JavaScript
Tags: JavaScript

String Truncation (Ellipsis) using jQuery for IE FF Opera

Posted on July 19, 2011 by Sameera Thilakasiri

you could achieve the same thing by writing a small JavaScript code:

$(document).ready(function() {
   $(.fixWidth).each(function()   {
      var limit = 50;
      var ellipsis = "...";
      if( $('#limitedWidthTextBox').val().length()   > limit)
      {
         var trimmedText = $('#limitedWidthTextBox').val().substring(0, limit-4); // -4 to include the ellipsis size and also since it is an index
           trimmedText   += elipsis;
         $('#limitedWidthTextBox').val(trimmedText);
      }
   }
}

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Category: JavaScript, jQuery
Tags: jQuery | TruncationOptions

CSS Selectors you Must Memorize

Posted on July 19, 2011 by Sameera Thilakasiri

The star symbol will target every single element on the page. Many developers will use this trick to zero out the margins and padding. While this is certainly fine for quick tests, I’d advise you to never use this in production code. It adds too much weight on the browser, and is unnecessary.

* {  
    margin: 0;  
    padding: 0;  
}

The next most comment selector is the descendant selector. When you need to be more specific with your selectors, you use these. For example, what if, rather than targeting all anchor tags, you only need to target the anchors which are within an unordered list? This is specifically when you’d use a descendant selector.

li a {  
     text-decoration: none;  
}

This is referred to as an adjacent selector. It will select only the element that is immediately preceded by the former element. In this case, only the first paragraph after each ul will have red text.

ul + p {  
    color: red;  
}

The difference between the standard X Y and X > Y is that the latter will only select direct children. For example, consider the following markup.

div#container > ul {  
      border: 1px solid black;  
}

A selector of #container > ul will only target the uls which are direct children of the div with an id of container. It will not target, for instance, the ul that is a child of the first li.

Referred to as an attributes selector, in our example above, this will only select the anchor tags that have a title attribute. Anchor tags which do not will not receive this particular styling. But, what if you need to be more specific?

a[title] {  
     color: green;  
}

Again, we use a regular expressions symbol, $, to refer to the end of a string. In this case, we’re searching for all anchors which link to an image — or at least a url that ends with .jpg. Keep in mind that this certainly won’t work for gifs and pngs.

a[href$=".jpg"] {  
      color: red;  
}

Hope it was good, there are lot to bring but those are not much compatible with IE7, so lets wait 🙂

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.

Category: CSS Tip & Tricks
Tags: CSS Tip & Tricks

CSS String Truncation with Ellipsis for IE FF Opera

Posted on July 19, 2011 by Sameera Thilakasiri

We’ll start by adding a class “.ellipsis” to the p tag and building it by example. Add white-space: nowrap, to limit the paragraph to a single line, and overflow: hidden keeps it from making the browser window wider. We then add width: 300px to limit the size (IE6 needs a width defined, even if it’s 100%) and begin constructing our label. Also, first recommended for CSS3 back in 2003[1], the CSS Text Module includes support for text-overflow: ellipsis. So putting that all together:

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

p.block {
	width: 300px;
}

Opera’s developers recognize that the text-overflow property isn’t part of the official spec yet, and distinguishes it as a proprietary property through the use of the -o prefix. Microsoft introduced something similar in IE 8 with the -ms prefix. So let’s add that:

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	-ms-text-overflow: ellipsis;
}

Making it work in FireFox
While implementation of the text-overflow property in FireFox is in development[3], it has been “in development” for a long time. But FireFox does support XUL, Mozilla’s XML User Interface Language[4]. While it may be the first time you’ve heard about it, many of the popular FireFox add-ons are written in, or rely on, XUL. XUL has a crop property for the description element, which specifies “An ellipsis will be used in place of the cropped text” [5].

And this is where Rikkert Koppes, a developer in The Netherlands, figured out how to put it all together[6]. Firefox’s support for XBL (XML Binding Language) allows us to “associate elements in a document with script, event handlers, CSS, and more complex content models, which can be stored in another document” [7]. So in this case, the other document is going to be our XUL description element with tail truncation (crop), which by default in XUL will have ellipsis, and the association will be through FireFox’s support of XBL bindings in CSS. First, we’ll create the XUL, which should be saved as ellipsis.xml:

<?xml version="1.0"?>
<bindings 
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
	<binding id="ellipsis">
		<content>
			<xul:window>
				<xul:description   crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
			</xul:window>
		</content>
	</binding>
</bindings>

At Mint.com, we store this alongside our CSS directory in a folder named xml. You may wish to do the same. Then we tell our FireFox-only (-moz prefix) CSS to bind the .ellipsis class to the XUL:Description element’s described behavior, referenced by a unique ID (that binding id=”ellipsis”) in the XML code above:

.ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	-o-text-overflow:   ellipsis;
	-moz-binding: url('assets/xml/ellipsis.xml#ellipsis');
}

Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.