Little Known CSS List Styles

Sun Jan 24 02:38:47 2010

Even though HTML is not a programming language, but rather a markup language, it sometimes amazes me how much HTML has to offer. Just today, for example, I was reading a magazine and discovered some very useful CSS list styles. Most of them I has already seen, but those I hadn't still looked useful. As I live in Japan, the Japanese list styles look particularly useful. Anyway, just take a look below to check them all out. Just click on any of the links to see the style effect in real time.

Useful List Styles

  1. list-style:none;
  2. list-style:circle;
  3. list-style:disc;
  4. list-style:square;
  5. list-style:lower-greek;
  6. list-style:lower-roman;
  7. list-style:uppper-roman;
  8. list-style:lower-latin;
  9. list-style:upper-latin;
  10. list-style:lower-alpha;
  11. list-style:uppper-alpha;
  12. list-style:upper-latin;
  13. list-style:lower-latin;
  14. list-style:decimal;
  15. list-style:decimal-leading-zero;

Useful List Styles in Japan

  1. list-style:cjk-ideographic;
  2. list-style:hiragana;
  3. list-style:katakana;
  4. list-style:hiragana-iroha;
  5. list-style:katakana-iroha;


To use these styles, either put style="list-style:'style';" on the tag you would like to style. Otherwise, import a external stylesheet or use the styles tags at the top of your HTML page and write li{list-style:'style';}

As you can see, there are some really useful ones. It is just such a shame that most coders only get to use some more than others. I would love to see a wider use of these incorporated into the designs of more of the websites that I see on a daily basis. It just seems such a waste not to use them!

ActionScript 3 Digital Clock Class

Thu Jan 21 04:10:47 2010

Something as simple as putting the time on your site shouldn't be a difficult task and so I thought I would share a quick class with you that when instantiated creates and Textfield and tells the current time.

Here's the code.

import DigitalClock;

var clock:DigitalClock = new DigitalClock();
var clockGMT:DigitalClock = new DigitalClock(true);

addChild(clock);
addChild(clockGMT);
clock.x = 10;
clockGMT.x = 100;
	

Here's the result

Get Adobe Flash player

In the example above, we import and make two instances of the class DigitalClock. I have named them 'clock' and 'clockGMT' for obvious reasons.

You will noticed that we pass the Boolean true to the clockGMT instantiation to create a clock that displays Greenwich Mean Time (GMT) which is the local time in the UK. If you don't pass true or false the class will default to the local time (false) of the computer viewing it.

After that, all that's left is to add the clocks to the display list using addChild() passing in the name of each instantiation. I have also set the x position of the clocks so they don't appear on top of one another.

Download the DigitalClock Class here

Getting MySQL Auto Increment

Tue Jan 12 14:52:00 2010

If you have ever written a program that connects to a database using PHP, then there may have been times when you wanted to find the next available Auto Increment value in an MySQL database. The code below will allow you to do just that and it's very simple to use.

$row = mysql_fetch_assoc(mysql_query("SHOW TABLE STATUS LIKE 'votes'"));
echo $increment = $row['Auto_increment'];

Here's how it works. On the first line, we query the database and store the result in the variable $row. You could write this so that you store the query string in a variable and then pass that variable into the mysql_fetch_assoc() function, which is probably more usual. However, I was looking for the minimum amount of code possible for a project that I'm currently working on, so that's the way I wrote it.

On the second line, we store the the value of 'Auto_increment' in the variable $increment and echo it back to see the results. Depending on the database you connect to, you will obviously get different results.

Information about the SHOW TABLE STATUS syntax used and more can be found here at the online SQL 5.1 reference where 'Auto_increment is also listed.

Loading Fonts at Runtime

Tue Jan 5 09:53:51 2010

One of the painstaking things about creating swf files is embedding large font files which often end up bloating your flash movies and causing long wait times for your users. But what if I told you that there is a way to load fonts at runtime? Well, there is and it just so happens that I have prepared an example to guide you through it, allowing you the peace of mind that you can easily import the fonts you need when you need them and create subsets of them when every character in a font set is not necessary, and thus giving you a lot of power indeed.

Creating a SWF Contained Font

First off, you need to create a swf file containing the font that you wish to load into your movies. The big advantage to this is that you can have a library of preprepared swf files containing all your favourite fonts to load when and where you want. To understand how this is done, take a look at the following code.

package
{	
   import flash.display.Sprite;
   import flash.text.Font;
	
   public class FontEmbed extends Sprite{
      [Embed(systemFont='OCR A Std', fontName="OCR", 
      mimeType="application/x-font", unicodeRange="U+0041-U+005A")]

      public var ocr:Class;

      public function FontEmbed(){
         Font.registerFont(ocr);
      }
   }
}

On lines 7-8, we simply embed whatever font we want to be contained inside the swf file that is to be output on compilation of this class. In this example, I have chosen the font OCR A Std because it is a rather unusual font and will stand out against default fonts when testing to see if the font was actually embedded correctly. To embed your own font, simply change the systemFont string to the name of a font on your system if you don't have OCR A Std, which is highly likely if you are not on a Machintosh. The fontName can be any name you choose to remember this font by. This is important because we will be using this name to load in the font later. In my example, I have chosen the name "OCR" for simplicity. The mimeType is not something to worry about as it simply tells the Flex SDK what type of file to expect. Finally, the real power comes with the use of unicodeRange, which allows you to determine a range of characters you wish to embed. In this case, I have chosen the range U+0041-U+005A which is simply Unicode for A-Z.

