Archive for the ‘Web Dev’ Category
- Posted by Mon
- March 2nd, 2010
I love Zimplit’s simple idea, and relatively easy to setup (depending on server’s configurations). But of course it comes with a head-scratcher. Here are what I learned:
1. Localhost Timeout Error
As many sane developer would do, you want to test almost everything on a Local server if you’re using Xampp Lite. I have been experiencing timeout error. Maybe it’s due to the firewall at work, but I am going to investigate more using a full verison of the Xampp server
2. “public_html” vs “www” Folders
This may sounds crazy, but I think it might have something to do with the configurations of the server. I tried uploading to my own server, everything works fine. But I couldn’t get it working on my client’s server, it couldn’t CHMOD properly. Crazy enough, I deleted everything and re-uploaded everything to the public_html folder, CHMOD the proper files, then it worked… I know both folders are basically the same thing, but why it happened the way it did, CRAZY! I tell you. So I’m going to try to reproduce this “bug” if it is even a bug or just me…
3. jQuery + zimplit = Site Explosion!
Unfortunately, today I found out zimplit will blow up your some parts of your layout if you have some sorts of scripting going on in the background, such as slideshow, hidden divs. As soon as you insert an editable area, it automatically inserts its own div and classes inside ALL OF YOUR DIVs! Drove me insane for over an hour why my simple page stopped working with a simple slideshow. I mean it’s not the end of the world, you just have to rework your CSS to fit it in. But it would be nice IF SOMEONE TOLD ME BEFOREHAND!!
Overall, zimplit is still an awesome idea, but it’s quite intrusive. It works well if you have a very simple website or planned ahead to use it at the beginning. If you decide to implement afterward, it is much more difficult because you’ll probably have to rework lots of CSS. But I think I will try my hands on it again next time when I build a site from scratch. Just my 2 cents.
- Posted by Mon
- February 19th, 2010

