Wednesday, December 15, 2010

An impressive UI Framework

As I begin my work in web development, I mostly involve in layout designing, CSS, and JavaScript coding. Most of the things are relevant to user interface. However, I am not good at graphic designing; even so I keep learning CSS and layout design aiming at my job requirement. Since then, I work around the stuffs I have learned.

Additionally, I am impressed by some UI frameworks such as YUI which I like most. But meanwhile, my company formed a team named Yoolk UI team to build its own UI Framework and I am the first person to use and test it. Of course, it is hard for me to use the UI framework for the first time. Later on, I get used to it.

So far, we use our framework to build our own application. Yes, it works! It is very flexible, powerful and easy to use. Moreover, the Yoolk UI team is still continuing to improve it to be better and better.

We would like to inform all of you guys about this framework and you guys can give any good feedbacks as well. Please check it out http://ui.yoolk.com/

Monday, December 21, 2009

Fixing Div overlay over flash object issue

To solve Div overlay over flash object, you have to set property mode for flash object transparent. So please check the following example:

<object width="170" height="250" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=10,0,32,18">
<param value="high" name="quality"/>
<param value="transparent" name="wmode"/>
<param value="/images/Flash/Angkor.swf" name="src"/>

<embed width="170" height="250" src="/images/Flash/Angkor.swf" wmode="transparent" quality="high" type="application/x-shockwave-flash"/>
</object>



Note: 
 object tag:
<param name="wmode" value="transparent" />

embed tag:
wmode="transparent"

I would recommend you guys use Object tag because it is exactly HTML Tag. However, embedg tag  is created by Netscape if I remember well. You can search more for this.

Hopefully, this can help you guys!

Monday, November 16, 2009

Adjacent Sibling Selectors

Adjacent sibling selectors allow you to target an element that immediately follows—and that has the same parent as—another element.
      The concept of adjacent sibling selectors may sound a bit convoluted at first, but consider
this example:

<body>
   <h1>This is a header</h1>
   <p>This is a paragraph.</p>
   <p>This is another paragraph.</p>
</body>


      Paragraphs, by default, have a margin of 1 em above and below them. A common style effect is to remove the top margin of a paragraph when it is immediately after a header. The adjacent sibling selector, which is indicated by a plus sign (+), solves this problem for you:

h1 + p {
   margin-top: 0;
}


Although this is incredibly useful in theory, it’s not so useful in the real world. Internet Explorer version 6 and older doesn’t support this selector (Internet Explorer 7 does offer support for it, though). Including it in your styles doesn’t hurt anything—IE will simply ignore it. But those visitors using IE won’t see your adjacent sibling style rules, either.
      This selector doesn’t do a lot for you in the real world at the time of this writing, but it’s still smart to be aware of it, as someday it will come in handy.

Thursday, October 22, 2009

text-overflow for Firefox

Since I really want to truncate my string that is longer than its block's width and add ... to the end, I looked around many sites and blogs. I have found a very interesting thing to deal with this issue. But, it works for all browsers except the most popular browser for most developers which they have been believing for its features. However, we still have a trick to make it happen :-)

Now have a look at this:

<html>
<head>
    <title>Ellipsis</title>
    <style type="text/css">
        .ellipsis { 
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 
            -o-text-overflow: ellipsis; 
            -moz-binding: url('ellipsis.xml#ellipsis'); 
        }
       .test{
        width:250px;
   
       }
     </style>
</head>
<body>
    <div>
        <h4 class="test">
            <a  class="ellipsis" href="#">

              Superior Rooms are richly appointed, decorated in soft tones and offer superior views. The rooms are warm and inviting with hardwood floors and a marble entry.     * Superior Rooms feature air-conditioning, satellite television, a refrigerator and a private bar, and are equipped with telephones, a fax/modem line and high-speed Internet access.    * The bathroom includes a deep soaking tub
            </a>
        </h4>
    </div>

</body>
</html>



  • Explanation 
Please focus on css codes in head section above. you can see one property containing value ellipsis (text-overflow: ellipsis;)-it means it clips the string and add ... to the end, but it supports only for IE. Additionally, -o-text-overflow: ellipsis;  supports for Opera. The last one  -moz-binding: url('ellipsis.xml#ellipsis'); is a hack for firefox. So, you should have an xml file like below then:
<?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>


