Programming
Exploring programming possibilities.
Syntax highlighting by Prettify.
Testing to see if I can have many levels of inter-list sorting with the jQuery UI. I can!

Just testing to see if jQuery can animate font size. It can!

The actual animation only requires the .animate({fontSize: "(size)px"},duration); line, but I added more code like callbacks so the button can work more than once.
Added the pre-Oct 1582 restriction on the reusable calendar. (Working version, Update 4 version)

Essentially, the addition from Update 3 is the function checkRestraint(), where it checks the date being dragged or clicked on to see if it should be set to Oct 1582 or let it be.
I also used the checkRestraint() function to make the cursor look normal when the mouse is over a date that should not be available, even though they can click on it, but it would just move to Oct 1582.
Check it out and let me know if it the functions don’t work properly or intuitively.
Read the rest of this entry »
I isolated the dragging portion of update 3 of the reusable calendar project to show what options under the draggable jQuery UI to use.

In the draggable() function, I used the grid: [0, 15] to restrict its movement to 15 px vertical, then I used containment: [0, y1, 0, y2], where y1 is the offsetTop value of the strip itself when it’s at the last month/digit, and y2 is at the first month/digit, to restrict its range so the strip won’t go past the first and last value.
Adding more functionalities to the date display to the reusable calendar. Now you can click on the months or year digits, or you can drag the strips to change the date. (Before, you can only click on the arrows move forward or backward one month at a time.)

This dragging function was made easily possible by the jQuery UI. It takes a lot of the grunt work out of the process.
The current range is Jan 1000 to Dec 9999. But technically, the calendar doesn’t apply before October 15, 1582, since that’s when the Gregorian calendar was first adopted. So I will add that restriction in the next or upcoming updates.
A work-in-progress update of the reusable calendar project I introduced last time where the frame that goes around the dates of the month moves instead having a different layout for each month.
In this update, the basic functions are added to the arrows. When the arrows are clicked, the script updates the new month and year in the background and updates the date display and calendar frame and cross-outs strips with jQuery animation.
Currently, the calendar can only move by pressing the arrows, month by month. The next stage will involve the ability to click on the month and year digits to jump to a different month, year, decade, century, or millennium.
I didn’t think the project would work so smoothly so far. I guess a lot of planning and thinking ahead pays off. But the next stage might be a bit tricky, since there will probably be a lot more things to manage with the individual month and year digits being clickable.
You may see the ongoing version that changes and is added upon as time goes on.
I mentioned in my latest monthly update on Flush that I am working on a special calendar that I will hopefully display on the home page of the website when it’s all done. Here is a screenshot of the basic set up I have so far:

It might look a bit complicated, but the concept is delightfully simple (to me at least). I will probably explain more in detail later on, but basically, the idea is that with the set up on the left, you can generate any layout of the month we see in practically all calendars in the world.
Moving into the jQuery UI section and testing the dragging and dropping functions.

Notice in the demo that the box on the right is set to float:right, so if you supposedly dropped the green box into it, and change your window width, the green (turned light grey) box stays at the same place while the right box moves to the left. Got to fix that experience in future, more complex versions.
A continuation of the previous slideshow demo but with controls to play, stop, advances, and select slides.