I finally launched the never-ending homepage redesign project yesterday for my company, so far so good, not everything I want, but at least got what my bosses want. I didn’t like the way how it was put together, but I had fun scripting with jQuery once again. This time, he wants to do “wipe up” sort of effects and he resisted that me HTML-ing the hidden contents because he wants it “the way it is” for the contents. *dies* So I’m stuck with image maps… the loading time on the page is “glorious” to say the least… hey… I do what I asked of me. He didn’t want to hear loading time, the web standards, best practices, and stuff like that. Although, I added the helpful image preloader plugin to speed things up just a bit, better than nothing. Over the course of the project, I’ve learned some little interesting things…
Interesting things I’ve learned…
- If you add “padding” around an image that has “hotspots” over it; IE (no matter what version) WILL offset the coordinates by the padding – the “hotspots” will be off by the amount of padding you put around the image. But in Firefox, the image map hotspots behave the way it should be. So if you need to adjust the spacing of the images when using image maps, use “margins”, don’t use “padding”. Took me a short while to figure this out…
- Relative + absolute positions will snap pictures in any corner you want. In my case, I wanted the image to be lower left corner to achieve the “wiping” effect – otherwise, it’ll just “slide” the image out if you don’t absolute position it.
<div style="position:relative">
<div style="position: absolute; bottom: 0; left: 0;">Image here</div>
</div>
- Too many image map hotspots is like Freddie Cougar’s face… ugly as hell and a freaking nightmare
- jQuery $.each() saved pounds of my hair once again
- Do not add negative padding inside a jQuery.animate() – it will crash like a 100 cars pile-up on a highway…
- Don’t try to explain to my boss why adding more image hotspots inside an image map is such a bad idea – he looks at me funny and starts getting pissy
Besides all the pain and suffering for a month, the most fun I got out of this project was scripting the animations and solving the “image map within an image map” problem. Here’s the run-down of the project:
- There will be main menu at the bottom of the screen, when the user hovers over each of time, the corresponding content (the image) will “wipe up” – I am calling this Tier 1 menu
- Now “wiping” and “sliding” are two different animals, and my mini-boss specifically wants “wiping”, not “sliding”. So I had quite a bit of fun trying to make the image contents “wipe” up
- Solution: create a “wrapper” div that wraps all the hidden “content images” – default the “wrapper” to 0px, then use jQuery to animate the height of the “Wrapper” to the full height when hover over. So I basically created a “mask” to do this hide the images. Attach the corresponding image, show, then “wipe” up
- Each of those image will have image map hotspots (no problem here)
- Within Tier 1 menu’s contents, one of the contents has multiple links within it and has a Tier 2 menu – better yet, the Tier 2 menu has four sub-contents WITH DIFFERENT unique image maps…
The Problem
The problem? If you use the same map for all the images, they will have other hotspots showing up in images that you don’t want. Let’s say Image A is using #map1, Image B needs to have the same menu but has different hotspot links. When Image B uses #map1 again, well, all the hotspots intended for Image A will also shows up. Of course, the obvious solution is to have multiple maps. The problem is the Tier 2 Menu shows/hides its contents. So if you have multiple maps, the Tier 2 Menu won’t able to hide and show content accordingly unless you want to code each of the Tier 2 menu with its own little script. Repetitive, inefficient, and probably won’t work.
The Solution(s)
After losing a couple hundreds of my hair, the solution? Create separate image maps for each of the unique hotspots map. So Image A gets its own map, Image B etc… use jQuery to clone the map according to the active menu and attach to the the “main map” (#map1), add a temporary class, and then remove them when the user hovers over a different menu item. Meaning: #map1 is the Tier 2 main menu and is defaulted to Image A. #map1 has the Tier 2 main menu, and the rest has its own unique hotspots maps without the Tier 2 Menu. Let’s say Image C has unique hotspot links, so when the user hovers over Image C. jQuery will tell this Image C to append #map3 hotspots (<area>) to #map1. When the user hovers to a different one, it removes all the previously attached “hotspots” – I identified them by adding a dummy class in each of the attached <area> map, then append another set if needed. Painful, but not bad for a workaround I think.
I find front-end development is like solving puzzles, and I love solving puzzles especially when it involves jQuery. Well, that’s it folks.
- Posted by Mon
- October 29th, 2009
I finally gathered my braincells and launched my new portfolio: Designloper.com today:

I was trying to “brand” myself in a way, what’s better than a made-up word that describes perfectly of what I do, right? I love the lime green colors, but I thought it was getting too boring with the light gray and white.

So I spiced things up this time with dark brown and hot pink. I was loving the fun colors as I was designing, it looked almost “hippy” which fits my personalities – I never did drugs in my life, but I seem so… (more…)
- Posted by Mon
- October 21st, 2009
Version in this article: jQuery 1.3.2 / CSV2Table 0.03-b-2.9
Lately I started to like CSV (Common Separated Values) more and more comparing to XML.XML is a pain to setup even as entering data, then grabbing the data requires Einstein’s brain plus 3 sleepless and hair-pulling days of coding… okay, I maybe exaggerated a bit, but that’s how I feel about XML. My first encounter with CSV was InDesign, in there, you can import a bunch of data and generates PDF like Word’s Mail Merge feature. Then one day, someone asked me if I can find a better and easier way to help the non web people to maintain a site. I started out with search terms like “jQuery read text files” or something like that, one of the results returned as using CSV and there is a plugin called CSV2Table in the jQuery Plugins website by Toshiro Takahashi written earlier this year. Testing… (more…)
- Posted by Mon
- September 26th, 2009
This is going to be a short post. Magic Tags are very awesome, but on the Pods CMS documentation failed to mention something very simple yet useful. Before anything, here’s a quick run down of what Magic Tags are…
(more…)
- Posted by Mon
- September 25th, 2009
Software note: Pods CMS Version 1.7.3 / WP 2.8.4
Documentation: http://pods.uproot.us/codex/helpers
What are Input Helpers
An Input Helper lets you completely customize the appearance of any input field… when adding new data contents.
In plain n00b English: as an example, the default field “name” I had it to store last names, and a separate column to store first names (fname). The problem of that would be when you’re using Bi-directional relationship PICK column to another Pod (let’s call this: Person) is you can only relate one of the columns, not both First Name and Last Name. So if you use the PICK column the “name”; which stores the Last Names, and with the last name like Johnson – you probably can’t tell which Johnson that is. Input Helpers can grab and display the full names for you when you’re adding data. (more…)
- Posted by Mon
- September 24th, 2009
I’ve been very silent on Facebook, Twitter, and this blog lately. That because I can’t constantly access Twitter anymore from work, they blocked me… so no more useful stuff to tweet and brag about excepted one thing: Pods CMS. Pods CMS is a Wordpress plugin that pretty much turn your blog into a CMS. You can build a Wiki, Glossary, Recipes, Hotel listing etc… the possibilities are endless. Although, you will need to know at least some PHP to make this thing tuned to the way you want it to be. I have been playing with it in the past 2 weeks, I have to say I am very impress of how this plugin works. So I did a test on one of my hobbies: Kendo. I’ve always wanted to collect data on Kendo Dojo, how many practitioners, and Kendo tournament results in the U.S. I was able to create this very complex database that it can be listed by Federations, State, Country, Dojo, and down to the individual Kendo-ist data. The awesome thing is? Each listing can be linked to one another. For example, if you viewing by Federations, you can list all the Dojo in that federation, and with links to each Dojo AND the state. You can add BUILT-IN filters and search on top! The backend is all done for you, all you have to do is to make things pretty. Ain’t that grant?
(more…)
- Posted by Mon
- August 14th, 2009
Quickie note, a very simple script to pick a random number between 1–5, instead of 0–4
var rand = Math.floor(Math.random()*5);
if(rand > 0){
rand = rand+1;
alert(rand);
} else {
rand = 1;
alert(rand);
}
- Posted by Mon
- August 12th, 2009
…and controls to pause and play the time line.

I’ve been using this script quite a bit, and I think it’s time to jog it down somewhere. A few things to keep in mind when using this script: (more…)
- Posted by Mon
- August 5th, 2009
Keeping a journal is a great tool to learn and continuous improvements. So, I need to start jogging down my thought process when doing things and hopefully improve more in the future.
Before I came up with this theme, I was messing with one of the Woo Themes called Irresistible. In a matter of fact, I was so zoned into modifying that theme, that I was completely stuck. My boyfriend also told me that isn’t “me” that the theme was too dark and grungy. He said I need something “happy”. Got a few ideas of “happy grunge” and things like that, but just couldn’t incorporated the idea. After a while, I just decided to scrap the entire thing and started off somewhere else.
I started to work on the logo first, and I had a good idea what I want. I really like the + signs embedded inside the logo that because that translate my idea of “learning” – also inspired by video games such as The Sims. When a Sim learns something new, it gets a ++ sign over their heads as in gaining level. After working on the logo for a while and picked two colors I really like, Orange and Dark Gray – I took a break:

Then I randomly grabbed a photo book lying around on my desk – which was by Getty Images – titled Infinity. Flipped a few pages, and there I had it:

Then I drew the layout on a piece of paper, along with the logo I already had to glue the ideas together. I’ve always been a sucker for simple designs, and flat colors. So it is ended up as what it is right now. A few people suggested, actually 5 of 3 people suggested that it is better centered. Up till yesterday, the layout was still left aligned. So there, I’ve taken other people’s advice and made it centered. I am still fixing minor things here and there, but the site looks 90% the same across most major browsers – especially IE6. There are a few plugins seem to be broken, because it is screaming when you open the site in IE – need to sort that out. Eventually, I’ll have to fix up Sociable because it has a lot of invalid HTML/CSS, even though my theme is validated.
One last note, if you are using WP-Spamfree’s contact form, the Submit button alignment will probably drove a lot of you crazy. That because the author add a <label> before each <input> field excepted the Submit button. If you dig inside the plugin and find the “contact form” and insert <label></label> before the submit button, you will able to adjust the alignment a lot easier.