As a result, you will get your string formatted with ... :-)


P.S: It caused me a very headache to get it done, yet I am still not satified with it yet because you see css codes in HTML. I have tried to extract those css codes to external file; unfortunately I could  not get it worked. If you have any experience with it, please drop your comment. You are always welcome!

Additional Resources:

http://www.rikkertkoppes.com/thoughts/2008/6/  
http://ernstdehaan.blogspot.com/2008/10/ellipsis-in-all-modern-browsers.html
http://www.quirksmode.org/css/textoverflow.html

 

Tuesday, October 20, 2009

Child Selectors (Basic CSS Cont.)

Child selectors are similar to descendant selectors, but they select only children rather than all ancestors. Child selectors are indicated by a greater-than sign (>).
Example:
<ul>
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
  <li>Item four has a nested list
     <ol>
       <li>Sub-item one</li>
       <li>Sub-item two</li>
     </ol>
  </li>
</ul 
Whereas our descendant selector, ul li { color: blue; }, targeted all li elements in this
example, a similar child selector would only select the first four li elements, as they are direct children of a ul element:
ul > li {
  color: blue
}  
It would not target those li elements in item four’s nested ol list.
Note: Microsoft Internet Explorer 6 and below does not support child selectors.

Thursday, October 8, 2009

Centering Div block within its Div container parent

I have HTML Markup in the following:
<div id="adContainer">
                <div id="textAdFrame">
                    <ul id="adFrame">
                        <li class="textad">
                            <a href="#">
                                <h2 class="header">Best HOTEL in town?</h2>
                                <p class="detail">Which hotel has the softest pillow? Do you know? Tell everybody! Give them a Rate!</p>
                            </a>
                        </li>
                        <li class="textad">
                            <a href="#">
                                <h2 class="header">Emergency numbers?</h2>
                                <p class="detail">Click here for POLICE, FIRE, AMBULANCE  and other useful numbers!</p>
                            </a>
                        </li>
                        <li class="textad">
                            <a href="#">
                                <h2 class="header">The best restaurant in Phnom Penh!</h2>
                                <p class="detail">Where to get the best fried rice? Do you know? Tell everybody! Give them a Rate!</p>
                            </a>
                        </li>
                    </ul>
                </div>

</div>

Now please have a look at the css codes below:
#adContainer #textAdFrame{
    margin:0 auto;
}

As a result, you will see <div id="textAdFrame"> and its content is at the center of its parent container. You might wonder why it is so useful, because it is different from text-it is a div block. So, you cannot use text-align:center to make div block sit right in the center of its container.

Monday, October 5, 2009

Basic CSS (Cont.)

Descendant Selectors
Descendant selectors, sometimes called contextual selectors, allow you to create style rules that are effective only when an element is the descendant of another one. Descendant selectors are indicated by a space between two elements. As an example, you may want to style only li elements that are descendants of ul lists (as opposed, say, to those who are part of ol lists). You’d do so like this:
ul li {
          color: blue;

}
This rule will make li text blue—but only when the li is contained within a ul element. So, in the following code, all li elements would be blue:
 <ul>
   <li>Item one</li>
   <li>Item two</li>
   <li>Item three</li>
   <li>Item four has a nested list
     <ol>
       <li>Sub-item one</li>
       <li>Sub-item two</li>
     </ol>
  </li>

</ul>
Even though the nested list in item four is an ol element, the blue color will still be
applied to its list items because they are the descendants of a ul. Descendant selectors can be useful in targeting items deep in your (X)HTML structure, even when they don’t have an ID or class assigned to them. By stringing together many elements, you can target strong elements inside cite elements inside blockquote elements inside div elements:
div blockquote cite strong {
  color: orange;
}

You can combine these with your class and ID selectors to get even more specific. Perhaps we want only li elements in ul elements with a class of ingredients inside our div with the id value recipes:
div#recipes ul.ingredients li {
  font-size 10px;
}

As you can imagine, descendant selectors are powerful, and it’s no coincidence that descendant selectors are among the most-used types of CSS selectors.