Web Development Sandpit

I moved this blog to http://www.okadadesign.no/blog/

2009-09-09T21:11:00.001+02:00

I have moved my blog to http://www.okadadesign.no/blog/

Speed up your JavaScript by Nicholas C. Zakas

2009-06-19T18:00:00.000+02:00

Bookmarklet: 960 Gridder

2009-05-06T20:56:00.002+02:00

960 Gridder is an excellent tool for any web developer/ designer that wants to easily align, match and/or lay out websites.

Cron job

2009-05-01T12:11:00.008+02:00

Recently I had to set up a cron job for Jomsocial. The site is for a school and I am working for this site on volunteer base. The site is built on Joomla, XAMPP and 2003 Windows server.

I tried a windows scheduled task but it does not work by some reasons. I tried Joomla extension jCron, but it does not work either in this situation. I downloaded a program called "Cron for windows". But it is not free.

I set up the scheduled task on my laptop and it works, but it must work 24 hrs everyday. So I abandoned this idea.

Then I thought it can be done online. I found two free online services and I am using http://www.setcronjob.com/ . This works great and easy to set up. It works for every 5 minutes to any schedule.
The other one is http://www.onlinecronjobs.com/, but this allows only once a day and up to 5 cronjobs.

For my particular case, I just need to paste the Jomsocial cron job URL to "URL to call" in www.setcronjob.com
e.g. http://www.mywebsite/index.php?option=com_community&task=cron

You need to replace www.mywebsite to yours.

The following links are my other collections during this research.

Cron for windows
Configuring cron jobs on Windows from Drupal, using Firefox.
Joomla plugin Jcron.

Talk by Nate Koechley: "Professional Frontend Engineering"

2009-04-23T19:07:00.002+02:00

Nate Koechley: "Professional Frontend Engineering" @ Yahoo! Video

Setting up Cronjob for Jomsocial with Jcron in XAMPP

2009-04-23T07:01:00.011+02:00

I was working on my Jomsocial and it needs a cronjob.
Unless you set up a cronjob it does not send any email notices in Jomsocial. For example notice for Friend request, Group bulletins, private messages.
My set up is Joomla on XAMPP. If you are using the same, this article may help.

First you need to open C:\xampp\htdocs\JOOMLA\components\com_community\cronjob.php and change the hosting and subfolder.

Install Jcron.
I found this forum and this screen shot which explains the set up for Jcron.
The screenshot will tell you how to set up a cronjob in Jcron.

My template needed a writable permission and the site was running on XAMPP.
Windows does not have chmod, so I right click the file "mytemplate.php" in explorer in the server and removed the "read only" attribute.

Then going back to Joomla back end > component > JCron > Configuration to run "Enable CRON RUN".

Jcron does the job when someone visit your website or click a menu.
However I thought I need to set up a server side cron job as well.

Going back to Windows server to set up a scheduled task. All programs > Accessories > System tools > scheduled tasks.
I set up every 30min from 7AM for 12 hours everyday.

Adding a Flickr Slideshow

2009-04-13T15:22:00.005+02:00

Created with flickr slideshow.

I added a Flickr slideshow to my blog today.
This is how I did it.

1. Create your Flickr account and upload your photos.
2. Add your tags. This tag will be used in a slideshow.
3. Go to Flickrslideshow.com and fill up the details and create your code.
4. Embed the code to your website.

Adding Picasa Slideshow to your Blogger or webiste

2009-04-13T12:12:00.005+02:00

You can embed a Flash slideshow of any web album. It'll be automatically updated when you make changes to your album. Follow these steps to embed a slideshow:

1. On the My Photos page, click your album.
2. Click Link to this album on the right-hand side.
3. Click Embed Slideshow.
4. Choose your slideshow settings, such as image size, captions, and autoplay.
5. Once you've chosen your settings, copy the resulting HTML code (Ctrl-C).
6. Paste the HTML in the source code for your site (Ctrl-V).