There is a great little list of Unicode values to be found here at Wikipedia. Also, if you are running a mac, you could simply open a program such as TextEdit and go to Edit > Special Characters and roll over the characters to display their Unicode values. I'm sure Windows has something similar but don't quote me on that.

Continuing on, any font embedded must be datatyped to a Class, which is what the code on line 10 does. Finally, inside the constructor function on line 13, we register the font using Font.registerFont. Don't forget that to access any method of the Font class, you must import flash.text.Font (see line 4).

Once all that is done, simply compile the class to create the swf file containing your prefered font. As nothing has been added to the display list, nothing will be visible if you choose to view the swf file at this point.

Loading the Contained Font

Loading fonts is pretty simple. Take a look at the following code.

package
{	
   import flash.display.*;
   import flash.events.Event;
   import flash.text.TextField;
   import flash.text.TextFormat;
   import flash.text.TextFieldAutoSize;
   import flash.net.URLRequest;
	
   public class FontLoading extends MovieClip{
      private var ldr:Loader = new Loader();
      private var txt:TextField = new TextField();

      public function FontLoading()
      {
         ldr.contentLoaderInfo.addEventListener(Event.INIT, loaded)	
         ldr.load(new URLRequest("FontEmbed.swf"));
      }
		
      private function loaded(event:Event):void{
	 addChild(txt);
	 txt.autoSize = TextFieldAutoSize.LEFT;
	 txt.embedFonts = true;
	 txt.defaultTextFormat = new TextFormat("OCR", 22, 0x333333);
	 txt.text = "THIS FONT WAS LOADED AT RUNTIME";
      }

   }
}

On line 11 I have instantiated a Loader called "ldr", which will be used to load the font. The TextField on line 12 will only be used to display the results and is not necessary to load the font itself. On line 16, we add an EventListener to listen for the INIT event which basically means it will be waiting for the load to begin. Once it does, it will call the loaded function on line 20. The loaded function will add the TextField txt to the display list and auto-size it to fit the text on line 22. On line 23, we tell flash to use Embed fonts if it finds any (it should find our font) using txt.embedFonts = true. On line 24, we set the defaultTextFormat font on the TextField "txt" to "OCR". This is the name of the font we set when we compiled the swf containing our font, and this is how the Flex SDK will know which font we would like to use. On the same line, we set the font-size to 22 and the colour to a dark grey (0x333333). Finally on line 25, we give the TextField some text. All that is left is to compile the class and marvel at the wonder of loading fonts at runtime... a truly beautiful thing.

Download Runtime Font Files Here

Traverse Class - Useful Utility

Tue Dec 29 05:49:39 2009

How often have you had to make a photo gallery or something else that requires an index to be traversed? I know that I have come across this a lot and quite honestly I am tired I rewriting the same code over and over again. Thus, I've finally forced myself to write a class that will traverse an index and easily allow the assignment of objects that control the incrementation/decremental of said index... and I just thought I would share it with whoever is interested.

It's actually more of a helper/convenience class than anything. But I know I will personally be using it a lot in the future. The example below shows two arrows linked to an index displayed in a textfield. Click the arrows to see what I mean.

What It Does

Get Adobe Flash player

Code Example

import Traverser;
Traverser.init(MovieClip, "inc/dec", limit, callback);

How to Use This Class

Simply import the class as in the code example and then initiate the class using the Traverser.init() call. This class requires no instantiation. The first parameter labelled MovieClip should received the MovieClip that is to act as a button, like the two arrows in the swf example above.

The second parameter is a String where "inc" makes the MovieClip passed in the first parameter increment the index of the Traverser class, and as you would imagine, "dec" makes the MovieClip passed decrement the index.

The limit parameter determines the maximum limit the index will increment to before the index returns to zero. The limit of swf example is 5, and therefore the textfield will never display a number higher than 5.

Finally, the callback parameter will allow a call to a separate function once the index has been incremented or decremented. For those who are interested, in a way, the callback functionality is like a call to dispatchEvent(new Event()) calling a public static const, although all it really does is calls the function passed from inside the Traverser class. I thought this would work better than the alternative as I am using the Singleton approach and this is because I didn't feel the need to instantiate for as little as an index number, which is essentially what we are dealing with. Anyway, in the swf example above, I am using the callback function to update the TextField and give it a TextFormat. Without the callback to update the TextField, the TextField would not display any changes to the index.

Also, the index is contained inside a public variable and so can be access via Traverser.index to pull the current value. Again I didn't feel the need for getters and setters in this case, but if that's what you would prefer, feel free to update the code.

Download the files from the link below for a closer look at an example and for the code behind the arrow buttons.

Download the Traverse Class Here

Happy traversing!

Most recent posts

  1. Getting around Apple's silly rules for iOS 10
  2. Localising App Names for iOS and Android
  3. Today - Powerful To-Do App Now Available on iOS & Android
  4. New app 'Gem Plinko' Released on iOS
  5. Spooktacular Creeps For iOS & Android

Search site:

Apps by Ubacoda.com

Click the app icons to see more info


Archives

Categories