The images in this demo stack one on top of another from 1 to 9, which is why the top image starts with 9 and plays down to 8, 7, 6, etc.
Using jQuery to rotate image order in a slidehow instead of using Flash.
This is a work in progress where in future versions, the slideshow will include controls.
Use PHP to retrieve image files from a directory and display them without knowing what the image file names are. This builds on the getimagesize() function I demo’d before.
I’m doing this so I can place images in a directory from which I can pull out to display in a slideshow on the home page and maybe the Archives section.
The demo here is only for a more procedural method to do it; for practicality’s sake, I would merge the two steps into one and probably put all of it into a function so I can retrieve an array of image file names just by providing the directory I want the server to look in.
If the web page is not in the same directory of the images, the opendir(), filetype(), and getimagesize() functions take the address of the directory in the parameter with $_SERVER['DOCUMENT_ROOT'] and then the directory from your domain, and not the uri’s (which start with “http://”).
Collecting and defining information about the user’s browser and operating system to streamline design and the code for the rest of the page.
Building the many section of this website, I found myself retrieving the same browser information to determine how the rest of the layout would be like. Importing this site header script allows me to organize and bring consistency to the variables I use for all the sections of the website.
I wanted to include determining whether the user is viewing the page with a mobile device, but the methods I’ve found out there involved comparing against a list of mobile device brand names, and I didn’t want to do that, for the brand names don’t necessarily mean it’s a mobile device. Also, for now, I wanted to find out if it’s a mobile device only for the sake of styling, and I could already do that with the <link> tag and @media rule.
Testing the box, sphere, and camera features in Processing. In the camera demo, I tried to create a box with six squares, but they don’t seem to fix nicely together nor perfectly aligned to the sphere with the same center.



Using Processing to go beyond the Word It medium to learn many functions of the programming language.
This month’s theme is Fly, so I decided to go semi-obvious and spell the word by filling the negative space using images of flies. It sort of reminds me of the Orkin poster where it collects pests with adhesive printed in the Orkin logo pattern on the poster.
Here is my entry on Word It.

Learning how to write a class in Processing while having fun with time-based and mouse-based movements.
Basic movements determined by time.

Tracking the movements, still based on time.

Tracking the movement, based on time and mouse position.

These examples don’t really do much, except create interesting forms. And it’s different every time since they’re based on the current time and mouse position. At least I learned about classes in Processing.

No programming in this post, but it’s the product of it.
A while ago, I saw a post on my friend Law’s blog where he played with this “augmented reality” toy using a visual marker. I thought it was cool but didn’t think much of it because I was a bit more busy at the time to look into it. Well, now that I’m beginning to be more interested in ActionScript and other programming languages again, I thought I’d give it a second look.
Using Processing to automatically generate the forms of connections of regular polygons instead of manually drawing them as I had two weeks ago.
Here are three screenshots of the animations at different point-number (8, 50, 200, respectively) definitions. Each of these “animations” runs with the same number of starting points and animates by upping the number of points it skips before drawing a line.



Testing adding a custom image as the “web app” icon. This is the image to be used for the icon:
![]()
Basically, bringing in the power of jQuery selection without using jQuery. Only works in Safari for now.

Testing Safari/Webkit’s CSS Transitions, where you can create smooth object animation and effects without Flash or jQuery, and very minimal JavaScript, if any. You need Safari 3.1+ to see at least some of these effects. In some cases, the effects only works on the iPhone.

Testing how the console.profile() method works. Even though I’ve had Firebug for months, I learned how to use it from watching tutorials of Safari’s Web Inspector tool.
To see how it works. You’ll need to have a developer tool that has a console profile function. Firefox has a Firebug add-in. Safari has one build-in.

Testing the simplified method of putting video and audio on web pages. The <video> and <audio> tags are supported in HTML5. If your browser does not support HTML5, then you can’t see the videos. In which case, you’ll have to include a fallback code.

Testing iPhone’s touch events (ontouchstart ontouchend ontouchmove and ontouchcancel). You can’t really see it in action unless you have a touch device, like the iPhone.
I used this function technique for both the main navigation and experiments navigation for this site to determine which item is being hovered so I can tell where the navigation strip to move to. I’m still learning jQuery so the exact syntax to determine the index of an item from a list or of any group is bit tricky.

Just integrated the Prettified script to the programming section. Instead of me fading only the comment lines in the code, Prettified color-codes everything for me!
Before

Test out an iPhone-only stylesheet. The iPhone is special in that it doesn’t take “handheld” stylesheets, so it must be customed. A PHP script is perfect to adjust the display of the stylesheet on the server’s side so no JavaScript is involved.
Experiments with the special onorientationchange event. Also works with window.orientation property.
The next step of PHP self-teaching after PHP Basics. Learned to use Ajax by using PHP to receive information of an XML file, catalog.xml, and to instruct the display of data onto the original file.
Also added a cookie component so the visitors would not lose their place. Note: the cookie in this experiment expires very quickly so that the experiment can start over without manual deletion of the cookies from the browser.
An exercise to figure out how to change the address of a page without refreshing it. It’s supposed to look like a query address, but ultimately, the use of hash mark (#) did the trick.
This experiment was created for the portfolio page, whereby the page updates its navigation and content without refreshing.
Learning the PHP function getimagesize(). Not only does this function get the size of an image, it gets the info of the file and of Flash files.
I used this function to set the layout of the images and Flash files on my portfolio site.
This script allows me to automatically alternate two different background colors to a series of the same tag, like the <li> list item tag.
I made the script where I have control over the two colors separate from within the script so I can apply the same script to different items with different colors.
I made this while working on the design for Flush, my design blog [at Blogger], trying to alternate the background color of numerous lists on the sidebar.
The background color of this page changes based on the time of day. At midnight, this page is pure blue. At 8am, it is pure red. At noon, yellow. At 4pm, green. You may come back at a different time of day to see the change, or you can temporary change the clock on your computer right now and reload the page.
There is a slightly different hue every four minutes, resulting in 360 hues found in common image editing programs like Photoshop and Illustrator.
The JavaScript that runs this also takes brightness and saturation into account, just like the HSB panel in Photoshop and Illustrator. A relatively simple formula from a less simple understanding of the workings of HSB allows the programmer to change the saturation and brightness level.
An exercise in collapsing and expanding a “menu” when the title is clicked. Made for Flash Experiments portal.
The entire thing is accessible in that if JavaScript is turned off, the menu or list is still displayed. It just might push down everything else if the list is too long.
An experiment with showing videos and controlling them via JavaScript. Learned that Vimeo (as of the time this experiment was created) does not allow JavaScript control, whereas YouTube does.
This experiment was created to test JavaScript capabilities regarding building a video-based site for a client.
An exercise in learning the basics of JavaScript cookies. Cookies seemed like a subspecies in the JavaScript language, and I had avoided it for a long time mainly for two reasons: 1) It’s another syntax to learn, and 2) I don’t like that it stores personal information and I don’t want to use it for my website if it’s not absolutely necessary.
This experiment was carried out to figure out how to configure a function in the portfolio page.
ivanwlam.com | Powered by WordPress
All content on this site, including text, logos, images, photos, graphics, and layout, copyright 2007–09 by Ivan W. Lam unless otherwise noted. Please cite any original material from this site back here.