Google Help

Adding Picasa photos to Blogger and website

2009-04-13T11:36:00.004+02:00

Spring has come to Norway!
This photo is added through Picasa 3.

Spring in Norway

When you embed an album in your site, the album cover will display. Viewers who click the cover image will then be taken to view the album in Picasa Web Albums. Follow these steps to embed an album:

1. On the My Photos page, click your album.
2. Click Link to this album on the right-hand side.
3. Copy the HTML (Ctrl-C) in the 'Paste HTML to embed in website' field.
4. Paste the HTML (Ctrl-V) in the source code for your site.

Google Help

Using ScribeFire Blog Editor

2009-04-05T19:36:00.003+02:00

I am posting this article by using ScribeFire Blog Editor
This Firefox addon let you post from your browser.
I added the above image by using image insert feature in this addon.
You can preview your article in this addon preview without changing the actual blog.

You can add labels and save it as a draft to your blogging platform.
ScribeFire is a full-featured blog editor that integrates with your browser and lets you easily post to your blog. You can drag and drop formatted text from pages you are browsing, take notes, upload images, and post to multiple blogs.

BBC Radio 1 Zoom Tabs from jQuery for Designers

2009-04-04T12:44:00.002+02:00

BBC Radio 1 Zoom Tabs

Event Driven Programming with jQuery Tutorial

2009-04-04T12:35:00.003+02:00

Event Driven Programming with jQuery Tutorial. Written by Benson Wong

My Must Have Firefox 3 Plugins for Web Development

2009-03-31T14:58:00.008+02:00

My Vista crushed this morning. Data is safe but all the set up files are gone.
So I lost all my Firefox plugins as well.
I decided to write down my list of plugins which I must have.

1. Web Developer
2. Firebug
3. Colorzilla
4. Font Finder
5. Screengrab
6. Delicious bookmarks
7. Measureit
8. Wappalyzer

If you want more, you can find a nice list at Designreviver.com
22 Firefox 3 Plugins Web Designers Can’t Live Without

How to Add flash Animated label cloud Blogumus for Blogger

2009-03-31T14:09:00.008+02:00

I just got a RSS article called "Tag Clouds - Styling and Adding Sort Options an article" from CSS globe.

But I wanted to add a flash Blogumus tag cloud to my Blogger. Then I found this article "How to Add flash Animated label cloud Blogumus for Blogger"

I just adjusted color, width and height.

Adding a drop cap to Blogger

2009-03-30T17:51:00.020+02:00

Neal Grosskopf wrote an article CSS Drop Caps Without Unnecessary HTML Elements or Classes.

I tried it with my Blogger here and I found a small adjustment to work in Blogger.
What you have to do is create class dropcap and add CSS.

You can see a big N at the beginning of this paragraph.


 .dropcap
 {
 background: #990000;
 border: 4px double #ffcc00;
 color: #ffffff;
 float: left;
 font-family: "Times New Roman", Times, serif;
 font-size: 3em;
 font-weight: bold;
 margin: 0 10px 0 0;
 padding: 10px;
 text-transform: uppercase;
 }

And you need to add span with class="dropcap" to the first letter of your paragraph like this.


<span class="dropcap">B</span>BC News.

It becomes like this.
BBC News.

You can add more class like .blue after .dropcap


.blue 
{
 background: #3B7CEF;
}

And add this class to a span tag.


<span class="dropcap blue">C</span>NN News.

CNN News.

How to add Read More to your Blogger

2009-03-30T12:39:00.013+02:00

This is an official article from Blogger.
And I'd like to show how I implemented to this blog.

1. Save a backup copy of your template before you start. Just copy and paste all your code to a text file on your hard drive, so you can replace it in case anything goes wrong.

2. Paste the following code in your header. I add it just before </head> tag.


<style>
<b:if cond='data:blog.pageType == "item"'> 
   span.fullpost {display:inline;}
