Clever way to introduce css hacks

Recently I need cross browser inline-block solution. As you know, inline-block is not supported by Internet Explorer 7 and 6. So I start to code my css and comeout with this solution after referring some tips from the Internet.

.makeinlineblock {display: inline-block }
* html .makeinlineblock { display:inline; } /* for IE 6 */
* + html .makeinlineblock { display:inline; } /* for IE 7 */

Not very pretty. So I make simple javascript coding using jQuery to make my css looks better.

$(function(i,j){
  var browserVersion=Math.floor(parseFloat($.browser.version)),body=$("body");
  for(i in $.browser){
    if(i!=="version"){
    body.addClass([i,i + "-" + browserVersion,i + "-gt-" + (browserVersion-1),i + "-lt-" + (browserVersion+1)].join(" "))
    }
  }
});

 

Now I can code my css like this.

.makeinlineblock { display: inline-block }
.msie-lt-8 .makeinlineblock {display: inline }

Prettier isn’t it? Not fully tested. Use it at your own risk. It works for me.

2011
06/02
CATEGORY
Uncategorized
Leave a comment

Telerik Bookvar: Nice Free Mindmapping Software
  • Rapid and interactive creation of mind maps
    Create mind maps as easily as playing with computer games. You can build your mind maps literally in seconds using handy keyboard shortcuts. You can drag files from your computer and drop them onto the mind map.
  • Stunning User Experience
    Rich UI based on Microsoft's Windows Presentation Foundation (WPF). The built-in Office Fluent Ribbon and 3D animations take the user experience to the next level.
  • Collaboration
    Share ideas with your co-workers or friends. Bookvar lets you create and share mind maps and even discuss them with others thanks to the integrated chat support. All you need is a connection between your computers. Bookvar will take care to uniquely mark the topics of each user so that the topics can be easily recognized by the other users.
  • Extensible Architecture
    Use custom add-ins to extend the functionality. Create custom skins to change the appearance to your own liking.
  • Rich Media Integration
    Add images directly to your topics, embed and play videos or attach other resources (files).
  • Web Aware
    Search for images on the web using Microsoft Live Services. Publish your maps to Microsoft Office SharePoint Server and attach links to web pages directly in your map's topics.

Go to Bookvar project website.

2010
12/30
CATEGORY
Uncategorized
Leave a comment

How do you make jQuery ui tabs works with Sammy.js?

I know this topic has been raised before and you can find many workable solution. Some solution does not works with content via ajax and only can support one ui tabs. This solution is to overcome that limitation.

First you must bind select event to ui tabs.


    $('#your_tabs_id').tabs({select: function(ev, ui) {
      location.href =   "#/ui.tabs/"
                        + $(this).attr("id")
                        + "/" + ui.index;
      return true;
     }});

With this way, if you select any tab, it will redirect you to url #/ui.tabs/your_tabs_id/your_tabs_currentindex. Now, define routes in your sammy application to handle this url.


var app = $.sammy(function() {
this.get("#/ui.tabs/:id/:index", function(context){

$("#" + this.params["id"])
.tabs("select",parseInt(this.params["index"],10));

});
});

I define routes with :id and :index to capture tabs id and tabs current index into params[“id”] and params[“index”] respectively. So, with this information, we know which tabs index to select. You can also implement this technique on accordion. The concept is similar.

2010
12/29
CATEGORY
jquery
1 comment

Redcar, Textmate Alternative, Cross-Platform

via redcareditor.com

Promising text editor. Textmate themes and snippets are supported. Written in Ruby and runs on jRuby.

2010
12/29
CATEGORY
Uncategorized
Leave a comment

Software for Women:Virtual Makeover and Hairstyler Application

I’m sure some women like this software so I decided to share it. It is called jKiwi. By using one photo, jKiwi was specifically designed for helping to instantly find out how you would look in hundreds of haircuts, try different lip colors or eye contact lenses and shadows without paying much attention to the software and instead concentrate on your new look.

I haven’t tried it yet and never plan to install it. Don’t ask me for review.

Oppss.. I forgot to include the link, this is the link to the application.  http://jkiwi.com/.

2010
12/26
CATEGORY
Uncategorized
Leave a comment

Java 1.5 or 1.6 with Coldfusion 7

Trying to upgrade coldfusion jvm directly to java 1.5 or 1.6 will cause "Unsupported major.minor version" and/or "CFCServlet must be initialized". These are the steps I used to get ColdFusion MX7 on windows with embedded JRun working with the Sun JDK 1.5. Haven't tried it on linux. Probably will doing it soon.

  1. Download jrun updater 7 http://www.adobe.com/support/jrun/updaters.html
  2. Stop coldfusion service.
  3. Install jrun updater on runtime folder of your coldfusion MX7. 
  4. Download and install JDK 1.5 or 1.6.
  5. Open jvm.config file found in the runtimebin folder.
  6. Modify java.home to point to your JDK folder (for example, java.home=C:/Program Files/Java/jdk1.6.0_11)
  7. Open web.xml file found in the wwwrootWEB-INF folder.
  8. Now the tricky part, change MessageBrokerServlet load order to other than 1. In my case, I change it to 4.
    • Example: from <load-on-startup>1</load-on-startup> to <load-on-startup>4</load-on-startup>
  9. Restart your coldfusion server.

Now you can use your favorite java library with Coldfusion 7. Use it at your own risk.

*Step 8 will prevent "CFCServlet must be initialized" error from appearing. Why this step fixed that error?. I'm not really sure. If you know why, please share the info with me.

2010
12/22
CATEGORY
Uncategorized
Leave a comment

Less.js Will Obsolete CSS

LESS has been implemented in JavaScript. For those who never heard of LESS, it is a css preprocessor which can make your css “programmable”. 

Here’s a basic example of LESS code to give you an idea of what it does: 

@brand-color: #3879BD;

#header {
    a {
        color: @brand-color;
        &:hover {
            color: #000;
        }
    }
}

In this example, brand-color is declared globally. In normal css, you have to specify it at every css selector where  to make changes of the brand-color, you have to modify it at each css selector which can be tedious if you use it many times. Since this example use LESS, you just have to modify @brand-color at the first line. For more example please visit LESS Official Website or fadeyev.net.

P.S.S. Less.js browser script currently won’t work if you’re using Chrome and the path to your page starts with “file:///” due to a known Chrome issue.

2010
08/31
CATEGORY
Uncategorized
Leave a comment

Poll

Follow

Get every new post delivered to your Inbox.