My site could not be opened in Google Chrome

Tonight I could not open my site caiapps.com in Google Chrome. Homepage looked like had shown up, but it’s actually from cache. The message on the left-bottom status bar told me that Chrome was trying very hard to load caiapps.com’s home page. Eventually, it timed out, "Oops Google Chrome could not connect to caiapps.com !" I tried reload the page, but the same thing happened. At the same time, I tried to open my site in IE and Firefox, they all loaded my site in a second. So apparently it is Chrome’s problem.

Finally, I fixed the problem by cleaning browser’s cache. The following is step by step to clean cache in Google Chrome,

1. Click wrench icon on the top-right of Chrome and select "Option".

chrome2

2. Under the Hood / Privacy, click "Clear browsing data …"

3. Check "Empty the cache" ( you may uncheck other items if you don’t want to clear them) and select data period, I selected "Last day" because my site worked fine yesterday in Google Chrome, and then click "Clear browsing data".

chrome

Free upgrade iPod touch

If you want to install new applications on your iPod touch these days, you need to upgrade the software to V3 and above. You can still use some applications that you installed before, but newer version of those applications may require V3 and above.

Here are step by step to upgrade your iPod touch software (firmware),

  1. Determine your iPod touch generation. You can check your iPod touch’s generation by looking at the back of the device. Look for the model number, the 1st generation is model A1213, and the 2nd generation is model A1288, and 3rd generation is model A1318. By the time I am wring this article, the 4th generation has been released (on 09/08/2010). I am not sure the model number of 4th. If the text on the back of the device is hard to read due to scratch, then you can also identify the generation by checking the appearance and functions of your iPod touch.
    1. no volume control = 1G (1st Generation, click the link to see image)
    2. has volume control but no voice control = 2G
    3. has volume/voice control, but no front-facing camera = 3G
    4. has front-facing camera, and there is not 5G = 4G :-)
  2. After you determine your iPod touch generation, you can go to this website to download the newest firmware. Note that if your iPod touch is 1G, then you can only upgrade the firmware up to 3.1.3, by the time I am writing this, the newest version is 4.1.
  3. After you download the suitable version of firmware (for example, the iPod 1G, the firmware v3.1.3’s fire name is something like,  iPod1,1_3.1.3_7E18_Restore.ipsw), you can upgrade your iPod touch thru iTunes. Don’t tell me you don’t know what iTunes is. :-) Below is step by step,
    1. Connect your iPod touch to computer
    2. The iTunes is usually auto start and detect your iPod touch, if not, start iTunes manually, and select iPod touch from devices list.
    3. Wait until Sync progress finished, which may take a few minutes. In Windows OS, press and hold Shift key and left click Restore. In Mac OS X, press and hold Option key and left click Restore.
    4. Locate iPod Touch ipsw file downloaded.
    5. The update process will start. Do not disconnect iPod Touch until iTunes has completed updating iPod Touch.

Enjoy your up to date iPod touch Firmware, which allow you to install some great applications.

Facebox no display problem in Chrome

In my previous post, I provide a solution to allow all anchor tags being loaded in a Facebox, which I call it "Stick on Facebox". And I just found there is a bug either on Facebox or Chrome causes the hidden element’s content could be displayed in the Facebox.

See the code in the following,

<style>
.hidden { display:none;}
</style>

<div class="hidden" id="hide1">
I am a hidden div
</div>

<a href="hide1" rel="facebox">View Hidden Content</a>