<b:else/>
   span.fullpost {display:none;} 
</b:if>
</style>

3. Adding "Read More" Links

Go to Layout and click EditHTML. Add a tick to Expand Widget Templates. Then add the following code to your template, after the <data:post.body/> tag:


<b:if cond='data:blog.pageType != "item"'><br />
   <a expr:href='data:post.url'>Read more!</a>
</b:if>

You can replace the "Read more!" text with Continue Reading or Read the rest of this entry », etc.

4. Post Modifications

Go to Posting and create a new article. And wrap your article which you want to hide with the following code.


<span class="fullpost">

Your main article here

</span>

That's it folks. Thank you for reading.

Add your Twitter updates to your Blogger

2009-03-29T16:01:00.011+02:00

On the right side, you can see my Twitter updates.
Here is how you can add your Twitter to your Blogger.

1. Login to your Blogger and go to Layout.
2. Click "Add a Gadget" and select HTML/JavaScript. Add the following code.


<div id="twitter_div">
<h2 style="display:none;" class="sidebar-title">Twitter Updates</h2>
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;" href="http://twitter.com/YOUR-Twitter-NAME">follow me on Twitter</a>
</div>

<script src="http://twitter.com/javascripts/blogger.js" type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline/YOUR-Twitter-NAME.json?callback=twitterCallback2&count=10" type="text/javascript"></script>

3. In the above code, change YOUR-Twitter-NAME to your twitter name. If you want to change the number of updates, change count=10 to any number you wish.

4. Add the following CSS to your Blogger CSS and tweak it according to your taste.


/* Twitter */
#twitter_update_list li {
background-color: #EFF4FF;
text-indent: 0;
margin-bottom: 5px;
border: 1px solid #B5BDCF;
}
#twitter_update_list li span{
}

How to add jQuery Plugin: Scroll to Top to Blogger

2009-03-29T15:40:00.008+02:00

After reading an article "jQuery Plugin: Scroll to Top" by Craig Wilson a couple of weeks ago, here is how to add it to your Blogger.

There is a similar code by David Walsh here. But I am using a code by Craig.

You can see the action in this page. You just need to scroll down a bit and you will see a ^Scrol to Top box on the right bottom. By clicking it you go to the top of the page.

1. Add the following HTML before your </body> tag.


<a href="#" id="toTop">^ Scroll to Top</a>

2. Add the following CSS code in your Blogger CSS code.


/* to top */
#toTop { width:100px;background:#F4FFBF;border:1px solid #ccc;text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#666;text-decoration:none; }

3. Add the following jQuery codes just before </body> tag.


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type='text/javascript'>
/*-----------------------
* jQuery Plugin: Scroll to Top
* by Craig Wilson, Ph.Creative (http://www.ph-creative.com)
* 
* Copyright (c) 2009 Ph.Creative Ltd.
* Description: Adds an unobtrusive "Scroll to Top" link to your page with smooth scrolling.
* For usage instructions and version updates to go http://blog.ph-creative.com/post/jquery-plugin-scroll-to-top.aspx
* 
* Version: 1.0, 12/03/2009
-----------------------*/

$(function(){$.fn.scrollToTop=function(){$(this).hide().removeAttr("href");if($(window).scrollTop()!="0"){$(this).fadeIn("slow")}var scrollDiv=$(this);$(window).scroll(function(){if($(window).scrollTop()=="0"){$(scrollDiv).fadeOut("slow")}else{$(scrollDiv).fadeIn("slow")}});$(this).click(function(){$("html, body").animate({scrollTop:0},"slow")})}});

  $(function() {
                $("#toTop").scrollToTop();
            });
        </script>

Blogger tips

2009-03-22T12:35:00.004+01:00

You can find many great tips for Blogger users in blogspottutorial.com
On the right column there is Blogging tutorial For Beginner.

I used the following tips for this blog.
How to add related post widget
Add search engine to your blog

Another helpful tips for Blogger users is Amanda Fazani's website Bloggerbuster.
You can download a free PDF book to improve your Blogger design.

Social Bookmarking Button "AddThis"

2009-03-22T09:14:00.007+01:00

In my last post "Add sharethis widget to your Blogger, WP or website", I wrote how to add ShareThis button to your website or Blooger.
Then I found another social bookmarking button called "AddThis" . This site also offers copy and paste code for your website.

You can read an article from Packt Publishing about AddThis.
Another article from Packt.

Adding Tweet Button to your Blogger and Website

2009-03-21T18:06:00.029+01:00

After reading an article by Woork, I added Tweet this to my bloggers. The article was simple but I thought I could add a little bit more details here.

Open your blogger and go to Layout.
Click Edit HTML then tick a box next to Expand Widget Templates.
Then find a line


<div class="post-footer-line post-footer-line-1">

Then after this line add the following line.


<div class="tweetmeme">
<script type="text/javascript">
tweetmeme_url = '<data:post.url/>';
</script>
<script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript"> </script>
</div>

Then add CSS just before the line.


]]></b:skin>

I add the following css to mine.


tweetmeme {
    width: 70px;
    height: 75px;
    float: left;
}

For your normal website, you can use the following code where you want to add Tweetmeme.


<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

You can find an Official documentation.

Add sharethis widget to your Blogger, WP or website

2009-03-21T13:52:00.016+01:00

I just added sharethis to this blog and other my websites.
You go to sharethis.com and create your account by clicking For Publishers.
After logged in, go to Get the Button to create a new button. You can choose your platform and modify the button appearance. You can create codes by selecting 'Share This Button for other websites' under 'Pick your platform drop-down'.

The undocumented life of jQuery .append()

2009-03-21T09:49:00.007+01:00

The undocumented life of jQuery's .append()

Posted using ShareThis

IE 6 hacks, tips and blocker tutorials

2009-03-18T08:41:00.012+01:00

I collected a number of IE hacks tutorials over the years. Here is the list which you can find great tips for your websites.

IE6 hacks and tips
1. 10 Fixes That Solve IE6 Problems
2. Obituary For IE6
3. Feed IE 6 with a basic stylesheet
4. IE CSS Bugs That’ll Get You Every Time
5. Defensive coding and CSS: Preventing the most common bugs
6. Closing the gap between list items in IE
7. 5 Easy Ways to Tackle IE6’s Transparency Issues
8. Don't kick your visitors's IE 6 and below out of your css layout
9. Let Internet Explorer 6 Behave Like Internet Explorer 7

IE6 Blocker scripts.
One way is to educate your audience by suggesting to a better browsers.

1. IE 6 Blocker Script
2. A simple IE6 upgrade script

Demo for above script are here. You have to use IE6 to see the effects though.
IE 6 Blocker Script Demo
A simple IE6 upgrade script Demo

Tools
1. Internet Explorer Application Compatibility VPC Image
2. IE6 standalone
3. IE tester
4. netrenderer

If you know more, please add them to the comment.

Officezilla: Projectmanagement and client management

2009-03-17T11:48:00.005+01:00

I just played around with Officezilla and found it very useful.

I found some great things with this online app.

It's free and no limit on the number of users you can add.
You can create groups, users and projects. Then you assign users for certain projects. This means you can show a project or your work progress to your selected audience. Informing them about hours spent and other information.

Only this function is good enough for me to use. But there are plenty other functions you can use in this app.

Other functions are :
Every user has access to post and retrieve information.
Control access to all data through user levels.
Easy self-administration with help on every feature.
Reduce mailing costs by distributing documents and other information online.
Access important information from anywhere in the world with an Internet connection.
We use our own securely hosted equipment with more then 99% uptime reliability.
Any user can upload information and specify it as personal, without having to share the information.
Import and export information from Act, Outlook, or any other program that can generate or accept comma-delimited .CSV database files.

Try it out.