Note that for the hidden div, instead of using inline css, <div style="display:none;">, I define a class named hidden with the same style. When click "View Hidden Content" link, we expect the content of hide1 will be displayed in the facebox. (of course, we need to attached facebox function to anchor where rel="facebox"). It works fine in IE6+ and Firefox, however, in the Chrome, it displays nothing. Looks like Chrome think the div (#hide1) should be hidden because it has class defined as display as none. However, if we define div (#hide1) using inline css, it would fix the problem.

<div style="display:none"; id="hide1">
I am a hidden div
</div>

Is it odd? Anyway, if you have multiple hidden divs, like the example in the Stick on Facebox, you can still use class hidden, but code will be like this,

<div class="hidden"><!--use this hidden wrap-->
<div id="hide01">I am hidden div #1!<br /><a href="#hide02" class="infinite-find">Click here</a> to find hidden div #2</div>
<div id="hide02">I am hidden div #2!<br /><a href="#hide03" class="infinite-find">Click here</a> to find hidden div #3</div>
<!--more ...-->
</div>

Stick on Facebox

I wrote a short tutorial to explain “how to click a link inside Facebox and load it on the same Facebox” a few days ago. Today I will extend this solution more, eventually, you will see the anchor tags are bound continually, so they can stick on Facebox.

Updates

  • 09/01/2010 – fixed no display problem on Chrome. Note script has been updated in Download folder, but not in this article.
  • 11/18/2010 – Updated function to support external page, which answers Aaron Layton‘s question in the comment.
  • 01/11/2011 – Added new function to display select box (dropdown menu) on facebox

Initial Version

First let’s see the method shown at Facebox official Guide, which attachs Facebox function on any anchor tag after document ready.

<a href="#info" rel="facebox">first link<a>
<!--div 1-->
<div id="info">
Some info here and also some link<br />
<a href="#another-info" rel="facebox">another link</a>
</div>
<!--div 2-->
<div id="another-info">
another info here
</div>

<script type="text/javascript">
jQuery(document).ready(function($) {
  //attached facebox onLoad on all anchors with rel=facebox
  $('a[rel*=facebox]').facebox()
})
</script>

Ok. when you click the “first link”, because it was attached facebox function, it’s open the “info” div in the facebox. And there is another link in the “info” div, which was also attached facebox function, so you expect to view the content of “another-info” div in the facebox, too. However, it does not work, because the content of “info” div is dynamically generated to be viewed in the facebox, and the facebox function attached to anchor tag inside “info” div does not persist. One solution as I explained in the previous post is attaching the facebox function “on fly.”  See the following,

<p><a href="#hide1" id="start">Start to find some</a> hidden divs</p>
<div class="hidden" id="hide1">

I am hidden div #1!<br />

<a href="#hide2" class="find all">Click here</a> to find hidden div #2

</div>
<div class="hidden" id="hide2">

I am hidden div #2.<br> No more hidden div :-(

</div>
<script type="text/javascript">
jQuery(document).ready(function($){
        $("#start").click(function(){
                jQuery.facebox({div:'#hide1'});
                $('.find').click(function(){
                        var glink = $(this).attr('href');
                        jQuery.facebox({div: glink});
                        return false;
                });
        });

})
</script>

In the example above, you see that we don’t attach facebox function onLoad, but control it programmatically. We use jQuery.facebox({div:’#hide1′} to pass the div content into the facebox, and at the same time, we attach the same event handler to the anchor tag, so then when you click the link on the facebox, which can be loaded on the same facebox. But this is not a elegant solution. Says there is another link in the secondary facebox (i.e., div “hide2” in this case), then it will not be open in the facebox, because you know, the event handlers could not persist in the way we bind it.

So the much better solution will be using recursive binding technique. Here is what the code looks like,

<p><a href="#hide01" class="infinite-find">Start infinite finding</a> and have fun!</p>

<div class="hidden" id="hide01">
I am hidden div #1!<br />
<a href="#hide02" class="infinite-find">Click here</a> to find hidden div #2
</div>
<div class="hidden" id="hide02">
I am hidden div #2!<br />
<a href="#hide03" class="infinite-find">Click here</a> to find hidden div #3
</div>
<div class="hidden" id="hide03">
I am hidden div #3!<br />
<a href="#hide04" class="infinite-find">Click here</a> to find hidden div #4
</div>
<div class="hidden" id="hide04">
I am hidden div #4!<br />
<a href="#hide05" class="infinite-find">Click here</a> to find hidden div #5
</div>
<div class="hidden" id="hide05">
I am hidden div #5 (last one).<br /><a href="#hide02" class="infinite-find">Start Over :-)</a>
</div>

<script type="text/javascript">
function find_hidden(){
        $('.infinite-find')
        .unbind('click')
        .bind('click', function() {
                var glink = $(this).attr('href');
                jQuery.facebox({div: glink});
                find_hidden();
        });
}

jQuery(document).ready(function($){
//infinite find - really stick in facebox
        find_hidden();

})
</script>

As you see, I created a recursive function find_hidden() to unbind and rebind event recursively, so facebox function is attached continually, which I called “Stick on facebox”.

Display External Page

Updated on 11/18/2010
As you see in the previous version above, I used the following code to display the content of hidden div on the facebox,

jQuery.facebox({div: glink});

In order to display an external page, we can use ajax method, so just need to slightly update the code to support both as the following,

function find_hidden(){
   $('.infinite-find')
   .unbind('click')
   .bind('click', function() {
      var glink = $(this).attr('href');
//if glink match #, then we say it's div, otherwise, it's an external page.
//of course, you may make this smarter as you need.
      if(glink.match(/^#/)){
                jQuery.facebox({div: glink});
      }else{
         jQuery.facebox({ajax: glink});
      }
      find_hidden();
      return false;
   });
}

And then in the HTML, you can do this,

<p><a href="external1.html" class="infinite-find">
Start infinite finding on EXTERNAL PAGE</a> and have fun!</p>

And the external page will be something like this,

<h3>Exteranl Page 01</h3>
<div>I am EXTERNAL page #1!<br />
<a href="external2.html" class="infinite-find">Click here</a> to find EXTERNAL page #2
<div>
<script type="text/javascript">
   //infinite find - really stick in facebox
   find_hidden();
</script>

Note that you have to call find_hidden function again in the external page, because the one called in the start up page does not bind the click function to the links on the external page.

Display Select Box

Updated on 01/11/2011
As a request from one of my reader, I added this function to display select box (I also call it dropdown menu) on facebox, and the select result will be display on the facebox without leaving facebox. Basically, it uses another ajax call inside the facebox. Nothing complicated. :-) Just need to add the following code in a external page.

<h3>Quotes of the Day</h3>
<div>
Select a quote:
    <select id="link">
       <option value="drop1.html">Quote1</option>
       <option value="drop2.html">Quote2</option>
       <option value="drop3.html">Quote3</option>
    </select>
<div>
<div id="innerajax" style="border:1px solid #2297CA; padding:5px; margin-top:10px;">
You can't build a reputation on what you are going to do.<br />
<b>- Henry Ford</b>
</div>

<script type="text/javascript">
   $('#link').change(function(){
      var innerlink = $("#link option:selected").val()
      $("#innerajax").load(innerlink);
   });
</script>

Check out the updated Demo. And feel free to leave comments if you have any questions.

Magento Design Dummy Questions

1. Everyone says you can turn on Template Path Hints at “System-> Configuration->Advanced-> Developer”, but why I could not see that option?

Because you did not select “Current Configuration Scope”, which is located at left-top of your admin panel. I know you have only store at this point, however Magento would not pick a current scope for you. You have to select “Default Store View”, and then you will see “Template Path Hints” shows up at Debug section under Developer.

1. Everyone says you can turn on Template Path Hints at “System-> Configuration->Advanced-> Developer”, but why I could not see that option?

Because you did not select “Current Configuration Scope”, which is located at left-top of your admin panel. I know you have only store at this point, however Magento would not pick a current scope for you. You have to select “Default Store View”, and then you will see “Template Path Hints” shows up at Debug section under Developer.

2. How to prevent my changes to Templates/Layout/Skin, etc from being overridden during the future Magento upgrading?

The solution is do not edit those default files, instead create your own design. Note that there are two main folders controlling what your store looks like. One is under app/design/frontend/ (template and layout) and the other one is under skin/frontend (containing css and images). Don’t worry, you don’t have to create all of those file from scratch. You actually only need to copy the files which you want to update and edit from there, but you do need to keep the path exactly same. For example, the default right_col.phtml is under fontend/base/default/template/callouts, and you want to edit it, then you have to create a path like fontend/default/yourtpl/template/callouts (note that the bold portion must be the same.), and then you can copy right_col.phtml to new created callouts folder, and do whatever change you like to make.

3. I already did whatever you said in the Question 2, why I still see the default theme?

Sorry, but you have to enable your theme at the admin panel. Go to “System->Configuration->Design”, on the right panel (Note: if you see all fields are grey out, then you have to select “Default Config” from the left-top Current Configuration Scope, which is an opposite of what you mentioned in Quesion 1) select your Package (most likely, it is default and you don’t need to change it. ) And in the Themes section, you can change Translations, Tempaltes, Skin, and Layout to the name of your new create design separately, or you can just set default to your new design. How this works? Basically, what you defined here has higher priority, so when Magento renders the page, it checks what you define first, if find it, it will ignore the lower one, if not, it will check the lower one until it find it.

4. How to remove default ADs, like “Did you know?”,  “Back to school”, “Now accept Paypal”, etc. from left and right column?

You should be able to do this if you read Question 1 to 3. If not, let me repeat it. In short, you can go to app/design/frontend/base/default/templates/callouts/, then you will see two files, left_col.phtml and right_col.phtml, open them in your desire editor and comment the whole files and saved. But I suggest you to create your own theme as I described in the Question 2 to prevent the changes from being overridden in the future upgrading.

5. How to add categories and products.

  • Go to “Catalog->Manage Categories”, on the left panel, click “Add Subcategory”, and add some categories under Default Category, which is Root Category.
  • Go to “Catalog->Manage Products”, on the right-top, click “Add Product”, and following the instructions to add products. (Note that by default the product you add is “Out of Stock”, so got to Inventory and add Qty and set Stock Availability to “In Stock”)

6. I have added some products, why my home page is still empty?

Because you have not added any content to your home page yet. Go to “CMS->Page”, and click on “Home page”, then on the left panel, you select “Content”, and then add something. You can add static content, like one image or a few words to introduce your business.  You can also add some dynamic module, for example, you can add block to show random products on the home page, you can use the following code.

{{block type="catalog/product_list_random" name="product_random" template="catalog/product/list.phtml"}}

7. How to disable Magento Modules?

Magento provides a lot of modules to make your job easier, but you may not need them, like newsletter, wishlist, poll, etc. If you want to disable them, then you can go to “System->Configuration->Advanced->Advanced. Again, if you see all fields are grey out, then you have to select “Default Config” from the left-top Current Configuration Scope. And then you will see the list of mage_modules. By default, they are all enable, go ahead to disable some you don’t need and save.

8. Why Magento is so complicated?

Because Magento is so powerful. Powerful and Complicated are twins.

You may hope there is lite version of Magento, unfortunately, there is not. But I think Magento is worth to spend some time to dig into, for it is a powerful E-commerce open source cart.

Open Link Within Facebox

Facebox is a great jQuery plugin, which I have used in many projects. The official Facebox guide is a good start, but it may not cover all you need.  Also, some functions are missing in original Facebox plugin, which you may need in your real work. So I would like to share you some Facebox tips.

OK. The first tip is how to “Open Link Within Facebox and load in the same Facebox”?

Let’s start with a hidden div. If you already read the official Facebox guide, you probably know that the plugin allows you to open a hidden div on a pretty Facebox. For example,

<div id="secret" style="display:none;">
I am a hidden div, you cannot see me until you click "dig" link.
<a class="see" href="#your-new-link">guesswhat?</a>
</div>
<a href="#secret" id="fb-pop">dig</a>

You see there is a link in the hidden div.  By default, when you click that link, it will open in a new window. If you want to load it in the same Facebox. Here is a solution,

$(document).ready(function(){
   $('#fb-pop').click(function(){
      var divid = $(this).attr('href');
      jQuery.facebox({div: divid});
      $('.see').click(function(){
      var glink = $(this).attr('href');
      jQuery.facebox({image: glink});
      return false;
      });
   });
});

Check out Demo right here: dig

Note:

  1. The main point is that you need to bind click event to the <a> link with Facebox on fly.
  2. The <a> link with Facebox, can be another hidden div in the page, or ajax, or image, etc.
  3. The <a> link in hidden div must use ‘class’, not ‘id’ (Not sure why), in this example, I use <a class="see">.

Blog to Facebook & Twitter

Everything is difficult at the beginning. Too much is going on in this site/blog. I plan to update blog’s theme, promote it by adding FaceBook fan page and linking to twitter, and setup blog feed maybe on feedburner, etc.

UPDATE: I just found networkedBlogs application actually does not do the auto post for me. Here is an explanation.

We (networkedblogs) keep doing that 24 hours a day, every day, for every blog. As you can imagine, this process of constant checking puts a lot of load on our servers, so we can’t do it too often. So we came up with a fare system to pull blogs that has more followers more often as explained next.

So for a brand new blog and brand new fan page, the feed only will be pulled every 12 hours. Although I can manually pull the feed and manually publish it thru networkedblogs application, it’s not automatic at all. So the real solution will be to write an application by myself and run a cron job to pull the feed and post to Facebook or Twitter. I will write a tutorial on this when I get it done.  <— end of update–>

Today I want to show you how I did to connect my blog to Facebook and Twitter. The goal is when I write a new post, it can be automatically post to Facebook and Twitter.

  1. Create a Facebook account if you don’t have one. This is easy just need to go http://www.facebook.com, and open an account.
  2. Create a Facebook fan page. If you are new to Facebook, it may take some time to figure out how to create a Facebook page, for there is not a visible link to create a page. But you can just use this link, http://www.facebook.com/pages/create.php
  3. When you are creating a page, you have two options, create a official page or a community page. What I did is create a official page for my “brand” – caiapps.com :-)
  4. After the page is created, you may see some url, like, http://www.facebook.com/pages/Cai-Apps/136134553096471?created, anything before “?created” will be your Facebook page url. You can keep on updating your fan page information, but basically, you can start using it and your fan can write something on your wall already.
  5. There is no a visible link on your Facebook homepage to link to the page you created. In case you forget the url,  you can click Account (on the top right on your Facebook homepage), and then click Manage Pages, and then you will see your page(s) on the popup window. You may ask if there is a short link of your fan page. The answer is “yes”, but it is not available to your page until you have at least 25 fans. After some day your fan page hits 25 fans, what can do is using this link, http://www.facebook.com/username/, again this link is not visible on your login page. (Humm, Facebook is not user friendly, isn’t it?)  Please keep in mind, by default, this link is used to set up username for your Facebook homepage, not other pages (or fan page) your created. As long as the name is taken, you can neither edit it nor assign it to other pages. So make sure don’t set an username, which you want to use for your fan page, to your home page. Unfortunately, this was exactly a mistake I just made. I intented to use http://www.facebook.com/caiapps/ for my blog’s fan page, but now it is become my personal Facebook homepage. Anyway, the fan page is here. Hopefully, it can reach 25 fans soon, then I can set up a short url for it.
  6. Ok, now you have a Facebook fan page, but how to automatically post your blog to there. That needs a Facebook application, and you can create one by our own, but what I use is created by Networkblogs, you can start for there. It takes some steps, but should be easy to follow.  (I will not give you the details on the step. If you have any questions, feel free to leave comment, and I would try my best to answer your questions)
  7. Setting up twitter is mush simpler. Go to twitter.com, and create an account, and you will get a short and pretty url as long as it has not been taken. You can now follow my blog at http://twitter.com/caiapps.
  8. There are many plugins out there allowing you to feed your post to twitter. Because I setup the post to Facebook, I just simply add connection between Facebook and Twitter, so whatever updates on my Facebook would be updated on my Twitter. Facebook Twitter page is right here, http://www.facebook.com/twitter/

That’s it. Hope this helps!

Post to WordPress using Windows Live Writer

WordPress comes with a pretty functional post editor. Most of time you can use it with no problem. But personally, I like use desktop blogging tool. Windows Live Writer (WLW) is the best desktop blogging tool I have ever used.

First, there might be some advantages by using WLW,

  1. You don’t need to worry about losing your unsaved work, when your browser is frozen for some network issue.
  2. You get more room in WLW when editing your post (No left navi and you can also close right taskpane by ‘F9’), which is good for a small screen user.
  3. There are many plugins out there,  which you can download for free and make your posting much easier. For exmaple, you can use”Source Code Formatter” plugin to post syntax highlighted source code in your articles.
  4. You can control multiple blogs in one place, and if you save your password, then you don’t need to login to write a post.

To setup WLW to write a post is quite simple,

  1. Enable Remote Publishing in your WordPress Admin Panel
    1. Settings->Writing->Remote Publishing
    2. Check Atom Publishing Protocol and XML-PRC
  2. Download/Install Windows Live Writer
  3. Start WLW, and add blog account (on the top menu, Blogs->Add Blog Account, see below)
  4. Follow the instruction to add your blog account. Basically, what you need to provide is blog url, user name and password.

That’s it! If you are a Windows user, it should be very easy for you to get familiar with how to use it. Hope this helps for a beginner, and I will come back sometime with some WLW tips.

Hello world!

Welcome to WordPress. This is your first post. Edit or delete it, then start blogging.

Yes, this is my first post (?p=1). I have used WordPress on many sites, and used to delete this post come with WordPress installation, but this time, I would like to do something different.

I have planed to create this site including registering this domain name (caiapps.com) for a while. But I am quite busy those days, so it’s kept being postponed.

Today, GoDaddy is offering Domain Name Registration for $0.99 for 1 year with code SCHOOL99 (note: Expires 8/31 or 7500 redemptions), seems to me a good deal. GoDaddy offers this kind of deal every few months, I missed it last time on 07/20. Not matter what I should catch it this time. Finally, I registered caiapps, which stands for Cai Applications, and Cai is my last name, and I am an web developer and hopefully I can show you some of my works (applications) here.

Second thing I would like to share with you is about my new hosting. I got tired with IXWebhosting (sucks), I was looking around for an affordable and reliable hosting for a while. And I found http://www.hawkhost.com an month ago, seems to me a pretty good hosting. I really like the way they say in their host plans, that Disk Space(DS)/Bandwidth(BW) are limited.  In these days, you must see too many companies are promoting unlimited DS/BW. Do you believe it? I am not, in my opinion, for an shared hosting, you should not expect too much. When you just start your website, you don’t need unlimited DS/BW but stable and reliable hosting.  Another hosting I have been used is Inmotion, which is pretty good, but the price is a bit higher. Guess what? Hawk Host have a pretty good deal running now (50% off using the coupon august2010. Offer Valid | 11:57 am Aug 1 – 11:58 am Sep 1, 2010.) I only paid about $30 for an entire year for standard plan.

I just installed WordPress for this first post . More and more will be coming soon, stay tuned.